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. Veille à ce que chaque étudiant dispose d'un espace de travail identique et fonctionnel.

Leçon 2 • Gestion de Versions avec les Bases de Git

Enseigne les workflows d'init, commit et push pour que les étudiants suivent chaque projet dès le premier jour. Établit des habitudes professionnelles avant que la complexité du code n'augmente.

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 attributs. Ces modèles forment 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 correct des titres impacte directement le 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 bons attributs pour l'accessibilité et la performance. Le texte alternatif et les légendes sont traités comme obligatoires, non 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 remplissage, 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, tailles, graisses, hauteurs de ligne et valeurs de couleur en utilisant des unités CSS modernes. Des échelles de type et de couleur cohérentes sont la base 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 la spécificité. Comprendre la spécificité prévient les conflits en cascade dans les feuilles de style plus volumineuses.

Leçon 1 • Placement et Zones Nommées dans Grid

Place les éléments en utilisant des numéros de ligne, des mots-clés 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 distribution des enfants 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 les 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 priorité des opérateurs et la coercition de type sont abordées pour prévenir les bugs courants.

Leçon 2 • Fonctions et Portée

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.

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 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 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 des Éléments et des Styles

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

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 modèles de type composant.

Leçon 3 • Délégation d'Événements et Propagation (Bubbling)

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

Leçon 4 • Sélection et Parcours du DOM

Utilise querySelector, getElementById et les propriétés de parcours 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 Promise en utilisant des fonctions async et des expressions await pour un code lisible. Async/await est le standard moderne pour tous les workflows basés sur fetch.

Leçon 2 • Promesses et Chaînage de Promesses

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

Leçon 3 • Rendu des Données d'API dans le DOM

Mappe les tableaux JSON récupérés en éléments HTML et gère les états de chargement et d'erreur visuellement. Connecte la récupération de données asynchrone à 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 normes de livraison professionnelles réelles.

Leçon 2 • Style avec CSS et Mise en Page Adaptative

Applique un système de conception utilisant des variables CSS, Flexbox et Grid avec une adaptativité totale. La 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 wireframes et la décomposition en composants avant d'écrire le code. La planification prévient 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.