HTML structure le contenu, CSS le met en forme. Maîtrise des balises sémantiques, Flexbox, Grid, responsive design, animations et bonnes pratiques pour créer des interfaces web modernes et accessibles.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Description page pour SEO">
<title>Titre de la Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- En-tête principal -->
<header>
<nav>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Contenu principal -->
<main>
<article>
<header>
<h1>Titre de l'Article</h1>
<p><time datetime="2025-10-03">3 octobre 2025</time></p>
</header>
<section>
<h2>Introduction</h2>
<p>Contenu de l'article...</p>
</section>
<aside>
<p>Information complémentaire</p>
</aside>
</article>
</main>
<!-- Pied de page -->
<footer>
<p>© 2025 Mon Site</p>
</footer>
<script src="script.js"></script>
</body>
</html>| Balise | Usage |
|---|---|
<header> |
En-tête de page ou section |
<nav> |
Navigation principale |
<main> |
Contenu principal (unique) |
<article> |
Contenu indépendant (blog post, produit) |
<section> |
Section thématique |
<aside> |
Contenu périphérique (sidebar) |
<footer> |
Pied de page |
<figure> <figcaption> |
Image avec légende |
<form action="/submit" method="POST">
<!-- Texte -->
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" required>
<!-- Email avec validation -->
<label for="email">Email :</label>
<input type="email" id="email" name="email" required>
<!-- Mot de passe -->
<label for="password">Mot de passe :</label>
<input type="password" id="password" name="password"
minlength="8" required>
<!-- Nombre -->
<label for="age">Âge :</label>
<input type="number" id="age" name="age"
min="18" max="120">
<!-- Date -->
<label for="date">Date de naissance :</label>
<input type="date" id="date" name="date">
<!-- Téléphone -->
<input type="tel" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<!-- URL -->
<input type="url" name="website">
<!-- Checkbox -->
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Recevoir newsletter</label>
<!-- Radio buttons -->
<input type="radio" id="homme" name="genre" value="homme">
<label for="homme">Homme</label>
<input type="radio" id="femme" name="genre" value="femme">
<label for="femme">Femme</label>
<!-- Select -->
<label for="pays">Pays :</label>
<select id="pays" name="pays">
<option value="">-- Choisir --</option>
<option value="ch">Suisse</option>
<option value="fr">France</option>
</select>
<!-- Textarea -->
<label for="message">Message :</label>
<textarea id="message" name="message" rows="4"></textarea>
<!-- Fichier -->
<input type="file" name="photo" accept="image/*">
<button type="submit">Envoyer</button>
</form>/* Sélecteurs */
element { } /* Toutes les balises element */
.classe { } /* Classe */
#id { } /* ID (unique) */
element.classe { } /* Element avec classe */
element, autre { } /* Plusieurs éléments */
parent enfant { } /* Descendance */
parent > enfant { } /* Enfant direct */
element + suivant { } /* Adjacent */
/* Pseudo-classes */
a:hover { } /* Survol */
input:focus { } /* Focus */
li:first-child { } /* Premier enfant */
li:last-child { } /* Dernier enfant */
li:nth-child(2n) { } /* Enfants pairs */
/* Pseudo-éléments */
p::before { content: "→ "; }
p::after { content: " ←"; }
p::first-line { }
/* Propriétés communes */
color: #6366F1;
background-color: #F0F0F0;
font-size: 16px;
font-weight: bold;
text-align: center;
margin: 10px; /* Extérieur */
padding: 15px; /* Intérieur */
border: 2px solid #333;
border-radius: 8px;
width: 100%;
height: 200px;
display: block;
position: relative;
┌────────────────────────────────────┐
│ MARGIN (extérieur) │
│ ┌──────────────────────────────┐ │
│ │ BORDER (bordure) │ │
│ │ ┌────────────────────────┐ │ │
│ │ │ PADDING (intérieur) │ │ │
│ │ │ ┌──────────────────┐ │ │ │
│ │ │ │ CONTENT │ │ │ │
│ │ │ │ (contenu) │ │ │ │
│ │ │ └──────────────────┘ │ │ │
│ │ └────────────────────────┘ │ │
│ └──────────────────────────────┘ │
└────────────────────────────────────┘
/* Notation complète */
margin: 10px 20px 10px 20px; /* haut droite bas gauche */
margin: 10px 20px; /* haut/bas droite/gauche */
margin: 10px; /* tous côtés */
/* Notation individuelle */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* Centrer horizontalement */
margin: 0 auto;Flexbox permet d'aligner et distribuer des éléments facilement, idéal pour les layouts modernes.
/* Container flex */
.container {
display: flex;
/* Direction */
flex-direction: row; /* Horizontal (défaut) */
flex-direction: column; /* Vertical */
flex-direction: row-reverse; /* Horizontal inversé */
/* Alignement principal (axe principal) */
justify-content: flex-start; /* Début (défaut) */
justify-content: center; /* Centré */
justify-content: flex-end; /* Fin */
justify-content: space-between; /* Espacement entre */
justify-content: space-around; /* Espacement autour */
justify-content: space-evenly; /* Espacement égal */
/* Alignement transversal (axe croisé) */
align-items: stretch; /* Étirer (défaut) */
align-items: flex-start; /* Haut */
align-items: center; /* Centré */
align-items: flex-end; /* Bas */
/* Retour à la ligne */
flex-wrap: nowrap; /* Pas de wrap (défaut) */
flex-wrap: wrap; /* Wrap si besoin */
/* Gap entre éléments */
gap: 20px; /* Moderne */
}
/* Items flex */
.item {
flex: 1; /* Prend espace disponible */
flex-grow: 1; /* Peut grandir */
flex-shrink: 1; /* Peut rétrécir */
flex-basis: 200px; /* Taille de base */
align-self: center; /* Override align-items */
order: 2; /* Ordre d'affichage */
}/* Navigation horizontale centrée */
nav {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
}
nav ul {
display: flex;
gap: 30px;
list-style: none;
}
/* Cards en ligne */
.cards {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.card {
flex: 1 1 300px; /* Grandir, rétrécir, base 300px */
min-width: 300px;
}Grid permet de créer des layouts bidimensionnels complexes.
/* Container grid */
.container {
display: grid;
/* Définir colonnes */
grid-template-columns: 200px 1fr 200px; /* 3 colonnes */
grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive */
/* Définir lignes */
grid-template-rows: 100px auto 100px;
/* Gap */
gap: 20px;
row-gap: 10px;
column-gap: 20px;
}
/* Items grid */
.item {
/* Span sur plusieurs colonnes/lignes */
grid-column: 1 / 3; /* Colonnes 1 à 3 */
grid-column: span 2; /* Sur 2 colonnes */
grid-row: 1 / 3;
grid-row: span 2;
}
/* Template areas (nommées) */
.container {
grid-template-areas:
"header header header"
"sidebar main main"
"footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }/* Layout classique */
.page {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 60px 1fr 80px;
min-height: 100vh;
gap: 0;
}
.header {
grid-column: 1 / -1; /* Toute la largeur */
}
.sidebar {
grid-row: 2 / 3;
}
.main {
grid-row: 2 / 3;
}
.footer {
grid-column: 1 / -1;
}/* Mobile first */
.container {
width: 100%;
padding: 15px;
}
/* Tablette */
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
/* Desktop */
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Large desktop */
@media (min-width: 1280px) {
.container {
max-width: 1200px;
}
}
/* Points de rupture standards */
/* Mobile: < 768px */
/* Tablette: 768px - 1023px */
/* Desktop: 1024px - 1279px */
/* Large: >= 1280px *//* Unités absolues */
px /* Pixels */
/* Unités relatives */
% /* Pourcentage du parent */
em /* Relatif à la police du parent */
rem /* Relatif à la police racine (html) */
vw /* 1% largeur viewport */
vh /* 1% hauteur viewport */
vmin /* 1% plus petite dimension */
vmax /* 1% plus grande dimension */
/* Exemples */
font-size: 16px; /* Fixe */
font-size: 1rem; /* Relatif racine */
width: 50%; /* 50% parent */
width: 100vw; /* Toute largeur écran */
height: 100vh; /* Toute hauteur écran *//* Transition simple */
.button {
background: #6366F1;
transition: background 0.3s ease;
}
.button:hover {
background: #4F46E5;
}
/* Transitions multiples */
.card {
transform: scale(1);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}
/* Propriétés transition */
transition-property: all;
transition-duration: 0.3s;
transition-timing-function: ease; /* ease, linear, ease-in, ease-out */
transition-delay: 0.1s;/* Définir animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Utiliser */
.element {
animation: fadeIn 0.5s ease;
}
/* Animation complexe */
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.icon {
animation: pulse 2s infinite;
}
/* Propriétés animation */
animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease;
animation-delay: 0.5s;
animation-iteration-count: infinite;
animation-direction: alternate; /* normal, reverse, alternate */
animation-fill-mode: forwards; /* none, forwards, backwards, both *//* Définir variables */
:root {
--primary: #6366F1;
--secondary: #F59E0B;
--text: #1E293B;
--bg: #FFFFFF;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--radius: 8px;
--shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Utiliser */
.button {
background: var(--primary);
color: white;
padding: var(--space-md);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.button:hover {
background: var(--secondary);
}
/* Fallback */
color: var(--text, #000);Utiliser balises HTML5 sémantiques pour structure claire et SEO
Alt sur images, labels sur inputs, contrastes suffisants
Commencer par mobile, ajouter media queries pour desktop
CSS minifié, images optimisées, éviter @import
Nommage classes : .block__element--modifier
Centraliser couleurs, espacements, pour cohérence