Formation création de site web

Leçon 1 • Planification d'un Projet de Site Web

Guide les étudiants dans la définition des objectifs, du public et du périmètre du site avant d'écrire une ligne de code. Produit un cahier des charges utilisé dans les chapitres suivants.

Leçon 2 • Couleurs et Typographie pour le Web

Enseigne la théorie des couleurs, les ratios de contraste accessibles et la sélection de polices compatibles avec le web. Donne aux étudiants les moyens de faire des choix esthétiques qui respectent également les normes de lisibilité.

Leçon 3 • Principes Fondamentaux du Design Visuel

Introduit le contraste, l'alignement, la proximité, la répétition et la hiérarchie. Applique ces principes directement aux décisions de mise en page web tout au long du cours.

Leçon 4 • Comment Fonctionne le Web

Couvre les navigateurs, les serveurs, le DNS et les cycles requête-réponse HTTP. Établit le contexte technique nécessaire pour prendre des décisions éclairées en matière de conception et de publication.

Leçon 1 • Tableaux et Données Structurées

Couvre le balisage sémantique des tableaux pour présenter des données, pas la mise en page. Les étudiants apprennent quand les tableaux sont appropriés et comment les rendre accessibles.

Leçon 2 • Structure du Document HTML

Couvre la déclaration DOCTYPE, les éléments head et body qui forment tout fichier HTML valide. Relie une structure correcte au rendu du navigateur et à l'accessibilité.

Leçon 3 • Formulaires et Saisie Utilisateur

Construit des formulaires HTML fonctionnels avec des champs de saisie, des étiquettes et des attributs de validation. Les formulaires sont le principal mécanisme d'interaction utilisateur sur la plupart des sites.

Leçon 4 • Liens, Images et Médias

Explique les balises d'ancrage, l'intégration d'images et les éléments média. L'utilisation correcte du texte alternatif et des formats de fichiers est mise en avant pour l'accessibilité et les performances.

Leçon 1 • Mise en Page Flexbox

Enseigne la mise en page unidimensionnelle avec Flexbox pour les lignes et les colonnes. Les étudiants construisent des barres de navigation, des grilles de cartes et des blocs de contenu centrés.

Leçon 2 • Variables CSS et Réutilisabilité

Couvre les propriétés personnalisées pour stocker des valeurs réutilisables comme les couleurs et l'espacement. L'utilisation cohérente des variables accélère les refontes et réduit les erreurs.

Leçon 3 • Mise en Page CSS Grid

Introduit la mise en page bidimensionnelle avec CSS Grid pour les structures de page complexes. Grid complète Flexbox et gère efficacement les modèles de page entière.

Leçon 4 • Syntaxe et Sélecteurs CSS

Introduit les règles, les déclarations et les types de sélecteurs utilisés pour cibler les éléments. La spécificité des sélecteurs détermine quels styles l'emportent en cas de conflit de règles.

Leçon 5 • Transitions et Animations de Base

Ajoute du mouvement aux éléments interactifs à l'aide de transitions CSS et d'animations par images clés. Une animation intentionnelle améliore le retour d'information sans nuire aux performances.

Leçon 1 • Typographie et Espacement Fluides

Remplace les valeurs fixes en pixels par des unités relatives pour un texte et un espacement évolutifs. Le dimensionnement fluide réduit le nombre de points de rupture nécessaires dans un projet.

Leçon 2 • Motifs de Navigation Responsive

Construit des motifs de navigation courants, y compris les menus hamburger et les tiroirs hors-champ. La navigation est le composant d'interface utilisateur le plus critique à adapter sur les points de rupture.

Leçon 3 • Images et Médias Responsives

Couvre srcset, sizes et l'élément picture pour servir des images appropriées. Une implémentation correcte réduit la bande passante et améliore les temps de chargement sur mobile.

Leçon 4 • Philosophie de Design Mobile-First

Établit pourquoi concevoir d'abord pour les petits écrans produit de meilleurs résultats. Relie la pensée mobile-first aux performances, à l'accessibilité et aux données de comportement des utilisateurs.

Leçon 1 • Manipulation du DOM

Enseigne la sélection, la modification et la création d'éléments HTML via le Document Object Model. La manipulation du DOM est le mécanisme central pour les mises à jour dynamiques des pages.

Leçon 2 • Travail avec les API et JSON

Introduit fetch, les promesses et l'analyse JSON pour intégrer des données externes dans une page. Les étudiants affichent des données en direct provenant d'une API publique dans un composant de projet.

Leçon 3 • Fondamentaux de la Syntaxe JavaScript

Couvre les variables, les types de données, les opérateurs et le flux de contrôle. Ces éléments de base sont nécessaires avant de manipuler le DOM ou de gérer des événements.

Leçon 4 • Gestion des Événements

Explique comment écouter et répondre aux actions de l'utilisateur comme les clics et les pressions sur les touches. La programmation événementielle est le fondement de toute interface utilisateur web interactive.

Leçon 1 • Méthodes de Test d'Utilisabilité

Couvre les tests basés sur des tâches, les protocoles de réflexion à voix haute et l'évaluation heuristique. Les résultats de l'utilisabilité alimentent directement les révisions de conception dans le chapitre suivant.

Leçon 2 • Gestion du Clavier et du Focus

Garantit que tous les éléments interactifs sont atteignables et opérables uniquement via le clavier. La gestion du focus est essentielle pour les boîtes de dialogue modales, les menus et les applications monopages.

Leçon 3 • Couleur, Contraste et Accessibilité Visuelle

Applique les exigences de ratio de contraste et évite le codage d'informations uniquement par la couleur. L'accessibilité visuelle recoupe le bon design et profite à tous les utilisateurs.

Leçon 4 • Principes et Normes d'Accessibilité

Introduit les quatre principes WCAG : perceptible, utilisable, compréhensible et robuste. Comprendre le cadre guide chaque décision technique en matière d'accessibilité.

Leçon 1 • Mesure des Performances Web

Introduit les Core Web Vitals et les DevTools du navigateur pour le profilage des pages. La mesure doit précéder l'optimisation pour éviter des efforts inutiles.

Leçon 2 • Budgets de Performance et Surveillance

Définit des budgets de performance mesurables et intègre des vérifications dans un flux de travail de publication. Une surveillance continue empêche les régressions après l'optimisation initiale.

Leçon 3 • Optimisation CSS et JavaScript

Réduit les ressources bloquant le rendu par la minification, le report et le fractionnement du code. Un CSS et un JS allégés améliorent directement les scores de First Contentful Paint.

Leçon 4 • Optimisation des Images et Médias

Couvre la compression, les formats modernes et les stratégies de diffusion pour les images et les vidéos. Les images sont généralement le plus grand contributeur au poids d'une page.

Leçon 1 • Déploiement avec Pipelines CI/CD

Automatise les étapes de construction, de test et de déploiement déclenchées par des pushs Git. CI/CD élimine les erreurs de téléchargement manuelles et impose des contrôles de qualité avant la mise en ligne.

Leçon 2 • SSL, HTTPS et Bases de la Sécurité

Couvre l'installation de certificats SSL, l'application du HTTPS et les en-têtes de sécurité courants. HTTPS est requis pour la confiance, le classement SEO et l'accès aux fonctionnalités du navigateur.

Leçon 3 • Noms de Domaine et Configuration DNS

Explique l'enregistrement de nom de domaine, les types d'enregistrements DNS et la propagation. Une configuration DNS correcte est le prérequis pour connecter un domaine à n'importe quel fournisseur d'hébergement.

Leçon 4 • Options d'Hébergement et Sélection

Compare l'hébergement partagé, le VPS, les plateformes gérées et les hébergeurs de sites statiques. Choisir le bon hébergeur affecte le coût, les performances et la charge de maintenance.