TUTO Responsive Web Site avec CSS Grid & Flexbox sur Tuto.com

Responsive Web Site avec CSS Grid & Flexbox

Problème de lecture

Cette vidéo ne semble pas disponible

00:00

00:00

Sous-titres non disponibles

Un cours de

24,99€

4,9

1h53

Débutant

QCM

Certificat de compétences

Fichiers sources

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Présentation
Contenu

Dans ce tuto en vidéo nous allons réaliser un site web en utilisant les technologies CSS Grid et Flexbox.
Le but de ce tuto n'est pas tant de créer un site internet, mais d'apprendre à structurer une méthodologie de travail. En effet, le développement d'une page web devient de plus en plus complexe, il devient donc indispensable de travailler en utilisant des process ce qui permet ainsi de travailler efficacement !

Nous allons partir de 0 et monter tout un projet en nous consacrant à la méthodologie de travail.
Les technologies que nous allons utilisées dans ce tuto sont les suivantes :

HTML5
CSS-Grid
Flexbox
Les medias queries

Je mets également à votre disposition, l'ensemble des codes utilisé dans ce tuto.

En cas de besoin, je mets à votre disposition les cours suivants :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours

Leçon 1

Leçon 2

Leçon 3

Leçon 4

Leçon 5

Leçon 6

Leçon 7

Plan détaillé du cours

Leçon 1Présentation de la maquette

06m15

Leçon 2Mise en page HTML

06m54

Leçon 3Mise en page CSS desktop

08m45

Leçon 4Mise en page CSS smartphone

05m12

Leçon 5Présentation du détail des zones

03m10

Leçon 6Mise en place du header

16m10

Leçon 7Mise en place de la section

06m14

Leçon 8Mise en place de la nav

13m27

Leçon 9Mise en place du footer

11m04

Leçon 10Mise en place de la zone article 1/4

09m26

Leçon 11Mise en place de la zone article 2/4

09m27

Leçon 12Mise en place de la zone article 3/4

07m03

Leçon 13Mise en place de la zone article 4/4

07m37

Leçon 14Conclusion

02m35

Leçon 15Pour aller plus loin

36s

Avis des apprenants

Détail des avis

169

Apprenants

13

Commentaires

5/5

Note moyenne

5/5

12

4/5

1

3/5

0

2/5

0

1/5

0

Mauro Savoca Velasquez

Publié le 08/04/2025

Merci beaucoup pour ce tuto

Carl Brison

Merci, c'est très gentil ;-)

Jean-Philippe Mouzet

Publié le 30/12/2024

C'est simple et compliqué à la fois. Merci pour ce cours

Carl Brison

Merci beaucoup pour votre commentaire ;-)

Alain Tardif

Publié le 30/12/2024

Merci Carl pour votre excellent cours sur Grid et Flexbox ! J'apprécie particulièrement comment vous avez utilisé le CSS Grid pour structurer la mise en page globale, et Flexbox pour affiner l'alignement des éléments dans le header, la navigation et le footer. Votre approche du responsive design avec les media queries est très instructive, montrant comment adapter efficacement la mise en page pour les écrans plus petits. Ce cours m'a vraiment aidé à mieux comprendre comment créer des designs web modernes et flexibles. 😊 Validé 100%

Carl Brison

Merci beaucoup Alain, pour votre enthousiasme et votre gentillesse ;-)

Formateur

5

Voir ses cours

Prérequis

,

Débutant

Accessibilité

Sous-titres disponibles

Ressources téléchargeables

Fichiers sources (642.76 Ko)

Catégories

Programmation CSS

Cours publié le 17/01/2020
Langue : Français
ID : 132241

Vos questions sur le cours

Avec quelles versions de logiciels ce tuto est-il compatible ?

CSS 3, HTML 5

Que contient le fichier source ?

Le code source complet de ce tuto.

Quel est le niveau requis pour suivre ce tuto ?

débutant