📅 S15 – Blog : Maquette & Structure HTML

  • PĂ©riode : du 27 avril au 8 mai 2026 – Semaines 16–17
  • ThĂ©matique : PrĂ©parer le blog fil rouge – Structure HTML & design responsive
  • Jour fĂ©riĂ© / vacances : âś… Vacances de mai prĂ©vues du 9 au 16 mai 2026 (juste après la session)

🧭 Objectifs de la session

  • Utiliser les acquis UX/UI pour transformer une maquette en code HTML.
  • Structurer les diffĂ©rentes pages du blog (accueil, article, contact, etc.) avec un code sĂ©mantique et propre.
  • IntĂ©grer des composants HTML courants : en-tĂŞte, menu, sections, pied de page.
  • Commencer l’intĂ©gration responsive du blog Ă  l’aide de techniques CSS modernes.

🧩 Cette session marque le lancement actif du projet fil rouge : le blog des apprenants, construit et enrichi au fil des sessions suivantes.

📚 Unités d’apprentissage mobilisées

  • UA 1.2.2 – Interface utilisateur & responsive – (6h) – rĂ©fĂ©rentiel
  • UA 2.1.3 – Produire un code HTML sĂ©mantique et optimisĂ© – (4h) – rĂ©fĂ©rentiel
  • UA 2.2.5 – Outils CSS modernes – (2h) – rĂ©fĂ©rentiel

🧩 Prototype

Titre : Structure HTML de la page d’accueil du blog

Description : Créer une structure HTML complète (sans CSS avancé) de la page d’accueil d’un blog :

  • En-tĂŞte (<header>) avec logo + menu
  • Section articles rĂ©cents (titres + extraits)
  • Pied de page (<footer>)
  • Utilisation des balises sĂ©mantiques et des classes bien nommĂ©es

🧪 Mini-Projet

Titre : Structure HTML/CSS complète du blog

Description : DĂ©velopper la structure front-end du blog (sans back-end) incluant :

  • index.html (accueil)
  • article.html (affichage d’un article)
  • contact.html (formulaire)

Appliquer un design responsive de base avec CSS :

  • Utilisation de Flexbox ou Grid
  • Adaptation aux tailles desktop/tablette

Contraintes techniques :

  • Code HTML/CSS natif (pas de framework)
  • Structure de projet claire (dossier, fichiers sĂ©parĂ©s)
  • ConformitĂ© aux bonnes pratiques HTML5

Livrables attendus :

  • Fichiers HTML + CSS
  • Arborescence de projet bien structurĂ©e
  • DĂ©pĂ´t GitHub avec README et captures

📊 Grille d’évaluation par niveau

  • Niveau 1 : Structure HTML correcte, classes nommĂ©es, contenu statique
  • Niveau 2 : Mise en page fluide, balisage optimisĂ©, navigation fonctionnelle
  • Niveau 3 : Responsive partiel, design cohĂ©rent, livrable prĂŞt Ă  ĂŞtre connectĂ© Ă  une base