Fiche d'unité d'enseignement · Année académique 2026-2027
11E12—Langages du web
Crédits ECTS
4
Volume horaire
40h
Quadrimestre
Q1
Niveau CFC
6
Identification
Activités d'apprentissage
| Code | Intitulé | Quadri. | Heures | ECTS | Pondération |
|---|---|---|---|---|---|
| 11E12-A | Bases de HTML | Q1 | 20 h | 2 | 50 |
| 11E12-B | Bases de CSS | Q1 | 20 h | 2 | 50 |
| Total UE | 40 h | 4 | 100 | ||
Objectif de l'UE
Cette unité d’enseignement vise à initier l’étudiant·e aux langages fondamentaux du développement web Front-End. Elle lui permet d’acquérir les bases nécessaires pour structurer, mettre en forme et adapter des pages web en mobilisant de manière complémentaire HTML et CSS. L’étudiant·e développe ainsi sa capacité à comprendre, produire, analyser et corriger du code afin de réaliser des interfaces web structurées, lisibles et adaptées aux différents supports.
Critères de réussite
La cotation globale de l'UE se fait en calculant la moyenne arithmétique pondérée des notes obtenues aux AA.
Cohérence de l'UE
Les AA de cette UE sont associées soit en raison de leur cohérence disciplinaire, soit en raison de la complémentarité des compétences et des capacités qu'elles évaluent.
Détail des activités d'apprentissage
11E12-ABases de HTML
Enseignant(s) : Hassane Njimi
Objectifs et acquis d'apprentissage
À l’issue de l’activité, l’étudiant(e) maîtrisera les bases du développement Front-End en HTML. Il/Elle saura créer et structurer des pages web, transformer une maquette en page HTML et utiliser un éditeur de code pour concevoir des sites web.
Descriptif
Cette activité d’enseignement vise à initier l’étudiant(e) au développement web Front-End, en se concentrant sur l’utilisation du langage HTML. L’étudiant(e) apprendra à créer des pages web structurées en utilisant des balises HTML de base et des balises sémantiques pour organiser le contenu de manière claire et accessible. L’activité comprendra la réalisation de pages simples intégrant du texte, des images, des listes et des liens, ainsi que l’utilisation d’éléments plus avancés tels que des tableaux, des formulaires et du contenu multimédia (audio, vidéo).
Méthodes d'apprentissage
L’apprentissage se fait de manière progressive et pratique, à travers des exercices sur ordinateur. La présence est essentielle, et l’accès à un ordinateur est nécessaire, aussi bien pendant les ateliers qu’en dehors, pour compléter les exercices.
Compétences et capacités
C2. Interagir avec son milieu professionnel
- 2.6 Connaître et utiliser les formes, structures, genres, langages et théories de la création multimédia interactive.
Évaluation — première session
Travail individuel.
Évaluation — seconde session
Travail individuel.
Évaluation — Plan B
Pas d’évaluation spécifique en plan B.
Supports
Le support de cours comprendra des présentations PowerPoint (.ppt), des documents en ligne, des sites web et des livres, afin d’illustrer et d’approfondir les concepts abordés.
11E12-BBases de CSS
Enseignant(s) : Laetitia Pottiez
Objectifs et acquis d'apprentissage
En 2026, les builders, WordPress et l'IA génèrent du CSS à la demande. L'enjeu du cours n'est donc pas d'apprendre à taper du CSS toute une carrière, mais de comprendre ce qui se passe pour piloter ces outils, corriger ce qui casse et ne pas subir un code que l'on ne comprend pas. Au terme de l'activité, l'étudiant·e sera capable de : - comprendre et écrire du CSS valide (syntaxe, sélecteurs, cascade, héritage, spécificité) ; - utiliser les outils de développement du navigateur pour inspecter, tester et diagnostiquer un code CSS ; - structurer une mise en page avec le modèle de boîte, le positionnement, Flexbox et Grid ; - rendre une page responsive (mobile et desktop) ; - ajouter des interactions simples (états, transitions) ; - lire, corriger et challenger du CSS produit par un builder ou une IA ; - produire un code CSS lisible et organisé ; - expliquer et défendre ses choix techniques.
Descriptif
Le cours pose les bases du CSS à travers une approche active et ludique. Chaque séance suit la même mécanique en deux temps : comprendre un mécanisme, démontré en direct dans l'inspecteur du navigateur, puis l'appliquer à travers un jeu ou un défi ciblé. Les contenus abordés sont la syntaxe et les sélecteurs, la cascade et la spécificité, le modèle de boîte, le positionnement, Flexbox, Grid, le responsive design (media queries, unités relatives), les pseudo-classes et pseudo-éléments, les transitions et les variables CSS. Trois fils conducteurs traversent le cours : - un projet fil rouge, « Extreme Makeover » : une page HTML volontairement disgracieuse que l'étudiant·e transforme séance après séance, jusqu'à en faire une pièce de portfolio ; - un diagnostic en ouverture de chaque séance, « CSS Autopsy » : un bug caché à trouver et à expliquer ; - un regard critique sur le code généré par les builders et l'intelligence artificielle.
Méthodes d'apprentissage
- Démonstrations en direct dans les outils de développement du navigateur - Apprentissage par le jeu : défis de reproduction en temps limité, Flexbox Froggy, Grid Garden, CSS Zen Garden - Projet fil rouge enrichi à chaque séance - Exercices de diagnostic et de correction de bugs - Analyse critique de code généré par une IA - Accompagnement et feedback en continu
Compétences et capacités
C2. Interagir avec son milieu professionnel
- 2.1 Comprendre les concepts, le vocabulaire et les codes professionnels.
- 2.5 Connaître et utiliser les technologies inhérentes aux professions du multimédia.
C6. Appréhender le contexte technologique du développement de produits multimédias interactifs
- 6.2 Être capable de discerner les moments où il faut s’adapter aux évolutions technologiques du secteur.
- 6.3 Maîtriser les technologies informatiques inhérentes à la création multimédia (raisonnement logique, techniques du traitement de l'information, techniques de stockage de l'information, programmation, authoring, interface homme-machine).
Évaluation — première session
Travail pratique final réalisé en session.
Évaluation — seconde session
Travail pratique équivalent sur un nouveau brief, avec les mêmes critères d'évaluation.
Évaluation — Plan B
PLAN B = PLAN A
Supports
Supports de cours, exercices, pages de travail et ressources en ligne (Flexbox Froggy, Grid Garden, CSS Zen Garden, cssbattle.dev), diffusés sur un site internet dédié.