Accueil > Web design - les fondamentaux

 > HTML 5 / CSS 3 – Perfectionnement

null

Web design - les fondamentaux

HTML 5 / CSS 3 – Perfectionnement

Objectif

Comprendre le positionnement des éléments dans une page
Modifier dynamiquement l'apparence d'une page par rapport au périphérique de consultation
Utiliser les transformations et animations

Durée : 3 jours (21 heures)

Dates :
-09/01/23
-06/03/23
-23/05/23
-05/09/23
-13/11/23

Des connaissances en HTML et CSS sont nécessaires

Programme de la formation

HTML - Rappels sur la structuration d'une page

  • Balises span et div
  • Les sections logiques d'une page
  • Les balises block et inline
  • Propriété CSS display
  • Définir la largeur, la hauteur et l'alignement
  • Définir les bordures
  • Définir les marges externes et internes

CSS - Les sélecteurs et les pseudos-classes évoluées

  • Rappels sur les sélecteurs courants
  • Rappels sur les pseudos-classes courantes
  • Les pseudos-classes évoluées
  • CSS pour réaliser un compteur
  • CSS pour créer du contenu

CSS - Les média-queries

  • Les propriétés d'affichage
  • Propriété CSS visibylity
  • La fonction calc() et la propriété min – max

Mise en pratique - Ecriture d'une page qui s'adapte automatiquement

Positionnement des éléments

  • Positionnement des éléments
    • Les positions absolues, relatives et fixes
    • Les éléments flottants
    • Utilisation de top, bottom, left, right

    Gérer les scrollers dans ma structure

    • Propriété CSS overflow
    • Mettre en place un effet parallaxe dans une page

    Mise en pratique - Utilisation d'un effet parallaxe

    CSS - Transformation

  • CSS - Transformation
    • Gérer la position x et y
    • Modifier la taille proportionnellement
    • Rotation
    • Déformation

    Mise en pratique - Mise en page polaroid

    CSS - Transition

  • CSS - Transition
    • Les propriétés visées par la transition
    • La durée et le délai de déclenchement

    CSS - Animation

    • Définir une animation
    • Appliquer une animation

    Mise en pratique - Faire un slider

    Mise en pratique - apparition d'étiquette au survol d'un élément

  • Mise en pratique - apparition d'étiquette au survol d'un élément
  • Menu