HTML, CSS et JavaScript sont les trois piliers du développement web frontend. Cette vidéo propose de les apprendre par la pratique en réalisant deux projets concrets avec Visual Studio Code.

Projet 1 : Générateur de palettes de couleurs

Le premier projet consiste à créer une page web affichant cinq colonnes colorées générées aléatoirement en JavaScript. L’utilisateur appuie sur la barre espace pour obtenir une nouvelle palette de cinq couleurs.

La démarche suit le chemin classique :

  1. Créer un fichier index.html avec la structure HTML5 de base
  2. Ouvrir le projet avec l’extension Live Server de VS Code (rechargement automatique à chaque sauvegarde)
  3. Mettre en page les colonnes avec CSS Flexbox
  4. Générer des couleurs hexadécimales aléatoires en JavaScript et les appliquer dynamiquement

Projet 2 : Chiffrement de César

Le chiffrement de César est un algorithme historique qui décale chaque lettre d’un texte d’un nombre fixe de positions dans l’alphabet. Avec un décalage de 1 : « salut » devient « tbmvu ».

L’implémentation JavaScript utilise les codes ASCII (charCodeAt, fromCharCode) pour décaler chaque lettre. L’interface comporte deux zones de texte (clair / chiffré) et deux boutons Chiffrer / Déchiffrer. Le CSS stylise les éléments avec des boutons propres.

Notions abordées

  • Structure HTML5 : DOCTYPE, head, body, balises sémantiques
  • CSS : variables, Flexbox, styling des boutons et formulaires
  • JavaScript : fonctions, addEventListener, manipulation du DOM, boucles et modulo

Pour aller plus loin

Ces deux projets constituent une base solide avant d’aborder des frameworks comme React ou Vue.js. Retrouvez le code complet et la démonstration sur YouTube.