Introduction à Webflow
Fondamentaux de la construction de page
Comprendre les Propriétés d'Affichage et positionnement CSS
Stylisation et design responsive
Nomenclature et organisation
Projet Pratique : Recréation de la Landing Page d'OpenAI
Synthèse et récapitulatif
Détails de la leçon
Description de la leçon
La propriété CSS display est un élément crucial pour la structuration des pages Web. Elle permet de définir comment les éléments HTML sont disposés, facilitant ainsi la création de mises en page variées et dynamiques. Cette leçon se concentre sur quatre types principaux de display : block, flex, grid et none. Nous discuterons également des variantes inline telles que inline-block, inline-flex et inline-grid.
Les éléments display block occupent toute la largeur disponible de leur conteneur parent et se disposent verticalement. En créant des éléments de type block dans Webflow, comme des paragraphes ou des titres, vous remarquez qu'ils s'étendent pour occuper toute la largeur disponible.
L'outil display flex, ou flexbox, permet de créer des layouts dynamiques qui ajustent la disposition des éléments en fonction de l'espace disponible. Il est idéal pour aligner et justifier les éléments horizontalement ou verticalement.
Le display grid crée des mises en page structurées avec des lignes et des colonnes définies, permettant une disposition précise des éléments dans leurs cellules respectives.
Le display none retire complètement un élément du flux de la page, rendant cet élément invisible et non rendu.
Enfin, les éléments inline sont disposés comme du texte, dans le flux de ligne, et ne peuvent pas avoir de dimensions personnalisées, contrairement aux éléments inline-block, inline-flex et inline-grid qui combinent les propriétés des display block et flex/grid.
Objectifs de cette leçon
Les objectifs de cette vidéo sont d'enseigner les bases de la propriété CSS display et de montrer comment utiliser les différents types de display pour structurer vos pages Web de manière efficace et flexible grâce à Webflow.
Prérequis pour cette leçon
Avoir des connaissances de base en HTML et CSS est recommandé pour suivre cette vidéo de manière optimale.
Métiers concernés
Les compétences abordées dans cette vidéo sont utiles pour divers métiers du Web comme développeur front-end, concepteur Web et intégrateur HTML/CSS. Elles sont également pertinentes pour les concepteurs UI/UX travaillant sur les interfaces utilisateurs.
Alternatives et ressources
En plus de Webflow, d'autres outils de création de sites Web et d'éditeurs visuels comme Wix, Squarespace ou Figma peuvent être utilisés pour créer des mises en page dynamiques.
Questions & Réponses
Je m'abonne