Aller au contenu

Cours 1

Introduction

Fini le développement Web rudimentaire qui consistait à coder tout manuellement. Cette session, on introduit des standards de l'industrie pour passer en mode professionnel. Nous apprendrons à :

Utiliser les lignes de commande (CLI)

Automatiser le développement Web avec des composantes.

Confectionner des interfaces animées et interactives

Yet another intro sur l'intelligence artificielle 😅

En 2026, l'intelligence artificielle est indissociable du développement Web. Le vibe coding devient plus populaire que jamais.

En fait, la programmation en chat n'est même plus tant utilisée. On est plus à l'ère des agents autonomes qui codent et exécutent des vagues d'actions complexes pour nous. On pense notamment à Github Copilot, Codex d'OpenAI ou Claude Code d'Anthropic.

Ces modèles reposent sur l'usage de tokens et d'une large fenêtre de contexte. Plus il y a de contexte, plus l'IA « comprend » l'application globale.

C'est génial, non ?

Le vibe coding et l'agentic coding favorisent malheureusement la paresse intellectuelle. Sans compréhension technique pour superviser l'agent, on troque la rigueur contre une perte de contrôle sur le code qu'on ne comprend plus.

Prenez votre temps 🧘

Prenez le temps de comprendre le code généré, de lire les explications, de remettre en question les solutions proposées et de valider les décisions prises par l’agent.

Plan de cours

Plan de cours

CSS Grid

En Web 2, vous avez vu Flexbox. Il y a juste une dernière notion à connaitre pour avoir fait le tour du CSS, le display: grid;.

Le système de grille permet, pour sa part, d’organiser une page Web en lignes et colonnes, un peu comme un tableau invisible sur lequel on place des éléments.

Contrairement à Flexbox, qui aligne les éléments les uns après les autres dans un seul axe (horizontal OU vertical), Grid est pensé pour gérer les deux axes en même temps. Donc avec grid, il n'y a pas de principe d'orientation comme en flex.

Guide css-tricks (Cheatsheet)

Quand l'utiliser ?

  • Pour construire des layouts de page (header, nav, aside, main, footer).
  • Pour des galeries d’images où les items doivent s’adapter automatiquement.
  • Pour organiser du contenu sous forme de tableaux flexibles et responsives.

https://jfcmontmorency.github.io/css-grid-playground/

Activer Grid

HTML
<div class="grille">
  <div>A</div>
  <div>B</div>
  <div>C</div>
  <div>D</div>
  <div>E</div>
</div>
CSS
.grille {
  display: grid;
}

Tous les enfants directs deviennent des items de la grille, mais pour que le comportement de grille se fasse voir, il faut spécifier les colonnes / lignes. Sinon on dirait de simples div normales.

Colonnes et lignes

Les propriétés grid-template-columns et grid-template-rows sont la base pour créer un quadrillage précis.

grid-template-columns

Définit la largeur des colonnes de la grille.

.grille {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
}

Crée 3 colonnes :

  • une fixe de 100px
  • une fluide qui prend l’espace restant (1fr = 1 fraction)
  • une fixe de 100px

grid-template-rows

Définit la hauteur des rangées.

.grille {
  display: grid;
  grid-template-rows: 100px auto 50px;
}

Crée 3 lignes :

  • une de 100px
  • une qui s’adapte au contenu (auto)
  • une de 50px

Raccourcis utiles

repeat()
grid-template-columns: repeat(3, 1fr);
/* 
est identique à 
grid-template-columns: 1fr 1fr 1fr;
*/
repeat + auto-fit = responsive !
/* 
Chaque colonne doit avoir au moins 150px,
mais peut grandir jusqu’à occuper une fraction de l’espace dispo.
*/
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

À vous de jouer

Avant de continuer, recréez une grille de 4 colonnes égales et 2 rangées de 100px chacune (grid-template-columns + grid-template-rows) directement dans un des CodePen ci-dessus.

Zones

La propriété grid-template-areas donne un nom à des zones de la grille. Ça sert à être plus lisible et facile à maintenir.

Exemple
.grille {
  display: grid;
  grid-template-columns: 30px 1fr 1fr;
  grid-template-rows: 60px 1fr;
  grid-template-areas:
    "allo allo allo"
    "bravo cadeau cadeau";
}

Puis on assigne chaque élément :

Exemple
.div1 { grid-area: allo; }
.div2 { grid-area: bravo; }
.div3 { grid-area: cadeau; }

Espacements

Propriétés :

  • column-gap : espace entre les colonnes
  • row-gap : espace entre les lignes
  • gap : raccourci pour les deux
Exemple
.grille {
  gap: 20px;              /* colonnes ET rangées */
  column-gap: 30px;       /* juste colonnes */
  row-gap: 10px;          /* juste rangées */
}

Alignement global du contenu

Les propriétés justify-content et align-content gèrent l’alignement de l’ensemble de la grille, pas des items individuellement.

justify-content

Aligne la grille entière horizontalement dans le conteneur, si celui-ci est plus large que la somme des colonnes.

Exemple
.grille {
  justify-content: center;   /* centre la grille horizontalement */
}

align-content

Aligne la grille entière verticalement, si la hauteur du conteneur est plus grande que celle des lignes.

Exemple
.grille {
  align-content: space-between;
}

Alignement des items dans les cellules

align-items / justify-items

align-items

justify-items

Les propriétés align-items et justify-items contrôlent l’alignement par défaut des items dans leurs cellules.

Exemple
.grille {
  //...
  align-items: end;
  justify-items: center;
}

Tous les enfants s’aligneront ainsi, sauf si un item définit ses propres règles.

align-self / justify-self

align-self

justify-self

Permettent d’aligner un item individuel dans sa cellule.

Exemple
.item {
  align-self: end;         
  justify-self: center;    
}

place-items

place-items est un raccourci pratique qui combine align-items (axe vertical) et justify-items (axe horizontal) en une seule propriété.

.grille {
  /* équivalent à align-items: center; justify-items: center; */
  place-items: center;
}

Note : place-items s'applique au conteneur de la grille et définit l'alignement par défaut pour tous les items. Les propriétés individuelles align-self / justify-self peuvent toujours être utilisées pour surcharger l'alignement d'un item spécifique.

Placement manuel

Les propriétés de positionnement permettent de définir précisément où commence et finit un élément dans la grille.

grid-row-start / grid-row-end

Définissent sur quelle ligne horizontale un item commence et finit :

.item {
  grid-row-start: 1;    /* commence à la 1ère ligne horizontale */
  grid-row-end: 3;      /* finit avant la 3e ligne horizontale */
  /* L'item occupe donc les rangées 1 et 2 */
}

grid-column-start / grid-column-end

Définissent sur quelle ligne verticale un item commence et finit :

.item {
  grid-column-start: 2;  /* commence à la 2e ligne verticale */
  grid-column-end: 5;    /* finit avant la 5e ligne verticale */
  /* L'item occupe donc les colonnes 2, 3 et 4 */
}

Note : Il est possible d'utiliser des valeurs négatives 🤪 Elles comptent à partir de la fin de la grille : -1 correspond à la dernière ligne, peu importe le nombre de colonnes ou de rangées.

.item {
  grid-column: 1 / -1; /* occupe TOUTE la largeur de la grille, du début à la fin */
}

Raccourcis grid-column / grid-row

Les propriétés grid-column et grid-row permettent à un item d’occuper plusieurs cases de la grille.

.item {
  /* Raccourci pour grid-column-start: 2 et grid-column-end: 5 */
  grid-column: 2 / 5; 

  /* Raccourci pour grid-row-start: 1 et grid-row-end: 3 */
  grid-row: 1 / 3;    
}

Très utile pour créer des mises en page asymétriques (un bloc plus grand que les autres).

Raccourci des raccourcis grid-area

grid-area combine toutes les propriétés de positionnement en une seule ligne :

.item {
  grid-area: 1 / 5 / 4 / 6;

  // Équivalent à :
  //   grid-row-start: 1
  //   grid-column-start: 5  
  //   grid-row-end: 4
  //   grid-column-end: 6
}

L'ordre des valeurs est : row-start / column-start / row-end / column-end

Note sur le mot-clé span

Dans le système grid, span est un mot-clé utile pour indiquer qu'un item doit occuper un certain nombre de lignes ou colonnes sans préciser explicitement l'index de fin.

/* 
Commence à la colonne 2 et s'étend sur 3 colonnes (2,3,4) 
Équivalent de : .item { grid-column: 2 / 5; }
*/
.item { grid-column: 2 / span 3; }

En résumé : trois façons de positionner un item

Propriété Quand l'utiliser Exemple
grid-template-areas + grid-area: nom Mise en page nommée et facile à visualiser (header / nav / main / footer) grid-area: header;
grid-column / grid-row Placement rapide par numéros de lignes grid-column: 2 / 5;
grid-area: r1 / c1 / r2 / c2 Positionnement précis en une seule déclaration grid-area: 1 / 5 / 4 / 6;

Lignes de commande

La ligne de commande est un outil qui permet d’interagir avec un ordinateur (en local ou à distance) en tapant des commandes textuelles.

On écrit ces commandes dans une interface textuelle (CLI) appelé « Terminal » ou « Console ».

Le terminal

Terminal

Terminal sur Mac

PowerShell

Terminal sur Windows

Aucune installation n'est normalement requise. Un terminal existe déjà sur votre ordinateur.

  • Sous Windows, utilisez l'application PowerShell1 (dans le cadre du cours, nous utiliserons plutôt Git Bash)
  • Sous macOS, utilisez l'application Terminal2.
  • Sous Linux, utilisez l'application Terminal3.

Sacré Windows 😤

C'est bien connu, Windows est très propriétaire dans son approche et ses lignes de commande lui sont propres.

Le hic c'est que dans le monde du Web, la grande majorité des serveurs fonctionnent sous Linux et non sur Windows.

Il est donc important d'apprendre les commandes Linux. Pour ce faire sous Windows, on utilise généralement une alternative à PowerShell (comme Git Bash ou WSL). C'est le moyen le plus simple d'exécuter des lignes de commande Linux sans changer de système.

Au Cégep, « Git Bash » est déjà installé 🙌. Si vous devez l'installer à la maison, consulter le guide d'installation de « Git Bash ».

Il y a plusieurs autres accès pour communiquer en ligne de commande. Par exemple, vscode a une interface de terminal. Github desktop aussi.

Commandes courantes

Lorsque vous naviguez dans Windows, vous utilisez une interface graphique. Vous cliquez sur des fenêtres et des dossiers pour vous déplacer sur votre ordinateur. En réalité, cette interface n’est qu’une façade. En arrière-plan, le système exécute des commandes pour réaliser chacune de vos actions.

Nous allons maintenant apprendre à naviguer sur l’ordinateur uniquement à l’aide de la ligne de commande.

Voici une petite introduction aux commandes pwd, ls et cd (à consulter en plein écran) :

Répertoire courant : pwd

La commande pwd affiche le chemin complet du dossier dans lequel vous vous trouvez actuellement.

pwd
# /c/Users/jfcartier/OneDrive/Desktop

pwd

Liste : ls

La commande ls est utilisée pour lister le contenu d'un répertoire.

ls
# mandarine.png
# nofx.jpg
# patate-pilee.html
# un-dossier
# v.jpg

pwd

Se déplacer : cd

La commande cd est utilisée pour déplacer dans l'arborescence des dossiers.

Elle fait l'équivalent de double cliquer sur des dossiers dans l'Explorateur Windows.

cd nom_du_dossier

cd

Chemins relatifs

Vous vous souvenez des chemins relatifs ?

Chemin relatif : ./images/chat.jpg Chemin absolu : /c/Users/123456789/OneDrive/Desktop/mon-site-web/images/chat.jpg

Le chemin relatif qui commence par un "." veut dire que le chemin commence par le répertoire courant.

Admettons qu'on se trouve dans le répertoire mon-site-web, le point est un raccourci pour écrire : /c/Users/123456789/OneDrive/Desktop/mon-site-web.

pwd
# /c/Users/123456789/OneDrive/Desktop/mon-site-web
cd images
pwd
# /c/Users/123456789/OneDrive/Desktop/mon-site-web/images

Parent

Si le simple point . représente le répertoire courant, le double point .. représente le dossier parent.

pwd
# /c/Users/123456789/OneDrive/Desktop/mon-site-web
cd ..
pwd
# /c/Users/123456789/OneDrive/Desktop

Nouveau dossier : mkdir

La commande mkdir est utilisée pour créer de nouveaux répertoires.

mkdir nom_du_dossier

mkdir

Lire un fichier : cat 😸

La commande cat est utilisée pour afficher le contenu des fichiers dans le terminal.

cat README.md
# Vite (French word for "quick", pronounced /viːt/, like "veet") is a build tool 
# that aims to provide a faster and leaner development experience for modern web 
# projects. It consists of two major parts...
#
# License
# [MIT](LICENSE)
# ...

cat

Dupliquer : cp

La commande cp est utilisée pour copier des fichiers ou des répertoires d'un emplacement à un autre.

cp allo.txt salut.txt

Renommer / déplacer : mv

La commande mv est utilisée pour déplacer ou renommer des fichiers ou des répertoires.

Renommer
mv chien.jpg chat.jpg
Déplacer
mv chat.jpg ./images/chat.jpg

Supprimer : rm

Les fichiers supprimés ne peuvent pas être récupérés.

La commande rm est utilisée pour supprimer des fichiers.

rm chat.jpg

Supprimer un répertoire

Soyez particulièrement prudent, car les répertoires supprimés ne peuvent pas être récupérés.

La commande rm -r est utilisée pour supprimer des répertoires.

Sans le -r, la commande rm ne peut pas supprimer de répertoire.

rm -r nom_du_dossier

rm

Nouveau fichier : touch

La commande touch est utilisée pour créer un fichier vide si celui-ci n'existe pas.

touch nouveau.txt

touch

Écriture : echo

La commande echo peut ajouter du texte dans un fichier. Si le fichier n'existe pas, il le crée.

echo "Texte à ajouter" >> nom_du_fichier.txt
echo "Texte en deuxième ligne" >> nom_du_fichier.txt
echo "Texte en troisième ligne!" >> nom_du_fichier.txt

echo "Finalement, remplace tout par ceci" > nom_du_fichier.txt

Éditeur de texte

Si vous devez écrire un paragraphe ou modifier un fichier existant, il est préférable d'ouvrir un éditeur de texte dans le terminal. L'équivalent de ça c'est vscode.

nano nom_du_fichier.txt

Important 😅

  • Pour sauvegarder : Ctrl+O puis Enter
  • Pour quitter : Ctrl+X

Bon à savoir (QoL)

  • Tab permet de compléter une ligne de commande si la suite est évidente
  • Up et Down permet de naviguer à travers l'historique des commandes
  • Ctrl+C permet d'annuler la commande en cours
  • La commande clear permet de nettoyer le terminal

Exercices

Exercice - grid
Spirale

https://gridcritters.com/

https://stephaniewalter.design/blog/fun-places-to-learn-css-layout-part-2-grid-layout/

Exercice - CLI
Mandala

  1. https://learn.microsoft.com/fr-ca/training/modules/introduction-to-powershell/ ↩

  2. https://support.apple.com/fr-ca/guide/terminal/welcome/mac ↩

  3. https://ubuntu.com/tutorials/command-line-for-beginners (en anglais) ↩