Web 101

Institut Villebon–Georges Charpak

Bienvenue

Ce cours vous apprend à fabriquer un site web, en partant de zéro.

Pas besoin de savoir programmer. Pas besoin d’avoir déjà utilisé un terminal. On avance doucement, une idée à la fois, et on vérifie à chaque étape que ça marche.

AstuceLa règle du cours

Si vous ne comprenez pas quelque chose, c’est normal et il faut le dire. Une notion mal comprise en séance 3 rend la séance 6 impossible. On préfère avancer moins vite et que tout le monde suive.

Comment lire une séance

Chaque séance suit toujours le même plan :

Bloc Ce que ça veut dire
🎯 Objectifs Les 3 choses que vous saurez faire à la fin
🟩 Étapes On les fait ensemble, en recopiant le code
🟧 À toi de jouer Vous le faites seul·e. La correction est cachée : essayez d’abord !
🟪 Fiche mémo Ce qu’il faut retenir. À relire avant la séance suivante
ImportantLes corrections sont volontairement repliées

Cliquez sur ▸ Solution uniquement après avoir essayé au moins 5 minutes. Regarder la solution tout de suite donne l’impression d’avoir compris… jusqu’à l’évaluation.

Le programme : 14 séances de 2 h

Partie 1 — La page web

# Séance Ce qu’on apprend
1 Ma première page web Fichiers, dossiers, VS Code, terminal, HTML minimal
2 HTML : le contenu Titres, textes, listes, liens, images
3 CSS : l’essentiel Couleurs, classes, boîtes

Partie 2 — Le code

# Séance Ce qu’on apprend
4 Les variables Stocker une valeur, les types de base
5 Réagir au clic Modifier la page depuis le code
6 Les conditions if / else, comparaisons
7 📝 Évaluation 1 Sur les séances 1 à 6

Partie 3 — Programmer pour de vrai

# Séance Ce qu’on apprend
8 Listes et boucles Tableaux, for…of, générer du HTML
9 Les fonctions Ranger son code et le réutiliser
10 Les formulaires Lire ce que tape l’utilisateur, valider

Partie 4 — Manipuler des données

# Séance Ce qu’on apprend
11 Objets et classes Regrouper des informations, la POO
12 JSON et les erreurs Données en texte, try / catch
13 Données depuis Internet fetch, une vraie API → mini-projet
14 📝 Évaluation 2 Sur tout le cours
NoteEt Node, npm, Astro et TypeScript ?

Ces outils sont volontairement en dehors du programme obligatoire : ils demandent une installation lourde et détournent l’attention de l’essentiel.

Tout le cours se fait avec de simples fichiers et l’extension Live Server — et pourtant on ira jusqu’aux formulaires et aux données récupérées sur Internet.

Une annexe bonus leur est consacrée, pour ceux qui veulent voir à quoi ressemble un vrai projet professionnel.

Avant de commencer

Vérifiez que vous avez bien :

C’est tout. Rien d’autre à installer de tout le semestre.

En cas de problème