Découverte des frameworks CSS : Bootstrap et Tailwind

Duration

5,00 day(s)

Language(s) of service

EN FR

Next session

Who is organizing this training?

Dawan is a training organisation that offers more than 2000 training courses in IT, management, project management and sales in instructor-led live online or on-site trainings. We have 11 centres in France and we have developed partnerships with local structures in Brussels, Luxembourg and Geneva. Our catalogue includes hundreds of topics: Java, PHP, Webmaster, E-Marketing, Linux, Windows Server, Vmware, Autocad, Photoshop, IA etc. Our courses have been created and designed by in-house trainers who have over 20 years of teaching experience. Constantly renewed, they are adapted to the requirements of our customers and to the evolution of technologies.

The content of this page is not available in English

Who is the training for?

Webmasters, intégrateurs, développeurs web

Prerequisites

Connaissances HTML5/CSS3/RWD

Goals

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

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