$ 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é
  • 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é 22 tutoriels et obtenu une note moyenne de 4,9/5 sur 1 259 tutoriels vendus. Voir les autres formations de Sébastien Imbert

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


non, je ne veux pas me former gratuitement