Médiamatic

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

01

AVANT DE CODER

Un bon projet commence par une bonne base.

01

Organise

Des noms clairs, une arborescence logique et des fichiers légers.

02

Sémantise

Le HTML décrit le contenu. Le CSS s'occupe de son apparence.

03

Responsive

Commence par le mobile et adapte ensuite la mise en page aux grands écrans.

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.

✕ À éviter
Mes Images/
Page d'accueil.html
Photo été 2026.JPG
contact_formulaire.php
✓ À faire
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.

📁 suchy-skate-v1 nom du projet + -v1

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.

✕ Compact ≠ propre
<header><nav><a href="#">Accueil</a><a href="#">Contact</a></nav></header>
✓ Aéré + indenté
<header>
    <nav>
        <a href="#">Accueil</a>
        <a href="#">Contact</a>
    </nav>
</header>

Les lignes vides séparent les blocs logiques. Chaque enfant est décalé d’un niveau par rapport à son parent.

✕
<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>
</head>
lang → langue du contenu viewport → indispensable au responsive title → page puis nom du site favicon → cohérent avec le projet
✕ Présentation
<div class="rouge gros">
    ...
</div>
✓ Contenu
<section class="presentation">
    ...
</section>

Une classe doit rester pertinente même si le design change. « rouge » devient faux si demain le rouge devient bleu.

✕ Classes répétitives
<nav class="menu">
    <a class="menu-lien">Accueil</a>
    <a class="menu-lien">Tarifs</a>
    <a class="menu-lien">Contact</a>
</nav>
✓ Sélecteur CSS
<nav>
    <a>Accueil</a>
    <a>Tarifs</a>
    <a>Contact</a>
</nav>

nav > a {
    text-decoration: none;
}
<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.

04

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.

05

AVANT DE RENDRE

Ta checklist de survie.

PROGRESSION 0 / 25 vérifications

Structure

HTML

CSS & Layout