Ayez le bon réflexe CSS, utilisez la technologie Flexbox !
ERROR
00:00
00:00

TUTO Ayez le bon réflexe CSS, utilisez la technologie Flexbox !

Carl Brison
18,00€

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Pour ce tuto vidéo, nous allons réaliser une page web 100% responsive en utilisant la technologie des flexbox du CSS 3.
La connaissance des flexbox est indispensable pour pouvoir suivre ce tuto. En cas de besoin, je mets à votre disposition mon tuto dédié à l'apprentissage complet des flexbox.

Comme dans le monde professionnel, nous partirons d'un cahier des charges (ici, nous nous servirons d'une page web du site de tuto.com en guise de support), et nous devrons quoiqu'il arrive, respecter ce cahier des charges.

Et pour cela nous devrons non seulement avoir des connaissances théoriques mais aussi et surtout savoir les appliquer efficacement !
 

Dans ce tuto, nous ne nous préoccuperons pas de la forme mais du fond !

Nous appliquerons toutes nos connaissances des flexbox pour pouvoir réaliser cette page web 100% responsive, après avoir définis les points de rupture. La théorie informatique c'est bien et nécessaire, mais de savoir l'appliquer correctement c'est indispensable.

Pour évoluer en informatique, il n'y a pas d'autres secrets que la pratique !
Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions.
Les fichiers de travail sont fournis avec le cours, de même qu'un QCM. Ce dernier vous permettra de valider vos compétences.

PS: Je préconise quelques petites connaissances en HTML ainsi qu'en CSS pour pouvoir bien apprécier ce cours .
Je mets à votre disposition une formation complète sur l'apprentissage du HTML5 & CSS3.

Bonne formation !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Présentation et préparation du travail
Leçon 2
Mise en place du HEADER et du FOOTER
Leçon 3
Travail complet sur le HEADER 1/2
Leçon 4
Travail complet sur le HEADER 2/2
Leçon 5
Travail complet sur le FOOTER 1/2
Leçon 6
Travail complet sur le FOOTER 2/2
Leçon 7
Travail complet sur le MAIN 1/3

Plan détaillé du cours

Leçon 1Présentation et préparation du travail
12m09s
Leçon 2Mise en place du HEADER et du FOOTER
09m35s
Leçon 3Travail complet sur le HEADER 1/2
12m51s
Leçon 4Travail complet sur le HEADER 2/2
14m13s
Leçon 5Travail complet sur le FOOTER 1/2
11m16s
Leçon 6Travail complet sur le FOOTER 2/2
12m09s
Leçon 7Travail complet sur le MAIN 1/3
14m45s
Leçon 8Travail complet sur le MAIN 2/3
13m36s
Leçon 9Travail complet sur le MAIN 3/3
05m16s
Leçon 10Conclusion
01m47s

Aperçus

Avis des apprenants

Détail des avis
114
Apprenants
13
Commentaires
5/5
Note moyenne
5/5
12
4/5
1
3/5
0
2/5
0
1/5
0
Guillaume Duval
Guillaume Duval
Publié le 05/01/2024
trés bien construit et expliqué
Carl Brison
Carl Brison
Merci beaucoup ;-)
Valérie Arno
Valérie Arno
Publié le 26/12/2023
Bonjour Carl, Un très bon tuto avec beaucoup de réflexion sur la disposition des diverses parties sur les 3 types d'écrans. C'est pas trop difficile quand on se base sur un modèle. Mais quand la page est vide et aucune référence visuelle, c'est autre chose. Je pense qu'il faut d'abord réfléchir à tout ça sur papier avant de se lancer et savoir précisément ce qu'on va y mettre. Mais déjà s'entraîner sur un modèle, ça aide, on manipule, on pratique. Et là on a eu une bonne dose de pratique et surtout un bon enseignement. Merci beaucoup :-)
Carl Brison
Carl Brison
Vous avez parfaitement raison. Merci beaucoup pour votre commentaire très gentil, Valérie ;-)
Alain Tardif
Alain Tardif
Publié le 03/01/2023
Merci pour ce tuto très intéressant, on continue l'apprentissage. Rien ne vaut la pratique. Tout à fait d'accord. 100 % validé.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire très gentil ;-)

Vos questions sur le cours

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

CSS 3, HTML 5

Que contient le fichier source ?

L'ensemble des codes de ce tuto

Quel est le niveau requis pour suivre ce tuto ?

débutant

Attendez ! 🤗

Accédez à plus de 1330 tutos gratuits

Notre politique de protection des données