Cours de création de site Webflow

Leçon 1 • Configuration de votre compte Webflow

Guide la création du compte, le choix du forfait et la configuration de l'espace de travail. Établit l'environnement que les étudiants et étudiantes utilisent tout au long du cours.

Leçon 2 • Pages, dossiers et structure du projet

Explique comment créer et organiser des pages, définir les paramètres des pages et planifier l'architecture du site. Une structure appropriée évite les reprises lorsque les projets prennent de l'ampleur dans les chapitres ultérieurs.

Leçon 3 • Comprendre le modèle de boîte dans Webflow

Enseigne les marges, les espacements intérieurs, les bordures et le dimensionnement tels que Webflow les expose visuellement. Sous-tend directement chaque décision de mise en page et d'espacement prise dans les chapitres ultérieurs.

Leçon 4 • Navigation dans l'interface du Designer

Cartographie chaque panneau, barre d'outils et zone du canevas dans le Designer. Les étudiants et étudiantes acquièrent l'aisance spatiale nécessaire pour travailler efficacement dans tous les chapitres ultérieurs.

Leçon 1 • Création d'une échelle typographique

Enseigne comment créer une hiérarchie harmonieuse des tailles de titres et de corps à l'aide des styles au niveau des balises de Webflow. Une échelle typographique définie accélère la création de styles cohérents sur toutes les pages.

Leçon 2 • Système de couleurs global de Webflow

Présente le sélecteur de couleurs, le panneau des nuances et les variables de couleurs globales. Les couleurs globales permettent des mises à jour de la marque en un clic sur l'ensemble du site.

Leçon 3 • Création du style des éléments de texte sur le canevas

Applique les connaissances en polices et en couleurs aux titres, paragraphes, liens et blocs de texte enrichi. Relie les paramètres abstraits aux composants de page réels que les étudiants et étudiantes réutiliseront.

Leçon 1 • Construction d'une mise en page complète

Applique Flexbox, Grid et le positionnement ensemble pour construire une page complète à plusieurs sections. Cette section de synthèse consolide toutes les compétences en mise en page avant de passer à l'adaptabilité.

Leçon 2 • Mises en page Flexbox dans Webflow

Couvre l'activation de Flexbox sur un bloc Div et le contrôle de la direction, de l'alignement, du retour à la ligne et de l'espacement. Flexbox est l'outil principal pour les mises en page de composants unidimensionnels.

Leçon 3 • Blocs Div et conteneurs

Explique le bloc Div comme élément structurel principal de Webflow et le conteneur comme enveloppe à largeur maximale. Ce sont les éléments de base pour chaque technique de mise en page qui suit.

Leçon 4 • Positionnement : relatif, absolu et fixe

Explique les modes de positionnement CSS tels que Webflow les expose et quand utiliser chacun. Le positionnement permet les éléments superposés, les en-têtes collants et les composants d'interface flottants.

Leçon 1 • Optimisation pour les appareils mobiles

Enseigne les ajustements en paysage et portrait mobile, y compris les mises en page empilées, les cibles tactiles plus grandes et la mise à l'échelle des polices. L'optimisation mobile est essentielle pour l'expérience utilisateur et le classement dans les moteurs de recherche.

Leçon 2 • Typographie et espacement fluides

Présente les unités relatives à la fenêtre d'affichage et le dimensionnement fluide basé sur clamp pour la typographie et l'espacement. Les valeurs fluides réduisent le nombre de remplacements de points de rupture nécessaires dans un projet.

Leçon 3 • Adaptation des mises en page pour la tablette

Couvre le passage au point de rupture tablette et l'ajustement de la direction Flexbox, des colonnes de la grille et de l'espacement. La tablette est souvent le point de rupture le plus complexe en raison des largeurs d'écran intermédiaires.

Leçon 4 • Test et débogage de l'adaptabilité

Couvre l'utilisation du redimensionnement du canevas de Webflow, des outils de développement du navigateur et des tests sur appareils réels pour détecter les problèmes de mise en page. Des tests systématiques empêchent les régressions lors de la mise à jour des styles.

Leçon 1 • Explication du système de classes de Webflow

Couvre comment les classes, les balises et le sélecteur de tous les éléments interagissent dans le panneau de style de Webflow. Une stratégie de classes solide est le fondement de tout projet Webflow maintenable.

Leçon 2 • Création de classes de composants réutilisables

Enseigne la création de classes pour les boutons, les cartes et les badges qui peuvent être appliquées sur l'ensemble du site. Les classes réutilisables réduisent les styles redondants et renforcent la cohérence visuelle.

Leçon 3 • Page de guide de style comme référence vivante

Guide les étudiants et étudiantes dans la création d'une page de guide de style interne qui documente toutes les classes et tous les composants. Une page de guide de style accélère l'intégration et empêche la duplication des classes au fil du temps.

Leçon 1 • Animations déclenchées par le défilement

Enseigne les animations d'apparition, de glissement et de décalage qui se déclenchent lorsque les éléments entrent dans la fenêtre d'affichage. Les animations de défilement augmentent la qualité perçue et guident l'attention de l'utilisateur vers le bas de la page.

Leçon 2 • Aperçu du panneau Interactions

Cartographie le panneau Interactions, les types de déclencheurs et la chronologie d'animation. Comprendre la structure du panneau est un prérequis pour créer toute interaction dans Webflow.

Leçon 3 • Effets de défilement de page et de parallaxe

Explique le déclencheur de défilement de page et comment mapper les propriétés des éléments à la position de défilement. Les effets de parallaxe et basés sur la progression ajoutent de la profondeur aux sections de héros et de narration.

Leçon 4 • Animations Lottie et code personnalisé

Couvre l'intégration d'animations JSON Lottie et leur déclenchement via Webflow Interactions. Lottie étend la capacité d'animation au-delà des transformations CSS pour les illustrations complexes.

Leçon 1 • Conception des collections CMS

Couvre la création de collections, la définition des types de champs et la planification de l'architecture des données. Une bonne conception de collection évite des restructurations coûteuses à mesure que le contenu s'accroît.

Leçon 2 • Création de pages modèles CMS

Couvre la conception de la page modèle de collection qui génère automatiquement une page par élément CMS. Les pages modèles alimentent les blogues, les études de cas, les profils d'équipe et les pages de détails de produits.

Leçon 3 • Ajout et gestion du contenu CMS

Enseigne l'ajout d'éléments via l'éditeur CMS, l'importation de données CSV et l'utilisation de l'éditeur pour la remise au client. Les flux de travail de gestion de contenu déterminent la maintenabilité d'un site après son lancement.

Leçon 4 • Listes de collections imbriquées et solutions de contournement

Aborde la limitation des listes de collections imbriquées de Webflow et les solutions de contournement pratiques utilisant des références et du code personnalisé. Les modèles CMS avancés débloquent des cas d'utilisation de répertoires et de filtrage complexes.

Leçon 1 • Hébergement et publication Webflow

Couvre l'hébergement basé sur le CDN de Webflow, la publication sur le sous-domaine de mise en scène et la publication sur un domaine personnalisé. Comprendre les niveaux d'hébergement évite les décalages de forfait au moment du lancement.

Leçon 2 • SEO sur page dans Webflow

Couvre la définition des méta-titres, des descriptions, des images Open Graph et des balises canoniques par page. Un SEO sur page approprié garantit que les pages sont indexées et partagées correctement dès le premier jour.

Leçon 3 • Optimisation du rendement du site

Enseigne la compression des images, le chargement différé, le sous-ensemble de polices et la minification intégrée de Webflow. Le rendement affecte directement le classement dans les moteurs de recherche et la rétention des utilisateurs.

Leçon 4 • Redirections 301 et liste de vérification du lancement

Couvre la configuration de redirections 301 pour les URL migrées et l'exécution d'un audit avant le lancement. Une liste de vérification structurée du lancement prévient les liens brisés, les pages manquantes et les erreurs d'indexation.