Cours du 2 février 2022

Unités CSS

Le support de présentation de ce cours: https://www.wooclap.com/KEBXES

Thèmes à traiter par binômes:

  • Flexbox : rappel du fonctionnement
  • Unité % : ce qu’elle signifie en CSS
  • Unités typographiques (em, ex, ch, rem)
  • Unités relatives au viewport (vw, vh, vmin, vmax)
  • Fonction CSS : calc()
  • Fonctions CSS : min(), max(), clamp()
  • Variables CSS

Ce qui est attendu de vous:

  • Un thème vous est attribué. Cherchez comment cela fonctionne, et comment utiliser cet élément pour améliorer votre site web.

L’unité pourcentage (%)

Exemple: https://codepen.io/eracom/pen/YzEWPzE

Référence MDN: https://developer.mozilla.org/fr/docs/Web/CSS/percentage

⚠️ À retenir: pour les longueurs, fonctionne en horizontal, mais pas en vertical.

Les unités typographiques (em, ex, ch, rem)

Exemple: https://codepen.io/eracom/pen/GROqpwO

⚠️ À retenir: le fonctionnement de em et rem, unités fréquemment utilisées.

Les unités relatives au viewport (vw, vh, vmin, vmax)

Exemple https://codepen.io/eracom/pen/LYOZQVB

Exemple complet:

Un exemple qui combine toutes ces fonctionnalités : https://codepen.io/eracom/pen/VwrarYa

See the Pen Product Page by Manuel Schmalstieg (@eracom) on CodePen.

Challenge N° 2

Apportez à votre site web des améliorations.

Améliorations suggérées:

  • Donnez une hauteur minimum au header.
  • Centrez le titre à l’intérieur du header.
  • Alignez la liste avec Flexbox
  • Produisez une typographie “responsive” avec clamp()

Ne pas oublier

Votre documentation personnelle:

  • Noter ce que vous avez appris aujourd’hui.
  • Noter les références qui vous ont aidé.

Vous pouvez utiliser l’un des logiciels suivants:

⚠️ Votre documentation sera vérifiée et comptera pour le test du 9 mars.

Ressources