Cours RechercherCtrl K

Mini-projets Projet 1

Ma page de présentation

Construire en trois étapes une vraie page personnelle : la structure en HTML, la mise en page en CSS, puis un peu d'interactivité en JavaScript.

1 h

À la fin de ce projet, tu sauras

  • Structurer une page complète avec header, nav, main, section et footer
  • Mettre en page le menu et les cartes avec Flexbox
  • Ajouter un bouton « mode sombre » en JavaScript

Ce que tu vas construire

Une page de présentation comme en ont beaucoup d'étudiants et de développeurs : un en-tête avec ton nom et un menu, une partie « À propos », tes projets sous forme de cartes, et un contact. Elle tient en trois fichiers :

  • index.html : le contenu et sa structure ;
  • style.css : l'apparence ;
  • script.js : ce qui réagit aux clics.

Les cours utilisés

Chaque étape repart du résultat attendu de la précédente : si tu bloques, la solution de l'étape te permet de continuer.

Astuce : les liens du menu pointent vers #apropos, #projets… Le # désigne un élément de la même page par son id : un clic fait défiler jusqu'à lui.

À retenir

  • Une page = trois fichiers : index.html (contenu), style.css (apparence), script.js (interactivité).
  • Structure sémantique : header, nav, main, section, article, footer.
  • Un lien href="#id" fait défiler jusqu'à l'élément qui a cet id.
  • Flexbox (display: flex + gap) aligne un menu ou des cartes.
  • JavaScript : querySelector, addEventListener, classList.toggle, textContent.

Voir la fiche de révision de cette leçon (à imprimer ou à relire avant un contrôle)

Étape 1 · La structure HTML

Facile

Dans index.html, complète la page :

  1. dans le <header>, un <nav> avec trois liens vers #apropos, #projets et #contact ;
  2. dans le <main>, trois <section> avec les id apropos, projets et contact, chacune avec un titre <h2> ;
  3. dans la section projets, une <div class="projets"> qui contient trois <article class="projet">, chacun avec un <h3> et un paragraphe ;
  4. dans la section contact, un lien mailto: vers une adresse e-mail.
Résultat

Consignes à réussir

  • À faire : Le menu nav contient 3 liens
  • À faire : Les liens visent #apropos, #projets et #contact
  • À faire : Trois sections avec les bons id
  • À faire : Chaque section a un titre h2
  • À faire : Trois cartes article.projet dans div.projets
  • À faire : Chaque carte a un titre h3
  • À faire : Un lien mailto: dans le contact
Toujours bloqué ? Voir une solution

index.html

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Léa Martin</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Léa Martin</h1>
    <nav>
      <a href="#apropos">À propos</a>
      <a href="#projets">Projets</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>
  <main>
    <section id="apropos">
      <h2>À propos</h2>
      <p>Étudiante en BTS SIO, j'aime créer des sites web.</p>
    </section>
    <section id="projets">
      <h2>Mes projets</h2>
      <div class="projets">
        <article class="projet">
          <h3>Mon portfolio</h3>
          <p>Le site que tu lis en ce moment.</p>
        </article>
        <article class="projet">
          <h3>Un livre d'or</h3>
          <p>En PHP, avec une base de données.</p>
        </article>
        <article class="projet">
          <h3>Un quiz</h3>
          <p>Un petit jeu en Python.</p>
        </article>
      </div>
    </section>
    <section id="contact">
      <h2>Contact</h2>
      <p><a href="mailto:lea@exemple.fr">lea@exemple.fr</a></p>
    </section>
  </main>
  <footer>
    <p>© 2026 Léa Martin</p>
  </footer>
</body>
</html>

Étape 2 · La mise en page CSS

Moyen

La structure est prête. Dans style.css :

  1. mets les liens du menu sur une ligne avec display: flex sur nav, espacés de 16px (gap), et en blanc ;
  2. centre le contenu : main a une largeur maximale de 800px et margin: 0 auto ;
  3. place les trois cartes côte à côte : display: flex et gap: 16px sur .projets ;
  4. donne à chaque .projet une bordure de 1px, des coins arrondis de 8px et un padding de 12px.
Résultat

Consignes à réussir

  • À faire : nav est en flex
  • À faire : Les liens du menu sont espacés de 16px
  • À faire : Les liens du menu sont blancs
  • À faire : main fait au plus 800px de large
  • À faire : Les cartes sont côte à côte
  • À faire : Une bordure de 1px sur les cartes
  • À faire : Des coins arrondis de 8px
  • À faire : Un padding de 12px
Toujours bloqué ? Voir une solution

style.css

body {
  font-family: sans-serif;
  margin: 0;
}

header {
  background: #1d2a4d;
  color: white;
  padding: 16px;
}

nav {
  display: flex;
  gap: 16px;
}

nav a {
  color: white;
}

main {
  max-width: 800px;
  margin: 0 auto;
  padding: 16px;
}

.projets {
  display: flex;
  gap: 16px;
}

.projet {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 12px;
}

Étape 3 · Le mode sombre en JavaScript

Pour aller plus loin

Un bouton #theme et un paragraphe #nb-projets ont été ajoutés à la page, et la classe .sombre à la feuille de style. Dans script.js :

  1. au clic sur #theme, bascule la classe sombre sur document.body ;
  2. compte les cartes .projet avec querySelectorAll(…).length et écris 3 projets dans #nb-projets avec textContent.

L'aperçu à droite montre la page : clique sur le bouton pour tester.

Console

Clique sur ▶ Exécuter (ou Ctrl + Entrée) pour lancer ton programme.

Consignes à réussir

  • À faire : Un écouteur de clic sur #theme
  • À faire : La classe sombre est basculée avec toggle
  • À faire : Les cartes sont comptées avec querySelectorAll
  • À faire : Pas de innerHTML
  • À faire : #nb-projets affiche « 3 projets » ▶ vérifié quand tu exécutes
  • À faire : Le bouton active puis désactive le mode sombre ▶ vérifié quand tu exécutes
Toujours bloqué ? Voir une solution

script.js

const bouton = document.querySelector("#theme");
bouton.addEventListener("click", () => {
  document.body.classList.toggle("sombre");
});

const nb = document.querySelectorAll(".projet").length;
document.querySelector("#nb-projets").textContent = `${nb} projets`;