Une page de projets est plus utile qu’un simple « Bonjour le web » : elle te donne un endroit où expliquer ce que tu as construit, montrer le code et partager un lien. Ici, tu vas créer une page complète avec un projet d’exemple. Remplace tous les textes d’exemple par des faits vrais avant de la publier.
Résultat attendu : une page lisible sur ordinateur et téléphone, avec une présentation, une fiche projet et un lien de contact. La publication avec GitHub Pages est facultative. Tu peux d’abord tout faire localement.
1. Prépare ton dossier
Crée un dossier ma-page-projets contenant deux fichiers : index.html et style.css. Garde-les au même niveau. Ouvre le dossier dans ton éditeur de texte.
Le fichier index.html contient le contenu et sa structure. Le fichier style.css règle son apparence. Un navigateur suffit pour vérifier le résultat : ouvre index.html depuis ton dossier.
2. Construis la page HTML
Copie le code ci-dessous dans index.html. Les textes entre crochets et l’adresse example.com sont des exemples à remplacer. Ne publie pas une fausse expérience ou une adresse privée.
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Une page pour présenter mes projets." />
<title>[Ton nom] — Projets</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="site-header">
<a class="brand" href="#accueil">[Ton nom]</a>
<nav aria-label="Navigation principale">
<a href="#projets">Projets</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main id="accueil">
<section class="intro" aria-labelledby="intro-title">
<p class="label">Ma page de projets</p>
<h1 id="intro-title">Bonjour, je suis [Ton nom].</h1>
<p>[Écris ici ce que tu apprends et ce que tu aimes construire.]</p>
</section>
<section class="projects" id="projets" aria-labelledby="projects-title">
<h2 id="projects-title">Un projet à découvrir</h2>
<article class="project">
<div>
<p class="label">Projet 01</p>
<h3>[Nom réel de ton projet]</h3>
<p>[Explique en deux phrases ce que fait ce projet et ce que tu as réalisé.]</p>
</div>
<a href="https://example.com/">Voir le projet ↗</a>
</article>
</section>
</main>
<footer id="contact">
<p>Une question sur mon projet ?</p>
<a href="mailto:bonjour@example.com">Me contacter</a>
</footer>
</body>
</html>Les balises <header>, <main> et <footer> indiquent le rôle des grandes zones. Les titres suivent l’ordre <h1>, <h2>, <h3>. Les liens #projets et #contact mènent aux sections qui portent ces identifiants.
3. Donne-lui une mise en page souple
Copie ce code dans style.css. Il commence par une seule colonne, puis passe à deux colonnes lorsque l’espace le permet. Tu peux modifier les couleurs après avoir vérifié la lisibilité du texte.
:root {
font-family: system-ui, sans-serif;
color: #1b1b1b;
background: #faf7f0;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #a32f12; outline-offset: 4px; }
.site-header, main, footer {
width: min(100% - 2rem, 68rem);
margin-inline: auto;
}
.site-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 1.5rem;
}
.brand { font-size: 1.35rem; font-weight: 800; text-decoration: none; }
nav { display: flex; gap: 1.25rem; }
.intro { padding-block: clamp(4rem, 10vw, 8rem); }
.label { color: #a32f12; font-size: .85rem; font-weight: 700; }
h1 { font-size: clamp(2.7rem, 8vw, 5.5rem); line-height: 1.05; margin: .8rem 0; }
.intro > p:last-child { font-size: 1.2rem; line-height: 1.55; max-width: 55ch; }
.projects { padding-bottom: 5rem; }
h2 { font-size: clamp(2rem, 5vw, 3rem); }
.project {
background: #fff;
border-top: 4px solid #ed683d;
display: grid;
gap: 2rem;
padding: clamp(1.5rem, 4vw, 3rem);
}
.project h3 { font-size: 1.7rem; margin: .5rem 0; }
.project p { line-height: 1.6; max-width: 50ch; }
.project a { align-self: end; font-weight: 700; }
footer { border-top: 1px solid #d9d1c6; padding-block: 2rem 4rem; }
@media (min-width: 44rem) {
.project { grid-template-columns: 1fr auto; }
}Enregistre les deux fichiers, puis recharge index.html dans ton navigateur. Réduis la largeur de la fenêtre : le texte doit rester lisible et la fiche projet doit passer sur une seule colonne. Le meta viewport évite qu’un téléphone réduise artificiellement toute la page ; la règle @media change la disposition quand il y a assez de place.
4. Remplace les exemples par ton vrai travail
Avant de partager la page, vérifie chaque élément :
- Remplace
[Ton nom]par le nom que tu choisis de rendre public. - Décris un projet que tu as réellement fait, même modeste : ce qu’il fait, ce que tu as réalisé et ce que tu as appris. N’ajoute pas de résultat chiffré que tu ne peux pas vérifier.
- Remplace
https://example.com/par l’URL réelle du projet ou de son dépôt. Si le projet n’est pas public, retire le lien « Voir le projet ». - Remplace
bonjour@example.compar une adresse que tu acceptes de publier, ou retire le bloc de contact. N’ajoute ni numéro privé ni autre donnée que tu ne veux pas exposer.
Tu peux maintenant ajouter une deuxième fiche <article> dans la section des projets. Garde un titre <h3> par projet et une description différente pour chacun.
5. Vérifie avant de publier
Teste la page avec la souris et la touche Tab. Les liens doivent être accessibles au clavier et le contour de focus visible. Clique sur « Projets » et « Contact » : la page doit aller au bon endroit. Vérifie aussi qu’aucun texte ne déborde lorsque la fenêtre est étroite.
Si la page n’a pas de style, confirme que style.css se trouve à côté de index.html et que le nom dans <link href="style.css"> correspond exactement au fichier. Si un lien mène au mauvais endroit, vérifie son href et l’id de la section cible.
6. Publie-la si tu veux la partager
Avec GitHub Free, GitHub Pages publie depuis un dépôt public. Crée un nouveau dépôt public consacré à cet exercice ; ne rends pas public un dépôt privé qui contient d’autres fichiers. N’y ajoute jamais de clé, mot de passe ou information que tu veux garder privée.
- Sur GitHub, crée un dépôt public et ajoute
index.htmletstyle.cssà sa racine. - Dans ce dépôt, ouvre Settings → Pages.
- Sous Build and deployment, choisis Deploy from a branch, puis la branche
mainet le dossier/(root). Enregistre. - Sur la même page, utilise Visit site pour ouvrir l’URL publiée. La mise en ligne peut prendre quelques minutes.
Le fichier index.html doit être à la racine sélectionnée. Comme style.css est lié par un chemin relatif, il doit rester à côté de lui. Si la page publiée affiche une erreur 404, vérifie la branche, le dossier source et la présence de index.html ; si le CSS manque, vérifie son nom et sa casse.
Pour aller plus loin : ajoute un vrai deuxième projet, puis explique en une phrase ce que tu as appris en le construisant. La page devient intéressante quand elle montre du travail réel, pas quand elle promet plus qu’elle ne contient.