Découverte des frameworks CSS : Bootstrap et Tailwind

Durée

5,00 jour(s)

Langue(s) de prestation

EN FR

Prochaine session

Qui organise cette formation ?

Dawan est un organisme de formations qui propose plus de 2500 formations en informatique, management, gestion de projets et commercial en inter-entreprise ou en intra. Notre catalogue regroupe des centaines de thématiques: Java, PHP, Webmaster, E-Marketing, Linux, Windows Server, Vmware, Autocad, Photoshop, l'intelligence artificielle, etc.

À qui s'adresse la formation?

Webmasters, intégrateurs, développeurs web

Prérequis

Connaissances HTML5/CSS3/RWD

Objectifs

Découvrir Boostrap - Manipuler des classes Bootstrap avec Javascript - Installer et Utiliser Tailwind - Créer une architecture modulaire de Tailwind - Utiliser Tailwind UI et ses composants

Contenu

Rappels sur le responsive web design et CSS

Viewport et Media queries
Block, inline et autres display
Grid et FlexLe nesting
Atelier: Création d'une page complexe en CSS3

Utiliser Boostrap, les Structures et Breakpoints

Composition Bootstrap: container, row et col
Les breakpoints
Composition HTML et bootstrap
Les Positions
Atelier: Modification de page et agencement responsive sur différent format

Utiliser les composents Bootstrap

FormulairesImagesCardNavbars
Atelier: Création de formulaire et réarrangement de la page

Personnaliser avec SCSS

Présentation du SCSSCréations des variables SCSS
Mixins@include
Atelier: Révision et customisation des couleurs et dimensions standards de Bootstrap

Manipuler des classes Bootstrap avec Javascript

Intégrer Bootstrap en JS
Prendre en charge et modification des composant en JS
Atelier: Ajout et manipulation d'élément Bootstrap en JS

Installer et Utiliser Tailwind

Présentation de Tailwind
Intégration via NP
MInclusion dans un projet
Atelier: Création d'un projet one-page en Tailwind

Créer des interfaces avec Tailwind

Syntaxe de Tailwind
Intégration HTML
Boostrap VS Tailwind
Atelier: Création d'interface utilisateur riche et responsive avec Tailwind

Créer une architecture modulaire de Tailwind

Création de modulel'outil @applyL'extraction sous Tailwind
Atelier: Création de carte complexe sous la forme de module

Utiliser Tailwind UI et ses composants

Bibliothèque de composant Tailwind
Composants de présentation
Composants de navigation
Composants de formulaire
Atelier: Ajout d'élément sur le projet one-page