Découverte des frameworks CSS : Bootstrap et Tailwind

Webmasters, intégrateurs, développeurs web

Connaissances HTML5/CSS3/RWD

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

Utiliser Tailwind UI avec Javascript

Tailwind et les frameworks jsIntégration de tailwind en JS
Atelier: Création d'un jeu FizzBuzz en mise en page avec Tailwin

Méthodologie basée sur l'Active Learning: 75% de pratique minimum. Chaque point théorique est systématiquement suivi d'exemples et exercices.

Contrôle continu

Attestation de fin de stage mentionnant le résultat des acquis

Support papier