Flex
Détails de la leçon
Description de la leçon
Dans cette leçon, nous allons créer une page web en utilisant HTML et CSS Flexbox pour obtenir une mise en page similaire à une application mobile. Nous commencerons par définir un header et un footer qui resteront fixes respectivement en haut et en bas de la page. Ensuite, nous ajouterons un article avec beaucoup de texte pour permettre le scrolling du contenu.
Nous utiliserons les propriétés CSS suivantes : vh pour la hauteur de la section body, flex pour la disposition et space-between pour espacer les éléments. Enfin, nous verrons comment définir des propriétés comme background, height, et overflow pour styliser nos éléments HTML.
Objectifs de cette leçon
Les objectifs de cette vidéo sont :
- Apprendre à utiliser CSS Flexbox pour la mise en page.
- Comprendre comment fixer des éléments HTML en haut et en bas de la page.
- Savoir utiliser les unités de viewport (vh) pour la mise en page.
Prérequis pour cette leçon
Pour suivre cette vidéo, il est recommandé d’avoir une connaissance basique de HTML et CSS.
Métiers concernés
Cette technique est particulièrement utile pour les développeurs front-end, web designers et toute personne travaillant dans le développement web.
Alternatives et ressources
En alternative, vous pouvez utiliser Grid Layout pour des mises en page plus complexes ou les frameworks Bootstrap et Tailwind CSS pour des solutions plus rapides.
Questions & Réponses
Je m'abonne