Stephen Build
0/7 étapes
Roadmap des Builders · 2026

Apprendre à coder un site

De zéro à ton premier vrai site en ligne. D'abord la méthode, ensuite 7 étapes avec un projet et des ressources gratuites pour chacune. Coche chaque étape quand tu l'as finie.

La méthode Les 7 étapes

Comment apprendre

Règle n°1

Utilise l'IA pour comprendre, pas pour faire à ta place

ChatGPT ou Claude peuvent écrire tout ton code. Le problème : si tu ne comprends pas ce qu'il fait, tu bloques au premier bug et tu n'as rien appris.

  • Demande-lui d'expliquer une notion avec un exemple simple
  • Colle-lui ton message d'erreur et demande-lui pourquoi, pas juste la correction
  • Écris ton code d'abord, puis demande-lui de le relire
  • Recopie à la main un code qu'il te propose plutôt que de le coller
  • Si tu ne peux pas réexpliquer une ligne, ne la garde pas

Pratique plus que tu ne regardes

Un tuto regardé donne l'impression d'avoir compris. Vise une heure de pratique pour un quart d'heure de cours.

Finis chaque projet avant de passer à la suite

Tu passes à l'étape suivante quand ton projet marche, pas quand tu as fini le cours.

Tes deux références pour tout le parcours

MDN Web Docs : la référence HTML, CSS et JavaScript, à ouvrir dès que tu as un doute.

OpenClassrooms ou freeCodeCamp : des cours guidés avec exercices (le second est en anglais).

La roadmap

Les durées sont des repères pour quelqu'un qui part de zéro et bosse environ une heure par jour. Si t'as déjà programmé, ça ira plus vite.

  1. 1

    HTML : le squelette

    3 à 5 jours

    Le HTML décrit ce qu'il y a sur la page : titres, paragraphes, images, liens, boutons, formulaires.

    • Les balises de base et la structure d'une page
    • Les balises sémantiques : header, nav, main, section, footer
    • Les formulaires : input, label, button
    Pour apprendre

    Le début du cours HTML/CSS d'OpenClassrooms, et MDN pour vérifier à quoi sert une balise.

    Projet

    Une page de présentation de toi, sans aucun style.

  2. 2

    CSS : la mise en page

    1 à 2 semaines

    Le CSS habille la page : couleurs, typo, espacements. Le vrai sujet, c'est de placer les éléments où tu veux.

    • Les sélecteurs et le box model (margin, padding, border)
    • Flexbox : aligner des éléments sur une ligne ou une colonne
    • Grid : construire une mise en page en grille
    Pour apprendre flexbox et grid en jouant
    • Flexbox Froggy : des grenouilles à placer sur leurs nénuphars, en français. Le plus rapide pour démarrer.
    • Flexbox Zombies : un jeu plus complet qui fait rentrer flexbox pour de bon, en anglais.
    • Grid Garden : la même chose pour grid, en arrosant des carottes, en français.
    Projet

    Reprends ta page de l'étape 1 et rends-la propre.

  3. 3

    Responsive : le site sur téléphone

    3 à 5 jours

    La majorité des gens verront ton site sur leur téléphone. Il doit s'adapter à toutes les tailles d'écran.

    • Penser mobile d'abord, puis élargir
    • Les media queries
    • Les unités relatives (%, rem, vw)
    Pour apprendre

    Ouvre les outils de développement de ton navigateur (F12) et active le mode mobile. Tu vois ton site sur n'importe quelle taille d'écran sans sortir ton téléphone.

    Projet

    Un portfolio d'une page, qui s'affiche bien sur téléphone, tablette et ordinateur.

  4. 4

    JavaScript : l'interaction

    3 à 4 semaines

    Le JavaScript rend ton site vivant : un menu qui s'ouvre, un formulaire qui vérifie ce qu'on tape, des données qui s'affichent. C'est l'étape la plus longue, c'est normal.

    • Variables, conditions, boucles, fonctions
    • Tableaux et objets
    • Manipuler la page (le DOM) et réagir aux clics
    • Récupérer des données depuis une API (fetch)
    Pour apprendre

    javascript.info, en français, de la première variable jusqu'à fetch. Pour l'appli météo, Open-Meteo est une API météo gratuite, sans inscription.

    Projets

    Une to-do list, puis une appli météo qui appelle une vraie API.

  5. 5

    Git et mise en ligne

    2 à 3 jours

    Un site qui reste sur ton ordi n'existe pas. Apprends à sauvegarder ton code et à le publier.

    • Git : commit, push, branches
    • GitHub pour héberger ton code
    • Mettre en ligne gratuitement avec Vercel, Netlify ou GitHub Pages
    Pour apprendre

    Learn Git Branching, un jeu en français qui te fait comprendre les branches en les voyant bouger.

    Projet

    Mets en ligne tout ce que t'as fait jusqu'ici, avec un vrai lien.

  6. 6

    React : le framework

    3 à 4 semaines

    Un framework, c'est une boîte à outils pour construire des sites plus gros, plus vite. React est le plus demandé en entreprise.

    • Composants et props
    • State et événements (useState, useEffect)
    • Afficher des listes et des données d'une API
    • Ensuite seulement : Next.js, pour des sites complets
    Pour apprendre

    Le tutoriel officiel sur react.dev, en anglais. Tu construis un petit jeu pas à pas, c'est le meilleur point de départ.

    Projet

    Refais ton appli météo en React, puis un petit tableau de bord.

  7. 7

    Un vrai site pour un vrai client

    Le projet final

    Pas un clone de Netflix. Un site pour un commerce, une asso ou un artisan que tu connais, mis en ligne et utilisé pour de vrai.

    • Trouver quelqu'un autour de toi qui a besoin d'un site
    • Lui demander ce qu'il veut que ses clients fassent sur le site
    • Construire, mettre en ligne, lui faire tester
    • Corriger ce qu'il remonte

    C'est là que tu apprends ce qu'aucun cours ne t'apprend : un vrai besoin, des retours, et un site que tu dois maintenir.

Et après ?

Savoir coder un site, c'est la moitié du chemin. L'autre moitié, c'est trouver quelqu'un qui le paie. C'est ce qu'on apprend chez les Builders : rejoins la communauté et débloque le reste de la bibliothèque.

Rejoindre les Builders