HTML & CSS pour Débutants — De zéro à première
page web
Guide express gratuit • SimDigi Shop
Apprenez à créer votre première page web en HTML et CSS, même si vous débutez totalement. Ce guide
contient des explications claires, des exemples de code et un mini-projet prêt à tester.
© SimDigi — 2025
Table des matières
1. 1. Qu'est-ce que HTML & CSS ?
2. 2. Préparer son environnement (VS Code, Live Server)
3. 3. Bases du HTML
4. 4. Bases du CSS
5. 5. Mise en page (Flexbox & Grid)
6. 6. Mini-projet pratique : Ma première page web
7. 7. Responsive design (mobile-friendly)
8. 8. Publier : GitHub Pages / Netlify
9. 9. Ressources & Bonus
1. Qu'est-ce que HTML & CSS ?
HTML (HyperText Markup Language) définit la structure d'une page web. CSS (Cascading Style Sheets)
gère l'apparence visuelle : couleurs, typographie, mise en page.
2. Préparer son environnement
Installation recommandée : Visual Studio Code + extension Live Server (pour recharger la page
automatiquement). Créez un dossier 'mon-site' et un fichier '[Link]'.
3. Bases du HTML
Structure de base : DOCTYPE, balises head/body, titres, paragraphes, images et liens. Exemple :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ma première page</title>
</head>
<body>
<h1>Bonjour, Web !</h1>
<p>Ceci est ma première page.</p>
</body>
</html>
4. Bases du CSS
Le CSS s'ajoute via une balise style dans le head ou un fichier séparé [Link]. Exemples : couleurs,
polices et box model.
body {
font-family: system-ui, Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 2rem;
}
h1 { font-size: clamp(1.8rem, 2.5vw, 2.6rem); color: #2563eb; }
5. Mise en page : Flexbox & Grid
Flexbox est idéal pour aligner et distribuer l'espace en une dimension. Grid est adapté aux mises en page
complexes en deux dimensions.
.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
6. Mini-projet pratique : Ma première page web
Copiez le code suivant dans un fichier '[Link]' et ouvrez-le avec Live Server.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0; padding: 0;
background: #f9fafb; color: #333;
}
header { background: #2563eb; color: white; padding: 2rem; text-align: center; }
.container { max-width: 800px; margin: 2rem auto; padding: 1rem; }
.btn { display: inline-block; padding: 0.7rem 1.2rem; background: #2563eb; color: white; text-
footer { text-align: center; padding: 1rem; background: #e5e7eb; margin-top: 2rem; }
</style>
</head>
<body>
<header>
<h1>Bienvenue sur ma page</h1>
<p>Mon tout premier site avec HTML & CSS</p>
</header>
<div class="container">
<h2>À propos de moi</h2>
<p>Je découvre le développement web et voici ma première réalisation !</p>
<a href="#" class="btn">Clique ici</a>
</div>
<footer>
<p>© 2025 Mon Premier Site</p>
</footer>
</body>
</html>
7. Responsive Design (Mobile-friendly)
Utilisez des media queries et des unités relatives (rem, vw). Exemple :
@media (max-width: 600px) {
.container { padding: 0.5rem; }
header { padding: 1rem; }
}
8. Publier gratuitement : GitHub Pages / Netlify
GitHub Pages : créer un repository public et activer Pages. Netlify : glisser-déposer le dossier 'dist' ou
connecter un repo Git.
Ressources & Bonus
Snippets réutilisables, checklists et quiz. Voici une checklist rapide :
• Un seul <h1> par page
• Images avec attribut alt
• Contraste texte/fond suffisant
• Formulaires accessibles
• Responsive vérifié (mobile et desktop)
Merci d'avoir lu ce guide ! Pour aller plus loin, découvre l'ebook complet et les fichiers sources sur SimDigi
Shop.
© SimDigi — SimDigi Shop
