1. Клон Notion
Приложение Notion полюбилось многим, оно позволяет оптимизировать рабочий процесс, работать с документами, планировать задачи, синхронизировать данные между устройствами.
Чему вы научитесь, создавая клон Notion:
- . Пользователь может «схватить мышкой» déplaçable элемент и поместить его в droppable zone.
- Как синхронизировать в режиме реального времени данные между компьютером и смартфоном.
- Мы позволяем пользователям создавать, читать, обновлять и удалять записи, тем самым мы тренируем CRUD-навыки.
L'article a été traduit avec le soutien d'EDISON Software, qui et .
2. Клон Repl.it
Repl.it -это инструмент для совместного редактирования кода в реальном времени. Можно выбрать несколько языков: JavaScript, Python, Go и выполнять код прямо в браузере. Очень полезно для быстрых демонстраций и код-интервью.
Чему вы научитесь, создавая клон Repl.it:
- Как запускать и выполнять код (server-side) в браузере (client-side).
- Считывать входные данные (исходный код) и выводить на экран результат выполнения.
- Как создавать файлы и папки в вебе и сохранять результаты.
- Как подсвечивать синтаксис кода.
3. Клон Google Photos
Google Photos это сервис для хранения и обмена фоток.
Любое современное приложение по работе с фотографиями умеет выполнять базовые функции: загружать, обрезать и пр. Люди хотят создавать свои аватарки и делиться фотками котиков, поэтому надо уметь работать с изображениями.
Чему вы научитесь, создавая клон Google Photos:
- Как создавать адаптивные изображения на телефонах, планшетах, ноутбуках и даже на гигантских экранах телевизоров.
- Как обрабатывать загрузку изображений, особенно больших изображений (>1МБ) и массовых загрузок.
- Обработка файлов изображений, обрезка и изменение размера фотографий для миниатюр или при открытии галереи.
- Bonus: как хранить изображения в облаке или локальной базе данных.
4. Клон Gifsky
конвертирует видео в GIF используя функции для эффективных палитр кросс-кадров и временного сглаживания. В результате получается гифка с тысячами цветов на кадр.
Чему вы научитесь, создавая клон Gifski:
- Как конвертировать видео файлы (.mp4 в .gif).
- Как использовать API Drag and Drop HTML.
- Как работают оптимизация и обработка изображений.
Note: и есть на GitHub!
5. Мониторинг курсов криптовалют
React Native cryptocurrency tracker
Чему вы научитесь, создавая трекер курса валют:
- Как работать с API и получать данные удаленно из API.
- Как отобразить данные в виде списка.
- Bonus: Если вам интересно, я недавно написал на криптовалюту с React Native.
Note: Ici .
Подборка проектов из предыдущих публикаций.
Couche
Layer est une communauté où chacun peut dessiner un pixel sur un « tableau » partagé. L'idée originale est née sur Reddit. La communauté r/Layer est une métaphore de la créativité partagée, où chacun peut être créateur et contribuer à une cause commune.
Ce que vous apprendrez en créant votre propre projet Layer :
- Fonctionnement du canevas JavaScript Savoir comment utiliser un canevas est une compétence essentielle dans de nombreuses applications.
- Comment coordonner les autorisations des utilisateurs. Chaque utilisateur peut dessiner un pixel toutes les 15 minutes sans avoir à se connecter.
- Créez des sessions de cookies.
Squoosh
Squoosh est une application de compression d'images dotée de nombreuses options avancées.
GIF 20 Mo
En créant votre propre version de Squoosh, vous apprendrez :
- Comment travailler avec les tailles d'image
- Apprenez les bases de l'API Drag'n'Drop
- Comprendre le fonctionnement de l'API et des écouteurs d'événements
- Comment télécharger et exporter des fichiers
Note: Le compresseur d'image est local. Il n'est pas nécessaire d'envoyer des données supplémentaires au serveur. Vous pouvez avoir le compresseur chez vous ou l'utiliser sur un serveur, à votre choix.
Calculatrice
Allez? Sérieusement? Calculatrice? Oui, exactement, une calculatrice. Comprendre les bases des opérations mathématiques et la façon dont elles fonctionnent ensemble est une compétence essentielle pour simplifier vos applications. Tôt ou tard, vous devrez composer avec des chiffres et le plus tôt sera le mieux.
En créant votre propre calculatrice, vous apprendrez :
- Travailler avec des nombres et des opérations mathématiques
- Entraînez-vous avec l'API des écouteurs d'événements
- Comment organiser les éléments, comprendre les styles
Robot d'exploration (moteur de recherche)
Tout le monde a utilisé un moteur de recherche, alors pourquoi ne pas créer le vôtre ? Les robots d'exploration sont nécessaires pour rechercher des informations. Tout le monde les utilise quotidiennement et la demande pour cette technologie et ces spécialistes ne fera qu'augmenter avec le temps.
Moteur de recherche Google
Ce que vous apprendrez en créant votre propre moteur de recherche :
- Comment fonctionnent les robots d'exploration
- Comment indexer les sites et comment les classer par note et réputation
- Comment stocker des sites indexés dans une base de données et comment travailler avec la base de données
Lecteur de musique (Spotify, Apple Music)
Tout le monde écoute de la musique – elle fait simplement partie intégrante de nos vies. Créons un lecteur de musique pour mieux comprendre comment fonctionnent les mécanismes de base d'une plateforme de streaming musical moderne.
Spotify
Ce que vous apprendrez en créant votre propre plateforme de streaming musical :
- Comment travailler avec l'API. utiliser l'API de Spotify ou Apple Music
- Comment lire, mettre en pause ou revenir à la piste suivante/précédente
- Comment changer le volume
- Comment gérer le routage des utilisateurs et l'historique du navigateur
Application de recherche de films utilisant React (avec hooks)
La première chose par laquelle vous pouvez commencer est de créer une application de recherche de films à l’aide de React. Vous trouverez ci-dessous une image de ce à quoi ressemblera la candidature finale :
Qu'allez-vous apprendre
En créant cette application, vous améliorerez vos compétences React en utilisant l'API Hooks relativement nouvelle. L'exemple de projet utilise des composants React, de nombreux hooks, une API externe et bien sûr du style CSS.
Pile technologique et fonctionnalités
- Réagissez avec des crochets
- créer-réagir-app
- Jsx
- CSS
Sans utiliser de classes, ces projets vous offrent le point d'entrée idéal dans React fonctionnel et vous aideront certainement en 2020. tu peux trouver . Suivez les instructions ou personnalisez-le.
Application de chat avec Vue
Un autre projet intéressant à réaliser est de créer une application de chat en utilisant ma bibliothèque JavaScript préférée : VueJS. L'application ressemblera à ceci :
Qu'allez-vous apprendre
Dans ce didacticiel, vous apprendrez à créer une application Vue à partir de zéro : création de composants, gestion de l'état, création de routes, connexion à des services tiers et même gestion de l'authentification.
Pile technologique et fonctionnalités
- Vue
- vuex
- Routeur Vue
- Vue CLI
- Pusher
- CSS
C'est un très bon projet pour démarrer avec Vue ou améliorer vos compétences existantes pour vous lancer dans le développement en 2020. tu peux trouver .
Belle application météo avec Angular 8
Cet exemple vous aidera à créer une belle application météo en utilisant Angular 8 :
Qu'allez-vous apprendre
Ce projet vous apprendra des compétences précieuses dans la création d'applications à partir de zéro, de la conception au développement, jusqu'à une application prête à être déployée.
Pile technologique et fonctionnalités
- 8 angulaire
- Firebase
- Rendu côté serveur
- CSS avec grille et Flexbox
- Adaptabilité mobile et adaptabilité
- Mode sombre
- Belle interface
Ce que j’aime vraiment dans ce projet global, c’est qu’on n’étudie pas les choses de manière isolée. Au lieu de cela, vous apprenez l’intégralité du processus de développement, de la conception au déploiement final.
Application To-Do utilisant Svelte
Svelte est comme le petit nouveau de l'approche basée sur les composants - au moins similaire à React, Vue et Angular. Et c’est l’une des nouveautés les plus en vogue pour 2020.
Les applications To-Do ne sont pas nécessairement le sujet le plus brûlant, mais elles vous aideront vraiment à perfectionner vos compétences Svelte. Il ressemblera à ceci:
Qu'allez-vous apprendre
Ce tutoriel vous montrera comment créer une application à l'aide de Svelte 3, du début à la fin. Vous utiliserez des composants, des styles et des gestionnaires d'événements
Pile technologique et fonctionnalités
- Svelte 3
- Composants
- Styliser avec CSS
- Syntaxe ES 6
Il n'y a pas beaucoup de bons projets de démarrage Svelte, alors j'ai trouvé .
Application de commerce électronique utilisant Next.js
Next.js est le framework le plus populaire pour créer des applications React prenant en charge le rendu côté serveur prêt à l'emploi.
Ce projet va vous montrer comment créer une application e-commerce qui ressemble à ceci :
Qu'allez-vous apprendre
Dans ce projet, vous apprendrez à développer avec Next.js : créer de nouvelles pages et composants, extraire des données, styliser et déployer une application Next.
Pile technologique et fonctionnalités
- Next.js
- Composants et pages
- Échantillonnage des données
- Style
- Déploiement du projet
- RSS et SPA
C'est toujours formidable d'avoir un exemple concret, comme une application de commerce électronique, pour apprendre quelque chose de nouveau. Tu peux .
Blog multilingue à part entière avec Nuxt.js
Nuxt.js est pour Vue, ce que Next.js est pour React : un excellent framework pour combiner la puissance du rendu côté serveur et des applications monopage
L'application finale que vous pourrez créer ressemblera à ceci :
Qu'allez-vous apprendre
Dans cet exemple de projet, vous apprendrez à créer un site Web complet à l'aide de Nuxt.js, de la configuration initiale au déploiement final.
Il profite de nombreuses fonctionnalités intéressantes que Nuxt a à offrir, telles que les pages et les composants, ainsi que le style avec SCSS.
Pile technologique et fonctionnalités
- Nuxt.js
- Composants et pages
- Module Storyblock
- Myxine
- Vuex pour la gestion de l'état
- SCSS pour le style
- Intergiciels Nuxt
, qui inclut de nombreuses fonctionnalités intéressantes de Nuxt.js. Personnellement, j'aime travailler avec Nuxt, vous devriez donc l'essayer car cela fera également de vous un excellent développeur Vue.
Bloguer avec Gatsby
Gatsby est un excellent générateur de sites statiques utilisant React et GraphQL. Voici le résultat du projet :
Qu'allez-vous apprendre
Dans ce didacticiel, vous apprendrez à utiliser Gatsby pour créer un blog que vous utiliserez pour rédiger vos propres articles à l'aide de React et GraphQL.
Pile technologique et fonctionnalités
- Gatsby
- Réagir
- GraphQL
- Plugins et thèmes
- MDX/Marquage
- CSS d'amorçage
- Modèles
Si vous avez toujours voulu créer un blog, sur la façon de le réaliser en utilisant React et GraphQL.
Je ne dis pas que WordPress est un mauvais choix, mais avec Gatsby, vous pouvez créer des sites Web performants en utilisant React, ce qui est une combinaison étonnante.
Bloguer avec Gridsome
Gridsome pour Vue... D'accord, nous avions déjà ça avec Next/Nuxt.
Mais il en va de même pour Gridsome et Gatsby. Les deux utilisent GraphQL comme couche de données, mais Gridsome utilise VueJS. Il s'agit également d'un incroyable générateur de sites statiques qui vous aidera à créer de superbes blogs :
Qu'allez-vous apprendre
Ce projet vous apprendra à créer un blog simple pour démarrer avec Gridsome, GraphQL et Markdown. Il explique également comment déployer une application via Netlify.
Pile technologique et fonctionnalités
- grinçant
- Vue
- GraphQL
- Markdown
- Netlify
Ce n'est certainement pas le tutoriel le plus complet, mais il couvre les concepts de base de Gridsome et .
Lecteur audio de type SoundCloud utilisant Quasar
Quasar est un autre framework Vue qui peut être utilisé pour créer des applications mobiles. Dans ce projet, vous allez créer une application de lecture audio, par exemple :
Qu'allez-vous apprendre
Alors que d'autres projets se concentrent principalement sur les applications Web, celui-ci vous montrera comment créer une application mobile à l'aide de Vue et du framework Quasar.
Cordova devrait déjà fonctionner avec Android Studio/Xcode configuré. Sinon, le manuel contient un lien vers le site Web de Quasar où ils vous montrent comment tout configurer.
Pile technologique et fonctionnalités
- Quasar
- Vue
- Cordova
- Surfeur de vague
- Composants de l'interface utilisateur
, démontrant les capacités de Quasar pour créer des applications mobiles.
Форма кредитной карты
Une forme de carte de crédit sympa avec des micro-interactions fluides et agréables. Comprend le formatage des numéros, la vérification et la détection automatique du type de carte. Il est construit sur Vue.js et est également entièrement réactif. (Tu peux voir .)
Ce que vous apprendrez :
- Traiter et valider les formulaires
- Gérer les événements (par exemple, lorsque les champs changent)
- Comprendre comment afficher et placer des éléments sur la page, notamment les informations de carte bancaire qui apparaissent en haut du formulaire
Graphique à barres
Un histogramme est un tableau ou un graphique qui représente des données catégorielles avec des barres rectangulaires dont les hauteurs ou les longueurs sont proportionnelles aux valeurs qu'elles représentent.
Ils peuvent être appliqués verticalement ou horizontalement. Un graphique à barres verticales est parfois appelé graphique linéaire.
Ce que vous apprendrez :
- Afficher les données de manière structurée et compréhensible
- De plus : découvrez comment utiliser l'élément
canvaset comment dessiner des éléments avec
vous pouvez trouver des données sur la population mondiale. Ils sont triés par année.
Анимация сердечка Twitter
En 2016, Twitter a introduit cette étonnante animation pour ses tweets. Depuis 2019, il a toujours l'air d'être à la hauteur, alors pourquoi ne pas en créer un vous-même ?
Ce que vous apprendrez :
- Travailler avec l'attribut CSS
keyframes - Manipuler et animer des éléments HTML
- Combinez JavaScript, HTML et CSS
Репозитории GitHub с функцией поиска
Il n'y a rien d'extraordinaire ici : les référentiels GitHub ne sont qu'une liste glorifiée.
Le but est d'afficher les référentiels et de permettre à l'utilisateur de les filtrer. Utiliser pour obtenir des référentiels pour chaque utilisateur.
Page de profil GitHub -
Ce que vous apprendrez :
- Recevoir des données de l'API
- Afficher les données de l'API
- Filtrer et afficher les données pertinentes pour chaque recherche
- Facultatif : Si vous êtes prêt à relever un défi, utilisez , construit à l'aide de GraphQL. .
Чаты в стиле Reddit
Les chats sont un moyen de communication populaire en raison de leur simplicité et de leur facilité d’utilisation. Mais qu’est-ce qui alimente réellement les forums de discussion modernes ? WebSockets !
Ce que vous apprendrez :
- Utilisez les WebSockets, la communication en temps réel et les mises à jour des données
- Travailler avec les niveaux d'accès des utilisateurs (par exemple, le propriétaire d'un canal de discussion a le rôle
admin, et d'autres dans la pièce -user) - Traitez et validez les formulaires - n'oubliez pas que la fenêtre de discussion pour envoyer un message est
input - Créez et rejoignez différentes discussions
- Travaillez avec des messages personnels. Les utilisateurs peuvent discuter avec d'autres utilisateurs en privé. Essentiellement, vous établirez une connexion WebSocket entre deux utilisateurs.
Навигация в стиле Stripe
Ce qui rend cette navigation unique, c'est que le conteneur popover se transforme pour s'adapter au contenu. Il y a une élégance dans cette transition par rapport au comportement traditionnel d'ouverture et de fermeture d'un nouveau popover.
Ce que vous apprendrez :
- Combinez des animations CSS avec des transitions
- Atténuer le contenu et appliquer la classe active à l'élément flottant
Pacman
Créez votre propre version de Pacman. C’est un excellent moyen de se faire une idée sur la manière dont les jeux sont développés et d’en comprendre les bases. Utilisez un framework JavaScript, React ou Vue.
Tu vas apprendre:
- Comment les éléments bougent
- Comment déterminer sur quelles touches appuyer
- Comment déterminer le moment de la collision
- Vous pouvez aller plus loin et ajouter un contrôle des mouvements fantômes
Vous trouverez un exemple de ce projet GitHub
gestion des utilisateurs
Projet GitHub
Créer une application de type CRUD pour l'administration des utilisateurs vous apprendra les bases du développement. Ceci est particulièrement utile pour les nouveaux développeurs.
Tu vas apprendre:
- Qu'est-ce que le routage
- Comment gérer les formulaires de saisie de données et vérifier ce que l'utilisateur a saisi
- Comment travailler avec la base de données - créer, lire, mettre à jour et supprimer des actions
Проверка погоды в вашем местоположении
Projet GitHub
Si vous souhaitez créer des applications, commencez par une application météo. Ce projet peut être réalisé en utilisant Swift.
En plus d'acquérir de l'expérience dans la création d'une application, vous apprendrez :
- Comment travailler avec l'API
- Comment utiliser la géolocalisation
- Rendez votre application plus dynamique en ajoutant la saisie de texte. Dans celui-ci, les utilisateurs pourront saisir leur emplacement pour vérifier la météo dans un endroit spécifique.
Vous aurez besoin d'une API. Pour obtenir des données météorologiques, utilisez l'API OpenWeather. Plus d'informations sur l'API OpenWeather.
Окно чата
Ma fenêtre de discussion en action, ouverte dans deux onglets de navigateur
Créer une fenêtre de discussion est le moyen idéal pour démarrer avec les sockets. Le choix de la pile technologique est énorme. Node.js, par exemple, est parfait.
Vous apprendrez comment fonctionnent les sockets et comment les implémenter. C'est le principal avantage de ce projet.
Si vous êtes un développeur Laravel et souhaitez travailler avec des sockets, lisez mon
CI GitLab
Si vous débutez dans l'intégration continue (CI), jouez avec GitLab CI. Configurez quelques environnements et essayez d’exécuter quelques tests. Ce n'est pas un projet très difficile, mais je suis sûr que vous en apprendrez beaucoup. De nombreuses équipes de développement utilisent désormais CI. Savoir s'en servir est utile.
Tu vas apprendre:
- Qu'est-ce que GitLab CI
- Comment configurer
.gitlab-ci.ymlqui indique à l'utilisateur GitLab quoi faire - Comment déployer sur d'autres environnements
Анализатор сайтов
Créez un scraper qui analyse la sémantique des sites Web et crée leur note. Par exemple, vous pouvez vérifier les balises alt manquantes dans les images. Ou vérifiez si la page contient des balises méta SEO. Un scraper peut être créé sans interface utilisateur.
Tu vas apprendre:
- Comment fonctionne le grattoir ?
- Comment créer des sélecteurs DOM
- Comment écrire un algorithme
- Si vous ne voulez pas vous arrêter là, créez une interface utilisateur. Vous pouvez également créer un rapport sur chaque site Web que vous consultez.
Определение настроений в социальных сетях
La détection des sentiments sur les réseaux sociaux est un excellent moyen de s'initier au machine learning.
Vous pouvez commencer par analyser un seul réseau social. Tout le monde commence généralement par Twitter.
Si vous avez déjà de l'expérience en apprentissage automatique, essayez de collecter des données provenant de différents réseaux sociaux et de les combiner.
Tu vas apprendre:
- Qu'est-ce que l'apprentissage automatique
Клон Trello
Ce que vous apprendrez :
- Organisation des parcours de traitement des demandes (Routing).
- Glisser déposer.
- Comment créer de nouveaux objets (tableaux, listes, cartes).
- Traitement et vérification des données d'entrée.
- Du côté client : comment utiliser le stockage local, comment enregistrer les données sur le stockage local, comment lire les données du stockage local.
- Du côté serveur : comment utiliser les bases de données, comment enregistrer les données dans la base de données, comment lire les données de la base de données.
, réalisé en React+Redux.
Панель админа
Une application CRUD simple, idéale pour apprendre les bases. Apprenons:
- Créez des utilisateurs, gérez les utilisateurs.
- Interagissez avec la base de données - créez, lisez, modifiez, supprimez des utilisateurs.
- Valider la saisie et travailler avec des formulaires.
Трекер криптовалют (нативное мобильное приложение)
N'importe quoi : Swift, Objective-C, React Native, Java, Kotlin.
Étudions:
- Comment fonctionnent les applications natives.
- Comment récupérer les données de l'API.
- Comment fonctionnent les mises en page natives.
- Comment travailler avec des simulateurs mobiles.
. Si vous trouvez quelque chose de mieux, écrivez dans les commentaires.
Si vous êtes intéressé, le voici .
Настроить собственный конфиг webpack с нуля
Techniquement, ce n'est pas une application, mais c'est une tâche très utile pour comprendre comment fonctionne le webpack de l'intérieur. Désormais, ce ne sera plus une « boîte noire », mais un outil compréhensible.
Exigences:
- Compilez es7 vers es5 (bases).
- Compilez jsx en js - ou - .vue en .js (vous devrez apprendre les chargeurs)
- Configurez le serveur de développement Webpack et le rechargement à chaud du module. (vue-cli et create-react-app utilisent les deux)
- Utilisez Heroku, now.sh ou Github, découvrez comment déployer des projets Webpack.
- Configurez votre préprocesseur préféré pour compiler CSS - scss, less, stylet.
- Apprenez à utiliser des images et des fichiers SVG avec Webpack.
Клон Hackernews
Chaque Jedi doit créer son propre Hackernews.
Ce que vous apprendrez en cours de route :
- Comment interagir avec l'API hackernews.
- Comment créer une application d'une seule page.
- Comment mettre en œuvre des fonctionnalités telles que l'affichage des commentaires, des commentaires individuels, des profils.
- Organisation des parcours de traitement des demandes (Routing).
Тудушечка
Sérieusement? Tudouchka ? Il y en a des milliers. Mais croyez-moi, il y a une raison à cette popularité.
L'application Tudu est un excellent moyen de vous assurer que vous comprenez les bases. Essayez d'écrire une application en Javascript Vanilla et une dans votre framework préféré.
Apprendre:
- Créez de nouvelles tâches.
- Vérifiez que les champs sont remplis.
- Filtrer les tâches (terminées, actives, toutes). Utiliser
filterиreduce. - Comprendre les bases de Javascript.
Сортируемый drag and drop список
Très utile pour comprendre .
Apprenons:
- API glisser-déposer
- Créez des interfaces utilisateur riches
Клон мессенджера (нативное приложение)
Vous comprendrez le fonctionnement des applications web et des applications natives, ce qui vous distinguera de la masse grise.
Ce que nous étudierons :
- Sockets Web (messages instantanés)
- Comment fonctionnent les applications natives.
- Comment fonctionnent les modèles dans les applications natives.
- Organisation des itinéraires de traitement des requêtes dans les applications natives.
Éditeur de texte
Le but d'un éditeur de texte est de réduire les efforts des utilisateurs essayant de convertir leur mise en forme en balisage HTML valide. Un bon éditeur de texte permet aux utilisateurs de formater le texte de différentes manières.
À un moment donné, tout le monde a utilisé un éditeur de texte. Alors pourquoi pas ?
Клон Reddit
est un site d'agrégation d'actualités sociales, d'évaluation de contenu Web et de discussion.
Reddit prend la plupart de mon temps, mais je continue d'y passer du temps. Créer un clone Reddit est un moyen efficace d'apprendre la programmation (tout en parcourant Reddit en même temps).
Reddit vous offre un contenu très riche. N'omettez aucune fonctionnalité et ne faites les choses au hasard. Dans le monde réel avec les clients, vous ne pouvez pas travailler au hasard, sinon vous perdrez rapidement votre emploi.
Les clients intelligents se rendront immédiatement compte que le travail est mal fait et trouveront quelqu'un d'autre.
Публикация пакета NPM с открытым исходным кодом
Si vous écrivez du code Javascript, vous utilisez probablement un gestionnaire de packages. Un gestionnaire de packages vous permet de réutiliser du code existant que d'autres personnes ont écrit et publié.
Comprendre le cycle complet de développement d’un package offrira une très bonne expérience. Il y a beaucoup de choses que vous devez savoir lors de la publication de code. Vous devez penser à la sécurité, au versioning sémantique, à l’évolutivité, aux conventions de dénomination et à la maintenance.
Le colis peut être n'importe quoi. Si vous n'avez pas d'idée, créez votre propre Lodash et publiez-le.
Lodash :
Avoir quelque chose que vous avez fait en ligne vous place 10 % au-dessus des autres. sur les sources ouvertes et les packages.
Учебный план freeCodeCamp
freeCodecamp a collecté beaucoup de choses .
freeCodeCamp est une organisation à but non lucratif. Il se compose d'une plate-forme d'apprentissage interactive basée sur le Web, d'un forum communautaire en ligne, de salons de discussion, de publications Medium et d'organisations locales qui visent à rendre l'apprentissage du développement Web accessible à tous.
Vous serez plus que qualifié pour votre premier emploi si vous parvenez à terminer la totalité du cours.
Создайте HTTP-сервер с нуля
Le protocole HTTP est l'un des principaux protocoles par lesquels le contenu circule sur Internet. Les serveurs HTTP sont utilisés pour diffuser du contenu statique tel que HTML, CSS et JS.
Être capable d'implémenter le protocole HTTP à partir de zéro élargira vos connaissances sur la façon dont les choses interagissent.
Par exemple, si vous utilisez NodeJs, alors vous savez qu'Express fournit un serveur HTTP.
Pour référence, voyez si vous pouvez :
- Configurer un serveur sans utiliser de bibliothèques
- Le serveur doit servir du contenu HTML, CSS et JS.
- Implémenter un routeur à partir de zéro
- Surveiller les modifications et mettre à jour le serveur
Si vous ne savez pas pourquoi, utilisez et essayez de créer un serveur HTTP de zéro.
Десктопное приложение для заметок
Nous prenons tous des notes, n'est-ce pas ?
Créons une application de notes. L'application doit enregistrer des notes et les synchroniser avec la base de données. Créez une application native en utilisant Electron, Swift ou tout ce que vous voulez et ce qui fonctionne pour votre système.
N'hésitez pas à combiner cela avec le premier défi (éditeur de texte).
En prime, essayez de synchroniser votre version de bureau avec la version Web.
Подкасты (клон Overcast)
Qui n'écoute pas de podcasts ?
Créez une application Web avec les fonctionnalités suivantes :
- Завести аккаунт
- Rechercher des podcasts
- Notez et abonnez-vous aux podcasts
- Arrêtez et jouez, changez de vitesse, fonctions avant et arrière pendant 30 secondes.
Essayez d'utiliser l'API iTunes comme point de départ. Si vous connaissez d'autres ressources, veuillez les publier dans les commentaires.
Capture d'écran
Bonjour! Je filme mon écran en ce moment !
Créez une application de bureau ou Web qui vous permet de capturer votre écran et d'enregistrer le clip sous .gif
Ici comment y parvenir.
sources
Source: habr.com