Détails de la leçon
Description de la leçon
Dans cette leçon, nous allons voir comment styliser votre site web en fonction d'une maquette donnée. Nous commencerons par définir le fond couleur en modifiant notre classe header dans le CSS pour appliquer la couleur rouge (#D81C13). Ensuite, nous ajusterons les différents éléments comme le logo et les titres, en définissant les tailles de police et les couleurs appropriées pour correspondre à la maquette. Nous apprendrons également à ajouter des bordures, à centrer des éléments et à créer des effets de survol avec des bordures visibles. En outre, nous allons voir comment organiser notre menu de navigation pour qu'il soit aligné à droite et espacer les éléments par des marges pour une meilleure accessibilité.
Des techniques telles que l'utilisation des propriétés inline-block et position relative seront abordées pour finaliser l'alignement et la positionnement des icônes dans le logo. Enfin, nous verrons comment styliser les liens de navigation pour qu'ils réagissent correctement au survol de la souris.
Objectifs de cette leçon
Les objectifs de cette vidéo sont :
- Appliquer les styles de fond et de texte à différents éléments HTML
- Utiliser les bordures et les marges pour espacer et aligner les éléments
- Créer des effets de survol et des transitions CSS
- Comprendre l'utilisation des propriétés CSS telles que inline-block et position relative
- Organiser un menu de navigation de manière efficace
Prérequis pour cette leçon
Pour suivre cette vidéo, les prérequis sont :
- Connaître les bases du HTML et du CSS
- Savoir utiliser un éditeur de texte pour coder
- Comprendre les concepts fondamentaux des sélecteurs CSS et des propriétés de style
Métiers concernés
Les métiers et usages professionnels pour ce sujet incluent :
- Développeur Front-End
- Designer Web
- Intégrateur HTML/CSS
- Consultant en UX/UI Design
Alternatives et ressources
Comme alternatives, vous pouvez utiliser des frameworks CSS tels que Bootstrap ou Foundation, ou des outils de design comme Figma pour créer et styliser vos maquettes avant de les coder.