CATALOGUE Code & Data Formation XHTML/CSS Apprendre CSS 3 Mise en page avec Flexbox en HTML et CSS

Mise en page avec Flexbox en HTML et CSS

Positionnement des éléments avec flex
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

Les objectifs de cette vidéo sont de :
1. Comprendre les bases de Flexbox.
2. Apprendre à structurer une page web avec des éléments alignés horizontalement et verticalement.
3. Optimiser le code HTML et CSS pour une mise en page propre et maintenable.

Découvrez comment utiliser Flexbox pour créer une mise en page web avec HTML et CSS.

Dans cette leçon, nous aborderons l'utilisation de Flexbox pour organiser les éléments d'une page web de manière efficace. Nous partirons d'un exercice de base et ajouterons progressivement des éléments tels que des images, des articles, et des sections. Nous viserons à obtenir une structure de page complète avec un fond de couleur couvrant tout l'espace disponible, incluant un header, une navigation, un contenu principal et un pied de page.

Nous verrons comment insérer des images dans les articles, ajuster la disposition des titres, et utiliser Flexbox pour aligner les éléments horizontalement et verticalement. Nous apprendrons également à optimiser l'espace en réduisant le nombre de divs nécessaires et en centrant les éléments à l'intérieur d'un conteneur wrap. En utilisant les propriétés CSS telles que display: flex, align-items, et justify-content, nous structurerons notre code de manière propre et maintenable.

Les techniques présentées ici sont essentielles pour toute personne souhaitant maîtriser la création de mises en page responsives et professionnelles en HTML et CSS.

Voir plus
Questions réponses
Pourquoi utiliser Flexbox pour la mise en page d'un site web?
Flexbox permet une organisation plus flexible et dynamique des éléments sur une page, facilitant le développement de mises en page à la fois responsive et maintenables.
Quelle est la différence entre Flexbox et CSS Grid?
Flexbox est un module de mise en page unidimensionnel, gérant les alignements en ligne ou en colonne, tandis que CSS Grid est destiné à des mises en page bidimensionnelles, gérant les lignes et les colonnes simultanément.
Quel est l'avantage d'utiliser des classes CSS comme 'wrap' et 'flex'?
Utiliser des classes CSS comme 'wrap' et 'flex' permet de réutiliser des styles, de rendre le code plus propre et maintenable, et d'aligner et centrer les éléments facilement.

Programme détaillé

4 commentaires
4,5
4 votes
5
4
3
2
1
pierre.hiroux
Il y a 10 mois
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 an
Très bonne formation, étant débutant j'ai beaucoup appris.
yvan.vogel
Il y a 2 ans
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 ans
Cours très clair et très bien expliqué! Par contre il manque la moitié des fichiers de travail !