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

À partir de
27€ /mois
Je m'abonne à Elephorm

Description Programme Avis
4,5
89,00€ Je commande

À partir de
27€ /mois
Je m'abonne à Elephorm

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

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.

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.
Nous avons donc positionné les éléments de notre site sur la page. Nous allons maintenant pouvoir passer au premier élément HTML que nous rencontrons dans notre code. Alors en général nous commençons par le début de la page. Donc ici nous avons une div class header. Cette div là nous fait le fond gris que nous avons ici en haut de la page. Ce fond doit être rouge d'après la maquette. Donc nous allons mettre les bonnes valeurs dans notre code CSS puisque nous appelions ici une classe header. Nous allons donc mettre la couleur correspondante à la maquette qui est donc la valeur D81C13 que nous avons déjà saisie. Nous aurons également un petit espace entre les deux éléments de 10 pixels. Nous pouvons le laisser. Nous avons par la suite le logo que nous pouvons aussi designer correctement. Donc si j'enregistre déjà nous passons en rouge. Nous regardons notre code HTML. Ici nous avons le logo et puis à l'intérieur un h1. Nous avons la classe fa pour la fonte icône. Donc nous allons pouvoir styler la fonte icône et le h1 en blanc. Donc ici nous avions déjà un sélecteur pour pouvoir cibler le titre de niveau 1 à l'intérieur. Donc nous allons le passer en blanc puisque c'est la couleur de la police de caractère. Voilà nous l'avons donc en blanc. Qu'est ce que nous pouvons faire d'autre ? Le font size pour le titre est bien à 30 pixels sur cette maquette aussi. Nous avons le logo, le lien. Donc ici si nous retirons ces éléments qui ne sont pas forcément nécessaires pour la mise en forme de cette maquette. Nous avons juste le texte decoration à garder puisque regardez si nous le retirons nous apercevons effectivement que le texte est souligné. Donc il faut bien annuler le souligner du lien. Et puis nous pouvons passer après au design de la petite fourchette et du couteau. C'est à dire faire un cercle. Peut-être le réduire éventuellement un petit peu et l'espacer du logo. Donc allons-y. Ici nous allons donc utiliser comme sélecteur le logo logo i. Nous ciblons le i à l'intérieur, la balise i à l'intérieur de la classe logo. Nous allons donc définir la taille de la police de caractère font size 24 pixels. Le petit logo se réduit un petit peu. Nous allons également le pousser de 10 pixels pour lui laisser un petit peu d'espace. Nous allons également rajouter une bordure. Donc une bordure de 2 pixels. 2 pixels, solide. Regardez, si nous ne définissons pas la couleur de la bordure, elle hérite de la couleur de la police de caractère. Et là la police de caractère du h1 nous l'avons passé en blanc. Donc en l'occurrence on est parfaitement raccord. On s'aperçoit également que la bordure entoure bien l'élément i. Donc nous allons finalement lui donner une petite taille, une petite largeur de 40 pixels. Effectivement là on a quelque chose de plus concret. Nous pouvons aussi lui donner une hauteur. Comme cela nous aurons notre carré. Voilà. Il nous reste à lui mettre une bordure, un border radius pour pouvoir avoir un cercle. Voilà. Et la dernière chose éventuellement nous pouvons faire, donc la balise i part si nous regardons à l'inspecteur d'éléments. Ici nous voyons donc que cette balise a hérité de la propriété inline block. Donc c'est pour ça que la largeur et la hauteur fonctionnent puisque c'est un élément bloc mais également un élément en ligne. Donc il peut recevoir les marges et les margins et les padding correctement. Donc il peut aussi hériter la propriété verticale line qui va nous permettre pour les éléments inline block de l'aligner soit au top, donc effectivement là il est déjà aligné en haut de l'élément, soit au bottom. Donc là ça se met en bas ou également de le mettre en middle. Donc là vous voyez bien qu'il s'aligne correctement, parfaitement avec le logo, avec le texte simplement. Il nous reste à positionner correctement notre logo à l'intérieur, c'est à dire les petites fourchettes. Et si vous regardez la balise i, nous avons un élément before. Donc pour rappel c'est un élément qui est créé par la fontosome et comme contenu il nous appelle donc le code qui appelle le bon caractère dans la police de caractère. Et donc ici on s'aperçoit que c'est calé en haut à gauche donc nous pourrions peut-être de ce fait utiliser cibler ce cet élément before pour pouvoir le caler correctement au centre avec un décalage sur la position relative. C'est à dire que nous allons mettre notre élément en position relative et nous allons le décaler par le haut de quelques pixels. C'est à dire que ici si nous faisons 7 pixels, il descend, il sera à peu près centré et nous allons le décaler également par la gauche de 10 pixels. Ce qui fait que notre fourchette est bien centrée dans le rond. Donc nous avons terminé cette partie du logo. Nous pouvons passer au menu. Je vais refermer l'inspecteur d'éléments pour pouvoir voir notre navigation de façon complète. Donc notre menu pour rappel ici nous avons une classe menu sur la balise nav, une liste avec des li et nos liens à l'intérieur. Donc au niveau de notre menu nous lui avions donné une largeur. La ul nous avions retiré effectivement les margins et les paddings et enlevé l'espace blanc entre les éléments. Donc tout ça nous n'avons pas besoin de le changer. Nous pouvons retirer le background couleur qui n'est pas nécessaire ici sur cette navigation. Il nous reste à tout simplement mettre le texte en blanc qui est déjà en blanc. Pas de souligné. 16 pixels très bien de font size. Le padding nous allons fonctionner différemment sur cet élément parce que regardez ici la maquette. Quand nous avons un espace ici de 40 pixels, notre wrap est donc ici au bord. Donc nos éléments doivent être alignés à droite. Mais nous allons plutôt espacer nos éléments par une marge à gauche de 40 pixels pour que notre élément ici puisse être cliquable et qu'entre les deux nous avons une zone neutre non cliquable. Et si vous remarquez bien au survol nous aurons besoin de créer une bordure. Donc allons-y. Ici nous allons changer le padding de nos éléments en lui mettant 5 pixels en haut et en bas et 0 pixels à droite et à gauche. Nous allons également mettre la marge à gauche margin left de 40 pixels. Notre élément est déjà un élément bloc donc c'est parfait et nous allons rajouter une bordure. C'est à dire que ici nous avons bien notre zone cliquable. Nous allons rajouter une bordure déjà à l'état normal du lien. Sinon nous aurons un petit décalage qui va se faire au survol de la souris. Je m'explique. Ici nous allons tout simplement donner la couleur du fond de notre navigation comme ça cette bordure est donc invisible. Et au hover nous allons effectivement demander à ne pas avoir de fond de couleur. Retirons ce fond de couleur. Retirons le texte et nous allons lui demander d'avoir tout simplement la même bordure ici sauf que la couleur n'est pas tout à fait blanche. On va plutôt lui donner une couleur un petit peu rouge mais beaucoup plus claire. Donc ça va être F99, F94, 8 et un F. Ici nous allons passer notre souris. Vous remarquez que nous avons bien au survol notre petite bordure qui apparaît et nous avons l'état courant de notre navigation à changer. C'est à dire nous allons retirer également le background color et ici nous allons tout simplement mettre notre couleur blanche. Voilà ici notre navigation est donc terminée.

Programme détaillé de la formation

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 3 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 3 years
Commentaire
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !
Nos dernières formations XHTML/CSS
  • Créer un site web avec HTML/CSS
    Découvrir
    Avant d'apprendre à développer et mettre en ligne votre propre site Internet, il est important de bien connaître les bases du HTML et du CSS. Dans cette formation en vidéo et cours en ligne, vous découvrez ce qu'est le HTML et CSS ? Le fonctionnement des sites web ainsi que la structure d'une page HTML.  Vous êtes guider pas à pas pour apprendre à intégrer des images, de l'audio et des vidéo. Vous apprenez à gérer et ajuster les polices en CSS, à comprendre la structure du CSS, les tableaux, boutons et formulaires en CSS.  Vous suivez la méthodologie de mise en page CSS et à styliser une page web avec le CSS. Formation pratique vous créez et stylisez les éléments principaux d'un site web avant de mettre en ligne et indexer un site, d'ajouter des éléments graphiques en CSS et d'animer un site en CSS
    16h20 14 leçons
  • Apprendre HTML 5 - Les fondamentaux
    Découvrir
    Maîtriser les fondamentaux du language HTML5.
    5h11 101 leçons 3,67 / 5
  • Maîtriser Materialize CSS - Le framework pour le Material Design
    Découvrir
    Maîtriser le framework Materialize CSS pour faire du Material Design
    2h22 20 leçons
  • Maîtrisez les Flexbox CSS - La mise en page responsive
    Découvrir
    Maîtriser la mise en page grâce à la flexbox issue du CSS 3
    46min 9 leçons 4,33 / 5
  • Maîtrisez le préprocesseur CSS : SASS
    Découvrir
    Apprendre à coder avec le préprocesseur CSS SASS
    1h33 14 leçons 5 / 5