$ 35.00

Tuto Savoir utiliser Grid et FlexBox ensemble avec CSS

$ 35.00

  • Une formation vidéo de 3h03m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Dans cette formation en vidéo, nous allons apprendre la meilleure manière d'utiliser CSS Grid et Flexbox ensemble.
Ces 2 technologies vous permettent de gérer plus facilement l'intégration de pages web.
 

Au programme de ce tuto Savoir utiliser Grid et FlexBox ensemble

Dans la première partie de ce tuto, nous reverrons tous les grands principes de ces deux technologies issues de CSS 3.
Nous reverrons les principes de base de CSS Grid, ceux de Flexbox, mais aussi tout ce qui concerne la partie responsive d'une page web.

Après tout ces rappels théoriques, nous passerons à la pratique.
Je vous proposerai de travailler à partir d'une des pages web du site de Tuto.com en guise d'exemple.
Nous y appliquerons tous les principes que nous aurons appris au premier chapitre.

Le but étant de vous donner des habitudes de travail afin que vous puissiez appréhender la conception de pages web de façon autonome et professionnelle.

Enfin, je précise qu'il est fortement recommandé de connaître Grid et Flexbox avant de visualiser ce cours en ligne.
En cas de besoin, je mets à votre disposition deux liens menant directement à l'apprentissage de ces deux technologies:

Je reste disponible dans le salon d'entraide pour répondre à vos éventuelles questions. 
Les fichiers de travail sont fournis, ainsi qu'un QCM pour valider vos nouvelles compétences de développeur front-end

Bonne formation.

Table des matières de cette formation CSS (durée : 3h03m)

  • Les principes théoriques
    • Le principe de base 00:06:47
    • Le HTML5 00:10:31
    • Les principes de base de Grid 00:04:14
    • Le CSS côté Grid 00:07:20
    • Le principe des medias queries 00:06:37
    • Le viewport 00:02:40
    • Mise en place du responsive 00:08:54
    • Les principes de base de FlexBox 00:04:17
    • Le CSS côté FlexBox 00:05:20
  • Exercice pratique
    • Présentation du job 00:01:49
    • Définition des zones 00:08:02
    • Mise en page avec Grid 00:09:22
    • Mise en place des medias queries 00:10:04
    • Mise en place du viewport 00:01:08
    • Mise en place du header 1/3 00:09:56
    • Mise en place du header 2/3 00:08:54
    • Mise en place du header 3/3 00:06:06
    • Mise en place du fils d'ariane 00:04:24
    • Mise en place de la barre de nav 00:08:41
    • Mise en place de l'article 1/6 00:09:11
    • Mise en place de l'article 2/6 00:08:05
    • Mise en place de l'article 3/6 00:03:26
    • Mise en place de l'article 4/6 00:08:07
    • Mise en place de l'article 5/6 00:02:20
    • Mise en place de l'article 6/6 00:08:43
    • Mise en place du footer 1/2 00:08:06
    • Mise en place du footer 2/2 00:05:30
  • Conclusion
    • Conclusion 00:03:23
    • Bonus 00:01:16



Formateur : Carl Brison

Carl Brison a publié 96 tutoriels et obtenu une note moyenne de 4,9/5 sur 6 219 tutoriels vendus. Carl Brison est un formateur certifié tuto.com. Voir les autres formations de Carl Brison

4,8
note moyenne

5
avis laissés
5 étoiles
4
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de pierrefranck laissé le 17/05/2019
    Que du plaisir de suivre vos formations :) pour celle-ci j'ai apprécié en plus, le process pour faire la maquette de la page web. Le mockup c'est fait! la maquette et son process aussi ! pourquoi ne pas continuer notre page web avec une méthodologie backend :)
    "Merci pour votre commentaire ;-) Je préfère ne pas trop mélanger le front et le back pour ne pas perdre des apprenants. Cependant, je prévois de le faire un peu plus tard. A bientôt"

  • 4
    avis de taskone laissé le 03/04/2019
    Formation intéressante sur le fond. Précise, claire et nette. Elle m'a permis de comprendre comment utiliser ensemble les grid et les flexbox. La formation serait encore plus intéressante si l'auteur évitait de faire des retours / répétitions à chaque vidéo. Cela casse un peu le rythme. Ça ne sera pas un problème pour les débutants car ils apprendront les choses progressivement. J'ai enlevé une étoile, car l'auteur utilise des solutions qui sont un peu à la limite pour un formateur professionnel qui est supposé aussi enseigner - d'une certaine façon - les bonnes pratiques. Je pense notamment à l'utilisation du tag p (vidéo Mise en place de la barre de nav - 01'38) pour mettre en place un filet, le tag span aurait été plus correct. Idem des span br (vidéo Mise en place de la barre de nav - 01'28) ou des nbsp (vidéo Mise en place du footer 2/2 - 04'42) qui sont selon moi utilisés de façon incorrecte. Idem pour le nom des classes qui sont peu explicites ou incorrects selon, par exemple, la méthode SMACSS.

  • 5
    avis de membre-6759-7008 laissé le 15/01/2019
    J'aime beaucoup cet add-on aux formations sur les technologies FlexBox et Grid déja proposée par l'auteur. L'idée de reprendre le site tuto.com en exemple est vraiment interessante. Pour moi, l'occasion est belle pour me séparer (à regret) de Bootstrap. Encore un grand merci pour cette formation très pro. Le rythme, les explications, c'est parfait !
    "Je suis très content que cela vous ai plu ! Merci à vous ;-)"

  • 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 ?
    Les codes sources de l'exercice
accédez à plus de 1150 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données