Aller au contenu

Cours 9

Lundi 30 mars / mercredi 8 avril

Annonces

Plan de cours révisé

Aujourd'hui

  • Quiz de révision
  • Contenu du jour
    • Requêtes média avancées
    • Stratégies de breakpoints raisonnées
    • Transformation CSS
    • Transitions CSS (mercredi seulement)
  • Rencontres individuelles ciblées pour valider le projet 1 (ou prise de r-v à l'extérieur du cours si nécessaire)

Rappel ce propos

Suite à la remise du projet 1, je me réserve la possibilité de vous convoquer à une courte entrevue individuelle surprise afin de vérifier votre compréhension personnelle du code que vous avez remis et de vous évaluer en conséquence.

Quiz time! Révision responsive

Gap et largeur de colonnes dans les grilles Flexbox

📚 Contenu de cours: Flexbox: gap et largeur de colonnes

Atelier Zone-Out 🎮 (lundi seulement)

👩🏻‍💻 Atelier Zone-Out 🎮 (breakpoint-media queries)

Retour collectif sur l'atelier Zone-Out (mercredi seulement)

Révision et questions sur les concepts de breakpoint et media queries à travers l'atelier Zone-Out.

👩🏻‍💻 Atelier Zone-Out 🎮 (breakpoint-media queries)

Responsive ≠ Accessible (mais c'est un début)

👆 Cibles tactiles ≥ 44px 📖 Texte lisible sans zoom
Les doigts ne sont pas des curseurs. Un lien de 20px de haut est inutilisable sur mobile. Corps du texte : 16px minimum. Si l'utilisateur doit zoomer, c'est ton problème.
↔ Pas de scroll horizontal 🔲 Espacements adaptés
C'est la signature d'un site non responsive. Teste à toutes les tailles. Les marges et paddings pensés pour desktop sont souvent trop serrés sur mobile.

Ajoute un breakpoint quand ton contenu te le demande.

Requêtes média avancées

📚 Contenu de cours: Requêtes média avancées

Stratégies de breakpoints raisonnées

📚 Contenu de cour: Breakpoints arbitraires

Exercice media queries et breakpoints

👩🏻‍💻 Exercice carte adaptative media queries avancées

↗ Transformation CSS

  • translate
  • rotate
  • scale
  • skew
  • transform-orgin

📚 Contenu de cours: Transformation CSS ↗

Exercice transformation

👩🏻‍💻 Exercice transform: Pyramide, fleur, abysse, chevron, banderole et papillon

🔁 Transitions CSS

  • transition
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

📚 Contenu de cours: Transitions CSS 🔁

Exercice transition

👩🏻‍💻 Exercice transitions: Spiderman

👩🏻‍💻 Exercice transitions Bojack Horseman

DEVOIRS

Pour le groupe du mercredi seulement

Terminer les exercices transition CSS