Responsive web design -HTML CSS 2

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 pratique

• Réalisation d'un site corporate complet, avec plusieurs pages, galerie d'images, formulaire

de contact.