$ 36.00

Tuto Intégration CSS moderne avec Flexbox avec CSS, HTML

$ 36.00

  • Une formation vidéo de 3h35m
  • 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 vidéo de plus de 3h30 je vous propose d'apprendre l'intégration HTML et CSS moderne avec les Flexbox.

Flexbox CSS c'est quoi ?

Les flexbox CSS représentent une nouvelle manière d'aborder l'intégration HTML et CSS. En plus d'étendre les possibilités que l'on a déjà avec les modèles de boîtes classiques (block, inline, inline-block ...), les flexbox CSS sont particulièrement adaptés aux nouvelles méthodes d'intégration comme le responsive design en mobile-first
 

Au programme de cette formation Flexbox

  • Dans le chapitre 1, nous ferons le tour de toutes les propriétés des flexbox CSS (flex-container et flex-items).
  • Dans le chapitre 2, nous passerons à la pratique et nous créerons 3 layouts responsive avec les flexbox. Nous travaillerons avec le logiciel Photoshop pour prendre connaissances des maquettes pour les analyser afin de bien anticiper la création de la structure HTML.
  • Dans le chapitre 3 nous verrons 3 cas concrets d'intégration avec la création de tables de prix, d'articles de blog et d'une navigation. Pour ce chapitre, nous nous mettrons dans la peau d'un intégrateur qui reçoit une maquette et qui doit l'intégrer en HTML et CSS, nous nous occuperons donc aussi du design CSS.

Au cours de ce tutoriel nous verrons :

  • les propriétés du flex-container
  • les propriétés des flex-items
  • comment configurer son environnement de travail pour faire de l'intégration HTML et CSS (installation de plugins sur l'éditeur de texte brackets)
  • comment créer un container
  • comment analyser une maquette (webdesign) .psd
  • comment créer une structure HTML propre
  • le concept de mobile-first
  • le responsive design avec les media queries
  • comment récupérer des informations utiles pour l'intégration dans Photoshop (couleurs, fonts, dimensions ...)
  • comment intégrer des fonts avec Google Fonts
  • comment intégrer des icônes avec la librairie Font Awesome

Je reste disponible dans la section entraide pour répondre à vos questions et vous aider si besoin.
Les fichiers sources sont livrés et un QCM de fin sera également fourni pour tester vos connaissances.
Bon tuto !

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

  • Introduction aux flexbox
    • Introduction 00:09:06
    • Les propriétés du flex-container 1/2 00:10:16
    • Les propriétés du flex-container 2/2 00:06:19
    • Les propriétés des flex-items 1/2 00:05:16
    • Les propriétés des flex-items 2/2 00:08:18
  • Créer des layouts responsive avec les flexbox
    • Configurer son environnement de travail 00:11:52
    • Intégration d'un premier layout 00:13:42
    • Intégration d'un deuxième layout 00:13:17
    • Intégration d'un troisième layout 00:12:32
  • Cas concrets d'intégration
    • Créer un container 00:07:20
    • Intégration de tables de prix 1/3 00:11:59
    • Intégration de tables de prix 2/3 00:17:15
    • Intégration de tables de prix 3/3 00:08:11
    • Intégration d'articles de blog 1/2 00:17:37
    • Intégration d'articles de blog 2/2 00:20:31
    • Intégration de la navigation 1/2 00:17:27
    • Intégration de la navigation 2/2 00:19:20
    • Conclusion 00:04:53



Formateur : Sébastien Imbert

Sébastien Imbert a publié 23 tutoriels et obtenu une note moyenne de 4,9/5 sur 4 523 tutoriels vendus. Voir les autres formations de Sébastien Imbert

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 tiburon-tom laissé le 27/05/2018
    Un très bon tutoriel avec une excellente pédagogie. J'ai compris de façon simple les principes fondamentaux de la Flexbox qui ont été appliqués dans différentes situations (table de prix, articles d'un blog, menu). Petits bonus, j'ai découvert Brackets que je préfère à Sublime Text et une fonctionnalité de Chrome pour la responsivité que j'ignorais.

  • 5
    avis de psychochorizo laissé le 27/05/2018
    Très bonne formation sur les CSS Flexbox. Les explications et les exemples sont excellents. Je vous conseille vivement de suivre cette formation. Bon apprentissage!

  • 5
    avis de komarianne laissé le 07/04/2018
    Un apprentissage en chapitres clairs et évolutifs qui permettent d'aborder Flexbox de façon progressive. Chaque nouvelle étape traitant d'une utilisation concrète (les bases, le blog, les tables de prix et la navigation) couvre ainsi tous les champs nécessaires à la réalisation de tous types de sites. Vraiment excellent.

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    CSS 3, HTML 5
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1104 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données