Dans ce tuto Flexbox en vidéo
Dans ce cours en vidéo nous allons apprendre un des piliers de CSS, j'ai nommé Flexbox !
Fini les prises de têtes lors de la disposition d'éléments dans notre page Web.
Fini les heures perdues devant des Bugs créés par le positionnement avec Float ou autre "hack" désastreux...
Au programme de ce tuto positionnement CSS avec Flexbox
- On va apprendre ensemble chaque concept et propriété de Flexbox,
- Puis, on va directement le mettre en pratique dans un projet très sympa et formateur de site de réservation d'hôtel en ligne !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions sur ce cours.
Bonne découverte de Flexbox et bonne mise en pratique !
Table des matières de cette formation CSS (durée : 1h12m)
-
Introduction
- Introduction au cours gratuit 00:00:47
-
Tour d'horizon de Flexbox et ses propriétés
- Vue d'ensemble de Flexbox gratuit 00:02:18
- Les principales propriétés du Container 00:09:02
- Propriétés pour les flex items 00:04:31
- Fin du tour d'horizon des propriétés 00:02:05
-
Projet avec Flexbox
- Vue d'ensemble et début de projet 00:06:22
- Mise en place du style du header (CSS) 00:09:37
- Partie HTML de la Navigation 00:02:22
- Partie CSS de la navigation 00:04:52
- Titre Hôtel, HTML 00:01:59
- Partie Hôtel, CSS 00:02:41
- Partie description, HTML 00:02:39
- Partie Description, CSS 00:07:05
- Partie Photos, HTML 00:01:26
- Partie Photos, CSS 00:01:43
- Partie 1 médias Queries 00:05:33
- Partie 2 Médias Queries et fin ! 00:06:58
- Fichiers sourcestélécharger
- Certificat
Formateur : Enzo Ustariz
-
Très bon tuto. Il faut bien lire la doc avant de commencer sous peine de ne pas voir ses svg à l'ecran. Quand on est trop speed ça marche pas. Petit soucis avec la définition du font-size pour le html en % dans le tuto et en px dans l'index fourni. Ca marche mieux en px. A voir. Enzo peut parraître un peu speed mais on avance bien quand même. Merci la pause. Un bon exercice pour le flex. Merci Enzo.
-
Très bonne pédagogie du formateur avec des exercices pas à pas pour terminer par un beau projet. J'ai l'impression de progresser à chaque formation d'Enzo que je suis (la 3e déjà !). Merci Enzo pour ce vrai partage de connaissance ! J'ai plus de mal avec les medias querry mais c'est sans doute normal quand on débute.
-
Excellent tuto. Une belle dose de nouvelles connaissances ; c'est un vrai plaisir même si, quelques fois certaines subtilités m'échappent. Un grand merci pour tout ce partage.
-
Avec quelle version de logiciel ce tuto est-il compatible ?CSS 3
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissés