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 la moindre ligne de code. Produit un brief de projet utilisé dans les chapitres suivants.

Leçon 2 • Couleurs et Typographie pour le Web

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

Leçon 3 • Principes Fondamentaux de Conception Visuelle

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, et non pour 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 la structure appropriée 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 libellés 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 ancres, l'intégration d'images et les éléments média. L'utilisation correcte du texte alternatif et des formats de fichier est soulignée pour l'accessibilité et la performance.

Leçon 1 • Mise en Page Flexbox

Enseigne la mise en page unidimensionnelle à l'aide de 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 complets.

Leçon 4 • Syntaxe CSS et Sélecteurs

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 quelles règles l'emportent en cas de conflit.

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 • Modèles de Navigation Adaptative

Construit des modèles de navigation courants, y compris les menus hamburger et les panneaux hors écran. La navigation est le composant d'interface utilisateur le plus critique à adapter entre les points de rupture.

Leçon 3 • Images et Médias Adaptatifs

Couvre les attributs srcset, sizes et l'élément picture pour fournir 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 Conception Mobile-First

Établit pourquoi concevoir d'abord pour les petits écrans donne de meilleurs résultats. Relie la pensée mobile-first aux données de performance, d'accessibilité et 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 des mises à jour dynamiques de page.

Leçon 2 • Travail avec les API et le 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 bases 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 des utilisateurs comme les clics et les pressions de 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 des tests d'utilisabilité alimentent directement les révisions de conception du chapitre suivant.

Leçon 2 • Gestion du Clavier et du Focus

Garantit que tous les éléments interactifs sont atteignables et utilisables uniquement avec le clavier. La gestion du focus est essentielle pour les fenêtres modales, les menus et les applications monopages.

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

Applique les exigences de rapport de contraste et évite la transmission d'informations uniquement par la couleur. L'accessibilité visuelle recoupe la bonne conception et profite à tous les utilisateurs.

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

Introduit les quatre principes WCAG : perceptible, utilisable, compréhensible et robuste. La compréhension du 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 outils de développement du navigateur pour profiler les pages. La mesure doit précéder l'optimisation pour éviter un travail inutile.

Leçon 2 • Budgets de Performance et Surveillance

Définit des budgets de performance mesurables et intègre des vérifications dans le flux 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 la division du code. Un CSS et un JS allégés améliorent directement les scores First Contentful Paint.

Leçon 4 • Optimisation des Images et des 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 gros contributeur au poids d'une page.

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

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

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

Couvre l'installation d'un certificat SSL, l'application du protocole HTTPS et les en-têtes de sécurité courants. Le HTTPS est nécessaire 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 domaine, les types d'enregistrements DNS et la propagation. Une configuration DNS correcte est la condition préalable pour connecter un domaine à n'importe quel fournisseur d'hébergement.

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

Compare l'hébergement mutualisé, le VPS, les plateformes gérées et les hôtes de sites statiques. Le choix du bon hébergeur affecte le coût, les performances et la charge de maintenance.