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

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

Carl Brison
18,99€
Acheter maintenant, payer plus tard. En savoir plus

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
05m46
Leçon 2Plan du site et struture HTML
08m02
Leçon 3Le CSS global du site
07m16
Leçon 4Les medias queries
03m38
Leçon 5Le header pour les écrans supérieurs
09m09
Leçon 6Le header pour les écrans inférieurs
03m18
Leçon 7Le footer pour les écrans supérieurs
10m03
Leçon 8Le footer pour les écrans inférieurs
04m55
Leçon 9La section pour les écrans supérieurs
06m58
Leçon 10Mise en place des images
12m56
Leçon 11La section pour les écrans inférieurs
04m08
Leçon 12La nav pour les écrans supérieurs 1/2
08m04
Leçon 13La nav pour les écrans supérieurs 2/2
05m21
Leçon 14On fixe la nav pour les écrans supérieurs
04m52
Leçon 15On fixe la nav pour les écrans inférieurs
10m50
Leçon 16Conclusion
04m57

Aperçus

Avis des apprenants

Détail des avis
191
Apprenants
15
Commentaires
4,9/5
Note moyenne
5/5
14
4/5
0
3/5
1
2/5
0
1/5
0
Patrice Labelle
Patrice Labelle
Publié le 15/08/2024
Super bon cours, très bien expliqué, merci!
Carl Brison
Carl Brison
Merci beaucoup, c'est très gentil ;-)
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 ;-)

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.

Payer plus tard

Prix d'achat : 18,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1427 tutos gratuits

Notre politique de protection des données