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.

Commencer le guide

mon-projet-v1

<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

QUANTITÉ DE CODE

Il faut aussi assez de matière.

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.

60+

1.b

Lignes de CSS

Le CSS doit comporter au minimum 60 lignes, sans compter les lignes vides et sans compter les doublons.

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.

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.

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 { ... }

<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 + site

Tarifs – Suchy-Skate✓ titre propre à la page

Document 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>

HTML

<nav>
    <a>Accueil</a>
    <a>Tarifs</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.

É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.

03.e

ARCHITECTURE

Une page organisée comme un bâtiment.

<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.

CSS & LAYOUT

Fais travailler le navigateur, pas des hacks.

✕ 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.

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.

Construis un site
propre, solide et responsive.

Il faut aussi assez de matière.

Enfants directs du `body`

Lignes de CSS

Le projet avant même le navigateur.

Le HTML décrit ce que contient la page.

Une page organisée comme un bâtiment.

Fais travailler le navigateur, pas des hacks.

Ta checklist de survie.

Quantité & structure

Polices & HTML

Sémantique & CSS

Construis un sitepropre, solide et responsive.

Il faut aussi assez de matière.

Enfants directs du body

Lignes de CSS

Le projet avant même le navigateur.

Le HTML décrit ce que contient la page.

Une page organisée comme un bâtiment.

Fais travailler le navigateur, pas des hacks.

Ta checklist de survie.

Quantité & structure

Polices & HTML

Sémantique & CSS

Construis un site
propre, solide et responsive.

Enfants directs du `body`