Formation HTML & CSS - Devenez un As du Développement Web
Module 1 : Introduction à HTML
HTML (HyperText Markup Language) structure le contenu d'une page web.
Exemple :
<!DOCTYPE html>
<html>
<head><title>Page Test</title></head>
<body>
<h1>Titre</h1>
<p>Paragraphe</p>
</body>
</html>
Explications :
- <!DOCTYPE html> : déclaration du type de document (HTML5)
- <html> : balise racine
- <head> : contient les métadonnées
- <body> : contient le contenu visible
Formation HTML & CSS - Devenez un As du Développement Web
Module 2 : Structure avancée en HTML
HTML sémantique améliore l'accessibilité et la structure logique.
Balises : <header>, <nav>, <section>, <article>, <aside>, <footer>
Exemple :
<header>Mon site</header>
<nav><a href='#'>Accueil</a></nav>
<main><section><article>Contenu</article></section></main>
<footer>Pied</footer>
Formation HTML & CSS - Devenez un As du Développement Web
Module 3 : Introduction au CSS
CSS permet de styliser les balises HTML.
Exemple :
<style>
p { color: blue; font-size: 16px; }
</style>
Explications :
- color : définit la couleur du texte
- font-size : taille de police
Formation HTML & CSS - Devenez un As du Développement Web
Module 4 : Mise en forme CSS (box model)
Box Model : chaque élément HTML est une boîte composée de :
content, padding, border, margin
Exemple :
div {
margin: 10px;
padding: 20px;
border: 1px solid black;
Explications :
- margin : espace externe
- padding : espace interne
- border : bordure
Formation HTML & CSS - Devenez un As du Développement Web
Module 5 : Positionnement et Flexbox
Flexbox : système moderne d'alignement.
Exemple :
.container {
display: flex;
justify-content: space-between;
Explications :
- display: flex : active le mode flex
- justify-content : aligne horizontalement
Formation HTML & CSS - Devenez un As du Développement Web
Module 6 : CSS Grid Layout
Grid permet de créer des grilles complexes en 2D.
Exemple :
.container {
display: grid;
grid-template-columns: 1fr 1fr;
Explications :
- grid-template-columns : crée deux colonnes de taille égale
Formation HTML & CSS - Devenez un As du Développement Web
Module 7 : Formulaires HTML & CSS
Champs de formulaire :
<input>, <textarea>, <select>
Exemple :
<form>
<input type='text' placeholder='Votre nom'>
</form>
CSS :
input {
border: 1px solid #ccc;
padding: 10px;
Explication : styliser les champs pour les rendre lisibles et interactifs
Formation HTML & CSS - Devenez un As du Développement Web
Module 8 : Responsive Design & Media Queries
Design adaptable aux écrans.
Exemple :
@media (max-width: 600px) {
body {
background: lightgray;
Explication : si la largeur de l'écran est inférieure à 600px, appliquer un fond gris
Formation HTML & CSS - Devenez un As du Développement Web
Module 9 : Transitions et animations CSS
Apport d'interactivité visuelle.
Exemple :
.button {
transition: background 0.3s ease;
.button:hover {
background: blue;
Explication : le fond devient bleu avec une transition douce au survol
Formation HTML & CSS - Devenez un As du Développement Web
Module 10 : Projet final complet
Objectif : créer un site responsive avec HTML & CSS
Structure :
- Header avec logo et navigation
- Main avec section d'accueil et contenu
- Footer avec mentions légales
Utilisation combinée de Flexbox, Grid, Media Queries et styles avancés pour un rendu professionnel.
