Le Vanillier : site d'un restaurant

README.md · 2.3 Ko

# Le Vanillier (site d'un restaurant)

## Cas d'usage
Un restaurant fictif d'Antalaha veut un site pour montrer son menu, ses
horaires, quelques images, permettre de réserver et répondre aux questions
courantes. Tout tient sur une page, avec une barre de navigation par ancres.
Aucun JavaScript.

## Arborescence
```
html-restaurant/
├── index.html          page unique : en-tête, menu, horaires, galerie, réservation, FAQ
├── css/
│   ├── variables.css   variables CSS (couleurs, espacements, polices), chargé en premier
│   └── style.css       toutes les règles, organisées par section
├── medias/             5 illustrations SVG paysage (baie, vanille, plage, ville)
├── site.json           métadonnées pour le portail
└── README.md           ce fichier
```

## Notions abordées
- Navigation par ancres (`href="#menu"` vers `id="menu"`), `scroll-behavior`, `scroll-padding-top`
- Liste de description `dl` / `dt` / `dd` pour un menu
- Tableau accessible : `caption`, `thead`, `tbody`, `th scope`, `colspan`
- `figure` / `figcaption`, `loading="lazy"`, `aspect-ratio`, `object-fit`
- Formulaire : `label for`, types `text` `tel` `date` `time` `number`, `select`, `textarea`, `required`, `min`/`max`
- Pourquoi ce formulaire ne s'envoie nulle part (commentaire dans `index.html`)
- `details` / `summary` : FAQ sans JavaScript
- Variables CSS (`:root`, `var()`, `calc()`)
- CSS Grid (`grid-template-columns`, `auto-fit` + `minmax`) et Flexbox (`flex-wrap`, `flex: 1 1 10rem`)
- En-tête collant (`position: sticky`), fond en dégradé + image
- Media queries mobile d'abord, `prefers-reduced-motion`, `:focus-visible`

## Idées d'exercices
1. Changer `--couleur-principale` dans `variables.css` et observer tout le site.
2. Ajouter une catégorie « Boissons » dans le menu.
3. Ajouter une ligne au tableau d'horaires (ex. jours fériés).
4. Ajouter une question dans la FAQ ; ouvrir la première par défaut avec l'attribut `open`.
5. Ajouter un champ « Adresse e-mail » (`type="email"`).
6. Passer la galerie à trois colonnes fixes avec `grid-template-columns: repeat(3, 1fr)`, puis revenir à `auto-fit`.
7. Défi : créer un mode sombre en redéfinissant les variables dans `@media (prefers-color-scheme: dark)` (voir le site « Antalaha Propre »).