Files

T

Matthieu Reynier b71c845b32 Site vitrine FleetZen - enonce HTML/CSS/Git pour stagiaires

Enonce du projet (README) et structure de depart : index.html, css/,
pages/ (services, contact), assets/. Pas de JavaScript.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-16 14:37:39 +02:00

5.7 KiB

Raw Permalink Blame History

🚚 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 :

stagiaire/
├── 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 flexbox ou grid).
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 de style="" 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 stagiaire

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.css de base sur main (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.

🎁 Idées bonus (si vous avez fini)

Ajouter un logo FleetZen (image dans assets/images/)
Effet :hover sur 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

Bon courage, et amusez-vous bien ! 🚀

5.7 KiB Raw Permalink Blame History