RM Fil_Rouge_Porto_Folio

Fil rouge — Création d’un Portfolio HTML5/CSS3

Objectif général

Construire pas à pas un site portfolio simple mais professionnel, qui servira de vitrine personnelle. À la fin, chaque stagiaire aura :

une page HTML5 sémantique,
mise en forme avec CSS3 moderne (Flex/Grid),
responsive,
incluant du texte, des images, des médias, un formulaire,
validée par les outils du W3C et conforme aux bonnes pratiques.

Partie 1 — Première page

Objectifs :

Comprendre la structure minimale d’un document HTML5.
Créer un squelette de page valide.

Consignes :

Créer un fichier index.html.
Ajouter la structure minimale :

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <title>Portfolio de Prénom Nom</title>
  </head>
  <body>
    <h1>Prénom Nom</h1>
    <p>Développeur web en formation.</p>
  </body>
</html>

Checklist :

Le doctype est présent.
L’attribut lang="fr" est utilisé.
<meta charset="utf-8"> est présent.

Partie 2 — Bases du HTML

Objectifs :

Utiliser des titres, paragraphes, listes, liens et images.

Consignes :

Ajouter trois sections : « À propos », « Projets », « Contact ».
Dans « Projets » :
- une liste de 2–3 projets avec <ul> ou <ol>.
- chaque projet a un lien <a>.
Ajouter une image de profil avec alt.

Code modèle :

<h2>À propos</h2>
<p>Je suis passionné par le développement web.</p>

<h2>Projets</h2>
<ul>
  <li><a href="#">Projet 1</a></li>
  <li><a href="#">Projet 2</a></li>
</ul>

<h2>Contact</h2>
<img src="assets/img/profil.jpg" alt="Photo de Prénom Nom">

Checklist :

Les titres suivent la hiérarchie (h1 > h2).
Les liens utilisent href.
L’image a un attribut alt.

Partie 3 — Structure sémantique

Objectifs :

Découvrir les balises sémantiques HTML5.

Consignes :

Encapsuler :
- <header> : nom + navigation <nav>.
- <main> : sections « À propos » + « Projets ».
- <aside> : une info secondaire (citation, hobby).
- <footer> : copyright.

Code modèle :

<header>
  <h1>Prénom Nom</h1>
  <nav>
    <a href="#apropos">À propos</a>
    <a href="#projets">Projets</a>
    <a href="#contact">Contact</a>
  </nav>
</header>
<main>
  <section id="apropos">…</section>
  <article id="projets">…</article>
</main>
<aside>Une citation favorite</aside>
<footer>&copy; 2025 Prénom Nom</footer>

Checklist :

Chaque zone utilise une balise adaptée (header, main, footer).
Navigation = <nav> avec liens internes.

Partie 4 — Métadonnées et ressources

Objectifs :

Enrichir l’en-tête <head> avec les métadonnées.

Consignes :

Ajouter :

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Portfolio de Prénom Nom, développeur web.">
<link rel="stylesheet" href="assets/css/style.css">

(Optionnel) favicon :

<link rel="icon" href="assets/img/favicon.ico">

Checklist :

Le viewport est défini.
Une description est présente.
La feuille de style externe est reliée.

Partie 5 — Introduction au CSS

Objectifs :

Appliquer les premiers styles.

Consignes :

Créer assets/css/style.css.
Ajouter :

body {
  font-family: system-ui, sans-serif;
  background: #f7f9fc;
  color: #222;
  margin: 0;
  padding: 1rem;
}
h1 {
  text-align: center;
  color: #204ecf;
}
.intro {
  font-style: italic;
}

Checklist :

CSS externe est bien chargé.
Fond, police et couleurs personnalisés.

Partie 6 — Mise en page moderne

Objectifs :

Organiser la page avec Flexbox ou Grid.
Rendre le site responsive.

Consignes :

Transformer le <main> en conteneur flex.
Placer « Projets » et l’<aside> en colonnes.
Ajouter un media query pour passer en une seule colonne sur mobile.

Code modèle :

main {
  display: flex;
  gap: 1rem;
}
#projets { flex: 1; }
aside { flex: 0 0 250px; }
@media (max-width: 800px) {
  main { flex-direction: column; }
}

Checklist :

Layout en colonnes sur grand écran.
Responsive : une colonne sur mobile.

Partie 7 — Médias et formulaires

Objectifs :

Ajouter des médias et un formulaire de contact.

Consignes :

Insérer une vidéo de présentation avec <iframe> (ex. YouTube).
Ajouter un audio <audio> (ex. un jingle).
Créer un formulaire :
- Champ Nom (text)
- Champ Email (email)
- Champ Message (textarea)
- Bouton Envoyer

Code modèle :

<h2>Contact</h2>
<form>
  <label for="nom">Nom</label>
  <input type="text" id="nom" name="nom" required>
  
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  
  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>
  
  <button type="submit">Envoyer</button>
</form>

Checklist :

Le formulaire a des label pour chaque champ.
Les champs essentiels sont required.
Les médias fonctionnent.

Partie 8 — Bonnes pratiques et outils

Objectifs :

Vérifier et optimiser le site.

Consignes :

Tester sur https://validator.w3.org/
Vérifier accessibilité :
- Images → alt
- Formulaires → label
- Navigation → aria-label si besoin
Supprimer balises obsolètes (<center>, <font>).
Utiliser les outils développeur (inspecteur + console) pour vérifier le responsive et les erreurs JS.

Checklist :

Code validé sans erreur.
Accessibilité respectée.
Pas de balises obsolètes.

Résultat final

Un portfolio HTML5/CSS3 responsive, contenant :

une présentation,
une liste de projets,
une image,
une navigation,
une vidéo et un audio,
un formulaire de contact,
un design clair avec CSS moderne,
validé par le W3C et conforme aux bonnes pratiques.