Savoir utiliser Grid et FlexBox ensemble
ERROR
00:00
00:00

TUTO Savoir utiliser Grid et FlexBox ensemble

Carl Brison
35,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Dans cette formation en vidéo, nous allons apprendre la meilleure manière d'utiliser CSS Grid et Flexbox ensemble.
Ces 2 technologies vous permettent de gérer plus facilement l'intégration de pages web.
 

Au programme de ce tuto Savoir utiliser Grid et FlexBox ensemble

Dans la première partie de ce tuto, nous reverrons tous les grands principes de ces deux technologies issues de CSS 3.
Nous reverrons les principes de base de CSS Grid, ceux de Flexbox, mais aussi tout ce qui concerne la partie responsive d'une page web.

Après tout ces rappels théoriques, nous passerons à la pratique.
Je vous proposerai de travailler à partir d'une des pages web du site de Tuto.com en guise d'exemple.
Nous y appliquerons tous les principes que nous aurons appris au premier chapitre.

Le but étant de vous donner des habitudes de travail afin que vous puissiez appréhender la conception de pages web de façon autonome et professionnelle.

Enfin, je précise qu'il est fortement recommandé de connaître Grid et Flexbox avant de visualiser ce cours en ligne.
En cas de besoin, je mets à votre disposition deux liens menant directement à l'apprentissage de ces deux technologies:

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions. 
Les fichiers de travail sont fournis, ainsi qu'un QCM pour valider vos nouvelles compétences de développeur front-end

Bonne formation.

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Chapitre 1
Les principes théoriques
Chapitre 2
Exercice pratique
Chapitre 3
Conclusion

Plan détaillé du cours

Chapitre 1 : Les principes théoriques
56m40s
 
Leçon 1Le principe de base
Leçon 2Le HTML5
Leçon 3Les principes de base de Grid
Leçon 4Le CSS côté Grid
Leçon 5Le principe des medias queries
Leçon 6Le viewport
Leçon 7Mise en place du responsive
Leçon 8Les principes de base de FlexBox
Leçon 9Le CSS côté FlexBox
Chapitre 2 : Exercice pratique
2h01m
 
Leçon 1Présentation du job
Leçon 2Définition des zones
Leçon 3Mise en page avec Grid
Leçon 4Mise en place des medias queries
Leçon 5Mise en place du viewport
Leçon 6Mise en place du header 1/3
Leçon 7Mise en place du header 2/3
Leçon 8Mise en place du header 3/3
Leçon 9Mise en place du fils d'ariane
Leçon 10Mise en place de la barre de nav
Leçon 11Mise en place de l'article 1/6
Leçon 12Mise en place de l'article 2/6
Leçon 13Mise en place de l'article 3/6
Leçon 14Mise en place de l'article 4/6
Leçon 15Mise en place de l'article 5/6
Leçon 16Mise en place de l'article 6/6
Leçon 17Mise en place du footer 1/2
Leçon 18Mise en place du footer 2/2
Chapitre 3 : Conclusion
04m39s
 
Leçon 1Conclusion
Leçon 2Bonus

Aperçus

Avis des apprenants

Détail des avis
100
Apprenants
20
Commentaires
4,9/5
Note moyenne
5/5
17
4/5
3
3/5
0
2/5
0
1/5
0
Alain Tardif
Alain Tardif
Publié le 21/02/2023
"Merci Carl pour ce super tutoriel. J'ai pris beaucoup de plaisir à créer ce site. Grâce à vos cours de qualité, j'ai adopté l'habitude de toujours commencer par le général pour aller vers le spécifique. Cela m'a permis de valider à 100 % l'utilisation de Grid et Flexbox ensemble. Encore une fois, merci beaucoup."
Carl Brison
Carl Brison
Merci beaucoup Alain, pour votre très gentil commentaire ;-)
Maillot Emmanuel
Maillot Emmanuel
Publié le 07/01/2023
Très bon tuto. Grâce à FlexBox et Grid je peux remplacer Boostrap qui est lourd dans l'utilisation.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire ;-)
James Brulet
James Brulet
Publié le 05/07/2022
Très pédagogique et beaucoup de très bonnes explications. A bientôt donc
Carl Brison
Carl Brison
Merci beaucoup. C'est très gentil ;-)

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS 3

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Les codes sources de l'exercice

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données