All Episodes

Méthodes avancées de tableau : map, filter, reduce (introduction)

Boucles for / for…of / while appliquées aux tableaux

Atelier : statistiques de notes d’élèves

Atelier : gérer une liste de tâches en console

Tableaux ES6 : création et accès aux éléments

Point de vue développeur : bonnes pratiques débutant

Révision synthèse : écrire un script lisible et commenté

Atelier : bouton alert avec gestionnaire d’événement

Introduction aux événements du navigateur (aperçu)

Atelier : Compteur de clics (prompt)

Portée (scope) et hoisting simplifiés

Atelier : calculatrice refactorisée avec fonctions

Atelier : fonction de salutation personnalisée

Fonctions ES6 et flèches (arrow functions)

Atelier : Pair ou impair ?

Atelier : majorité légale – script interactif

Conditions if/else et opérateurs de comparaison

Atelier : mini-calculatrice en console

Opérateurs arithmétiques et template literals

Atelier : Conversions de types simples

Atelier : déclarer et afficher des variables

Variables ES6 (let, const) et types primitifs

Bienvenue et objectifs du chapitre

Bilan et transition vers l’implémentation en JavaScript

Introduction à la complexité temporelle O(n)

Caisse enregistreuse - synthèse des notions

Trouver le minimum dans une liste

Parcourir une liste et afficher les éléments

Listes/Tableaux - stocker plusieurs valeurs

Documentation et commentaires d'algorithme

Refactoriser Factorielle en fonction

Passage de paramètres et portée des variables

Créer une fonction somme

Modularité : fonctions et procédures

Table de multiplication

Boucles imbriquées et optimisation de base

For - Calculer une factorielle

Patterns de boucle courants

While - Compter de 1 à N

Boucles While et For - principe de répétition

Mini-projet - Calcul du prix d'un billet de train

Combiner conditions (AND / OR)

Choix tarif réduit

Opérateurs de comparaison et booléens

Écrire un test IF simple

Introduction aux conditions et opérateurs logiques

Checkpoint - Gestion d'un panier simple

Mini-projet - Calcul d'IMC

Calculs simples avec variables

Constantes et conventions de nommage

Types de données courants (entier, réel, chaîne, booléen)

Échanger deux valeurs

Déclarer et affecter des variables

Expressions arithmétiques de base

Introduction aux variables et à l'état

Mini-checkpoint - Préparer un café

Réécrire un algorithme désordonné

Bonnes pratiques de clarté et granularité

Dessiner un organigramme simple

Flux d'exécution linéaire et notion d'étape

Pseudo-code d'un trajet quotidien

Transformer une recette de cuisine en pseudo-code

Pseudo-code et séquence d'instructions

Qu'est-ce qu'un algorithme ?

Débriefing collaboratif : revue de code responsive

Projet final de chapitre : tableau de bord adaptatif multi-breakpoints

Checklist responsive prête pour production

Atelier : implémenter un jeu d'images adaptatif performant

Optimisation performance : images responsive (srcset, sizes) et lazy loading

Atelier : rendre un formulaire à la fois responsive et accessible

Accessibilité et responsive design : contrastes, tailles, focus visibles

Atelier : refactorer une page existante en mobile-first

Technique mobile-first vs desktop-first – avantages et limites

Mini-projet intermédiaire : page d'accueil portfolio responsive

Atelier : passer de 4 colonnes à 1 colonne selon la taille d'écran

Media Queries spécifiques à Grid et fractionnement de layout

Atelier : mise en page de blog (sidebar + contenu)

Alignement et placement avancés dans Grid

Atelier : Grille fluide avec repeat(auto-fit, minmax)

Bonnes pratiques de nommage des zones Grid

Atelier : grille de base à 2 colonnes et 3 lignes

Terminologie Grid : container, tracks, lignes, colonnes, zones

Introduction à CSS Grid : philosophie et cas d'usage

Synthèse intermédiaire : principes clés du design responsive

Patterns courants de layout avec Flexbox (row, column, wrap)

Cheat-sheet des propriétés Flexbox et bonnes pratiques

Atelier : Inversion de l'ordre des éléments avec flex-direction

Atelier : créer une barre de navigation flexible

Atelier : alignement de base avec Flexbox

Stratégies de définition des breakpoints

Atelier : première media query pour changer la couleur d'arrière-plan

Media Queries : syntaxe et logique mobile-first

Observation : inspecter un site non-responsive

Vocabulaire de base : viewport, breakpoints et fluidité

Introduction au responsive design et à CSS3

Texte de transition : préparer l'étape suivante (introduction rapide à CSS)

Mini-projet final : portfolio multi-pages entièrement sémantique

Texte récapitulatif : stratégie de structuration sémantique de bout en bout

Atelier : rendre un tableau accessible (scope, summary)

Atelier : construire un planning hebdomadaire

Tableaux sémantiques : table, thead, tbody, th, caption, scope

Atelier : Utiliser time, code et abbr correctement

Atelier : enrichir l'article de blog avec balises inline

Balises inline sémantiques : strong, em, mark, code, time, abbr

Texte approfondi : attributs alt complexes et longdesc

Atelier : créer une galerie d'images sémantique

Atelier : insérer une photo de profil avec légende

Les images : balise img, attribut alt, figure et figcaption

Chemins relatifs vs absolus : bien gérer vos URLs

Atelier : liste de ressources externes (target et rel)

Atelier : créer une navigation interne avec ancres

Les liens hypertextes : balise a et attributs essentiels

Block vs Inline : comprendre le flux du document

Atelier : Listes imbriquées

Cycle test-commit : petites itérations rapides

Documentation et recherche efficaces (MDN, StackOverflow)

Atelier : trouver la bonne réponse sur MDN et l'appliquer

Markdown et README : présenter son projet

Atelier : rédiger un README clair pour le mini-projet

Mini-projet : amélioration du site statique + README complet

Bilan des compétences acquises et prochaines étapes du cursus

Atelier : ajouter un .gitignore adapté à un projet HTML/CSS

Mini-projet : site statique versionné (env + Git)

Méthode de débogage pas à pas

Atelier : corriger un bug d'affichage HTML/CSS avec DevTools

Atelier : construire la maquette d'un blog une-colonne

Hiérarchie de titres h1-h6 et accessibilité

Atelier : appliquer correctement les niveaux de titres

Commentaires HTML et indentation propre

Bonnes pratiques : nommage des fichiers et arborescence simple

Atelier : nettoyer et commenter votre code

Mini-projet : créer son CV sémantique

Bilan intermédiaire et checklist d'auto-évaluation

Les listes en HTML : ul, ol, dl

Atelier : ajouter la liste des compétences dans le CV

Anatomie d'un document HTML (doctype, html, head, body)

Atelier : créer votre premier fichier index.html

Le head : meta charset, title et bonnes pratiques

Atelier : ajouter un titre de page et l'encodage

Le body : paragraphes et premier titre h1

Atelier : insérer headings et paragraphes

Principe de la sémantique en HTML5

Panorama des balises de section (header, nav, main, section, article, aside, footer)

Atelier : remplacer des divs par des balises sémantiques

Texte de renforcement : ARIA landmarks en deux minutes

Créer un fichier .gitignore : pourquoi et comment

Concept des branches (vue d'ensemble)

Atelier : rédiger des commits significatifs

Messages de commit : bonnes pratiques

Visualiser l'historique des commits avec git log

Atelier : créer un dépôt local et réaliser un premier commit

Atelier : installer Git et configurer user.name / user.email

Introduction à Git et au versionnement

Atelier : décomposer le problème « commander une pizza »

Mentalité développeur : décomposition des problèmes et curiosité

Atelier : provoquer et lire une erreur HTML/CSS

Comprendre les messages d'erreur et la console

Atelier : créer index.html et observer les modifications en direct

Flux de travail minimal : éditeur → navigateur → rafraîchissement

Atelier : inspecter une page HTML avec DevTools

Navigateur : activer et lire les DevTools

Atelier variation : gérer dossiers et fichiers d'un mini-projet

Atelier : commandes de base (cd, ls, mkdir, touch)

Introduction au terminal et à la ligne de commande

Atelier : parcours guidé de l'interface et raccourcis clés

Découverte de l'interface VS Code (barres, panneaux, extensions)

Atelier : installation et première ouverture de VS Code

Installer Visual Studio Code pas à pas

Atelier guidé : repérer les composants (éditeur, terminal, navigateur)

Qu'est-ce qu'un environnement de développement ?