## Cours numéro 3 : Création de Sites Web Réactifs avec Media Queries
### Objectifs
1. Comprendre le concept de Responsive Web Design (RWD).
2. Utiliser les Media Queries pour rendre les sites web adaptatifs.
3. Créer des mises en page réactives pour différents types d'appareils.
### Partie 1 : Introduction au Responsive Web Design (RWD)
#### Concept de Responsive Web Design
Le Responsive Web Design est une approche qui permet de créer des sites web qui
s'adaptent et se redimensionnent automatiquement sur différents appareils et
tailles d'écran.
#### Pourquoi Responsive ?
- Améliore l'expérience utilisateur sur mobile, tablette et desktop.
- Aide au référencement SEO (optimisation pour les moteurs de recherche).
- Réduit la nécessité de maintenir plusieurs versions de sites web.
### Partie 2 : Utilisation des Media Queries
#### Media Queries en CSS
Les Media Queries permettent de conditionner le style CSS en fonction des
caractéristiques du périphérique, telles que la largeur de l'écran.
Exemple de Media Query :
```css
/* Pour les écrans plus petits que 600px */
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
```
### Partie 3 : Création de Mises en Page Réactives
#### Exemple Pratique
Imaginons que nous voulons rendre une page web simple réactive.
#### HTML
```html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Réactive</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Site Web Réactif</h1>
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">À Propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section 1</h2>
<p>Ceci est une section de contenu.</p>
</section>
<section>
<h2>Section 2</h2>
<p>Ceci est une autre section de contenu.</p>
</section>
</main>
<footer>
<p>© 2024 Site Web Réactif</p>
</footer>
</body>
</html>
```
#### CSS de Base
```css
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
}
header {
background-color: #333;
color: white;
padding: 20px;
}
header h1 {
margin: 0;
}
nav ul {
list-style-type: none;
padding: 0;
display: flex;
justify-content: center;
}
nav li {
margin: 0 10px;
}
nav a {
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
section {
background-color: #e2e2e2;
margin-bottom: 20px;
padding: 20px;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
```
### Partie 4 : Ajout de Media Queries pour le Responsive Design
#### CSS avec Media Queries
```css
/* Styles par défaut */
/* Media Query pour les écrans jusqu'à 768px de large */
@media only screen and (max-width: 768px) {
header {
text-align: center;
}
nav ul {
flex-direction: column;
align-items: center;
}
nav li {
margin: 10px 0;
}
main {
padding: 10px;
}
}
/* Media Query pour les écrans jusqu'à 480px de large */
@media only screen and (max-width: 480px) {
header {
padding: 10px;
}
nav {
text-align: center;
}
nav ul {
flex-direction: column;
}
nav li {
margin: 5px 0;
}
section {
padding: 10px;
}
footer {
padding: 5px;
}
}
```
### Partie 5 : Résumé et Pratique
1. **Responsive Web Design** : Utilisez les Media Queries pour rendre votre site
web adaptable à différents appareils.
2. **Media Queries** : Définissez des points de rupture basés sur la taille de
l'écran pour ajuster les styles.
3. **Pratique et Exploration** : Testez votre site web sur différents appareils et
ajustez les Media Queries en conséquence.
#### Exercice Pratique
Modifiez les Media Queries dans l'exemple ci-dessus pour ajuster les styles à
d'autres points de rupture et testez comment votre site web réagit sur différents
appareils.
---
C'est tout pour le cours numéro 3 ! Continuez à explorer le Responsive Web Design
et les Media Queries pour améliorer l'expérience utilisateur de vos sites web. Le
prochain cours abordera des techniques avancées pour manipuler le contenu et les
interactions sur une page web.
