Objectif

Approfondissement de toutes les notions abordées dans le
1er clic avec des mises en pratique plus complexes, mêlant
HTML, CSS et JS (Javascript).

Public
Connaissances préalables de HTML et CSS.

Pré-requis

Avoir suivi le stage Html-Css clic 1 ou passer avec succès
un test QCM de 30 questions

Programme

HTML, CSS, JS
Utiliser les media-queries pour créer un design responsive ;
Créer des images adaptatives pour optimiser leur affichage adapté à chaque largeur de viewport ;
Implémentation de Bootstrap, un framework CSS très complet ;
Sa grille de composition responsive ;
Les autres classes de Bootstrap (spacing, sizing, display, etc.) ;
Intégration d’une navbar responsive avec menu hamburger ;
Implémentation de la bibliothèque d’icônes Font Awesome ;
Création de scripts JS (par exemple, pour réaliser un
smooth scroll to top au clic d’un bouton en position
fixed ou pour animer des progress bars) ;
Intégration d’un carrousel d’images (Bootstrap, Owl,
Slick ou autre) avec du texte animé ;
Composition d’un formulaire avec des placeholders et
validation des données ;
Réalisation de galeries d’images composées à partir de
la grille Bootstrap, avec la propriété column-count et de
type Masonry, avec boutons de filtrage (type Isotope) ;
Implémentation d’une lightbox pour visualiser les images
de la galeries ;
Animations CSS (keyframes) lancées par le positionnement du scroll, grâce à waypoints.js (AOS, Counter Up,
progress bars…)
Transfert vers un hébergement mutualisé (Alwaysdata).

Cas pratiques
Réalisation d’un site corporate complet, avec plusieurs
pages, galerie d’images, formulaire de contact.