$ 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é 116 tutoriels et obtenu une note moyenne de 4,9/5 sur 7 235 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 hadeslabs laissé le 02/06/2019
    Bien rythmé, les vidéos sont calibrées pour ceux comme moi qui ne dispose pas d'assez de temps. Je suis 2 vidéos et puis je passe à autre chose. Mais là, vous m'avez piégé car en voyant la taille de la vidéo suivante, je restais et au final, j'ai passé 3 heures sans me rendre compte. Merci beaucoup.
    "Alors ça c'est génial !!! Merci pour votre confiance ;-)"

  • 5
    avis de membre-4098-9899 laissé le 20/05/2019
    Excellentissime, extra, impeccable, incomparable, remarquable, admirable, magistral, épatant, parfait, précellent, dix étoiles, je recommande fortement ^^
    "Que d'éloges !!! Merci BEAUCOUP BEAUCOUP et BEAUCOUP ;-))))"

  • 4
    avis de ced-dev laissé le 23/05/2019
    Bon tuto complet comme d'habitude quelques bugs inattendu alors que tout est bon dommage de ne pas avoir poussé plus sur le detail c'est du placement de block sans plus avec tout les tutos de Carl à quand un VRAI PROJET de construction de site e-commerce ou autre de A a Z de la 1ere ligne a la dernière ligne sans raccourcis de code quelconque un vrai de vrai comme si une entreprise faisait appel a vos services avec des bonnes astuces de dev PRO.
    "J'y travaille. Laissez-moi juste le temps"

  • 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 1086 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données