Module 4Valider ta formation
Chapitre 7 sur 8
README, bonnes pratiques et projet final
README, bonnes pratiques, profil GitHub, GitHub Pages et projet final.
- ≈ 125 min
- 5 leçons
- 2 exercices
- TP
Module 4Valider ta formation
Chapitre 7 sur 8
README, bonnes pratiques, profil GitHub, GitHub Pages et projet final.
Objectifs
Avec ce chapitre, tu sauras…
Ton profil GitHub est souvent la première chose qu'un recruteur technique regarde. Des dépôts propres, avec un README clair et un historique lisible, montrent que tu sais travailler comme un professionnel.
Leçon 1
Le fichier README.md, à la racine du dépôt, est affiché automatiquement sur la page GitHub du projet. Il est écrit en Markdown.
# Mon CV en ligne
CV et portfolio d'Anas El Amrani, développeur web front-end junior.
**Voir le site :** https://anas.github.io/mon-cv/
## Technologies
- HTML5 sémantique et accessible
- CSS3 : Flexbox, Grid, responsive design
- Bootstrap 5 pour la version alternative
## Lancer le projet en local
1. Cloner le dépôt : `git clone https://github.com/anas/mon-cv.git`
2. Ouvrir `index.html` avec Live Server
## Captures
## Auteur
Anas El Amrani · [LinkedIn](https://www.linkedin.com/in/anas)Tableau: La syntaxe Markdown essentielle
| Markdown | Résultat |
|---|---|
# Titre, ## Sous-titre | titres de niveau 1, 2… |
**gras**, *italique* | gras, italique |
- élément | liste à puces |
1. élément | liste numérotée |
[texte](https://…) | lien |
 | image |
`code` | code en ligne |
| trois accents graves | bloc de code |
Leçon 2
| Préfixe | Usage | Exemple |
|---|---|---|
feat: | nouvelle fonctionnalité | feat: ajoute le mode sombre |
fix: | correction de bug | fix: corrige le menu mobile |
docs: | documentation | docs: complète le README |
Leçon 3
Leçon 4
index.html doit être à la racine du dépôt (ou dans un dossier docs/).https://ton-pseudo.github.io/nom-du-depot/ s'affiche en haut de la page.git push sur main republie le site automatiquement.Leçon 5
1Le README est écrit en…
2Un lien Markdown s'écrit…
3Le préfixe d'une correction de bug est…
4GitHub Pages publie le site à l'adresse…
5Il ne faut jamais…
6Un README de profil se met dans un dépôt nommé…
L'essentiel du chapitre
README.md en Markdown : présentation, lien en ligne, technologies, installation, captures.feat:, fix:, docs:), une branche par fonctionnalité, PR, pull avant push, pas de secrets, pas de --force sur une branche partagée.style: | mise en forme du code, sans changement de comportement | style: indente style.css |
refactor: | réorganisation du code | refactor: découpe le CSS en fichiers |
chore: | maintenance | chore: met à jour Bootstrap |
feat:, fix:, docs:) ;main : une branche par fonctionnalité, puis une pull request ;git pull avant de commencer et avant de pousser ;.gitignore dès le premier commit ;git push --force sur une branche partagée (--force-with-lease si vraiment nécessaire, sur ta propre branche) ;Tableau: Les préfixes Conventional Commits
Ton profil en un coup d'œil
Crée un dépôt public qui porte exactement ton pseudo (par exemple anas/anas) avec un README.md : GitHub l'affiche en haut de ton profil. Présente-toi, tes compétences et tes projets en quelques lignes.
Mettre un site en ligne gratuitement
Mettre ton CV (formations HTML, CSS et Bootstrap) sous Git et en ligne, avec un historique professionnel : un dépôt public mon-cv avec .gitignore et README.md complet ; au moins 10 commits aux messages clairs (Conventional Commits) ; au moins 3 branches de fonctionnalité fusionnées par pull request, dont une liée à une issue ; au moins un conflit résolu ; le site publié sur GitHub Pages, avec le lien dans le README et dans la description du dépôt.
Avant de rendre ton projet
git log --oneline --graph montre les branches fusionnéesmodif, fix ou update seulRéalise le projet final en respectant le cahier des charges et la check-list.
Écris le README de ton dépôt mon-cv : titre, description en une phrase, lien vers le site, liste des technologies, instructions pour lancer le projet, une capture d'écran et l'auteur.
Les causes habituelles : le fichier ne s'appelle pas exactement index.html (attention aux majuscules), il est dans un sous-dossier, ou les chemins de tes images et de ton CSS commencent par / (racine du domaine github.io, et non de ton projet). Utilise des chemins relatifs : css/style.css, images/photo.jpg.