Ce projet consiste à appliquer du style CSS au portefeuille que nous avons créé lors du dernier point de contrôle. L’objectif est d’améliorer l’apparence visuelle du site à l’aide de règles CSS modernes.
- Créer un fichier CSS externe (
styles.css) - Lier ce fichier au fichier HTML principal
- Styliser la barre de navigation pour qu’elle s’affiche en ligne
- Appliquer la police Roboto à l’ensemble du site
- Ajouter des classes CSS aux éléments HTML pour faciliter la mise en forme
-
Création du fichier
styles.css- Toutes les règles CSS sont désormais centralisées dans ce fichier.
-
Lien entre HTML et CSS
- Ajout de la balise suivante dans la section
<head>du fichier HTML :<link rel="stylesheet" href="styles.css">
- Ajout de la balise suivante dans la section
-
Affichage en ligne de la barre de navigation
- Exemple de règle CSS :
nav ul { display: flex; gap: 20px; list-style: none; }
- Exemple de règle CSS :
-
Application de la police Roboto
- Import de la police via Google Fonts :
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
- Application dans le CSS :
body { font-family: 'Roboto', sans-serif; }
- Import de la police via Google Fonts :
-
Ajout d’attributs de classes dans le HTML
- Exemple :
<nav class="navbar"> <ul class="nav-list"> <li class="nav-item"><a href="#">Accueil</a></li> <li class="nav-item"><a href="#">Projets</a></li> <li class="nav-item"><a href="#">Contact</a></li> </ul> </nav>
- Exemple :
/mon-portefeuille │ ├── index.html ├── styles.css └── README.md
Un site portfolio avec une navigation horizontale, une typographie moderne (Roboto), et une structure HTML propre avec des classes bien nommées pour faciliter les futures améliorations.
- Ajouter des animations ou effets au survol
- Rendre le site responsive avec des media queries
- Ajouter des sections supplémentaires (projets, compétences, etc.)