Cours de Développement Front-End

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

Installe et configure un éditeur de code, un terminal et les outils de développement du navigateur. Garantit que chaque étudiant dispose d'une base de travail identique et productive avant d'écrire du code.

Leçon 2 • Gestion de version avec Git

Présente les concepts Git et les flux de travail quotidiens pour le suivi des modifications de code. Prépare les étudiants à collaborer et à se remettre d'erreurs tout au long du cours.

Leçon 3 • Introduction à la ligne de commande

Enseigne la navigation, la manipulation des fichiers et l'exécution de scripts depuis le terminal. Permet aux étudiants d'utiliser les outils de construction et les gestionnaires de paquets présentés dans les chapitres suivants.

Leçon 1 • Éléments sémantiques HTML5

Présente les éléments repères tels que header, nav, main, article, section et footer. Améliore l'accessibilité et la lisibilité machine du contenu de la page.

Leçon 2 • Principes fondamentaux de l'accessibilité en HTML

Applique les rôles ARIA, le texte alternatif et un balisage navigable au clavier aux documents HTML. Garantit que tous les projets respectent dès le départ les normes d'accessibilité de base.

Leçon 3 • Formulaires HTML et types de saisie

Construit des formulaires interactifs en utilisant des étiquettes, des champs de saisie, des listes déroulantes et des boutons avec des attributs d'accessibilité appropriés. Prépare les étudiants à la validation des formulaires et à la gestion de la soumission dans les chapitres JavaScript.

Leçon 4 • Éléments HTML de base

Couvre les titres, paragraphes, listes, liens et images comme principaux blocs de construction du contenu. Établit une utilisation correcte des éléments avant d'introduire les wrappers sémantiques.

Leçon 1 • Positionnement et modes d'affichage

Enseigne le positionnement statique, relatif, absolu, fixe et sticky ainsi que les valeurs d'affichage. Permet un placement précis des éléments avant d'introduire les systèmes de mise en page modernes.

Leçon 2 • Spécificité et héritage CSS

Résout les conflits de style en utilisant les règles de spécificité, la cascade et les propriétés héritées. Évite la frustration lors du débogage dans les feuilles de style plus volumineuses construites dans les chapitres suivants.

Leçon 3 • Syntaxe CSS et sélecteurs

Couvre les ensembles de règles, les paires propriété-valeur et les types de sélecteurs, de l'élément à l'attribut. Construit la précision du sélecteur nécessaire pour tout travail de style ultérieur.

Leçon 4 • Le modèle de boîte en profondeur

Explique le contenu, le remplissage, la bordure et la marge comme les quatre couches de chaque élément. Résout les bugs d'espacement courants en enseignant le box-sizing et la fusion des marges.

Leçon 1 • Techniques avancées de CSS Grid

Utilise auto-fill, auto-fit et subgrid pour créer des mises en page adaptatives et pilotées par le contenu. Complète la maîtrise de la mise en page avant que les étudiants ne passent à l'interactivité JavaScript.

Leçon 2 • Principes fondamentaux de Flexbox

Introduit le modèle du conteneur flexible et de l'élément flexible avec un alignement basé sur l'axe. Résout les problèmes courants de mise en page unidimensionnelle tels que les barres de navigation et les lignes de cartes.

Leçon 3 • Modèles Flexbox avancés

Applique flex-wrap, order et align-self pour construire des mises en page de composants complexes. Prépare les étudiants à choisir entre Flexbox et Grid pour chaque scénario de conception.

Leçon 4 • Principes fondamentaux de CSS Grid

Définit les pistes, les zones et les règles de placement de la grille pour les mises en page bidimensionnelles. Permet aux étudiants de construire des structures de page de type magazine et tableau de bord.

Leçon 1 • Opérateurs et flux de contrôle

Applique les opérateurs arithmétiques, de comparaison et logiques à l'intérieur de structures conditionnelles et de boucles. Permet aux étudiants d'écrire une logique décisionnelle et répétitive dans leurs scripts.

Leçon 2 • Fonctions et portée

Définit une logique réutilisable avec des déclarations de fonction, des expressions et des fonctions fléchées. Explique la portée lexicale et les fermetures comme fondement du code modulaire.

Leçon 3 • Tableaux et objets

Stocke et manipule des collections en utilisant des méthodes de tableau et des littéraux d'objet. Prépare les étudiants à travailler avec les structures de données d'API dans les chapitres suivants.

Leçon 4 • Syntaxe JavaScript et types de données

Couvre les variables déclarées avec let et const, les types primitifs et la coercition de type. Établit les règles du langage qui régissent tout le code JavaScript ultérieur.

Leçon 1 • Modification des éléments DOM

Modifie le contenu textuel, les attributs, les styles et les listes de classes sur les éléments sélectionnés. Permet des mises à jour dynamiques de l'interface utilisateur sans rechargement complet de la page.

Leçon 2 • Sélection et parcours du DOM

Utilise querySelector, getElementById et les propriétés de parcours pour localiser les éléments. Relie JavaScript à la structure HTML construite dans les chapitres précédents.

Leçon 3 • Formulaires et gestion des entrées utilisateur

Lit les valeurs des formulaires, empêche la soumission par défaut et valide les entrées en temps réel. Fait le pont entre la structure du formulaire HTML et l'interactivité pilotée par JavaScript.

Leçon 4 • Création et suppression d'éléments

Construit de nouveaux nœuds avec createElement et les insère ou les supprime de l'arborescence DOM. Prend en charge le rendu de listes dynamiques et les modèles de création de composants.

Leçon 1 • Promesses et chaînage de promesses

Crée et chaîne des Promesses en utilisant .then(), .catch() et .finally() pour une logique asynchrone séquentielle. Prépare les étudiants à la syntaxe plus propre async/await introduite ensuite.

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

Envoie des requêtes GET et POST, analyse les réponses JSON et gère les erreurs HTTP. Relie les compétences asynchrones aux sources de données réelles que les étudiants utiliseront dans les projets.

Leçon 3 • Concepts de programmation asynchrone

Explique la pile d'appels, la boucle d'événements et le modèle de rappel comme base du comportement asynchrone. Dissipe les idées reçues courantes sur le modèle d'exécution mono-thread de JavaScript.

Leçon 4 • Rendu des données d'API dans le DOM

Affiche les données récupérées dynamiquement, gère les indicateurs de chargement et montre les messages d'erreur. Produit des fonctionnalités d'interface utilisateur entièrement pilotées par les données, prêtes pour les projets de portfolio.

Leçon 1 • Frameworks d'interface utilisateur basés sur les composants

Introduit le modèle de composant, les props et l'état en utilisant un framework front-end populaire. Fait passer les étudiants de la manipulation impérative du DOM au rendu déclaratif de l'interface utilisateur.

Leçon 2 • Déploiement d'une application front-end

Compile et déploie une SPA de production sur une plateforme d'hébergement statique en utilisant des pipelines CI/CD. Achève le cycle de vie complet du développement, du code local à l'URL en ligne.

Leçon 3 • Modèles de gestion d'état

Gère l'état partagé de l'application en utilisant le contexte, les stores ou la remontée d'état. Prépare les étudiants à architecturer le flux de données dans des applications complexes multi-composants.

Leçon 4 • Modules ES et gestion des paquets

Organise le code avec la syntaxe import/export et gère les dépendances en utilisant un gestionnaire de paquets. Établit l'architecture modulaire utilisée par tous les frameworks front-end modernes.

Leçon 5 • Routage dans les applications monopages

Implémente le routage côté client pour naviguer entre les vues sans rechargement complet de la page. Permet aux étudiants de construire des SPA multi-vues avec une navigation pilotée par URL.