Programmation Frontend 1 : HTML, CSS, JavaScript

Cours de développement web (L1, ESP/UCAD) : HTML, CSS, JavaScript et API, autour du quiz Jàng Afrig — quatre séances, et leurs labs en ressources.

Niveau : L1 · Semestre : S2 · Domaine : Programmation, Web & Mobile

Objectifs

  • Écrire une page web complète en HTML5 (structure, sémantique, formulaires, tableaux)
  • Mettre en forme une page avec CSS3 (sélecteurs, box model, Flexbox, responsive mobile)
  • Programmer en JavaScript moderne (variables, fonctions, tableaux, objets, forEach, map, filter)
  • Modifier le contenu d’une page depuis JavaScript (DOM et événements)
  • Récupérer des données d’une API distante avec fetch et async/await
  • Sauvegarder des données dans le navigateur (localStorage)
  • Versionner votre code avec Git et le partager sur GitHub
  • Déployer une application web en ligne sur GitHub Pages

Prérequis

  • Algorithmique du S1
  • Savoir utiliser un ordinateur

Ce cours prépare à

Ressources du cours

Séances

Le bloc JavaScript (CM3 et labs 5 à 7) n’est pas encore en ligne.

Séance Contenu Format
Le Web et HTML comment une page web arrive dans le navigateur, les rôles de HTML, CSS et JavaScript, et l’anatomie d’une page HTML. TP (102 Ko) · TP (103 Ko) · TP (126 Ko)
CSS ce que CSS ajoute à HTML, les sélecteurs, la cascade et la spécificité, le box model et Flexbox. TP (142 Ko) · TP (142 Ko)
Le Web moderne les API et le style REST, le format JSON, le code asynchrone avec fetch, async et await, et l’API REST Countries. TP (92 Ko) · TP (83 Ko)
Déploiement et démo mettre Jàng Afrig en ligne sur GitHub Pages, poser le tag v1.0, puis présenter son application à la classe. TP (91 Ko)
Retour au sommet