Plan d'apprentissage gratuit — 30 jours

HTML · CSS
· JavaScript

// De zéro à développeur web junior — 100% ressources gratuites — ~1h par jour

Jours

Semaines

Projets

/ jour

Complétés

// Progression globale0%

HTML — La structure du web

Balises, formulaires, sémantique, accessibilité

JOURS 1–7

J·01

C'est quoi le Web ? Installer ses outils

HTML

▼

// Objectifs

Comprendre client / serveur / navigateur / HTTP
Installer VS Code + extension Live Server
Créer son premier fichier index.html et l'ouvrir dans Chrome
Comprendre la structure de base : DOCTYPE, html, head, body

// Ressources gratuites

⏱ ~1h — Installation + premier fichier HTML

J·02

Balises de texte & listes

HTML

▼

// Objectifs

Titres h1–h6, paragraphe p, emphase strong, em
Listes ordonnées ol et non ordonnées ul / li
Saut de ligne br et ligne horizontale hr
Commentaires HTML

// Ressources gratuites

⏱ ~1h — Page de présentation personnelle en texte

J·03

Liens & images

HTML

▼

// Objectifs

Balise <a href=""> — liens internes, externes, ancres
Balise <img src="" alt=""> — chemin relatif vs absolu
Attribut target="_blank" pour ouvrir dans un nouvel onglet
Images cliquables : lien autour d'une image

// Ressources gratuites

⏱ ~1h — Galerie photo HTML simple

J·04

Tableaux HTML

HTML

▼

// Objectifs

Structure table, thead, tbody, tr, th, td
Fusionner des cellules : colspan et rowspan
Attribut caption pour décrire le tableau
Quand utiliser (et ne PAS utiliser) les tableaux

// Ressources gratuites

⏱ ~1h — Tableau de planning hebdomadaire

J·05

Formulaires HTML

HTML

▼

// Objectifs

Balise <form> avec action et method
Inputs : text, email, password, number, date, checkbox, radio
Balises label, select, textarea, button
Attributs de validation : required, minlength, pattern

// Ressources gratuites

⏱ ~1h — Formulaire de contact complet

J·06

HTML sémantique

HTML

▼

// Objectifs

Balises sémantiques : header, nav, main, section, article, aside, footer
Comprendre pourquoi la sémantique est cruciale (SEO, accessibilité)
Balises figure, figcaption, time, address
Restructurer une page div-spaghetti en HTML sémantique

// Ressources gratuites

⏱ ~1h — Réécrire une page en HTML sémantique

J·07

RÉVISION + Mini-projet S1

ProjetRévision

▼

// Objectifs

Relire les notions J1–J6 et corriger ses lacunes
Valider son HTML sur validator.w3.org
Réaliser le mini-projet de la semaine

// Ressources gratuites

⏱ ~1h30 — Révision + projet

🪪 Projet S1 — Page CV personnel en HTML pur

Crée une page CV complète en HTML uniquement (sans CSS). Elle doit présenter ton identité, tes compétences, ton parcours et un formulaire de contact. Structure sémantique obligatoire.

Header avec nom, titre et photo (balise header + img)
Section "À propos" avec section + p
Section "Compétences" avec liste ul
Section "Expériences" avec tableau table (poste, entreprise, durée)
Formulaire de contact avec input email, textarea, button
Footer avec liens vers réseaux sociaux (a + footer)

CSS — Le style et la mise en page

Sélecteurs, box model, Flexbox, Grid, responsive

JOURS 8–14

J·08

CSS — Introduction & sélecteurs

CSS

▼

// Objectifs

Lier une feuille CSS : <link rel="stylesheet">
Sélecteurs : élément, classe .nom, id #nom, descendant
Propriétés de base : color, background-color, font-size, font-family
Cascades et spécificité — comprendre qui gagne

// Ressources gratuites

⏱ ~1h — Styliser le CV du projet S1

J·09

Box Model — margin, padding, border

CSS

▼

// Objectifs

Comprendre le modèle de boîte : content → padding → border → margin
box-sizing: border-box — pourquoi c'est essentiel
width, height, max-width, min-height
Utiliser les DevTools Chrome pour inspecter le box model

// Ressources gratuites

⏱ ~1h — Cartes de produit avec espacement

J·10

Typographie & couleurs CSS

CSS

▼

// Objectifs

Importer une police Google Fonts dans son CSS
Propriétés : font-weight, line-height, letter-spacing, text-align
Couleurs : hex, rgb, rgba, hsl — et les variables CSS --ma-couleur
Créer une palette cohérente avec coolors.co

// Ressources gratuites

⏱ ~1h — Charte graphique pour le projet

J·11

Flexbox — mise en page moderne

CSS

▼

// Objectifs

display:flex, axes principal et transversal
justify-content, align-items, flex-wrap, gap
Propriétés enfant : flex-grow, flex-shrink, align-self
Centrer un élément horizontalement ET verticalement

// Ressources gratuites

⏱ ~1h — Barre de navigation + cartes en Flex

J·12

CSS Grid — layouts 2D

CSS

▼

// Objectifs

display:grid, grid-template-columns/rows
Unité fr, fonction repeat(), minmax()
Placer des éléments : grid-column, grid-row
Quand utiliser Grid vs Flexbox

// Ressources gratuites

⏱ ~1h — Layout de galerie photo avec Grid

J·13

Responsive Design & Media Queries

CSS

▼

// Objectifs

Meta viewport : <meta name="viewport">
Media queries : @media (max-width: 768px) { ... }
Approche Mobile First
Unités relatives : %, vw, vh, em, rem

// Ressources gratuites

⏱ ~1h — Adapter le CV projet S1 en responsive

J·14

RÉVISION + Mini-projet S2

ProjetRévision

▼

// Objectifs

Réviser Flexbox et Grid avec des exercices
Tester son responsive sur mobile (DevTools → mode responsive)
Réaliser le mini-projet de la semaine

// Ressources gratuites

Frontend Mentor — Défis CSS débutant

⏱ ~1h30 — Révision + projet

🏠 Projet S2 — Landing page responsive

Crée une landing page complète pour un produit fictif (application, café, service...) entièrement responsive. Elle doit s'afficher correctement sur mobile, tablette et desktop.

Navbar fixe avec logo + liens (Flexbox)
Section héro avec titre accrocheur, sous-titre et bouton CTA
Section "Fonctionnalités" : 3 cartes en Grid responsive
Section tarifs avec tableau HTML stylisé
Footer avec colonnes en Flexbox
Responsive complet : mobile 375px, tablette 768px, desktop 1200px

JavaScript — L'interactivité

DOM, événements, fetch API, logique de base

JOURS 15–21

J·15

JavaScript — Bases du langage

▼

// Objectifs

Lier JS à une page : <script src="app.js"> en bas de body
Variables let / const, types, opérateurs
console.log() — ton meilleur outil de débogage
Conditions if/else, opérateur ternaire

// Ressources gratuites

⏱ ~1h — Premiers scripts dans la console

J·16

Fonctions & tableaux JS

▼

// Objectifs

Fonctions classiques et arrow functions () => {}
Tableaux : push, pop, map, filter, forEach, find
Objets JS littéraux { clé: valeur }
Boucle for...of sur un tableau

// Ressources gratuites

⏱ ~1h — Fonctions utilitaires de tri et filtrage

J·17

Manipulation du DOM

▼

// Objectifs

Sélectionner des éléments : querySelector, querySelectorAll
Modifier le contenu : textContent, innerHTML
Modifier le style : element.style.color
Ajouter / supprimer des classes : classList.add/remove/toggle

// Ressources gratuites

⏱ ~1h — Modifier une page HTML via JS

J·18

Événements — click, input, submit

▼

// Objectifs

addEventListener("click", function)
Événements input, change, submit, keydown
L'objet event et event.preventDefault()
Délégation d'événements sur des listes dynamiques

// Ressources gratuites

⏱ ~1h — Formulaire interactif avec validation JS

J·19

LocalStorage & persistance des données

▼

// Objectifs

localStorage.setItem / getItem / removeItem
Sauvegarder et récupérer des objets avec JSON.stringify/parse
Charger les données sauvegardées au chargement de la page
Comprendre les limites de localStorage (~5MB, même domaine)

// Ressources gratuites

⏱ ~1h — To-do list avec sauvegarde

J·20

Fetch API & données JSON

▼

// Objectifs

Comprendre async / await et les Promises
fetch(url).then(res => res.json()).then(data => ...)
Gérer les erreurs avec try/catch
Afficher des données d'une API publique dans le HTML

// Ressources gratuites

⏱ ~1h — Afficher des données d'une API

J·21

RÉVISION + Mini-projet S3

ProjetRévision

▼

// Objectifs

Réviser DOM, événements, localStorage, fetch
Déboguer avec les DevTools (onglet Console et Sources)
Réaliser le mini-projet de la semaine

// Ressources gratuites

JSHint — Vérifier la qualité de son JS

⏱ ~1h30 — Révision + projet

✅ Projet S3 — Application To-Do List complète

Crée une application de gestion de tâches en HTML + CSS + JS pur. Les tâches sont sauvegardées dans localStorage et persistent après rechargement. Design soigné obligatoire.

Ajouter une tâche via un input + bouton (event submit)
Afficher les tâches dans une liste générée dynamiquement (DOM)
Cocher/décocher une tâche (toggle classe + style barré)
Supprimer une tâche avec un bouton ✕ (délégation d'événements)
Sauvegarder toutes les tâches dans localStorage (JSON)
Bonus : filtrer les tâches (Toutes / Actives / Terminées)

Git, déploiement & projet final

Git/GitHub, GitHub Pages, bonnes pratiques, portfolio

JOURS 22–30

J·22

Git — Contrôle de version

Outils

▼

// Objectifs

Installer Git et configurer git config --global
Commandes essentielles : init, add, commit, status, log
Créer un dépôt sur GitHub et faire son premier push
Comprendre branches : branch, checkout, merge

// Ressources gratuites

⏱ ~1h — Versionner ses projets S1-S3

J·23

Déployer avec GitHub Pages

Outils

▼

// Objectifs

Activer GitHub Pages sur un dépôt existant
Comprendre l'URL générée username.github.io/repo
Mettre à jour son site en ligne avec git push
Ajouter un nom de domaine personnalisé (optionnel, gratuit avec Freenom)

// Ressources gratuites

⏱ ~1h — Mettre la landing page S2 en ligne

J·24

CSS Animations & transitions

CSS

▼

// Objectifs

Transitions : transition: all 0.3s ease sur hover
Animations CSS avec @keyframes
Propriétés : animation-duration, delay, iteration-count
Transform : translate, scale, rotate

// Ressources gratuites

⏱ ~1h — Enrichir la landing page d'animations

J·25

Accessibilité & SEO de base

Bonnes pratiques

▼

// Objectifs

Attributs ARIA essentiels : aria-label, aria-hidden, role
Contraste des couleurs (outil WebAIM Contrast Checker)
Balises meta SEO : title, description, og:image
Auditer sa page avec Lighthouse dans Chrome DevTools

// Ressources gratuites

⏱ ~1h — Score Lighthouse > 90

J·26

Intro aux frameworks CSS (Tailwind)

CSS

▼

// Objectifs

Comprendre ce qu'est un framework CSS utilitaire
Installer Tailwind via CDN pour tester
Classes utilitaires : flex, grid, padding, couleurs, responsive
Refaire un composant du projet S2 avec Tailwind

// Ressources gratuites

⏱ ~1h — Premier composant Tailwind

J·27

Projet final — Conception & structure

Projet

▼

// Objectifs

Définir le sujet : portfolio, blog, app météo, catalogue...
Créer le wireframe sur papier ou Excalidraw
Créer la structure HTML complète et sémantique
Commencer le CSS : variables, reset, typographie

// Ressources gratuites

Excalidraw — Wireframing gratuit en ligne

⏱ ~1h — Structure + design de base

J·28

Projet final — Mise en page & style

Projet

▼

// Objectifs

Implémenter toutes les sections avec Flexbox/Grid
Responsive Mobile First avec media queries
Ajouter les transitions et animations CSS
Tester sur vrai smartphone (ou DevTools)

// Ressources gratuites

Responsive Design Checker — Tester son site

⏱ ~1h30 — Mise en page complète

J·29

Projet final — JavaScript & interactivité

Projet

▼

// Objectifs

Ajouter les interactions JS (menu mobile, filtres, formulaire...)
Intégrer une API si pertinent (météo, citation, etc.)
Vérifier la console — zéro erreur JS
Optimiser les images (TinyPNG) et tester Lighthouse

// Ressources gratuites

TinyPNG — Compresser ses images gratuitement

⏱ ~1h30 — Finalisation JS

J·30

🚀 Déploiement & Et après ?

Bilan

▼

// Objectifs

Déployer le projet final sur GitHub Pages ou Netlify
Écrire un README.md complet avec captures d'écran
Partager le lien en ligne (LinkedIn, communautés dev)
Choisir la suite : React, Node.js, Django, ou freelance

// Pour continuer gratuitement

⏱ ~2h — Déploiement + bilan + partage

💼 Projet S4 — Portfolio développeur web

Crée ton portfolio personnel de développeur web. C'est la pièce maîtresse de ta candidature pour des missions ou un emploi. Il doit être en ligne, responsive et représenter tout ce que tu as appris.

Section Héro : nom, titre, photo, bouton "Voir mes projets"
Section "À propos" avec skills visuels (barres ou badges)
Section "Projets" : cartes pour les 3 projets S1–S3 avec liens live + GitHub
Section "Contact" : formulaire fonctionnel + liens réseaux sociaux
Animations CSS (entrance, hover sur les cartes projet)
Déployé sur GitHub Pages avec URL propre + score Lighthouse > 90

Information importante

HTML — La structure du web

CSS — Le style et la mise en page

JavaScript — L'interactivité

Git, déploiement & projet final