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
    • Transitions CSS
  • 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

Retour sur exercice "Première media query: albums de musique"

Première media query: albums de musique

Gap et largeur de colonnes dans les grilles Flexbox

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

Atelier Zone-Out 🎮 (breakpoint-media queries)

  • 🟢 Niveau 1
  • 🟡 Niveau 2
  • 🔴 Niveau 3

Vous débutez en classe mais vous allez devoir le terminer en devoir pour le prochain cours dans 2 semaines (13 avril).

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

Pendant l'exercice: Rencontres individuelles ciblées pour valider le projet 1.

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 translate: Pyramide, fleur, abysse, chevron, banderole et papillon

DEVOIR

  • Terminer l'atelier Zone-Out (3 fichiers HTML groupés et compressés .zip)
  • Terminer l'exercice carte adaptative media queries avancées (1 CodePen)
  • Terminer l'exercice transformations CSS (6 CodePens distincts)