Introduction à la formation HTLM5 et CSS3
Les bases de la mise en page
La mise en page avancée
Autres sélecteurs et propriétés
Détails de la leçon
Description de la leçon
Dans cette leçon, nous allons explorer la création d'une composition avec des images en positionnement absolu. Nous commencerons par la structure HTML de base, où nous ajouterons un lien vers un fichier CSS. Ensuite, nous placerons quatre images à l'intérieur d'une section, en utilisant des classes pour faciliter le style.
Nous apprendrons à ajouter une classe qui signifiera que le parent est en positionnement relatif. Ceci est crucial parce que les éléments en positionnement absolu se positionnent par rapport à leur parent. Ensuite, en utilisant le sélecteur nthChild, nous positionnerons chaque image différemment en utilisant les propriétés CSS top et left.
Enfin, nous verrons comment ajuster la hauteur de l'élément parent pour assurer que le contenu s'affiche correctement dans le navigateur. Cette leçon vous aidera à mieux comprendre le flux de positionnement en CSS et améliorer vos compétences en web design.
Objectifs de cette leçon
Les objectifs de cette vidéo sont de :
1. Comprendre le concept de positionnement absolu en CSS.
2. Apprendre à structurer le code HTML et CSS pour positionner des images.
3. Maîtriser l'utilisation des classes et des pseudo-éléments CSS pour le style.
Prérequis pour cette leçon
Pour suivre cette vidéo, il est recommandé de connaître les bases de HTML et CSS.
Métiers concernés
Les compétences abordées dans ce tutoriel sont particulièrement utiles pour des métiers tels que dévéloppeur front-end et designer web.
Alternatives et ressources
Comme alternatives, vous pouvez utiliser des frameworks CSS tels que Bootstrap ou des constructeurs visuels comme Webflow pour des mises en page plus complexes.
Questions & Réponses
Je m'abonne