Cours 2.1¶

Aujourd'hui¶

• Compléter l'activation de GitHub Copilot Pro
• Rafraîchissement CSS : layout moderne (flexbox/grid), variables, responsive
• Nouveau workflow UI/UX : Figma + IA générative
• Atelier : diverger, 3 à 4 directions visuelles
• Atelier : converger et critiquer (persona + accessibilité)
• Citer l'IA dans le journal de bord
• Journal de bord

Tel que prévu au plan de cours, il n'y aura pas de cours officiel vendredi le 4 septembre. . Vous pouvez venir au laboratoire pour avancer votre portfolio ou travailler de chez vous. . Raison pour laquelle il n'y a pas de cours ce vendredi : je viendrai vous visiter les 14 et 17 septembre prochains dans les cours de Préparation au milieu du travail pour l'évaluation formative Planification et design (rencontre et rétroaction).

Nouvel onglet "Ressources" dans équipe Web5 dans Teams¶

J'ai ajouté une liste de ressources dans l'onglet dans Teams : Banques images, vidéos, sons

Banques d'images libre de droit, sons, icônes, polices de caractère, palettes de couleur, banque de vidéos etc.

Compléter l'activation des outils 🛠️¶

GitHub Copilot Pro¶

Si ce n'est pas encore fait, complétez la procédure via votre compte GitHub Éducation.

GitHub Education Copilot Pro VS Code

Extensions Visual Studio Code¶

• Visual Studio Code en français : French Language Pack for Visual Studio Code
• Connecteur Antidote
• Figma for VS Code
• Live Server

Copilot pas-à-pas¶

1. Ouvrir une nouvelle fenêtre (Ctrl + Shift + N) pour ne pas interférer avec votre projet actuel.
2. Sous la section Procédure pas-à-pas, cliquer sur le petit Plus... bleu en bas.
3. Taper Github Copilot dans la boîte de recherche et sélectionner :
4. Parcourir les 5 étapes de la procédure pas-à-pas pour mieux comprendre l'interface et les fonctionnalités de Copilot. Cocher lorsque vous avez bien compris l'étape.

Citer l'utilisation de l'IA dans le journal de bord ✍️¶

Pour ce cours, cette citation se fait directement dans votre JOURNAL.md.

Vous ne devez pas inclure les autocomplétions de Copilot (VS Code) dans votre journal, mais vous devez inclure toute question posée à l'IA, que ce soit avec Copilot intégré à VS Code ou un autre outil IAG (Figma, ChatGPT, etc.).

Éléments à inclure¶

• Date : La date précise du prompt ou de la question posée à l'IA.
• Prompt : Le texte exact utilisé, en italique.
• Outil : Le nom du logiciel utilisé.
• Résultat : Une description de ce que l'IA a généré, et ce que vous avez fait avec ce résultat (accepté tel quel, modifié, rejeté, etc.).

Exemple de citation dans JOURNAL.md¶

- **Date :** 2026-09-01
- **Prompt :** "Crée une liste de cartes de projets en HTML et CSS, avec la technique CSS Grid, qui s'adapte à la largeur de l'écran. Chaque carte doit contenir une image, un titre et une description."
- **Outil :** Co-Pilot (VS Code)
- **Résultat :** Le code généré par l'IA a été intégré dans le fichier `index.html` et `style.css`. J'ai ensuite moi même modifié la couleur de fond des cartes et ajusté la taille de la police pour améliorer la lisibilité.

Rafraîchissement CSS : layout moderne 🎨¶

Vous connaissez déjà flexbox depuis Web 2. Aujourd'hui, on l'utilise en contexte : on construit ensemble une petite carte de contenu (le genre de bloc qu'on retrouve partout dans un portfolio), en combinant grid, flexbox, variables CSS et responsive. Suivez et codez en même temps.

Structure de départ¶

<div class="grille-cartes">
  <article class="carte">
    <img src="image.jpg" alt="">
    <div class="carte-contenu">
      <h3>Titre du projet</h3>
      <p>Courte description du projet.</p>
      <a href="#">Voir le projet</a>
    </div>
  </article>
  <!-- répéter .carte -->
</div>

Étape 1 : Grid pour la mise en page générale¶

Grid gère l'agencement global des cartes entre elles, colonnes qui s'ajustent automatiquement selon l'espace disponible.

.grille-cartes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

Zoom sur repeat(), minmax() et auto-fit 🔎¶

C'est le trio qui rend une grille responsive sans écrire une seule media query. Décortiqué ligne par ligne :

grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

• repeat(n, taille) : répète un patron de colonnes n fois. Ici, n n'est pas un nombre fixe, c'est le mot-clé auto-fit, qui veut dire « mets autant de colonnes que l'espace le permet ».
• minmax(min, max) : chaque colonne mesure au minimum min, et grandit jusqu'à max s'il reste de la place. Ici, chaque colonne fait au moins 260px, et se partage l'espace restant (1fr) avec les autres.
• auto-fit : calcule le nombre de colonnes possibles, puis étire les colonnes existantes pour combler tout l'espace, aucune colonne vide ne reste.

CSS Grid, intro Conteneur et template

Étape 2 : Flexbox pour l'intérieur d'une carte¶

Flexbox aligne le contenu à l'intérieur d'une carte, en colonne, avec le bouton toujours poussé vers le bas peu importe la longueur du texte.

.carte {
  display: flex;
  flex-direction: column;
}

.carte-contenu {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.carte-contenu a {
  margin-top: auto;
}

Aller plus loin : Flexbox

Étape 3 : Variables CSS¶

On sort les valeurs répétées (couleurs, espacements) en variables, définies une fois, réutilisées partout.

:root {
  --couleur-accent: #ff2b47;
  --couleur-texte: #1a1a1a;
  --espace: 1.5rem;
  --radius: 8px;
}

.carte {
  padding: var(--espace);
  border-radius: var(--radius);
}

.carte-contenu a {
  color: var(--couleur-accent);
}

Aller plus loin : variables, unités, fonctions

Étape 4 : Responsive, mobile-first¶

On écrit les styles de base pour mobile, puis on ajuste pour les écrans plus larges avec une media query.

.grille-cartes {
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .grille-cartes {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

Aller plus loin : media queries et breakpoints

Nouveau workflow UI/UX : Figma + IA générative 🤖🎨¶

Le design ne part plus d'une page blanche. L'IA de Figma sert à explorer rapidement plusieurs pistes avant de raffiner à la main.

Apprendre à utiliser Figma First Draft pour générer des directions visuelles¶

:material-figma: Figma First Draft

La boucle diverger / converger¶

1. Diverger : générer plusieurs directions visuelles très différentes les unes des autres avec *Figma First Draf*t, à partir d'un brief clair (votre persona, votre moodboard).
2. Converger : évaluer chaque direction contre des critères précis, pas selon un simple coup de cœur.

Atelier : diverger, 3 à 4 directions 🌱¶

Individuellement, à partir de votre persona et de votre moodboard du dernier cours, générez 3 à 4 directions visuelles distinctes avec Figma First Draft.

Atelier : converger et critiquer 🔍¶

En dyade ou petit groupe, présentez vos directions et recevez une critique selon deux filtres seulement :

• Persona : est-ce que cette direction parle à la bonne personne, celle définie au cours dernier?
• Accessibilité : contraste suffisant, hiérarchie visuelle claire, lisibilité.

À la fin de l'atelier, chacun repart avec une direction retenue, et une phrase qui justifie pourquoi.

Devoirs 📓¶

• Réaliser les maquettes Figma pour les directions retenues. Si vous utilisez l'IA de Figma, citez vos prompts dans le journal de bord..
• Rappel : vendredi 4 sept, pas de cours. Travail autonome : avancer les maquettes Figma et justifier vos choix technos dans PLANIFICATION.md.
• Si tu ne l'as pas encore fait, complète le quiz diagnostique JavaScript
  • Gr1 mercredi AM
  • Gr2 mercredi PM