Fiche descriptive d'unité d'enseignement
Bachelier Écriture multimédia
Année académique 2026-2027 · Bloc 1 · Horaire de jour
Langages du web
- Niveau CFC
- 6
- Cycle
- Bachelier Écriture multimédia
- Obligatoire / Option
- Obligatoire
- Implantation
- ISFSC – Rue de la Poste 111 – 1030 Bruxelles
- Langue(s)
- français
- Modalité
- Horaire de jour
- Responsable de l'UE
- Laetitia Pottiez
- Prérequis / Corequis
- Aucun
- 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ère de réussite de l'UE
- 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.
Composition de l'UE · 2 activités d'apprentissage
| Code | Activité d'apprentissage (AA) | Vol. horaire | ECTS | Quadrimestre | Pondération |
|---|---|---|---|---|---|
| 11E12-A | Bases de HTML | 20 | 2 | Q1 | 50 points |
| 11E12-B | Bases de CSS | 20 | 2 | Q1 | 50 points |
Bases de HTML
Descriptif de l'activité
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.
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.
Compétence(s) évaluée(s)
- Compétence 2 : Interagir avec son milieu professionnel
Capacité(s) évaluée(s)
- Capacité 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. |
|---|---|
| Seconde session | Travail individuel. |
| Plan B | Pas d’évaluation spécifique en plan B. |
Support(s) de cours
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.
Bases de CSS
Descriptif de l'activité
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
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.
Compétence(s) évaluée(s)
- Compétence 2 : Interagir avec son milieu professionnel
- Compétence 6 : Appréhender le contexte technologique du développement de produits multimédias interactifs
Capacité(s) évaluée(s)
- Capacité 2.1 : Comprendre les concepts, le vocabulaire et les codes professionnels.
- Capacité 2.5 : Connaître et utiliser les technologies inhérentes aux professions du multimédia.
- Capacité 6.2 : Être capable de discerner les moments où il faut s’adapter aux évolutions technologiques du secteur.
- Capacité 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. |
|---|---|
| Seconde session | Travail pratique équivalent sur un nouveau brief, avec les mêmes critères d'évaluation. |
| Plan B | PLAN B = PLAN A |
Support(s) de cours
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é.