Formation pour apprendre Webflow

Leçon 1 • Configuration de votre compte Webflow

Guide la création du compte, la sélection du forfait et la configuration de l'espace de travail. Établit l'environnement que les apprenants 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 leurs paramètres et planifier l'architecture du site. Une structure appropriée évite les reprises lorsque les projets prennent de l'ampleur dans les chapitres suivants.

Leçon 3 • Comprendre le modèle de boîte (Box Model) dans Webflow

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

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

Cartographie chaque panneau, barre d'outils et zone du canevas dans le Designer. Les apprenants acquièrent la fluidité spatiale nécessaire pour travailler efficacement dans tous les chapitres suivants.

Leçon 1 • Construction d'une échelle typographique

Enseigne la création d'une hiérarchie harmonieuse des tailles de titres et de corps en utilisant les 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 d'échantillons et les variables de couleurs globales. Les couleurs globales permettent des mises à jour de marque en un clic sur l'ensemble du site.

Leçon 3 • Stylisation des éléments de texte sur le canevas

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

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

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

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, de l'habillage et de l'espacement. Flexbox est l'outil principal pour les mises en page unidimensionnelles de composants.

Leçon 3 • Blocs Div et conteneurs

Explique que le bloc Div est l'élément structurel principal de Webflow et que le conteneur est un wrapper de largeur maximale. Ce sont les éléments de base pour toutes les techniques de mise en page qui suivent.

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

Explique les modes de positionnement CSS tels que Webflow les expose et quand les utiliser. Le positionnement permet des éléments qui se chevauchent, des en-têtes collants et des composants d'interface utilisateur flottants.

Leçon 1 • Optimisation pour les appareils mobiles

Enseigne les ajustements en mode paysage et portrait sur mobile, y compris les mises en page empilées, des 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

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

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

Couvre le passage au point de rupture tablette et l'ajustement de la direction Flexbox, des colonnes de 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 la réactivité

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 évitent les régressions lors de la mise à jour des styles.

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

Couvre la manière dont 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 classe solide est le fondement de tout projet Webflow maintenable.

Leçon 2 • Construction de classes de composants réutilisables

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

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

Guide les apprenants 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 évite 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. 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. La compréhension de la structure du panneau est un prérequis pour construire 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 Hero et de narration.

Leçon 4 • Animations Lottie et code personnalisé

Couvre l'intégration d'animations Lottie au format JSON et leur déclenchement via les interactions Webflow. Lottie étend la capacité d'animation au-delà des transformations CSS pour des 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 une restructuration coûteuse à mesure que le contenu se développe.

Leçon 2 • Construction de pages de modèles CMS

Couvre la conception de la page de modèle de collection qui génère automatiquement une page par élément CMS. Les pages de modèles alimentent les blogs, 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 workflows de gestion de contenu déterminent la maintenabilité d'un site après son lancement.

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

Aborde la limitation des listes de collection 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 complexes de répertoires et de filtrage.

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 préproduction et la publication sur un nom de domaine personnalisé. La compréhension des niveaux d'hébergement évite les inadéquations 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 bon SEO sur page garantit que les pages sont indexées et partagées correctement dès le premier jour.

Leçon 3 • Optimisation des performances du site

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

Leçon 4 • Redirections 301 et liste de contrôle de lancement

Couvre la configuration de redirections 301 pour les URL migrées et la réalisation d'un audit pré-lancement. Une liste de contrôle de lancement structurée empêche les liens brisés, les pages manquantes et les erreurs d'indexation.