🍽️ EXERCICE BOOTCAMP : MENU DE RESTAURANT¶

Fichier de bases à récupérer via GitHub Classroom¶

Contexte¶

Vous êtes intégrateur Web pour une agence qui développe des sites pour des restaurants. Votre mission : créer la section "Menu" d'un site de restaurant en HTML et CSS.

Objectifs d'apprentissage¶

Réviser la structure HTML sémantique
Pratiquer le modèle de boîte CSS (padding, margin, border)
Comprendre la spécificité CSS (quelle règle gagne?)
Appliquer une nomenclature cohérente (BEM recommandé)
Créer une mise en page lisible et professionnelle

Ce que vous devez créer¶

Un menu de restaurant qui contient :

Structure minimale obligatoire :¶

Un titre principal pour le menu
3 catégories minimum (ex: Entrées, Plats principaux, Desserts)
Au moins 3 items par catégorie (9 items minimum au total)
Pour chaque item :
- Nom du plat
- Description courte
- Prix
Au moins 2 items avec un badge "POPULAIRE" ou "VÉGÉ" ou "NOUVEAU"

Exigences techniques¶

HTML¶

Structure HTML5 valide (doctype, head, body)
Balises sémantiques (<section>, <article>, <header>, etc.)
Listes utilisées pour les items (ul/li ou ol/li)
Classes CSS cohérentes (BEM recommandé)
Code bien indenté
Fichier externe style.css (pas de CSS inline ou internal)

CSS¶

CSS externe uniquement (fichier style.css)
Modèle de boîte maîtrisé (padding, margin, border)
Typographie lisible et hiérarchisée :
- Titre principal plus grand
- Titres de catégories moyens
- Noms de plats en gras
- Descriptions plus petites et en gris
Prix alignés à droite
Badges stylisés avec couleur de fond et border-radius
Séparateurs visuels entre les catégories (border ou margin)
Spécificité CSS : utiliser des sélecteurs variés (balise, classe, descendant)
Au moins un état :hover (sur les items par exemple)

Contraintes de design¶

Largeur maximale du menu : 800px
Menu centré sur la page
Palette de couleurs cohérente (3-4 couleurs maximum) Coolors
Police lisible (Google Fonts recommandé)
Pas d'images requises (optionnel si vous voulez en ajouter)

Exemple de rendu attendu¶

Ne pas copier-coller, utilisez-le comme inspiration seulement!

════════════════════════════════════════════════
            MENU DU RESTAURANT
════════════════════════════════════════════════

ENTRÉES
────────────────────────────────────────────────

Salade César                             12.99$
Laitue romaine, croûtons, parmesan, sauce césar

Soupe à l oignon gratinée                 8.99$
Oignons caramélisés, bouillon, fromage suisse

Tartare de saumon            [POPULAIRE] 14.99$
Saumon frais, avocat, câpres, citron

────────────────────────────────────────────────

PLATS PRINCIPAUX
────────────────────────────────────────────────

Steak frites                 [POPULAIRE] 24.99$
8oz AAA, sauce au poivre, frites maison

Saumon grillé                            22.99$
Légumes de saison, riz basmati, beurre citronné

Risotto aux champignons         [VÉGÉ]   18.99$
Champignons sauvages, parmesan, truffe

────────────────────────────────────────────────

DESSERTS
────────────────────────────────────────────────

Crème brûlée                 [POPULAIRE]  7.99$
Vanille de Madagascar, sucre caramélisé

Tarte au citron                           6.99$
Meringuée, zeste de citron frais

Fondant au chocolat                       8.99$
Chocolat noir 70%, crème anglaise

════════════════════════════════════════════════

Structure de fichiers attendue¶

menu-restaurant/
├── index.html
├── style.css
└── README.md

Étapes suggérées¶

1. Structure HTML (20 min)¶

Créer la structure de base
Ajouter titre principal
Créer les 3 sections de catégories
Ajouter les items avec listes

2. CSS de base (10 min)¶

Styler le conteneur principal (largeur, centrage)
Typographie de base

3. Style des catégories (20 min)¶

Titres de catégories
Séparateurs visuels
Espacements

4. Style des items (25 min)¶

Layout nom/prix (flexbox ou float)
Descriptions
Badges

5. Finitions (10 min)¶

États hover
Vérifications finales
Validation HTML

6. Complétez le README (5 min)¶

Complétez le fichier README.md avec vos réflexions sur l'exercice

Critères d'évaluation (formatif)¶

Structure HTML valide et sémantique
CSS externe (fichier style.css, pas de styles en ligne dans les balises html)
Nomenclature COHÉRENTE dans tous les CSS (BEM ou autre)
Modèle de boîte bien appliqué
Typographie hiérarchisée et lisible
Prix alignés correctement
Badges stylisés (POPULAIRE, ÉGÉ, ou NOUVEAU)
Séparateurs visuels
Spécificité CSS démontrée
Code propre et indenté
Créativité et effort visuel

Ressources utiles¶

Outils et références externes

CSS Web 1

BEM

BEM Documentation

Documentation/résumé Web 1 pré 2025 :

📅 Remise¶

Date limite : Avant le cours 3 de la semaine prochaine (2, 4 février) Méthode : Commit et Push sur GitHub Classroom (via Github Desktop ou l'outil de Git intégré à VS Code)

Vérification avant remise :¶

HTML validé avec le validateur W3C
CSS externe uniquement (aucune style en ligne sur les balises HTML)
Fichiers bien nommés
Code indenté
Fichier README.md complété

Conseils¶

💡 Commencez simple, puis améliorez progressivement 💡 Testez régulièrement dans le navigateur 💡 Utilisez l'inspecteur pour déboguer 💡 Documentez vos choix avec des commentaires CSS 💡 Si vous êtes bloqué, cherchez d'abord par vous même, puis demandez de l'aide à l'enseignante ou aux autres étudiants

Exemples de restaurants (inspiration)¶

Vous pouvez vous inspirer de vrais restaurants ou inventer :

Restaurant italien
Bistro français
Sushi bar
Café brunch
Restaurant végétarien
Food truck mexicain
etc.

Choisissez un thème qui vous plaît! 🍕🍣🥗🍔