CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Tutoriel de Design Web : Styliser avec HTML et CSS

Tutoriel de Design Web : Styliser avec HTML et CSS

En-tête du site
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Apprendre CSS 3
Revoir le teaser Je m'abonne
4,5
Transcription
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
4,5
89,00€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Mise en Forme et Styles CSS

Objectifs

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

Résumé

Ce tutoriel vous guide à travers les étapes principales pour styliser votre site web afin de correspondre à une maquette donnée, en utilisant HTML et CSS.

Description

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.

Voir plus

Questions - réponses

Quelle est la couleur du fond du header selon la maquette ?
La couleur du fond du header selon la maquette est rouge, correspondant au code couleur #D81C13.
Comment centrer une icône à l'intérieur d'un élément bloc ?
Pour centrer une icône à l'intérieur d'un élément bloc, on peut utiliser la propriété position relative sur l'élément parent et décaler l'icône avec des marges depuis le haut et la gauche.
Pourquoi faut-il initialiser la bordure à l'état normal d'un lien ?
Il est important d'initialiser la bordure à l'état normal d'un lien pour éviter des décalages visuels lors du survol, en créant une bordure invisible identique à celle apparente au survol.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 6 months
Commentaire
La formation est divisée en 90 modules sans lien entre eux et sans progression pédagogique. Il faut les réorganiser par thème pour donner plus de cohérence et donner de la progression pédagogique à la formation. Multiples fautes d'orthographe dans les textes.
henridjithat
Il y a 1 year
Commentaire
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 years
Commentaire
J'en suis arrivé au bout.. Un vrai marathon. Très longue formation, à mon avis c'est plutôt 30h de cours et non pas 15h.
Après c'est une formation hyper claire et détaillée. L'auteur a fait un panorama complêt sur le CSS3.
g.vanleynseele
Il y a 4 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !