Formation en création de site web

Leçon 1 • Aperçu des outils de design essentiels

Passe en revue les outils standards de l'industrie pour le wireframing, le prototypage et la création d'actifs. Les étudiants sélectionnent les outils appropriés pour chaque phase du processus de design.

Leçon 2 • Flux de travail et processus de design

Présente les étapes de découverte, d'idéation, de design et de passation. Établit un processus reproductible que les étudiants appliquent tout au long du cours.

Leçon 3 • Fonctionnement du web

Couvre les navigateurs, serveurs, DNS et HTTP pour expliquer comment les pages sont demandées et livrées. Ancre toutes les futures décisions de design dans la réalité technique.

Leçon 1 • Théorie des couleurs pour le web

Enseigne la teinte, la saturation, le contraste et les modèles d'harmonie des couleurs. Les étudiants construisent des palettes accessibles qui renforcent l'identité de marque et guident l'attention de l'utilisateur.

Leçon 2 • Fondamentaux de la typographie

Couvre la classification des polices de caractères, la hiérarchie et la lisibilité sur écran. Les étudiants composent un texte qui communique clairement sur toutes les tailles d'écran.

Leçon 3 • Mise en page et composition

Applique les systèmes de grille, l'alignement et les espaces blancs pour organiser le contenu d'une page. Les étudiants produisent des mises en page équilibrées et faciles à parcourir en utilisant des règles de composition éprouvées.

Leçon 4 • Imagerie et iconographie

Guide la sélection, le recadrage et le style des photos, illustrations et icônes. Les étudiants associent les actifs visuels au ton de la marque et au contexte fonctionnel.

Leçon 1 • Texte, liens et listes

Couvre les paragraphes, les éléments en ligne, les balises d'ancrage et les types de listes. Les étudiants balisent correctement un contenu textuel riche pour l'affichage et les technologies d'assistance.

Leçon 2 • Anatomie d'un document HTML

Explique les éléments doctype, head et body ainsi que leurs rôles. Les étudiants écrivent des documents HTML valides à partir de zéro en utilisant une syntaxe et un imbrication corrects.

Leçon 3 • Images, médias et intégrations

Enseigne les éléments img, figure, video, audio et iframe avec les attributs appropriés. Les étudiants intègrent des médias de manière accessible en utilisant du texte alternatif et des légendes.

Leçon 4 • Formulaires et éléments de saisie

Construit des formulaires accessibles en utilisant des libellés, des fieldsets et des types de saisie. Les étudiants créent des formulaires de contact et de saisie de données avec une structure sémantique correcte.

Leçon 1 • Syntaxe CSS et cascade

Explique les sélecteurs, les propriétés, la spécificité et l'héritage. Les étudiants déboguent les conflits de style en comprenant comment la cascade résout les règles concurrentes.

Leçon 2 • Modèle de boîte et espacement

Couvre les marges, les bordures, le remplissage et les dimensions du contenu. Les étudiants contrôlent précisément l'espacement et évitent les bogues de disposition courants causés par une mauvaise compréhension du modèle de boîte.

Leçon 3 • Grille CSS pour les dispositions bidimensionnelles

Présente les pistes, les zones et le placement de la grille pour les mises en page complexes. Les étudiants recréent des designs multi-colonnes en utilisant Grid sans recourir aux flottements.

Leçon 4 • Flexbox pour les dispositions unidimensionnelles

Enseigne les propriétés du conteneur et des éléments flexibles pour les dispositions en lignes et en colonnes. Les étudiants construisent des barres de navigation, des rangées de cartes et des dispositions centrées avec Flexbox.

Leçon 1 • Tester et déboguer la réactivité

Utilise les outils de développement du navigateur et des appareils réels pour trouver et corriger les problèmes de disposition. Les étudiants construisent une liste de vérification de test appliquée à chaque projet.

Leçon 2 • Grilles fluides et images flexibles

Convertit les dispositions en pixels fixes en unités relatives et fluides. Les étudiants utilisent des unités relatives et max-width pour éviter les débordements sur n'importe quel écran.

Leçon 3 • Media queries et points de rupture

Enseigne les requêtes min-width et max-width et comment choisir les points de rupture. Les étudiants écrivent des media queries qui répondent aux besoins du contenu plutôt qu'aux noms d'appareils.

Leçon 4 • Stratégie de design mobile-first

Établit la philosophie mobile-first et ses avantages en termes de performance. Les étudiants restructurent des designs existants pour partir du plus petit viewport et passer à l'échelle supérieure.

Leçon 1 • Architecture de l'information

Couvre les plans de site, le tri par cartes et l'étiquetage de la navigation pour organiser le contenu de manière logique. Les étudiants créent une IA qui réduit la charge cognitive et favorise la trouvabilité.

Leçon 2 • Wireframing et prototypage basse fidélité

Produit des esquisses et des wireframes numériques pour explorer la mise en page avant le design visuel. Les étudiants itèrent rapidement sur la base des retours des pairs et des parties prenantes.

Leçon 3 • Personas utilisateurs et cartes de parcours

Construit des personas basés sur des preuves et cartographie les parcours utilisateurs pour identifier les points de friction. Les étudiants utilisent ces artefacts pour justifier les décisions de design tout au long d'un projet.

Leçon 4 • Fondamentaux des tests d'utilisabilité

Planifie et mène des tests d'utilisabilité modérés pour valider les décisions de design. Les étudiants analysent les résultats et priorisent les correctifs en utilisant des évaluations de sévérité.

Leçon 1 • Maintenance et passage à l'échelle du système

Couvre le versionnage, les flux de travail de contribution et la gouvernance pour les systèmes de design en croissance. Les étudiants établissent des processus qui maintiennent la cohérence du système à mesure que les équipes s'agrandissent.

Leçon 2 • Documentation et passation des composants

Rédige des directives d'utilisation, des exemples à faire et à ne pas faire, et des annotations de code pour chaque composant. Les étudiants préparent des fichiers de passation que les développeurs peuvent mettre en œuvre sans ambiguïté.

Leçon 3 • Patrons de composants UI de base

Conçoit des boutons, des cartes, des modales, des alertes et des contrôles de formulaire selon des normes cohérentes. Les étudiants documentent les états des composants, y compris par défaut, survol, focus et désactivé.

Leçon 4 • Tokens de design et guides de style

Crée des tokens nommés pour la couleur, l'espacement et la typographie qui pilotent l'ensemble du système. Les étudiants produisent un guide de style qui sert de source unique de vérité.

Leçon 1 • Mesure des performances et Core Web Vitals

Utilise des outils d'audit de performance pour mesurer le chargement, l'interactivité et la stabilité visuelle. Les étudiants interprètent les scores et priorisent les correctifs qui impactent le plus l'expérience utilisateur.

Leçon 2 • Optimisation des images et des actifs

Compresse les images, choisit des formats modernes et charge en différé les actifs hors-écran. Les étudiants réduisent le poids de la page sans perte de qualité visible.

Leçon 3 • Audit et correction de l'accessibilité

Exécute des audits automatisés et manuels par rapport aux directives d'accessibilité du contenu web. Les étudiants corrigent les problèmes de contraste, de navigation au clavier et d'ARIA dans leurs projets.

Leçon 4 • Déploiement et liste de vérification de mise en ligne

Couvre les options d'hébergement, la configuration du domaine, le SSL et les contrôles de qualité avant le lancement. Les étudiants remplissent une liste de vérification de mise en ligne avant de publier leur projet de fin d'études.