Cours 113 - Langages et développement WEB
Informations générales
| Élément | Détail |
|---|---|
| Code | C113 |
| Classe | ESIG1 (1ère année) |
| Période | 19 août 2026 → 23 décembre 2026 |
| Jour | Mercredi |
| Horaire | 12:55 - 14:25 |
| Salle | A2-07 |
| Dotation | 30 périodes (15 séances × 2 périodes) |
| Prérequis | Aucun |
Objectifs du cours
À la fin de ce cours, vous serez capable de :
- Structurer une page web avec des balises HTML sémantiques
- Présenter des données dans un tableau
- Mettre en forme un site avec CSS (couleurs, typographie, box model)
- Créer des mises en page modernes avec Flexbox et CSS Grid
- Positionner des éléments les uns par rapport aux autres
- Rendre un site adaptatif avec l'approche mobile-first et les media queries
- Versionner votre code avec Git et le publier avec GitHub Pages
- Valider, optimiser et auditer un site (W3C, images, accessibilité, Lighthouse)
Documents
| Document | Description |
|---|---|
| Plan d'enseignement | Planning des 15 séances avec objectifs détaillés |
| Créer ses comptes | Tutoriel GitHub + JetBrains (devoir de la séance 1) |
| Premier dépôt et mise en ligne | Créer son dépôt GitHub, le cloner dans WebStorm et publier avec GitHub Pages |
| Exercice - mon premier CV | Entraînement en trois paliers, des 2, 9 et 16 septembre |
| Git en 4 gestes | Antisèche du rituel commit + push de fin de séance |
| Présentation « Démarrage » | Slides interactives des séances 1 et 2 (web, HTML, Git) |
| Projet personnel | Consignes et grille d'évaluation du projet fil rouge |
Outils
Plateforme d'exercices
Nuxy est la plateforme interactive pour pratiquer HTML et CSS :
- Éditeur de code avec aperçu en direct
- Validation automatique des exercices
- Solutions et indices intégrés
Rejoindre la classe ESIG1
Lien d'inscription à la classe : nuxy.ch/join/8a0326eb
Environnement de développement
- WebStorm : IDE principal (raccourcis JetBrains)
- Git + GitHub : Versionnement et publication du code (GitHub Pages)
- Brave / Firefox : Navigateurs avec DevTools
Outils de validation et d'optimisation
- Validateur W3C : Validation du HTML
- WAVE : Audit d'accessibilité
- Squoosh : Optimisation des images (WebP)
- Lighthouse : Audit de performance (intégré aux DevTools)
Ressources externes
- MDN Web Docs (FR) : Référence HTML et CSS
- OpenClassrooms - Créez votre site web avec HTML5 et CSS3 : Cours complémentaire
- Flexbox Froggy et CSS Diner : Jeux pour pratiquer
Organisation du cours
En classe
Chaque séance suit le même rythme :
- 1ère période : démonstration live du prof (nouveau concept)
- 2ème période : mise en pratique directe sur votre projet personnel
- 5 dernières minutes : commit + push (Git en 4 gestes)
Chaque démonstration est enregistrée avec Teams et déposée dans le fil de discussion du canal de la classe : absent, ou envie de revoir un geste au calme ? C'est là. Les enregistrements restent sur Teams, réservés à la classe — ils ne sont pas publiés ici.
En devoirs (Nuxy)
- Exercices HTML/CSS de consolidation
Avec l'IA
La règle d'or du cours : comprendre 100 % de son code. L'IA est autorisée comme assistante, pas comme auteure. Concrètement, la bonne question à lui poser est « il y a une erreur dans mon code, aide-moi à la trouver et explique-moi » — jamais « donne-moi le code ». Copier-coller ce qu'on ne comprend pas ne s'apprend pas, et ne se retrouve pas le jour de l'examen, sur papier.
- Préparation de la séance suivante
Projet fil rouge : votre site personnel
Dès la séance 5, vous développez un site web complet sur un sujet de votre choix, du premier commit jusqu'à la mise en ligne. Chaque nouveau concept vu en classe est appliqué directement dans votre projet.
Contraintes du projet
Pas de template, pas de framework CSS, pas de CDN, pas de JavaScript. Tout le code doit être écrit et compris par vous (l'IA est autorisée si vous comprenez 100 % du code et le mentionnez dans le README).
Conseil
Travaillez votre projet régulièrement : chaque séance apporte une brique. Un site construit au dernier moment se voit tout de suite dans la note.
Évaluation
- Évaluations formatives : Exercices et jalons du projet corrigés en cours de semestre
- Examen blanc : Séance 14 (16 décembre 2026) — sur papier, sans supports de cours, dans les mêmes conditions que l'épreuve de module
- Projet personnel : 20 points, rendu le vendredi 8 janvier 2027
- Épreuve de module M11 : mercredi 13 janvier 2027, 08:30 - 11:50. Épreuve commune aux branches C111, C112 et C113 ; la partie C113 (HTML/CSS) compte 20 points