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 à :

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 ?¶

Ouais. On sait que ça favorise la paresse intellectuelle, et alors ? Tant pis, tout le monde le fait 🤷

Partons de là, mais essayons de développer des compétences en chemin tout de même.

Ça passe par l'attitude. On pourrait le voir de 2 manières. Soit on utilise l'IA comme :

• tremplin pour accomplir en se développant (active le processus cognitif pour comprendre)
• raccourci pour accomplir en se débarrassant (sans exploiter le processus cognitif)

Github Copilot Educationnel

CSS Grid¶

En Web 2, vous avez vu Flexbox. Il reste une dernière petite notion pour avoir fait le tour de la mise en page en CSS : le display: grid;.

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

flexbox vs. grid¶

Usages de flexbox : Une barre de navigation, une rangée de boutons, un groupe d'étiquettes
Usages de grid : Le squelette d'une page, une galerie, un tableau de bord, tableau responsive.

Activer Grid¶

Par défaut, une grille crée une seule colonne et autant de rangées qu'il y a d'enfants.

<div class="grille">
  <div>E1</div>
  <div>E2</div>
  <div>E3</div>
  ...
</div>

Colonnes et lignes¶

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

grid-template-columns¶

Pour définir des colonnes, on inscrit des largeurs séparées par des espaces. Les enfants de la grille occuperont ces dimensions.

.grille {
  display: grid;
  grid-template-columns: 300px auto;
}

/*
Affiche 2 colonnes :
|-------------|---------------------------------|
     300px                   auto
*/

Bien que cet exemple soit assez fréquent, parfois on veut une structure un peu plus complexe et dynamique. On travaillera alors avec la notion de fraction.

Pour ce faire avec grid, nous utiliserons, non pas l'unité de pourcentage, mais plutôt l'unité de mesure de fraction : fr.

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

grid-template-columns: repeat(7, 1fr);

grid-template-rows¶

Définit la hauteur des rangées.

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

/*
Affiche 3 lignes :
- une de 100px de haut
- une qui s'adapte au contenu (auto)
- une de 50px de haut
*/

Espacements¶

Propriétés :

• column-gap : espace entre les colonnes
• row-gap : espace entre les lignes
• gap : raccourci pour les deux

.grille {
  gap: 20px;              /* colonnes ET rangées */
  column-gap: 30px;       /* juste colonnes */
  row-gap: 10px;          /* juste rangées */
}

Fusion de cellule¶

Ah là ça commence !

Maintenant qu'on a configuré la grille, on peut configurer les enfants et c'est là que ça devient vraiment intéressant ! Un enfant n'est pas contraint d'exister dans une cellule. Il peut s'étendre sur plusieurs.

Pour cela, on peut spécifier de où à où il doit aller, sur les colonnes comme sur les lignes.

.enfant {
  grid-column: 1 / 3; /* De la ligne 1 à la ligne 3 (2 colonnes) */
  grid-row: 1 / 2; /* De la ligne 1 à la ligne 2 (1 rangée) */
}

Span¶

On peut aussi configurer le nombre de cases à occuper sans spécifier d'emplacement.

.enfant-x { 
  grid-column: span 2;
  /* occupera 2 colonnes à partir de son emplacement */
}

Responsive¶

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

Résultat : la galerie passe toute seule de 4 colonnes sur un écran large à 1 colonne sur un téléphone. Aucun point d'arrêt à écrire.

Les valeurs négatives¶

Les lignes se comptent aussi à partir de la fin : -1 est toujours la dernière ligne, peu importe le nombre de colonnes.

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

Régions¶

Tout ça pour en arriver aux régions (areas).

Avec grid-template-areas, il est possible de concevoir le modèle de la grille avec des mots clés en css ! Ensuite, on assigne à l'enfant le mot clé avec la propriété grid-area et voilà, l'enfant va se positionner dans le layout.

<div class="grille">
  <div class="enfant"></div>
  ...
</div>

DONC, pour reproduire le layout, on aurait :

<div class="grille">
  <div class="enfant1"></div>
  <div class="enfant2"></div>
  <div class="enfant3"></div>
</div>

.grille {
  display: grid;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 50px 1fr;
  grid-template-areas:
    'sidebar header'
    'sidebar main';
}
.enfant1 {
  grid-area: sidebar;
}
.enfant2 {
  grid-area: header;
}
.enfant3 {
  grid-area: main;
}

Alignement global du contenu¶

Les configurations d'alignement ressemblent beaucoup à celles de flexbox.

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ée « Terminal » ou « Console ».

Le terminal¶

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

• Sous Windows, utilisez l'application PowerShell² (dans le cadre du cours, nous utiliserons plutôt Git Bash)
• Sous macOS, utilisez l'application Terminal³.
• Sous Linux, utilisez l'application Terminal⁴.

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 vrai, c'est juste une façade. En arrière-plan, le système exécute des commandes pour réaliser chacune des actions.

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

Voici une petite introduction aux commandes de base pwd, ls et cd :

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

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

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

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.

Nouveau dossier : mkdir¶

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

mkdir nom_du_dossier

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)
# ...

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.

mv chien.jpg chat.jpg

mv chat.jpg ./images/chat.jpg

Supprimer : rm¶

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

rm chat.jpg

Supprimer un répertoire¶

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

Nouveau fichier : touch¶

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

touch nouveau.txt

É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

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¶