Historique des conversations
Chargement...
Chapitre 14 : Projet CSS – Site vitrine
1. Objectif du projet
Dans ce projet, tu vas construire une page web complète et responsive pour un site vitrine simple : entête, section services, formulaire de contact et pied de page.
2. Structure HTML de base
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mon site vitrine</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Bienvenue</h1>
<nav>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>
<main>
<section id="services">
<h2>Nos Services</h2>
<p>Création de sites, maintenance, formation...</p>
</section>
<section id="contact">
<h2>Contact</h2>
<form>
<label for="email">Email :</label>
<input type="email" id="email" name="email">
<input type="submit" value="Envoyer">
</form>
</section>
</main>
<footer>
<p>© 2025 Mon site vitrine</p>
</footer>
</body>
</html>3. Style CSS de base
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background: #333;
color: white;
text-align: center;
padding: 1em;
}
nav a {
margin: 0 10px;
color: white;
text-decoration: none;
}
main {
padding: 20px;
}
form {
max-width: 400px;
margin: auto;
}4. Étapes recommandées
- Créer la structure HTML
- Appliquer un style de base au corps du site
- Styler le header et la navigation
- Mettre en page les sections avec Flexbox ou Grid
- Appliquer une mise en forme responsive avec des media queries
- Ajouter des animations simples (hover, transitions)
5. Bonus possibles
- Ajouter des icônes avec Font Awesome
- Créer un menu responsive pour mobile
- Ajouter une animation à l’apparition des sections
Conclusion
Ce projet final te permet de mettre en pratique tous les concepts vus jusqu’à présent. Tu peux maintenant créer une mise en page complète, lisible, responsive et agréable visuellement. Tu es prêt à passer à la suite : l’interactivité avec JavaScript !
Évaluation des acquis
Correction immédiate
Quiz du chapitre 14
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — En-tête (Header)
Atelier #1Fais en sorte que le logo et le menu soient aux deux extrémités de la barre de navigation.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
#2 — Section Hero
Atelier #2Centre le titre du site sur une image de fond qui couvre toute la zone.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.hero {
height: 500px;
background-image: url('hero.jpg');
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
#3 — Grille de services
Atelier #3Crée une grille de 3 cartes avec un espacement de 30px.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
#4 — Effet sur les cartes
Atelier #4Ajoute une ombre légère au survol d'une carte.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
.card:hover {
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
transition: 0.3s;
}
#5 — Footer simple
Atelier #5Donne au footer un fond gris foncé, du texte blanc et centre-le.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
footer {
background-color: #222;
color: #fff;
text-align: center;
padding: 20px 0;
}