20 projets de développement web pour débutants en HTML, CSS, JavaScript et React, avec ce que chacun enseigne et un court extrait de départ à coller puis à faire évoluer.
Commencez par des projets qui apportent chacun une seule notion nouvelle : une page personnelle pour HTML et CSS, un compteur et une todo list pour les événements et l'état en JavaScript, puis une application météo ou un quiz pour fetch et JSON. Passez à React une fois que le JavaScript pur vous semble facile. Chaque projet ci-dessous est livré avec un extrait de départ à coller et à compléter.
Un ordre logique
Les listes de projets pour débutants se limitent souvent à un titre. Ici, chaque projet indique la compétence qu'il fait travailler, le temps qu'il demande à peu près, et vous donne quelques lignes de code fonctionnel pour démarrer : vous passez ainsi votre première heure à construire plutôt qu'à fixer un fichier vide. Filtrez par niveau ou par langage à pratiquer.
Une page de profil sur vous-même, en HTML et CSS purs. Elle ne demande rien d'autre qu'un éditeur de texte et un navigateur, et elle couvre les titres, paragraphes, liens, images et la mise en forme de base.
Seule, oui, car presque tous les apprenants en créent une. Personnalisez-la : ajoutez des échéances, des filtres, le réordonnancement par glisser-déposer ou la sauvegarde dans localStorage, et rédigez une courte note sur ce que vous amélioreriez.
Quand vous savez créer le compteur, la todo list et une application basée sur fetch en JavaScript pur, sans tutoriel. React prend tout son sens une fois que vous avez ressenti la difficulté de mettre à jour le DOM à la main.
Non. Les vingt projets tournent dans le navigateur. Les projets de données appellent des API publiques gratuites ou un fichier JSON local, et les projets de sauvegarde utilisent localStorage, qui conserve des chaînes de caractères dans le navigateur sans date d'expiration.
Il n'y a pas de nombre fixe. Trois ou quatre projets terminés et soignés, qui montrent des compétences différentes, en disent généralement plus que vingt projets à moitié faits.
Enregistrez-le sous index.html, ouvrez-le dans votre navigateur et collez n'importe quel projet HTML dans le body.
Inclut la balise viewport pour que les téléphones l'affichent à la bonne taille, et une balise script pour les projets JavaScript.
Débutant
HTML/CSS
1 à 2 heures
Structure de page, titres, images, liens
Ajoutez un thème sombre avec prefers-color-scheme.
Débutant
HTML/CSS
1 heure
Listes ordonnées et non ordonnées, sections sémantiques
Ajoutez une feuille de style d'impression qui masque la photo.
Débutant
HTML/CSS
3 heures
Flexbox, espacements, boutons, texte responsive
Empilez la rangée de fonctionnalités en dessous de 600px.
Débutant
HTML/CSS
1 heure
CSS grid, auto-fit, object-fit
Ouvrez une vue agrandie au clic sur une photo.
Débutant
HTML/CSS
2 heures
Labels, types de champs, validation native
Affichez un message d'erreur personnalisé sous chaque champ.
Débutant
JavaScript
30 minutes
Sélection d'éléments, événements de clic, mise à jour du texte
Ajoutez un bouton de remise à zéro et bloquez à zéro.
Débutant
JavaScript
2 heures
Soumission de formulaire, tableaux, affichage d'une liste
Sauvegardez les tâches pour qu'elles survivent au rechargement.
Débutant
JavaScript
1 heure
Événements de saisie, nombres, formatage de montants
Partagez l'addition entre plusieurs personnes.
Débutant
JavaScript
45 minutes
Basculer des classes, enregistrer une préférence
Utilisez le réglage du système par défaut lors de la première visite.
Intermédiaire
JavaScript
1 heure
setInterval, dates, arrêt des minuteurs
Laissez l'utilisateur choisir la date cible.
Intermédiaire
JavaScript
3 heures
Données dans des tableaux d'objets, calcul du score, état
Mélangez les questions et affichez une barre de progression.
Intermédiaire
JavaScript
2 heures
localStorage, JSON.stringify et JSON.parse
Ajoutez une recherche et un bouton de suppression par note.
Intermédiaire
API
3 heures
fetch, async/await, états d'erreur
Affichez un message de chargement et une erreur conviviale.
Intermédiaire
API
2 heures
Lire des champs JSON, construire des cartes à partir de données
Listez les cinq dépôts les plus récents de l'utilisateur.
Intermédiaire
JavaScript
1 heure
Filtrer des tableaux, événements de saisie, états vides
Surlignez les lettres correspondantes.
Étape suivante
React
30 minutes
Composants, useState, gestionnaires d'événements
Ajoutez un champ pour la valeur du pas.
Étape suivante
React
3 heures
Listes avec keys, champs contrôlés, mises à jour immuables
Ajoutez les filtres Toutes, Actives et Terminées.
Étape suivante
React
2 heures
useEffect, états de chargement et d'erreur
Ajoutez un champ de recherche qui filtre par nom.
Étape suivante
React
4 heures
Remonter l'état, déplacer des éléments entre listes
Ajoutez le glisser-déposer entre colonnes.
Étape suivante
React
4 heures
Valeurs dérivées, reduce, formulaires à plusieurs champs
Affichez un graphique des dépenses par catégorie.
Filtrez par niveau ou par compétence, puis ouvrez un projet pour voir son code de départ.
Filtrer par niveau
Filtrer par compétence
{n} projets affichés sur {total}
Copier
{level} · {skill} · {time}. Enseigne : {teaches}. Objectif bonus : {stretch}
Commencer gratuitement · Sans carte bancaire