Formation en création de sites web

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

Examine les outils standards de l'industrie pour le fil de fer, le prototypage et la création d'actifs. Les étudiants et étudiantes 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 transfert. Établit un processus reproductible que les étudiants et étudiantes appliquent tout au long du cours.

Leçon 3 • Fonctionnement du Web

Couvre les navigateurs, les serveurs, le DNS et le protocole 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 et étudiantes constituent des palettes accessibles qui renforcent l'identité de marque et guident l'attention des utilisateurs.

Leçon 2 • Notions fondamentales de la typographie

Couvre la classification des polices de caractères, la hiérarchie et la lisibilité sur écran. Les étudiants et étudiantes composent un texte qui communique clairement sur tous les appareils.

Leçon 3 • Mise en page et composition

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

Leçon 4 • Imagerie et iconographie

Guide la sélection, le recadrage et la mise en forme des photos, illustrations et icônes. Les étudiants et étudiantes 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 et étudiantes balisent correctement le contenu textuel enrichi 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 et étudiantes rédigent des documents HTML valides de toutes pièces en utilisant une imbrication et une syntaxe correctes.

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 et étudiantes intègrent des médias de manière accessible à l'aide de textes alternatifs et de légendes.

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

Crée des formulaires accessibles à l'aide d'étiquettes, de jeux de champs et de types de saisie. Les étudiants et étudiantes 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 et étudiantes 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 la marge, la bordure, le remplissage et les dimensions du contenu. Les étudiants et étudiantes contrôlent précisément l'espacement et évitent les bogues de mise en page courants causés par une mauvaise compréhension du modèle de boîte.

Leçon 3 • Grille CSS pour les mises en page bidimensionnelles

Présente les pistes, les zones et le placement de la grille pour les mises en page complexes. Les étudiants et étudiantes recréent des mises en page multicolonnes à l'aide de Grid sans utiliser de flotteurs.

Leçon 4 • Flexbox pour les mises en page unidimensionnelles

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

Leçon 1 • Test et débogage de la réactivité

Utilise les outils de développement du navigateur et des appareils réels pour trouver et corriger les problèmes de mise en page. Les étudiants et étudiantes élaborent une liste de contrôle de test appliquée à chaque projet à venir.

Leçon 2 • Grilles fluides et images flexibles

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

Leçon 3 • Requêtes média et points de rupture

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

Leçon 4 • Stratégie de design mobile d'abord

Établit la philosophie mobile d'abord et ses avantages en matière de rendement. Les étudiants et étudiantes restructurent des designs existants pour partir de la plus petite fenêtre d'affichage et monter en gamme.

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 et étudiantes créent une IA qui réduit la charge cognitive et favorise la repérabilité.

Leçon 2 • Fil de fer et prototypage basse fidélité

Produit des esquisses et des fils de fer numériques pour explorer la mise en page avant le design visuel. Les étudiants et étudiantes itèrent rapidement en fonction des commentaires des pairs et des parties prenantes.

Leçon 3 • Personas utilisateurs et cartes de parcours

Crée des personas fondés sur des données probantes et cartographie les parcours utilisateurs pour identifier les points de friction. Les étudiants et étudiantes utilisent ces artefacts pour justifier les décisions de design tout au long d'un projet.

Leçon 4 • Notions fondamentales du test d'utilisabilité

Planifie et mène des tests d'utilisabilité modérés pour valider les décisions de design. Les étudiants et étudiantes analysent les résultats et priorisent les correctifs à l'aide de cotes de gravité.

Leçon 1 • Maintien et mise à l'échelle du système

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

Leçon 2 • Documentation et transfert des composants

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

Leçon 3 • Modèles 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 et étudiantes documentent les états des composants, y compris l'état par défaut, le survol, le focus et l'état désactivé.

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

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

Leçon 1 • Mesure du rendement et Core Web Vitals

Utilise des outils d'audit de rendement pour mesurer le chargement, l'interactivité et la stabilité visuelle. Les étudiants et étudiantes interprètent les scores et priorisent les correctifs ayant le plus d'impact sur 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 et étudiantes 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 conformément aux directives d'accessibilité du contenu Web. Les étudiants et étudiantes corrigent les problèmes de contraste, de navigation au clavier et d'ARIA trouvés dans leurs projets.

Leçon 4 • Liste de contrôle pour le déploiement et la mise en ligne

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