Aller au contenu

Cours 5.2

Horaire spécial aujourd'hui

Afin de vous accommoder pour la conférence du mercredi 24 septembre à 17h voici l'horaire de la journée pour Web 5:

  • Groupe 2 du matin commence à 9h50 comme d'habitude mais termine 25min plus tôt, soit à 13h.

    9h50 à 13h - Groupe 1 d'après-midi commence 45 min plus tôt, soit à 13h40 et termine à 16h45.

    13h40 à 16h45

Projet portfolio (25%)

Projet Portfolio - Infos générales
Instructions de la remise 3: suivi de votre travail d'intégration HTML/CSS 1er octobre

Aujourd'hui

  • CSS Grid
    • Introduction
    • Styles du conteneur: grid-template-columns et grid-template-rows.
    • Espacement avec gap.
    • Unités fr, minmax()et repeat().
    • Styles des éléments enfants à placer: grid-column et grid-row
    • Définir les 4 coins de l'élément enfant à placer avec grid-area
    • Style du conteneur: grid-template-areas: : nommer des zones dans une grille

CSS Grid

CSS Grid: Introduction
Styles du conteneur:
grid-template-columns et grid-template-rows.
Espacement avec gap.
Unités fr, minmax() et repeat().

Exercices

CSS Grid (suite)

Styles des éléments enfants à placer:
grid-column et grid-row
Définir les 4 coins de l'élément enfant à placer: grid-area
Styles du conteneur: grid-template-areas: nommer des zones dans une grille

Résumé en 100 secondes

Autres références

Référence : CSS Tricks: CSS Grid Layout Guide

MDN: Les concepts de base des grilles CSS

Exercices

Devoirs

  • Terminer les 6 exercices grid css pour mercredi le 1er octobre
  • Faire l'intégration CSS+HTML de votre portfolio pour mercredi le 1er octobre