Matthieu Reynier
b71c845b32
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>
157 lines
5.7 KiB
Markdown
157 lines
5.7 KiB
Markdown
# 🚚 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 :
|
|
|
|
1. Un **`<header>`** avec le nom/logo **FleetZen** et une **barre de navigation** (`<nav>`) avec des liens vers : Accueil, Services, Contact.
|
|
2. Un **`<main>`** avec le contenu propre à la page (au moins 2 sections).
|
|
3. Un **`<footer>`** avec les mentions de l'entreprise (copyright, année).
|
|
4. Une **mise en forme CSS** : couleurs cohérentes, police lisible, marges/espacements soignés.
|
|
5. Le site doit rester **lisible sur mobile et sur ordinateur** (utilisez `flexbox` ou `grid`).
|
|
6. 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
|
|
```bash
|
|
git clone <url-du-depot>
|
|
cd stagiaire
|
|
```
|
|
|
|
### 2. Créer SA branche (avant de coder !)
|
|
```bash
|
|
# 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.
|
|
```bash
|
|
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
|
|
```bash
|
|
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 :
|
|
```bash
|
|
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 :
|
|
```bash
|
|
git add <fichier-résolu>
|
|
git commit
|
|
```
|
|
|
|
---
|
|
|
|
## 🧭 Déroulé conseillé
|
|
|
|
1. **Ensemble** : créer `index.html` + `css/style.css` de base sur `main` (squelette commun, charte de couleurs).
|
|
2. **Chacun** : créer sa branche et développer sa page.
|
|
3. **Régulièrement** : commit + push.
|
|
4. **À la fin** : ouvrir vos PR, vous relire mutuellement, fusionner dans `main`.
|
|
5. **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
|
|
|
|
- [MDN — Apprendre le HTML](https://developer.mozilla.org/fr/docs/Learn/HTML)
|
|
- [MDN — Apprendre le CSS](https://developer.mozilla.org/fr/docs/Learn/CSS)
|
|
- [Flexbox en images (Flexbox Froggy)](https://flexboxfroggy.com/#fr)
|
|
- [CSS Grid (Grid Garden)](https://cssgridgarden.com/#fr)
|
|
- [Aide-mémoire Git](https://education.github.com/git-cheat-sheet-education.pdf)
|
|
|
|
---
|
|
|
|
Bon courage, et amusez-vous bien ! 🚀
|