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>
This commit is contained in:
Matthieu Reynier
@@ -0,0 +1,2 @@
|
||||
.idea/
|
||||
*.iml
|
||||
@@ -0,0 +1,156 @@
|
||||
# 🚚 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 ! 🚀
|
||||
Reference in New Issue
Block a user