Matthieu Reynier
27bae314fc
Enonce HTML/CSS/Git (README) et structure de depart (index.html, css/, pages/, assets/) pour le site vitrine FleetZen. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
6.1 KiB
🚚 Projet : Site vitrine "FleetZen" — Gestion de flotte
Bienvenue ! Ce projet est un exercice de prise en main de HTML, CSS et Git.
Vous allez construire, à deux, un petit site vitrine pour une entreprise fictive de gestion de flotte de véhicules (suivi GPS, entretien, optimisation de carburant, etc.). L'entreprise s'appelle FleetZen.
🎯 Objectif pédagogique : savoir structurer une page en HTML, la mettre en forme en CSS, et collaborer proprement avec Git (branches, commits, merge).
🚫 Aucun JavaScript n'est demandé. Concentrez-vous sur HTML + CSS uniquement.
📋 Ce que vous allez apprendre
- Structurer une page web avec du HTML sémantique (
header,nav,main,section,footer…) - Mettre en page et styliser avec du CSS (couleurs, typographie, espacements, flexbox/grid)
- Travailler à plusieurs avec Git : créer une branche, committer, pousser, ouvrir une Pull Request
- Gérer un conflit de merge (ça arrivera, c'est normal et formateur !)
🗂️ Structure attendue du projet
À la fin, le dépôt devra ressembler à ça :
ProjectMillions/
├── README.md
├── index.html ← page d'accueil (commune, à faire ensemble)
├── css/
│ └── style.css ← feuille de style partagée
├── pages/
│ ├── services.html ← page du Stagiaire 1
│ └── contact.html ← page du Stagiaire 2
└── assets/
└── images/ ← vos images / logos
💡 Vous pouvez ajouter d'autres dossiers/images si besoin, mais gardez cette base.
👥 Répartition du travail
Chacun développe une page du site, sur sa propre branche.
| Stagiaire | Page à développer | Branche Git | Contenu attendu |
|---|---|---|---|
| Stagiaire 1 | pages/services.html |
feature/page-services |
Présentation des services de FleetZen : suivi GPS temps réel, gestion de l'entretien, rapports de consommation. 3 "cartes" minimum. |
| Stagiaire 2 | pages/contact.html |
feature/page-contact |
Page de contact : coordonnées de l'entreprise, un formulaire HTML (nom, email, message — sans JS, juste le HTML/CSS), horaires. |
La page d'accueil index.html et le fichier css/style.css sont communs : démarrez-les ensemble avant de partir chacun sur votre branche.
✅ Cahier des charges (consignes communes)
Chaque page doit contenir :
- Un
<header>avec le nom/logo FleetZen et une barre de navigation (<nav>) avec des liens vers : Accueil, Services, Contact. - Un
<main>avec le contenu propre à la page (au moins 2 sections). - Un
<footer>avec les mentions de l'entreprise (copyright, année). - Une mise en forme CSS : couleurs cohérentes, police lisible, marges/espacements soignés.
- Le site doit rester lisible sur mobile et sur ordinateur (utilisez
flexboxougrid). - Du HTML valide et indenté proprement.
Contraintes techniques
- HTML5 (
<!DOCTYPE html>) - Encodage UTF-8 (
<meta charset="utf-8">) - Balise
<title>renseignée sur chaque page - Pas de JavaScript
- Les styles vont dans
css/style.css(pas destyle=""en ligne dans le HTML, sauf cas exceptionnel justifié)
🌿 Mode d'emploi Git (à suivre étape par étape)
1. Récupérer le projet
git clone <url-du-depot>
cd ProjectMillions
2. Créer SA branche (avant de coder !)
# Stagiaire 1
git checkout -b feature/page-services
# Stagiaire 2
git checkout -b feature/page-contact
3. Travailler et committer régulièrement
Faites des petits commits avec des messages clairs.
git add .
git commit -m "Ajout de la structure HTML de la page services"
📝 Bon message de commit = court, au présent, qui décrit ce que fait le commit. Exemples :
"Ajout du header et de la navigation","Mise en forme CSS des cartes de services".
4. Envoyer sa branche sur le dépôt distant
git push -u origin feature/page-services # adaptez le nom de votre branche
5. Ouvrir une Pull Request (PR)
Sur GitHub/GitLab, ouvrez une Pull Request de votre branche vers main.
Décrivez ce que vous avez fait. L'autre stagiaire (ou le tuteur) relit avant de fusionner.
6. Mettre à jour sa branche
Pour récupérer le travail fusionné par l'autre :
git checkout main
git pull
git checkout feature/ma-branche
git merge main
👉 Si Git signale un conflit, pas de panique : ouvrez le fichier, choisissez le bon contenu entre les marqueurs <<<<<<<, =======, >>>>>>>, puis :
git add <fichier-résolu>
git commit
🧭 Déroulé conseillé
- Ensemble : créer
index.html+css/style.cssde base surmain(squelette commun, charte de couleurs). - Chacun : créer sa branche et développer sa page.
- Régulièrement : commit + push.
- À la fin : ouvrir vos PR, vous relire mutuellement, fusionner dans
main. - Bonus : régler un conflit de merge proprement si vous en croisez un.
🏆 Critères d'évaluation
| Critère | Points |
|---|---|
| HTML sémantique et valide | ⭐⭐⭐ |
| CSS soigné et cohérent entre les pages | ⭐⭐⭐ |
| Navigation fonctionnelle entre les pages | ⭐⭐ |
| Bonne utilisation de Git (branche, commits clairs, PR) | ⭐⭐⭐ |
| Résolution d'un conflit de merge | ⭐ (bonus) |
| Site lisible sur mobile | ⭐⭐ |
🎁 Idées bonus (si vous avez fini)
- Ajouter un logo FleetZen (image dans
assets/images/) - Effet
:hoversur les boutons et liens de navigation - Une page supplémentaire "À propos" / "Tarifs"
- Rendre le menu de navigation identique et bien aligné sur toutes les pages
📚 Ressources utiles
- MDN — Apprendre le HTML
- MDN — Apprendre le CSS
- Flexbox en images (Flexbox Froggy)
- CSS Grid (Grid Garden)
- Aide-mémoire Git
Bon courage, et amusez-vous bien ! 🚀