Il existe mille listes de ressources pour apprendre le développement web, et c'est justement le problème : devant l'abondance, la plupart des débutants stagnent des mois sans produire quoi que ce soit. Cet article ne vous vend pas un rêve. Il vous donne un ordre de marche chiffré, des projets concrets, les erreurs que je vois le plus souvent, et des sources fiables pour vérifier chaque conseil.

Combien de temps ça prend vraiment

Soyons honnêtes : entre six et douze mois de travail sérieux, à raison de dix à quinze heures par semaine, pour atteindre un niveau qui permet de viser un premier poste junior. Côté rémunération, l'étude 2025 de GEFOR situe un développeur web junior entre 35 000 et 45 000 euros brut par an, avec une prime de 8 à 10 % en région parisienne. Les promesses de « développeur en 12 semaines » sont du marketing : certaines personnes y arrivent, à temps plein, avec une grosse base logique. Pour la grande majorité, c'est plus long, et ce n'est pas grave.

Ce qui compte n'est pas la durée mais la régularité. Quinze heures étalées sur sept jours battent un marathon de douze heures le dimanche : le cerveau consolide les compétences techniques pendant le sommeil et entre les sessions, pas pendant. Si vous ne pouvez consacrer qu'une heure par jour, faites-le tous les jours.

Premier mois : HTML et CSS, sans framework

Pas besoin de payer : la documentation MDN, maintenue par Mozilla et disponible en français, couvre l'intégralité du HTML et du CSS. Objectif du premier mois : savoir construire une page responsive avec Flexbox et Grid, comprendre le modèle de boîte, la spécificité des sélecteurs et le flux normal du document.

L'exercice le plus formateur qui existe : reproduire des pages existantes élément par élément. Prenez la page d'accueil d'un site que vous aimez, ouvrez-la dans un onglet et refaites-la dans un fichier index.html vierge, sans regarder son code source. Comparez ensuite. Vous découvrirez que 80 % du rendu tient à trois ou quatre mécanismes bien compris, pas à cent propriétés mémorisées.

.cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

Trois lignes de CSS donnent une grille responsive qui s'adapte toute seule : chaque carte fait au moins 280 pixels de large, et la grille ajoute ou retire des colonnes selon l'espace disponible. Ce genre de motif, maîtrisé à fond, vaut mieux que connaître vaguement dix frameworks CSS. Ajoutez-y dès maintenant deux réflexes professionnels : vérifier chaque page au clavier seul (tabulation visible, ordre logique) et tester le contraste des textes. L'accessibilité n'est pas un supplément de fin de parcours, c'est une habitude à prendre dès la première page.

Le vrai mur : JavaScript

HTML et CSS sont déclaratifs : vous décrivez un résultat. JavaScript est un langage de programmation complet : vous orchestrez un comportement dans le temps. C'est là que la plupart des gens abandonnent, généralement parce qu'ils enchaînent les tutoriels sans jamais coder seuls. Ce phénomène a un nom : l'enfer des tutoriels. Vous suivez, vous comprenez, vous reproduisez. Puis face à une page blanche, plus rien. La seule issue : souffrir sur des projets personnels, console ouverte.

Apprenez d'abord à déboguer : les outils de développement du navigateur (F12) contiennent un onglet Console pour voir vos erreurs, un onglet Réseau pour inspecter vos requêtes, et un débogueur avec points d'arrêt. Un débutant qui sait lire une erreur JavaScript et poser un point d'arrêt progresse deux fois plus vite qu'un débutant qui devine.

• Une app météo qui interroge une API gratuite (OpenWeather) et affiche la prévision de la semaine, avec gestion des erreurs réseau
• Une liste de tâches sauvegardée dans le localStorage, avec filtres, édition et suppression
• Un quiz à choix multiple avec minuteur et score final, entièrement côté client
• Votre portfolio, déployé en ligne, qui présentera vos futurs projets

Ces quatre projets couvrent l'essentiel des compétences attendues d'un junior : requêtes réseau, manipulation du DOM, persistance locale, état applicatif et déploiement. Visez des choses finies et utilisables, même modestes.

async function chargerVille(ville) {
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${ville}&appid=${CLE}&units=metric&lang=fr`;
  const réponse = await fetch(url);
  if (!réponse.ok) throw new Error("Ville introuvable");
  const données = await réponse.json();
  return `${données.name} : ${Math.round(données.main.temp)} degrés`;
}

chargerVille("Paris")
  .then(afficher)
  .catch((erreur) => afficherErreur(erreur.message));

Git et GitHub : non négociable

Dès le deuxième mois, versionnez tout votre travail. C'est la compétence la plus demandée en entretien technique après le langage lui-même, et celle qui fait la différence entre un amateur et quelqu'un d'embauchable. Un historique propre raconte votre façon de travailler ; un dépôt avec un unique commit « final » raconte que vous ne savez pas collaborer.

git init
git add .
git commit -m "Ajoute le filtre des tâches terminées"
git branch -M main
git push origin main

Écrivez des messages de commit clairs au présent (« Ajoute », « Corrige »), ouvrez des pull requests même quand vous travaillez seul, publiez vos sites avec GitHub Pages ou Vercel, et rédigez un README par projet : ce que fait le site, comment le lancer, quelles décisions vous avez prises. Le README est souvent lu avant le code.

Quel framework, et surtout quand

React domine largement les offres d'emploi en France, et Next.js est devenu le standard des projets professionnels. Mais commencer par un framework avant d'être à l'aise en JavaScript pur est l'erreur classique : vous apprenez la syntaxe du framework sans comprendre ce qu'il fait sous le capot, et le moindre bug devient insoluble. Mon conseil : pas de React avant trois à quatre mois de JavaScript solide, incluant les tableaux (map/filter/reduce), les promesses, async/await et la déstructuration.

Un framework, c'est du JavaScript avec des opinions. Tant que vous ne connaissez pas le langage, vous ne faites que réciter.

Construire un portfolio qui convainc

Un portfolio efficace n'est pas une galerie de captures d'écran : c'est une preuve de jugement technique. Chaque projet présenté doit répondre à trois questions : quel problème résout-il, quelle décision difficile avez-vous prise et pourquoi, qu'est-ce qui reste imparfait. Parler des limites de votre projet est un signal de maturité que les recruteurs expérimentés repèrent immédiatement ; le discours parfait sur un projet banal, lui, met en alerte.

• Deux à trois projets finis, déployés, avec un lien cliquable et un code source public
• Un README par projet expliquant les choix techniques et les compromis assumés
• Une page « à propos » avec votre parcours réel, même non linéaire
• Aucun tutoriel recopié : si un projet ressemble à un cours connu, transformez-le profondément

Trouver sa première mission

Trois chemins classiques. L'alternance d'abord, le meilleur rapport risque/bénéfice quand c'est possible : l'entreprise prend peu de risque sur vous et vous forme vraiment. Le CDI junior ensuite : les candidatures personnalisées gagnent largement, un message de cinq lignes montrant que vous avez utilisé le produit de l'entreprise triplera votre taux de réponse par rapport à cent candidatures copiées-collées. Le freelance débutant enfin, sur des plateformes comme Malt : les premières missions se négocient autour de 250€ à 350€ et servent surtout à construire des références.

Dans tous les cas, préparez-vous aux entretiens techniques : on vous demandera presque toujours de manipuler des tableaux, d'expliquer une requête fetch, de commenter un bout de code bogué ou de faire un exercice live. Ces formats s'entraînent, comme un sport. Et rappelez-vous : personne ne s'attend à ce qu'un junior connaisse tout. On attend de lui qu'il sache chercher, lire une documentation, et dire honnêtement « je ne sais pas, mais voici comment je trouve ».

Sources et pour aller plus loin

• MDN Web Docs, référence officielle du web
• Étude GEFOR 2025 sur les salaires du développement web en France
• freeCodeCamp, curriculum gratuit certifiant
• The Odin Project, parcours complet open source
• roadmap.sh, cartes des compétences par métier
• GitHub Pages pour héberger gratuitement vos projets statiques
• Vercel pour déployer Next.js et applications full-stack