$ 39.00 au lieu de $ 54.00

Tuto Devenir un Pro en CSS Grid ! avec CSS bundle -28%

$ 39.00 au lieu de $ 54.00

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

Pour ce troisième Bundle, je vous propose de devenir incollable en CSS Grid.
Au fait, c'est quoi CSS-Grid ? CSS-Grid est une technologie officielle du CSS qui permet de réaliser des mises en page de sites Internet très facilement grâce à la mise en place d'une grille

La connaissance de cette technologie est indispensable pour celles et ceux qui souhaitent travailler du côté Front-End !

Au programme de ce Bundle devenir un pro en CSS Grid

Dans ce Bundle, je vous propose de découvrir

  • toute la théorie autour de CSS-Grid,
  • puis, de passer ensemble à la pratique afin de bien assoir les connaissances nouvellement acquises.

Nous allons voir des cas concrets dans les conditions d'Entreprise. Nous travaillerons côté Mobile First mais aussi côté Desktop First.
Ainsi, vous serez totalement opérationnel dans l'utilisation de la technologie CSS-Grid.

Je reste disponible dans le salon d'entraide. Les fichiers de travail sont fournis.
Bonne formation !


Tuto composant ce bundle :

  • CSS Grid, le guide complet en vidéo (voir la fiche produit)


    • Présentation

      • Introduction gratuit00:04:13
      • grid et inline-grid 00:07:43

    • Le conteneur et ses propriétés

      • Mise en place du conteneur et des contenus 00:04:48
      • Et flexbox ? 00:07:11
      • Création des colonnes 00:05:37
      • Gestion de la hauteur des lignes 00:06:36
      • Complèment d'informations 00:03:51
      • Les gouttières 00:05:17
      • Une nouvelle unité de mesure 00:04:25
      • La fonction repeat 00:03:50

    • Les contenus et leurs propriétés

      • Les lignes de grilles verticales 00:06:26
      • Les lignes de grilles horizontales 00:03:57
      • Le mot clé span 00:02:44
      • Propriétés raccourcies 00:03:43

    • Autres propriétés

      • Changer le sens d'affichage 00:02:46
      • Créer une colonne virtuelle 00:03:40
      • Créer une ligne virtuelle 00:02:16
      • Petit exercice de rappel 00:09:03
      • Définition des zones 00:07:32
      • La fonction minmax 00:03:14
      • La propriété order 00:01:50

    • Déplacement des contenus

      • Présentation 00:02:47
      • Alignement de la grille sur l'axe horizontal 00:05:23
      • Alignement de la grille sur l'axe vertical 00:03:36
      • Alignement de tous les contenus 00:02:42
      • Alignement d'un contenu 00:02:11

    • Consolidation des nouveaux acquis

      • Intro 00:01:12
      • Q.R. 1 à 4 00:06:45
      • Q.R. 5 à 8 00:04:20
      • Q.R. 9 à 12 00:03:54
      • Q.R. 13 à 16 00:05:38
      • Q.R. 17 à 20 00:06:34
      • Q.R. 21 à 24 00:05:10
      • Q.R. 25 à 28 00:09:14
      • Conclusion 00:01:06

    • Création d'une maquette d'un site responsive

      • Présentation du travail 00:01:16
      • Mise en place des bases du travail 00:07:28
      • CSS côté smartphone 00:05:48
      • CSS côté ordinateur 00:04:34
      • Conclusion 00:03:24
  • CSS-Grid : Mise en application (voir la fiche produit)


    • Introduction et rappel

      • Présentation du tuto gratuit00:04:26
      • Le viewport 00:02:40
      • Les points de ruptures 00:02:16
      • Les medias queries 00:04:35
      • Le mobile first 00:01:00

    • Premier job, côté mobile first

      • Présentation 00:01:43
      • Mise en place de la structure HTML 00:05:18
      • Mise en place du CSS pour les smartphones 00:11:50
      • Mise en place du CSS pour les ordinateurs 00:09:42

    • Second job, côté mobile first

      • Présentation 00:01:26
      • Mise en place de la structure HTML 00:03:19
      • Mise en place du CSS pour les smartphones 00:07:08
      • Mise en place du CSS pour les tablettes 00:04:26
      • Mise en place du CSS pour les ordinateurs 00:01:29
      • Une grille dans la grille 00:11:36

    • Troisième job, côté desktop first

      • Présentation 00:00:48
      • Mise en place de la structure HTML 00:01:27
      • Mise en place du CSS pour les ordinateurs 00:05:57
      • Mise en place du CSS pour les smartphones 00:05:31

    • Quatrième job, côté desktop first

      • Présentation 00:00:59
      • Mise en place de la structure HTML 00:02:07
      • Mise en place du CSS pour les ordinateurs 00:08:42
      • Mise en place du CSS pour les tablettes 00:03:36
      • Mise en place du CSS pour les smartphones 00:03:23

    • Cinquième job, côté desktop ou mobile first

      • Présentation 00:00:48
      • Mise en place de la structure HTML 00:01:46
      • Desktop first, côté ordinateurs 00:09:19
      • Desktop first, côté tablettes et smartphones 00:05:33
      • Mobile first, côté smartphones 00:04:56
      • Mobile first, côté tablettes et ordinateurs 00:05:10

    • Conclusion

      • Conclusion 00:02:25
      • BONUS :: Mon livre sur l'apprentissage du PHP 00:02:57

Formateur : Carl Brison

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

5,0
note moyenne

1
avis laissé
5 étoiles
1
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de faitchier laissé le 19/10/2018
    Un regal ! Merci a vous. Et en bonus votre methodologie est vraiment parfaite .
    "Merci à vous ;-) ! pour moi c'est un véritable plaisir que de transmettre mes connaissances ! A très bientôt ;-)"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    CSS 3
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
  • Bonjour Carl :-) Dommage j'ai déjà acheté les 2 formations qui composent ce bundle. Je ne les ai pas encore faites. J'aurai dû attendre un peu, j'aurai eu du 2 en 1. Je suis impatiente de découvrir cette nouvelle méthode. (Quoi que ça me fait penser à Bootstrap que je laisse loin sur le côté pour le moment.). Valérie
    Bonjour Valérie. Merci pour votre message. Concernant Bootstrap, je vous conseille de laisser totalement tomber et de vous concentrer sur css-grid et flexbox ;-)
  • Bonjour, je vois dans une de vos réponse qu'il vaut mieux laisser tomber totalement bootstrap. Pourquoi ?
    Bonjour, Bootstrap fut très bien en son temps. Son principale problème : ses mises à jour qui obligent à réapprendre de nouveaux codes et rendre plus difficile la maintenabilité des sites. Et enfin, il n'y a plus aucun intérêt à se servir de la grille de bootstrap si on maîtrise CSS-Grid ! Je pense que so bootstrap veut continuer d'exister, il devra se réinventer. C'est mon avis ! Vous avez parfaitement le droit de voir les choses différemment !
accédez à plus de 1153 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données