Formation conception site web

Leçon 1 • Anatomie d'une page web

Décompose la structure HTML, l'arborescence DOM, et la manière dont CSS et JavaScript se superposent au balisage. Relie la structure du code au résultat visuel.

Leçon 2 • Rôles de conception vs développement

Clarifie les frontières entre la conception UX, la conception UI et le développement front‑end. Aide les étudiants à positionner leurs compétences au sein d'une équipe professionnelle.

Leçon 3 • Configuration de votre espace de travail

Configure un environnement de développement local professionnel avec un éditeur de code, les outils de développement du navigateur et le contrôle de version. Permet un flux de travail efficace dès le premier jour.

Leçon 4 • Comment fonctionne le web

Couvre les navigateurs, les serveurs, les requêtes HTTP et les pipelines de rendu. Établit le contexte technique dans lequel s'inscrit toute décision de conception.

Leçon 1 • Tableaux et balisage de données

Enseigne la structure de tableau appropriée avec les éléments thead, tbody et caption. Distingue les tableaux de données des tableaux de mise en page pour éviter les erreurs d'accessibilité.

Leçon 2 • Éléments HTML essentiels

Couvre les titres, paragraphes, listes, liens et images comme éléments de base de chaque page. Établit de bonnes habitudes de syntaxe dès le début.

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

Construit des formulaires HTML fonctionnels à l'aide d'étiquettes, de champs de saisie, de listes déroulantes et de boutons. Relie la structure du formulaire à la convivialité et aux objectifs de collecte de données.

Leçon 4 • Validation HTML et bases de l'accessibilité

Valide le balisage par rapport aux standards du web et introduit les rôles ARIA et les étiquettes de repère. Garantit que les pages répondent aux exigences de base en matière d'accessibilité.

Leçon 1 • Le modèle de boîte et l'espacement

Enseigne le contenu, le remplissage (padding), la bordure et la marge comme les quatre couches de chaque élément. Permet un contrôle précis de la taille et de l'espacement des éléments.

Leçon 2 • La cascade, la spécificité et l'héritage

Explique comment les navigateurs résolvent les styles conflictuels en utilisant l'ordre de la cascade, les scores de spécificité et les valeurs héritées. Prévient les bugs de style courants.

Leçon 3 • Syntaxe et sélecteurs CSS

Couvre les ensembles de règles, les déclarations et les types de sélecteurs, des sélecteurs d'élément aux sélecteurs d'attribut. Construit la maîtrise de la syntaxe nécessaire pour tout travail de style ultérieur.

Leçon 4 • Typographie et couleur

Contrôle les familles de polices, les tailles, les graisses, la hauteur de ligne et les valeurs de couleur. Établit une hiérarchie visuelle et une cohérence de marque entre les pages.

Leçon 1 • Systèmes de grille et alignement

Applique des grilles de colonnes, des gouttières et des grilles de ligne de base pour organiser le contenu de la page. Crée une cohérence visuelle et une finition professionnelle sur toutes les mises en page.

Leçon 2 • Iconographie et imagerie

Sélectionne et optimise les icônes et les images pour renforcer le sens sans ajouter de bruit visuel. Couvre les systèmes d'icônes, la cohérence du style d'image et les formats de fichier.

Leçon 3 • Hiérarchie visuelle et principes de la Gestalt

Applique la proximité, la similarité, le contraste et la relation figure-fond pour diriger l'attention de l'utilisateur. Traduit les principes psychologiques en décisions de mise en page actionnables.

Leçon 4 • La typographie comme hiérarchie visuelle

Utilise l'échelle typographique, la graisse et l'espacement pour établir une hiérarchie claire de l'information. Relie les choix typographiques à la lisibilité et à la compréhension par l'utilisateur.

Leçon 1 • Images et médias réactifs

Implémente les attributs srcset, sizes et l'élément picture pour fournir des images de taille appropriée. Équilibre la qualité visuelle et les performances de la page.

Leçon 2 • Typographie et espacement fluides

Utilise des unités relatives, des unités de viewport et la fonction CSS clamp() pour faire évoluer proportionnellement le texte et l'espacement. Réduit le nombre de points de rupture nécessaires.

Leçon 3 • Système de mise en page Flexbox

Couvre les conteneurs flex, les éléments flex, les axes d'alignement et le comportement de retour à la ligne. Résout efficacement les défis courants de mise en page unidimensionnelle.

Leçon 4 • Media queries et points de rupture

Écrit des règles CSS conditionnelles déclenchées par la largeur, la hauteur et l'orientation de la zone d'affichage. Établit une stratégie de points de rupture mobile‑first.

Leçon 1 • Tests d'utilisabilité et itération

Mène des tests d'utilisabilité modérés et non modérés pour identifier les points de friction. Ferme la boucle de conception en traduisant les résultats en améliorations concrètes.

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

Crée des mises en page squelettiques pour tester la structure avant de commencer la conception visuelle. Sépare les décisions de mise en page des choix esthétiques pour une itération plus rapide.

Leçon 3 • Architecture de l'information

Organise le contenu via des plans de site, le tri par cartes et les modèles de navigation. Garantit que les utilisateurs trouvent les informations rapidement et de manière intuitive.

Leçon 4 • Méthodes de recherche UX

Présente les entretiens utilisateurs, les enquêtes et l'analyse concurrentielle comme éléments d'entrée pour les décisions de conception. Ancre les choix de conception dans des preuves plutôt que dans des hypothèses.

Leçon 1 • Fondamentaux JavaScript

Couvre les variables, les types de données, les opérateurs, les conditionnelles et les boucles comme noyau du langage. Fournit la base syntaxique pour tout scripting interactif.

Leçon 2 • Gestion des événements

Attache des écouteurs d'événements pour les clics, les saisies au clavier et les soumissions de formulaires. Permet l'interactivité pilotée par l'utilisateur sur tous les composants de la page.

Leçon 3 • Fonctions et portée

Définit des fonctions réutilisables, explique les chaînes de portée et introduit les fonctions fléchées. Permet un code interactif modulaire et maintenable.

Leçon 4 • Sélection et manipulation du DOM

Sélectionne des éléments, lit et écrit des attributs, et modifie le contenu et les classes de manière dynamique. Relie la logique JavaScript aux modifications visibles de la page.

Leçon 1 • Déploiement et checklist de lancement

Couvre la configuration du domaine, les options d'hébergement, les certificats SSL et une checklist de qualité avant le lancement. Prépare les étudiants à livrer en toute confiance des sites web en production.

Leçon 2 • Éléments essentiels du Web

Cible les métriques Largest Contentful Paint, Cumulative Layout Shift et Interaction to Next Paint. Aligne les améliorations techniques avec les facteurs de classement dans les moteurs de recherche.

Leçon 3 • Conformité en matière d'accessibilité

Audite les pages par rapport aux critères de succès WCAG pour la perceptibilité, l'opérabilité et la compréhensibilité. Garantit que le site est utilisable par les personnes handicapées.

Leçon 4 • Optimisation des performances web

Réduit le poids de la page et les ressources bloquant le rendu pour améliorer les temps de chargement. Impacte directement la rétention des utilisateurs et les scores de classement dans les moteurs de recherche.