30+
1.a
Enfants directs du body
Le body doit comporter au minimum 30 éléments enfants. Le but est de vérifier que le projet contient une véritable structure HTML.
PROJET WEB · GUIDE TECHNIQUE
Construis un site
propre, solide et responsive.
Les critères techniques expliqués avec des exemples concrets, des erreurs fréquentes et des solutions à réutiliser dans tes projets.
<main>
<section class="actualites">
<h2>Nos actualités</h2>
<article>
<h3>Nouvelle activité</h3>
<p>Découvrez notre projet.</p>
</article>
</section>
</main>✓ propre · lisible · sémantique
01
QUANTITÉ DE CODE
Il faut aussi assez de matière.
Enfants directs du
60+
1.b
Lignes de CSS
Le CSS doit comporter au minimum 60 lignes, sans compter les lignes vides et sans compter les doublons.
02
STRUCTURE & RENDU
Le projet avant même le navigateur.
Règle : minuscules, pas d’espace, pas de caractères spéciaux. Utilise - pour séparer les mots.
✕ Mauvaise arborescence
Mes Images
Page d'accueil.html
Photo été 2026.JPG
contact_formulaire.php
✓ Bonne arborescence
img
page-daccueil.html
photo-ete-2026.webp
contact-formulaire.php
Pourquoi ? Les espaces, majuscules et caractères spéciaux peuvent créer des problèmes avec les URL et certains serveurs.
Règle : toutes les images sont dans img/. Une image plein écran peut facilement faire 200 à 900 Ko selon son contenu et son niveau de compression. Pour ce projet, 499 Ko maximum est la limite demandée : au-delà, c’est rarement nécessaire.
Il ne faut pas non plus essayer d'etre le plus proche possible de 499Ko. Certaines images en fullscreen peuvent être en très bonne qualité à 200Ko déjà.
Photo optimisée180 Ko
Photo plein écran420 Ko
Trop lourde1,8 Mo
Photos AVIF → WebP → JPG
Logos / pictos SVG → PNG
Plein écran max. 1920 px · 499 Ko
Le but n’est pas de rendre chaque image minuscule à tout prix : il faut trouver le meilleur compromis entre qualité visuelle et temps de chargement.
📁 suchy-skate-v1
├── index.html ← accueil
├── contact.html
├── tarifs.html
├── 📁 css
└── 📁 img
Lorsque le visiteur arrive à la racine du site, le serveur cherche généralement un fichier d’index, typiquement index.html.
📁www / suchy-skate-v1racine de votre dossier www sur eleves.mediamatique.ch
Le dossier du projet doit être placé directement à la racine de votre dossier www de votre espace eleves.mediamatique.ch.
Règle : charge au minimum deux polices, puis utilise-les réellement : une pour les titres, une autre pour les textes.
Une identité visuelle claire.
Les titres attirent l’œil. Le texte reste confortable à lire.
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@500;700&display=swap');
h1, h2, h3 {
font-family: 'Barlow', sans-serif;
font-weight: 700;
}Le @import doit être placé au début du fichier CSS. Charger une police sans l’utiliser n’a pas d’intérêt.
03
HTML
Le HTML décrit ce que contient la page.
Règle : laisse des lignes vides entre les grands blocs logiques.
✕ Compact
<header><nav>...</nav></header><main>...</main>✓ Aéré
<header>...</header>
<main>...</main>Règle : chaque enfant est décalé d’un niveau par rapport à son parent.
✕
<header>
<nav>
<a>Accueil</a>
</nav>
</header>✓
<header>
<nav>
<a>Accueil</a>
</nav>
</header>Règle : si tu reprends du CSS depuis Internet, indique son URL en commentaire.
✕
.mon-element { ... }✓
/* Source :
https://example.com/tutorial
*/
.mon-element { ... }Règle : Tout le code html a été passé au validator et ne présente aucune erreur.
✕
<p>Salut<p✓
<p>Salut<p>✕
<img src="img/skatepark.webp">✓
<img
src="img/skatepark.webp"
alt="Skatepark de Suchy">Le texte alternatif aide notamment les utilisateurs de lecteurs d’écran à comprendre les images. Une image purement décorative peut avoir alt="".
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Accueil – Suchy-Skate</title>
<link rel="icon" href="img/favicon.svg">
</head>Accueil – Suchy-Skate✓ page + siteTarifs – Suchy-Skate✓ titre propre à la pageDocument sans titre✕ trop générique
lang → langue du contenu
viewport → indispensable au responsive
title → page puis nom du site
favicon → cohérent avec le projet
✕ Classes et IDs peu parlants
<div class="rouge gros txt">
<div id="ct">
<div class="bx1">
<div id="img2">✓ Contenu décrit
<section class="presentation">
<div id="contact">
<article class="actualites">
<img id="logo-principal">Cette règle vaut pour les classes et les IDs. Évite les abréviations comme ct, txt, bx, sec ou img1. Décris le contenu, pas l’apparence.
✕ HTML surchargé
<nav class="menu">
<a class="menu-lien">Accueil</a>
<a class="menu-lien">Tarifs</a>
<a class="menu-lien">Contact</a>
</nav>✓ HTML minimal
<nav>
<a>Accueil</a>
<a>Tarifs</a>
<a>Contact</a>
</nav>CSS
nav > a {
text-decoration: none;
padding: .5rem;
}Avant de créer une classe, demande-toi si un sélecteur précis peut faire le travail : nav > a, section > h2, article p, etc.
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
Évite les <div> quand une balise sémantique existe. Les noms de classes et IDs doivent être lisibles et rester entièrement en français ou entièrement en anglais.
<body>
<header>...<section>...</section>...</header>
<main>
<section>...</section>
<section>...</section>
</main>
<footer>...<section>...</section>...</footer>
</body>Le body est décomposé en header, main et footer. Chacun contient une ou plusieurs sections.
<section id="actualites">
<div class="container">...</div>
</section>Une section peut avoir un id, occuper toute la largeur et recevoir du padding. C’est utile pour les couleurs et images de fond.
<section>
<div class="container">
<h2>Nos actualités</h2>
...
</div>
</section>
.container {
width: min(1180px, calc(100% - 2rem));
margin: 0 auto;
}
header .container {
/* exception si le header doit être différent */
}Tout le contenu est dans un .container pour limiter sa largeur sur desktop. Si un container doit être différent, utilise un sélecteur contextuel comme header .container.
04
CSS & LAYOUT
Fais travailler le navigateur de manière moderne,
pas de vieux hacks css.
✕ Erreur
body {
color: #1A1D56
background: white;
}✓ Valide
body {
color: #1A1D56;
background: white;
}✕ Répétition
#contact {
display: none;
}
#sociaux {
display: none;
}✓ Regroupement
#contact,
#sociaux {
display: none;
}📱CSS de basemobile
→
🖥️+ min-widthdesktop
/* Mobile : comportement par défaut */
nav {
display: flex;
flex-direction: column;
}
/* Puis seulement les adaptations */
@media screen and (min-width: 768px) {
nav {
flex-direction: row;
}
}Le CSS de base doit fonctionner sur petit écran. Les media queries ajoutent ensuite les adaptations nécessaires pour les écrans plus larges.
Utilise minimum 1 flex et 1 grid pour obtenir tout les points.
FLEXBOX
123
Idéal pour aligner des éléments sur un axe.
GRID
123456
Idéal pour une structure en lignes et colonnes.
/* Flexbox */
nav {
display: flex;
justify-content: space-between;
}
/* Grid */
.galerie {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}✕ Ancienne technique
.colonne {
float: left;
width: 50%;
}✓ Layout moderne
.conteneur {
display: flex;
}
.colonne {
flex: 1;
}✕ Contourner le layout
.element {
display: inline-block;
transform: translate(73px, 18px);
}✓ Corriger le layout
.conteneur {
display: flex;
justify-content: center;
align-items: center;
}Pas d'interdiction absolue : inline-block et translate sont de vraies fonctionnalités CSS. Elles ne doivent simplement pas être utilisées pour contourner un problème de mise en page. Si leur utilisation est justifiée, explique-la en commentaire.
✕ Construire toute la page avec absolute
.titre {
position: absolute;
left: 400px;
top: 250px;
}
.image {
position: absolute;
left: 700px;
top: 100px;
}✓ Cas justifié
/* Bouton toujours visible */
.bouton-retour {
position: fixed;
right: 1rem;
bottom: 1rem;
}Pour la mise en page normale, utilise Grid ou Flexbox. Absolute/fixed sont réservés aux éléments qui doivent réellement sortir du flux, comme un bouton de retour en haut ou un menu burger.