CSS-Grid et Flexbox :: 2 techniques complémentaires
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h50
de formation
16
leçons vidéo
1
chapitre
Intermédiaire
niveau requis
Carl Brison
Carl Brison
Formateur certifié

CSS-Grid et Flexbox :: 2 techniques complémentaires

4.7/5 Trustpilot (1395 avis) Satisfait ou remboursé
1h50
de formation
16
leçons vidéo
1
chapitre

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 :

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 !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Présentation du travail
Leçon 2
Plan du site et struture HTML
Leçon 3
Le CSS global du site
Leçon 4
Les medias queries
Leçon 5
Le header pour les écrans supérieurs
Leçon 6
Le header pour les écrans inférieurs
Leçon 7
Le footer pour les écrans supérieurs

Table des matières

Leçon 1

Présentation du travail

05m46
Leçon 2

Plan du site et struture HTML

08m02
Leçon 3

Le CSS global du site

07m16
Leçon 4

Les medias queries

03m38
Leçon 5

Le header pour les écrans supérieurs

09m09
Leçon 6

Le header pour les écrans inférieurs

03m18
Leçon 7

Le footer pour les écrans supérieurs

10m03
Leçon 8

Le footer pour les écrans inférieurs

04m55
Leçon 9

La section pour les écrans supérieurs

06m58
Leçon 10

Mise en place des images

12m56
Leçon 11

La section pour les écrans inférieurs

04m08
Leçon 12

La nav pour les écrans supérieurs 1/2

08m04
Leçon 13

La nav pour les écrans supérieurs 2/2

05m21
Leçon 14

On fixe la nav pour les écrans supérieurs

04m52
Leçon 15

On fixe la nav pour les écrans inférieurs

10m50
Leçon 16

Conclusion

04m57

Aperçus

Avis des apprenants

Détail des avis
227
Apprenants
19
Commentaires
4,9/5
Note moyenne
5/5
18
4/5
0
3/5
1
2/5
0
1/5
0
Fred Andenas
Fred Andenas
Publié le 05/02/2026
Cours pratique et riche qui montre bien l'articulation entre Flexbox et css Grid
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil
Simon Costa
Simon Costa
Publié le 07/07/2025
Cours très compacte car pas mal de propriétés sont connues des cours d'avant mais certaines, se greffent, que je n'avais jamais vus. J'ai essayer de faire le site du dino seul sans le cours et forcément j'ai pas eu le même résultat, fonctionnel et responsive mais pas identique en apparence.
Carl Brison
Carl Brison
C'est bien de faire par vous même. Vous me montrerez à notre prochain Teams.
Yann Hadancourt
Yann Hadancourt
Publié le 16/01/2025
très bon formateur qui explique bien le cours
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Le script complet du tuto.

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
18,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
1h50 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 784 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.7/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1426 tutos gratuits

Notre politique de protection des données