■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ HTML / CSS >>> TRAINING MODE ■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
< FORMATION WEB />
Trois missions pour devenir autonome
LEVEL MISSION DURÉE OBJECTIF
01 CodeCard 1 semaine Créer ta carte de visite web
02 SiteForge 2 semaines Construire un site complet
03 ControlPanel 3 semaines Développer un dashboard
$ whoami
> Étudiante HTML/CSS
$ ls skills/
> html_basics css_fundamentals ready_to_learn
$ cat [Link]
> Devenir autonome en développement web
[PAGE_01] // FORMATION_HTML_CSS.pdf
■ RÈGLES DU JEU
Ce que tu DOIS faire
✓ Utiliser Git et GitHub pour sauvegarder ton code
✓ Faire des commits réguliers (au moins 1 par fonctionnalité)
✓ Chercher par toi-même sur Google / YouTube / Documentation
✓ Tester ton site sur mobile ET ordinateur
✓ Écrire un [Link] qui explique ton projet
✓ Organiser ton code proprement (dossiers css/, images/, etc.)
Ce que tu NE DOIS PAS faire
✗ Utiliser ChatGPT ou autre IA pour générer le code
✗ Copier-coller du code sans comprendre
✗ Utiliser des frameworks (Bootstrap, Tailwind...)
✗ Abandonner sans demander de l'aide à ton mentor
Pourquoi ces règles ?
L'objectif n'est PAS de faire le plus beau site du monde. L'objectif
est d'apprendre à chercher, à résoudre des problèmes et à devenir
autonome. Tu vas bloquer, c'est normal ! Quand tu bloques, tu CHERCHES
(Google, YouTube, documentation), tu ESSAIES, et si vraiment tu es
coincée, tu demandes à ton mentor.
Tes alliés pour apprendre
→ Google (cherche 'comment faire X en HTML' ou 'CSS Y tutorial')
→ YouTube (tutoriels en français ou anglais)
→ MDN Web Docs ([Link]) - LA référence
→ W3Schools ([Link]) - Exemples simples
→ CSS-Tricks ([Link]) - Astuces CSS
→ Ton mentor (quand tu as vraiment essayé de chercher avant)
[PAGE_02] // FORMATION_HTML_CSS.pdf
[ LEVEL 01 ] → CodeCard
DURÉE: 1 semaine
DIFFICULTÉ: ★■■
TYPE: Page unique (one-page)
Ta mission
Crée ta carte de visite web : une page qui te présente, montre tes
compétences et comment te contacter. C'est TON portfolio personnel !
Ce que ton site doit contenir
■ Une section d'accueil avec ton nom et une phrase qui te décrit
■ Une section 'À propos' avec ta photo et ton histoire
■ Une section 'Compétences' avec ce que tu sais faire
■ Une section 'Projets' avec 2-3 projets (réels ou fictifs)
■ Une section 'Contact' avec un formulaire simple
■ Un menu pour naviguer entre les sections
■ Un design responsive (ça marche sur téléphone ET ordinateur)
Compétences à développer
• Structurer une page avec les bonnes balises HTML
• Utiliser Flexbox pour organiser les éléments
• Créer un menu de navigation avec des ancres
• Rendre un site responsive avec les media queries
• Organiser son CSS proprement
Recherches à faire
Tu devras chercher par toi-même comment faire certaines choses. Voici
des mots-clés à rechercher sur Google :
→ 'HTML semantic tags tutorial'
→ 'CSS flexbox guide débutant'
→ 'smooth scroll CSS'
[PAGE_03] // FORMATION_HTML_CSS.pdf
→ 'responsive design media queries'
→ 'HTML form validation'
→ 'CSS hover effects'
Bonus (si tu veux aller plus loin)
★ Ajouter des animations au scroll
★ Créer un mode sombre/clair
★ Faire un menu hamburger pour mobile
★ Ajouter des icônes (Font Awesome ou autre)
[PAGE_04] // FORMATION_HTML_CSS.pdf
[ LEVEL 02 ] → SiteForge
DURÉE: 2 semaines
DIFFICULTÉ: ★★■
TYPE: Site multi-pages
Ta mission
Construis un site complet pour un restaurant, une boutique, une agence,
ou tout ce que tu veux. Cette fois, tu as plusieurs pages qui
fonctionnent ensemble !
Ce que ton site doit contenir
■ Au moins 4 pages : Accueil, À propos, Galerie/Produits, Contact
■ Un header et footer identiques sur toutes les pages
■ Une galerie d'images qui s'adapte à l'écran
■ Un formulaire de contact plus élaboré
■ Des animations quand on passe la souris
■ Un design cohérent sur toutes les pages
■ Responsive sur mobile, tablette et desktop
Nouvelles compétences à maîtriser
• Créer une navigation entre plusieurs pages
• Utiliser CSS Grid pour des layouts complexes
• Combiner Flexbox et Grid intelligemment
• Créer des animations CSS
• Gérer la cohérence visuelle entre pages
Recherches à faire
→ 'CSS Grid tutorial français'
→ 'image gallery responsive CSS'
→ 'CSS animations keyframes'
→ 'multi-page website structure'
→ 'CSS transitions examples'
[PAGE_05] // FORMATION_HTML_CSS.pdf
→ 'responsive navigation menu'
Défis à relever
Ce niveau est plus difficile car tu dois gérer plusieurs pages. Le défi
principal : comment éviter de copier-coller le même header/footer
partout ? Réfléchis à ta structure AVANT de coder. Fais un plan sur
papier !
Bonus (pour les plus motivées)
★ Créer un slider d'images (CSS only)
★ Ajouter un menu sticky qui change au scroll
★ Faire une lightbox pour agrandir les images
★ Créer une page 404 personnalisée
[PAGE_06] // FORMATION_HTML_CSS.pdf
[ LEVEL 03 ] → ControlPanel
DURÉE: 3 semaines
DIFFICULTÉ: ★★★
TYPE: Interface dashboard
Ta mission FINALE
Crée un tableau de bord comme ceux que tu vois dans les applications
web (style admin panel). C'est le niveau expert : tu dois créer une
interface complexe, professionnelle, avec plusieurs fonctionnalités.
Ce que ton dashboard doit contenir
■ Une sidebar (menu latéral) qui peut se réduire
■ Un header en haut avec un menu utilisateur
■ 4-6 cartes de statistiques avec des chiffres
■ Un tableau de données (comme un Excel)
■ Des graphiques simples (barres, cercles) en CSS pur
■ Un système d'onglets pour changer de vue
■ Un thème clair ET un thème sombre
■ Tout doit être responsive
Ce que tu vas apprendre
• Créer des layouts complexes (sidebar + content)
• Utiliser les CSS variables pour les thèmes
• Faire des graphiques avec juste du CSS
• Créer des interactions sans JavaScript
• Penser comme une développeuse pro
Recherches avancées à faire
→ 'CSS dashboard layout tutorial'
→ 'sidebar collapse CSS only'
→ 'CSS variables dark mode'
→ 'pure CSS charts'
[PAGE_07] // FORMATION_HTML_CSS.pdf
→ 'CSS tabs without javascript'
→ 'responsive dashboard design'
→ 'CSS custom properties theme'
Le vrai défi
Ce niveau est difficile parce que tu dois TOUT faire toi-même. Il n'y a
pas de solution toute faite. Tu vas devoir chercher, essayer, te
tromper, recommencer. C'est exactement comme ça que les vrais
développeurs travaillent ! Prends ton temps, découpe le projet en
petites parties, et avance étape par étape.
Conseils de pro
• Commence par la structure de base (sidebar + content)
• Fais d'abord la version desktop, puis adapte au mobile
• Teste régulièrement ton code, n'attends pas la fin
• Utilise les DevTools du navigateur pour débugger
• Fais des commits à chaque fonctionnalité terminée
• Si tu bloques plus de 2h, demande de l'aide
[PAGE_08] // FORMATION_HTML_CSS.pdf
■ COMMENT TU SERAS ÉVALUÉE
Ce qui compte vraiment
Je ne cherche PAS la perfection. Je cherche à voir si tu as appris à
apprendre. Voici ce que je vais regarder :
✓ Autonomie : As-tu cherché par toi-même ? As-tu essayé
différentes solutions ?
✓ Compréhension : Peux-tu expliquer ton code ? Sais-tu ce que fait
chaque ligne ?
✓ Organisation : Ton code est-il propre et organisé ?
✓ Fonctionnalités : Ton site fonctionne-t-il ? Fait-il ce qui est
demandé ?
✓ Responsive : Ça marche sur mobile ET desktop ?
✓ Git : As-tu fait des commits réguliers avec des messages clairs
?
✓ README : As-tu documenté ton projet ?
La soutenance
Pour chaque projet, tu auras une soutenance de 30 minutes où tu vas :
1. Démontrer ton site (5-10 min)
2. Expliquer ton code (10-15 min)
3. Répondre à mes questions (5-10 min)
Questions types que je poserai
• 'Pourquoi as-tu utilisé Flexbox ici et pas Grid ?'
• 'Comment as-tu rendu cette section responsive ?'
• 'Qu'est-ce que tu as trouvé le plus difficile ?'
• 'Où as-tu cherché quand tu bloquais ?'
• 'Que ferais-tu différemment si tu recommençais ?'
[PAGE_09] // FORMATION_HTML_CSS.pdf
■■ TON PLANNING
SEMAINE MISSION DEADLINE SOUTENANCE
1 CodeCard Vendredi 17h Vendredi 17h-18h
2-3 SiteForge Vendredi 17h Vendredi 17h-18h
4-6 ControlPanel Vendredi 17h Vendredi 17h-18h
■ DERNIERS CONSEILS
1. Google est ton ami : 90% des développeurs cherchent sur Google
tous les jours
2. Lis la documentation : MDN Web Docs est LA référence, apprends à
l'utiliser
3. Teste en continu : Ne code pas pendant 3h sans tester, teste
après chaque petit ajout
4. Utilise les DevTools : Ouvre l'inspecteur du navigateur, c'est
ton meilleur outil
5. Fais des pauses : Si tu bloques, fais une pause, reviens plus
tard avec un œil neuf
6. Demande de l'aide : Mais APRÈS avoir cherché toi-même pendant au
moins 30-60 min
7. Sois fière de tes erreurs : Chaque bug que tu corriges te rend
plus forte
8. Compare-toi à toi-même : Pas aux autres. L'objectif c'est de
progresser, pas d'être parfaite
9. Prends des notes : Écris ce que tu apprends, ça va te servir
pour le prochain projet
10. Amuse-toi ! : Le web dev c'est créatif, expérimente, teste des
trucs fous !
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■ ■
■ "La seule façon d'apprendre à programmer ■
■ c'est de PROGRAMMER." ■
■ ■
■ Maintenant, c'est à toi de jouer ! ■ ■
■ ■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
[PAGE_10] // FORMATION_HTML_CSS.pdf