Skip to content
Narration Interactive

Introduction

Bienvenue dans ce cours consacré à la création d’un site web de narration interactive. Vous allez approfondir vos connaissances en HTML et CSS pour créer un site complet, adapté à votre public cible.

Objectif : Le projet fil rouge

Section titled “Objectif : Le projet fil rouge”

Vous allez créer un site web présentant une histoire adaptée à l’un de ces trois publics :

  • Enfants 6-8 ans : couleurs vives, polices lisibles, navigation simple
  • Enfants 8-12 ans : mise en page plus élaborée, début d’interactivité
  • Jeunes ados : design plus élaboré, typographie travaillée

Le site devra être :

  • ✅ Sémantiquement correct : utilisation appropriée des balises HTML5
  • ✅ Visuellement cohérent : identité graphique adaptée au public
  • ✅ Responsive : fonctionnel sur mobile, tablette et desktop
  • ✅ Accessible : utilisable par tous

Ce que vous maîtrisez déjà

Section titled “Ce que vous maîtrisez déjà”

Avant de commencer, vous avez déjà appris :

  • ✅ Les bases de HTML (structure, balises principales)
  • ✅ L’environnement de développement (Vite, Node.js)
  • ✅ Les bases de Flexbox pour la mise en page

Les 4 cours

Section titled “Les 4 cours”

Ce cours est structuré en 4 séances de 4 heures. Chaque séance combine théorie et pratique intensive sur votre projet.

HTML Sémantique

Structurer le contenu de manière logique et accessible avec HTML5

Graphisme

Créer une identité visuelle cohérente adaptée à votre public

Layout & Responsive

Composer des mises en page qui s’adaptent à tous les écrans

Interactivité

Ajouter des animations et interactions pour enrichir l’expérience

Outils et ressources

Section titled “Outils et ressources”

Éditeur de code et navigateur

Section titled “Éditeur de code et navigateur”
  • VSCode ou PhpStorm : votre éditeur configuré avec les extensions appropriées
  • Chrome/Firefox avec les outils de développement (F12)
  • Testez régulièrement sur mobile (mode responsive des DevTools)

Ressources en ligne

Section titled “Ressources en ligne”

Regardez des sites existants adaptés à votre public cible. Qu’est-ce qui fonctionne ? Pourquoi ?

Validation

Section titled “Validation”

Organisation du travail

Section titled “Organisation du travail”

Chaque cours suit ce format :

1h - Théorie + Exemples (30% du temps)

  • Concepts clés expliqués
  • Exemples pratiques et démos
  • Questions/réponses

2h30 - Pratique sur votre projet (60% du temps)

  • Application des concepts sur votre site
  • Accompagnement personnalisé
  • Entraide entre groupes

30min - Q&A / Debug (10% du temps)

  • Résolution de problèmes
  • Validation de l’avancement
  • Préparation du prochain cours

Conseils pour réussir

Section titled “Conseils pour réussir”

Travaillez régulièrement

Section titled “Travaillez régulièrement”

Ne laissez pas tout pour la fin. Chaque cours construit sur le précédent.

Testez souvent

Section titled “Testez souvent”

Ouvrez votre site dans le navigateur après chaque modification. Les outils de développement (F12) sont vos meilleurs amis.

Documentez votre code

Section titled “Documentez votre code”

Utilisez des commentaires pour vous y retrouver :

<!-- Main site navigation -->
<nav class="main-nav">
  <!-- ... -->
</nav>
/* Primary colors */
:root {
  --color-primary: #FF6B6B;
  --color-secondary: #4ECDC4;
}

Validez votre code

Section titled “Validez votre code”

Utilisez les validateurs W3C régulièrement. Un code valide = moins de bugs.

Adapter à votre public cible

Section titled “Adapter à votre public cible”

Pour les 6-8 ans

Section titled “Pour les 6-8 ans”
  • Couleurs : vives et contrastées
  • Polices : grandes, très lisibles (minimum 18px)
  • Navigation : simple et intuitive (gros boutons)
  • Illustrations : nombreuses, colorées
  • Texte : court et simple

Pour les 8-12 ans

Section titled “Pour les 8-12 ans”
  • Couleurs : variées mais cohérentes
  • Polices : lisibles avec un peu de personnalité
  • Navigation : claire avec quelques niveaux
  • Illustrations : équilibre texte/image
  • Texte : paragraphes courts

Pour les ados

Section titled “Pour les ados”
  • Couleurs : palette réfléchie, possiblement sobre
  • Polices : typographie travaillée, hiérarchie claire
  • Navigation : peut être plus élaborée
  • Visuels : photos, illustrations stylisées
  • Texte : peut être plus dense

Critères d’évaluation

Section titled “Critères d’évaluation”

Votre projet sera évalué sur :

  • Sémantique HTML : structure logique et appropriée
  • Qualité CSS : code propre et organisé
  • Design : cohérence visuelle et adaptation au public
  • Responsive : fonctionnement sur tous les écrans
  • Accessibilité : utilisabilité pour tous
  • Code : clarté, commentaires, validation