---
title: 'Apprendre HTML, CSS et JavaScript par la pratique'
description: "Apprendre HTML, CSS et JavaScript en construisant deux projets pratiques : un générateur de palettes de couleurs et l'algorithme de chiffrement de César en JS."
pubDate: 2023-12-27
family: 'javascript-frontend'
tags: []
heroImage: '/images/apprendre-html-css-et-javascript-par-la-pratique.webp'
videoUrl: 'https://youtu.be/B2W_NHDax5w'
---

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](https://youtu.be/B2W_NHDax5w).