Formation HTML CSS JavaScript

Leçon 1 • Configuration de votre environnement de développement

Installe et configure un éditeur de code, les outils de développement du navigateur et une structure de fichiers locale. Garantit que chaque étudiant dispose d'un espace de travail identique et fonctionnel.

Leçon 2 • Contrôle de version avec les bases de Git

Enseigne les workflows d'initialisation (init), de validation (commit) et de transmission (push) afin que les étudiants suivent chaque projet dès le premier jour. Établit des habitudes professionnelles avant l'augmentation de la complexité du code.

Leçon 3 • Comment fonctionne le Web

Couvre la communication client-serveur, les requêtes HTTP et les pipelines de rendu du navigateur. Ancre toutes les décisions de codage ultérieures dans le comportement réel du navigateur.

Leçon 1 • Listes, liens et navigation

Construit des listes ordonnées, non ordonnées et de description ainsi que des éléments d'ancrage avec des attributs. Ces motifs constituent l'épine dorsale de la structure de navigation de chaque site.

Leçon 2 • Éléments de texte et de titre

Couvre h1–h6, p, strong, em et blockquote pour la hiérarchie du contenu. Un ordre de titres correct impacte directement le référencement (SEO) et la navigation par lecteur d'écran.

Leçon 3 • Images, médias et figures

Intègre des images, de l'audio et de la vidéo avec les attributs corrects pour l'accessibilité et la performance. Le texte alternatif et les légendes sont traités comme obligatoires, pas facultatifs.

Leçon 4 • Éléments de mise en page sémantique

Remplace les divs génériques par header, main, section, article, aside et footer. Le balisage sémantique améliore la lisibilité machine et les scores d'accessibilité.

Leçon 1 • Le modèle de boîte expliqué

Enseigne le contenu, le padding, la bordure et la marge comme les quatre couches de chaque élément. La maîtrise de box-sizing prévient les bugs de mise en page tout au long du cours.

Leçon 2 • Variables CSS et propriétés personnalisées

Définit et réutilise des jetons de conception via les propriétés personnalisées CSS pour des feuilles de style maintenables. Les variables réduisent la répétition et permettent le changement de thème dans les projets ultérieurs.

Leçon 3 • Typographie et couleur

Définit les familles de polices, les tailles, les graisses, les hauteurs de ligne et les valeurs de couleur en utilisant les unités CSS modernes. Des échelles de type et de couleur cohérentes sont le fondement des systèmes de conception visuelle.

Leçon 4 • Sélecteurs CSS et spécificité

Couvre les sélecteurs d'élément, de classe, d'ID, d'attribut et de pseudo-classe avec le calcul de spécificité. Comprendre la spécificité prévient les conflits de cascade dans les grandes feuilles de style.

Leçon 1 • Placement Grid et zones nommées

Place les éléments en utilisant des numéros de ligne, le mot-clé span et des zones de modèle nommées. Les zones nommées rendent les mises en page complexes lisibles et faciles à restructurer.

Leçon 2 • Propriétés du conteneur Flexbox

Contrôle flex-direction, justify-content, align-items et flex-wrap sur le parent. Ces propriétés régissent la façon dont les enfants sont répartis le long des deux axes.

Leçon 3 • Conception adaptative avec les media queries

Applique des points de rupture et une stratégie mobile-first pour adapter les mises en page à différentes tailles d'écran. Combine Flexbox et Grid avec les media queries pour une adaptativité prête pour la production.

Leçon 4 • Fondamentaux de CSS Grid

Définit grid-template-columns, grid-template-rows et grid-gap pour des mises en page bidimensionnelles. Grid résout les problèmes de mise en page que Flexbox gère maladroitement.

Leçon 1 • Variables, types de données et opérateurs

Déclare des variables avec let, const et var et identifie les types de données primitifs. La précédence des opérateurs et la coercition de type sont abordées pour prévenir les bugs courants.

Leçon 2 • Fonctions et portée (scope)

Définit des fonctions avec des déclarations, des expressions et la syntaxe fléchée tout en expliquant les chaînes de portée. La maîtrise de la portée prévient les fuites de variables et les bugs de fermeture (closure).

Leçon 3 • Objets et méthodes d'objet

Construit des objets avec des propriétés et des méthodes, et y accède via la notation pointée et la notation par crochets. Les objets modélisent des structures de données du monde réel utilisées dans chaque application JS.

Leçon 4 • Tableaux (Arrays) et méthodes de tableau

Crée et manipule des tableaux en utilisant push, pop, map, filter et reduce. Les méthodes de tableau fonctionnelles sont utilisées tout au long de la manipulation du DOM et du travail avec les API.

Leçon 1 • Modification d'éléments et de styles

Modifie textContent, innerHTML, les attributs et classList pour mettre à jour la page sans rechargement. Ces techniques alimentent les mises à jour d'interface utilisateur en direct dans les applications monopages (SPA).

Leçon 2 • Création et suppression de nœuds DOM

Construit de nouveaux éléments avec createElement, les ajoute et supprime les nœuds obsolètes. La création dynamique de nœuds permet le rendu de listes et les motifs de type composant.

Leçon 3 • Délégation d'événements et propagation (bubbling)

Exploite la propagation des événements (bubbling) pour attacher un seul écouteur à des conteneurs parents pour des enfants dynamiques. La délégation réduit l'utilisation de la mémoire et gère les éléments générés lors de l'exécution.

Leçon 4 • Sélection et traversée du DOM

Utilise querySelector, getElementById et les propriétés de traversée pour cibler les éléments avec précision. Une sélection précise est le fondement de tout comportement de page dynamique.

Leçon 1 • Syntaxe Async/Await

Réécrit les chaînes de Promesses en utilisant des fonctions async et des expressions await pour un code lisible. Async/await est la norme moderne pour tous les workflows basés sur fetch.

Leçon 2 • Promesses et enchaînement de Promesses

Crée et consomme des Promesses avec .then(), .catch() et .finally() pour un code asynchrone plus propre. L'enchaînement de Promesses remplace les callbacks imbriqués dans les opérations asynchrones séquentielles.

Leçon 3 • Rendu des données API dans le DOM

Mappe les tableaux JSON récupérés en éléments HTML et gère visuellement les états de chargement et d'erreur. Relie la récupération de données asynchrones à la manipulation du DOM du chapitre précédent.

Leçon 4 • Récupération de données avec l'API Fetch

Envoie des requêtes GET et POST en utilisant fetch(), analyse les réponses JSON et gère les erreurs. Fetch est l'outil natif du navigateur pour toute communication avec une API REST.

Leçon 1 • Déploiement et revue de code

Déploie le projet sur une plateforme d'hébergement statique et mène une revue de code par les pairs structurée. Le déploiement et la revue simulent des standards professionnels de livraison réels.

Leçon 2 • Style avec CSS et mise en page adaptative

Applique un système de conception utilisant les variables CSS, Flexbox et Grid avec une adaptativité complète. Une conception visuelle cohérente démontre la maîtrise des chapitres 3 et 4.

Leçon 3 • Planification et architecture du projet

Définit les user stories, les maquettes filaires et la décomposition en composants avant d'écrire le code. La planification empêche la dérive du périmètre et établit un workflow de développement professionnel.

Leçon 4 • Logique JavaScript et intégration API

Implémente les appels fetch, le rendu DOM, la gestion des événements et la gestion d'état en JS vanilla. Intègre toutes les compétences JS des chapitres 5, 6 et 7 dans une seule base de code.