Démonstrations HTML & CSS

La Carte de Recette

15-20 minutes

Objectif : Maîtriser la structure sémantique HTML, l'utilisation des listes et l'intégration d'images.

<article class="recipe-card">
  <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" alt="Salade fraîche et colorée dans un bol blanc">
  
  <div class="recipe-content">
    <h2>Salade Estivale Rapide</h2>
    <p>Une recette simple, fraîche et parfaite pour un déjeuner léger.</p>
    
    <h3>Ingrédients</h3>
    <ul>
      <li>Laitue romaine</li>
      <li>Tomates cerises</li>
      <li>Concombre</li>
      <li>Vinaigrette</li>
    </ul>
    
    <h3>Préparation</h3>
    <ol>
      <li>Laver et couper les légumes.</li>
      <li>Mélanger dans un grand bol.</li>
      <li>Ajouter la vinaigrette et servir.</li>
    </ol>
  </div>
</article>

L'Usine à Boutons

10-15 minutes

Objectif : Comprendre et visualiser le Box Model (padding vs margin) et découvrir les pseudo-classes (:hover).

<a href="#" class="btn btn-primary">Bouton Primaire</a>
<a href="#" class="btn btn-secondary">Bouton Secondaire</a>

La Mise en Page Flexible

15 minutes

Objectif : Visualiser la différence fondamentale entre les unités px, %, et rem.

<div class="container">
  <div class="box box-px">Boîte en PX</div>
  <div class="box box-percent">Boîte en %</div>
  <div class="box box-rem">Boîte en REM</div>
</div>