Formation Webflow pour débutants

Leçon 1 • Configuration de votre compte Webflow

Vous guide dans la création du compte, le choix du plan et la configuration de l'espace de travail. Il établit l'environnement que vous utiliserez 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 adéquate évite les reprises lorsque les projets prennent de l'ampleur dans les chapitres suivants.

Leçon 3 • Comprendre le Box Model dans Webflow

Enseigne les marges, les paddings, 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 prise 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. Vous acquerrez l'aisance 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 de tailles de titres et de corps de texte à l'aide des styles par balise de Webflow. Une échelle typographique définie accélère la mise en forme cohérente 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 marque en un clic sur l'ensemble du site.

Leçon 3 • Mise en forme des éléments textuels 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 vous réutiliserez.

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

Applique Flexbox, Grid et le positionnement ensemble 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 conception adaptative.

Leçon 2 • Mises en page Flexbox dans Webflow

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

Leçon 3 • Div Blocks et conteneurs

Explique que le Div Block est l'élément structurel principal de Webflow et que le Container est un wrapper à largeur maximale. Ce sont les blocs de construction 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 les utiliser. Le positionnement permet les éléments superposés, les en-têtes sticky et les composants d'interface flottants.

Leçon 1 • Optimisation pour les appareils mobiles

Enseigne les ajustements pour le mode paysage et portrait du mobile, notamment les mises en page empilées, les cibles tactiles plus grandes et le redimensionnement 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 surcharges 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 la conception adaptative

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 classes 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 applicables sur l'ensemble du site. Les classes réutilisables réduisent les styles redondants et imposent une cohérence visuelle.

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

Guide les étudiants 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 la prise en main 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 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 timeline d'animation. Comprendre la structure du panneau est un prérequis pour construire n'importe quelle 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 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 augmente.

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 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 les références et le code personnalisé. Les modèles CMS avancés débloquent des cas d'utilisation complexes d'annuaires 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 staging et la publication sur un nom de domaine personnalisé. Comprendre les niveaux d'hébergement évite les inadéquations de plan au moment du lancement.

Leçon 2 • SEO sur la 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 la page approprié 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 fidélisation des utilisateurs.

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

Couvre la configuration des 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 évite les liens brisés, les pages manquantes et les erreurs d'indexation.