Tester par la pratique la complémentarité de FlexBox et CSS Grid, grâce à ce tuto !
Nous avons appris ensemble lors de précédents cours à utiliser les technologies Flexbox et CSS-Grid.
Je vous ai toujours dis dans mes différents cours théoriques que Flexbox et CSS-Grid ne sont pas des technos concurrentes mais complémentaires.
Dans le tuto que je vous propose aujourd'hui, nous allons mettre en pratique cette complémentarité entre Flexbox et CSS Grid.
Je vais vous apprendre à utiliser correctement ces deux technologies. Pour cela, nous allons réaliser ensemble, un site Internet évidemment en version responsive.
Nous apporterons un peu de complexité supplémentaire, en fixant certains éléments du site afin de les rendre toujours visibles à l'écran.
Il s'agit ici d'un tuto de type atelier pratique, car pour bien évoluer en tant que frontend developpeur, il faut absolument pratiquer, pratiquer et toujours pratiquer. C'est ce que je vous propose de faire ici !
Pour suivre, cet atelier dans de bonnes conditions, il est préférable de connaître les technologies suivantes :
- Flexbox (Découvrir mon cours sur Flexbox)
- CSS-Grid (Découvrir mon cours sur CSS-Grid)
- Les positionnements en CSS (Découvrir mon cours sur les positionnements en CSS)
Comme à mon habitude, je reste disponible dans le salon d'entraide de ce cours pour répondre à vos éventuelles questions. Un QCM est fourni en fin de cours pour tester vos nouvelles compétences d'intégrateur web !
Table des matières de cette formation CSS (durée : 1h50m)
-
- Présentation du travail gratuit 00:05:46
- Plan du site et struture HTML 00:08:02
- Le CSS global du site 00:07:16
- Les medias queries 00:03:38
- Le header pour les écrans supérieurs 00:09:09
- Le header pour les écrans inférieurs 00:03:18
- Le footer pour les écrans supérieurs 00:10:03
- Le footer pour les écrans inférieurs 00:04:55
- La section pour les écrans supérieurs 00:06:58
- Mise en place des images 00:12:56
- La section pour les écrans inférieurs 00:04:08
- La nav pour les écrans supérieurs 1/2 00:08:04
- La nav pour les écrans supérieurs 2/2 00:05:21
- On fixe la nav pour les écrans supérieurs 00:04:52
- On fixe la nav pour les écrans inférieurs 00:10:50
- Conclusion 00:04:57
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Carl Brison
-
Encore un super tuto. Merci bien Carl
-
Cours intéressant mais son inaudible!
-
Un très bon brassage des fondamentaux HTML/CSS. Ce cours permet également de bien comprendre et de clarifier les imbrications entre les gridbox et les flexbox. Merci beaucoup !
-
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 ?Le script complet du tuto.
note moyenne
avis laissés