Cours HTML/CSS débutant — Module 5 : Responsive design et bonnes pratiques

Module 5 : Responsive design et bonnes pratiques

Dernier module : adapter votre site à toutes les tailles d'écran et adopter de bonnes pratiques.

La balise viewport

Indispensable pour un rendu correct sur mobile :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Les media queries

.conteneur {
  display: flex;
  flex-direction: row;
}

@media (max-width: 600px) {
  .conteneur {
    flex-direction: column;
  }
}

Ici, sur petit écran (moins de 600px), les éléments s'empilent verticalement au lieu d'être côte à côte.

Bonnes pratiques à retenir

Sémantique : utilisez <header>, <nav>, <main>, <footer> plutôt que des <div> partout.
Accessibilité : toujours remplir l'attribut alt des images, utiliser des contrastes suffisants.
Organisation : séparez HTML (structure) et CSS (style) dans des fichiers distincts.
Validation : testez votre code avec le validateur W3C.
Mobile first : concevez d'abord pour mobile, puis adaptez pour les grands écrans.

Projet final

Pour mettre en pratique tout le cours, construisez une page portfolio personnelle avec :

Un header avec navigation
Une section "À propos"
Une galerie de projets (liste ou grille)
Un footer avec liens de contact
Un design responsive (mobile + desktop)