Files

T

Matthieu Reynier 68131ec708 Corrige le nom du projet dans le README et retire la grille d'evaluation

Remplace les references ProjectMillions par stagiaire et supprime la
section evaluation (le projet est pour le fun).

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

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

5.7 KiB

Raw 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 Blame History