CSS-Grid et Flexbox :: 2 techniques complémentaires
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00

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

Carl Brison
19,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

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

Plan détaillé du cours

Leçon 1Présentation du travail
05m46s
Leçon 2Plan du site et struture HTML
08m02s
Leçon 3Le CSS global du site
07m16s
Leçon 4Les medias queries
03m38s
Leçon 5Le header pour les écrans supérieurs
09m09s
Leçon 6Le header pour les écrans inférieurs
03m18s
Leçon 7Le footer pour les écrans supérieurs
10m03s
Leçon 8Le footer pour les écrans inférieurs
04m55s
Leçon 9La section pour les écrans supérieurs
06m58s
Leçon 10Mise en place des images
12m56s
Leçon 11La section pour les écrans inférieurs
04m08s
Leçon 12La nav pour les écrans supérieurs 1/2
08m04s
Leçon 13La nav pour les écrans supérieurs 2/2
05m21s
Leçon 14On fixe la nav pour les écrans supérieurs
04m52s
Leçon 15On fixe la nav pour les écrans inférieurs
10m50s
Leçon 16Conclusion
04m57s

Aperçus

Avis des apprenants

Détail des avis
69
Apprenants
14
Commentaires
4,9/5
Note moyenne
5/5
13
4/5
0
3/5
1
2/5
0
1/5
0
Christian Millet
Christian Millet
Publié le 22/01/2024
Très clair et complet ! Merci !
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil
Alain Tardif
Alain Tardif
Publié le 20/02/2023
Merci Carl pour ce cours. J'ai pris beaucoup de plaisir à vous suivre sur la création de ce site et l'utilisation de Grid et flexbox. Ça finit par rentrer. Très bien expliqué. Validé 100 % Grid & Flexbox
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire Alain ;-)
Cyrille Monstard
Cyrille Monstard
Publié le 25/01/2021
Encore un super tuto. Merci bien Carl
Carl Brison
Carl Brison
Merci beaucoup ;-)

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 ?

Le script complet du tuto.

Attendez ! 🤗

Accédez à plus de 1334 tutos gratuits

Notre politique de protection des données