HTML5 et CSS3 : animations et responsive design

Présentation

Après avoir découvert les langages HTML et CSS permettant de réaliser notamment des sites web, cette formation vous propose de perfectionner vos connaissances dans ces deux langages.
Depuis dix ans, la proportion de visiteurs de sites web entre leur smartphone et un ordinateur a complètement changé. Selon StatCounter, 6% des visiteurs de sites web utilisaient leur mobile en 2011, alors qu’ils sont 60% en 2022. Depuis 2017, votre site web est probablement plus vu sur mobile que sur un écran d’ordinateur. La création d’un design s’adaptant à toutes les résolutions d’écran, appelé aussi design adaptatif (responsive design) est une nécessité tant pour éviter un écueil en termes d’images que pour augmenter son audience.
Parallèlement, les technologies du web permettent aujourd’hui des merveilles en animation, autorisant les plus créatifs/créatives à réaliser des logos animés, des animations ou des effets de transition pour rendre le web plus agréable à visiter chaque jour.
Au cours de cette formation, vous perfectionnerez vos compétences en programmation web front-end avec de nouvelles notions en HTML et en CSS. Ces nouveaux outils vous permettront de réaliser un design adaptatif à tout écran, et d’intégrer dans votre site des animations et des transitions fluides et compatibles avec tous les navigateurs.

Objectifs de la formation

• Savoir utiliser les transitions et les animations
• Comprendre les contraintes d’expérience utilisateur selon le terminal
• Savoir penser la structure HTML d’un site adaptatif
• Savoir créer des feuilles de style d’un style adaptatif

Public

• Toute personne souhaitant améliorer ses compétences en développement web front-end.

Prérequis

• Une connaissance de HTML et CSS est nécessaire

Programme

1- Les transitions

Qu’est-ce qu’une transition ?
Cible de la transition
Propriétés compatibles
Configuration et fonctions de progression

2- Animations

Différences avec les transitions
Déclarer des séquences (keyframes)
La propriété animation
Contrôle du déroulé de l’animation
Répétitions des animations
État de sortie d’une animation

3- Penser son design adaptatif (responsive design)

Les contraintes d’expérience utilisateur selon les terminaux
Bonnes pratiques de l’affichage mobile
L’approche mobile-first : comment et pourquoi ?

4- Design adaptatif : HTML

Prévoir sa structure vis-à-vis d’une approche responsive
L’attribut viewport de la balise meta
Le comportement des équipements face aux éléments de formulaire
Les attributs srcset et sizes

5- Design adaptatif : CSS

Les media queries
Cibler son terminal : min/max width, min/max height, orientation, aspect-ratio
La mise en page pour l’impression
Notions liées aux breakpoints (points de rupture)
Les fonctions min/max/clamp
Gestion des couleurs liées au thème du terminal

Date de dernière modification : 13/06/2024

Cette formation ne dispose pas d'évaluation pour le moment.

Ces formations pourraient vous intéresser

• HTML5 et CSS3 : animations et responsive design

  Après avoir découvert les langages HTML et CSS permettant de réaliser notamment des sites web, cette formation vous propose de perfectionner vos connaissances dans ces deux langages.
  Depuis dix ans, la proportion de visiteurs …

  En savoir plus

• Web front : HTML, CSS et JavaScript niveau 2

  Vous avez débuté le développement web en utilisant les langages de programmation HTML, CSS et JavaScript. Vous avez réalisé avec succès plusieurs pages ou même des sites entiers, avec des composants comme des listes, des …

  En savoir plus

• Développement web : APIs navigateur

  Le terme « Web 2.0 » a débuté en 2004 pour signifier un changement de paradigme incluant notamment l’interopérabilité des contenus internet : ceux-ci doivent être lus par différents navigateurs, équipements, …

  En savoir plus