Développement Web Frontend HTML/CSS/JS

Ce cours de troisième semestre forme les étudiants de la Licence professionnelle GELO au développement de la partie visible des applications web : pages structurées en HTML5, mises en forme responsives en CSS3 et interactions programmées en JavaScript moderne (ES6+). Il est pensé pour le contexte nigérien : la majorité des utilisateurs naviguent sur smartphone, avec une connexion mobile parfois lente ou coûteuse ; nous insistons donc sur l’approche mobile-first, la sobriété des pages, l’accessibilité et le fonctionnement hors ligne. Les exemples s’inspirent d’applications locales : inscription à EPI-Niger, catalogue de produits du Sahel, transfert Mobile Money, bilan de notes.

Objectifs d’apprentissage

• Concevoir et développer des interfaces web responsives et accessibles avec HTML5 et CSS3.
• Programmer des interactions dynamiques côté client avec JavaScript ES6+.
• Maîtriser les bases du DOM et de la manipulation des événements en JavaScript.
• Utiliser les outils du développeur web moderne : Git, npm, linters, formatters.

Prérequis

Algorithmique Avancée & Complexité (ALC2131) — GELO S2 ; Bureautique Avancée & Outils Collaboratifs (BUR2152) — GELO S2. Il faut savoir écrire des algorithmes (boucles, conditions, fonctions, tableaux) et être à l’aise avec l’ordinateur et les fichiers.

Plan du cours

1. Leçon 1 — HTML5 : Structure et Sémantique
2. Leçon 2 — CSS3 : Mise en Forme et Responsive
3. Leçon 3 — JavaScript ES6+ : Fondamentaux
4. Leçon 4 — Manipulation du DOM et Outils

Travaux pratiques

• Exercices d’application corrigés dans chaque leçon (formulaires validés, mises en page Flexbox/Grid, programmes JavaScript exécutés).
• TP projet (leçon 4) : développement d’une application web monopage (SPA) — liste de tâches, avec extension en quiz React.

Modalités d’évaluation

Volume horaire : CM 16 h, TD 8 h, TP 12 h, travail personnel (TPE) 44 h, soit 80 h de charge totale (CTT) — 4 crédits. Évaluation : contrôle continu (CC, 40 %) + examen terminal (ET, 60 %) ; nature mixte (écrit et pratique). Le contrôle continu s’appuie notamment sur les TP et le projet SPA ; le quiz en ligne permet l’auto-évaluation.

Bibliographie

• Jon Duckett, HTML & CSS: Design and Build Web Sites, Wiley.
• Marijn Haverbeke, Eloquent JavaScript, No Starch Press (gratuit sur eloquentjavascript.net).
• MDN Web Docs (developer.mozilla.org) — documentation de référence en français et en anglais.
• W3C, Web Content Accessibility Guidelines (WCAG) 2.1.