Formation Webflow : concevoir un site web en no code

Présentation de la formation

Le no-code a profondément élargi les possibilités de création web en permettant de concevoir et publier des sites sans développement traditionnel. Cependant, la qualité d’un site ne dépend pas uniquement de l’outil choisi : elle repose aussi sur la structure HTML, l’accessibilité, le responsive design et l’organisation des composants.

Webflow se distingue par sa capacité à rapprocher conception visuelle et logique front-end, ce qui en fait un outil pertinent pour produire des sites professionnels, maintenables et performants.

Cette formation vous permettra de comparer les approches code, CMS, no-code et headless afin de choisir l’outil le plus adapté à un besoin donné. Vous apprendrez à structurer une page avec une hiérarchie de titres cohérente, à construire des layouts responsives via Flexbox et Grid, à créer des systèmes de classes et de composants réutilisables, puis à publier un mini-site avec blog, CMS, SEO/OG, formulaires et redirections correctement configurés.
 

Pourquoi réaliser une Formation Webflow : concevoir un site web en no code ?

Se former à Webflow permet de concevoir des sites web professionnels sans développement back-end, tout en respectant les bonnes pratiques d’accessibilité, de performance et de SEO.

La formation vous guide dans la création d’interfaces structurées, l’utilisation avancée des classes, variables et composants réutilisables, ainsi que dans la mise en place d’un CMS et d’un workflow de publication complet. Elle vous permet ainsi de produire des sites plus cohérents, plus maintenables et plus rapides à déployer.

Objectifs de la formation Webflow : concevoir un site web en no code

• Analyser les différentes approches (code, CMS, no-code, headless) et choisir l’outil adapté
• Structurer une page accessible et performante en appliquant la sémantique HTML, la hiérarchie des titres, et un responsive clair.
• Concevoir des interfaces dans Webflow en utilisant classes, combo classes, variables, flexbox/grid et components réutilisables.
• Créer, publier et optimiser un mini-site + blog Webflow en configurant le CMS, le SEO/OG, les formulaires et les redirections, puis contrôler la qualité avec une checklist.

Pour qui ?

Cette formation s’adresse aux designers, communicants, marketeurs, entrepreneurs, chefs de projet digital ou toute personne souhaitant concevoir et publier des sites web professionnels en no-code.

Programme

Comparer les approches du web et pourquoi et quand choisir webflow

• les 3 façons de créer un site (from scratch, cms classiques, no-code, headless) & panorama des cms (wordpress, wix, squarespace, shopify) : usages, coûts, maintenance
• Quand et pourquoi choisir Webflow ?
• Visite guidée de sites faits avec webflow + benchmark rapide

Découvrir les fondamentaux d’un site performant

• Rappel : Sémantique html essentielle (balises, structure h1–h6, liens, images alt)
• Box model et relation parent–enfant (display, spacing, position)
• Bases seo + accessibilité (titres, meta, aria simple, contrastes)
• Démo 2 : construire une page sémantique propre sur un fichier figma simple

Prendre en main webflow

• Tour de l’interface (navigator, designer, style, assets, publishing)
• Pages, sections, containers, structure type (header, main, footer)
• Mettre en forme son site
• Les tags globaux
• Les variables
• Les classes
• Les combo classes
• Mettre en forme son design système
• Intégrer un “hero” complet (logo, nav simple, titre, cta)

Construire des layouts avec flexbox et grid

• Introduction
• Flexbox dans webflow (axes, wrap, alignements, pièges courants)
• Css grid dans webflow (colonnes/lignes, gap, templates)
• Grille et flexbox

Rendre le site responsive

• Breakpoints, typographie fluide, échelles et rythmes
• Images responsives, formats, assets propres
• Démo 5 : rendre la page 100 % responsive (mobile-first)

Gérer le CMS webflow et le contenu dynamique

• Collections et champs (texte, image, rich text, slug)
• Templates, listes, filtres, tri, pagination
• Références et rich text enrichi (liens internes, images, embeds)
• Démo 6 : créer un blog simple (collection articles + page catégorie)

Gérer des interactions et structurer un design system

• Construire et utiliser des composants
• Interactions de base (scroll, hover, click) et bonnes pratiques
• Interaction avancées (timeline webflow)
• Components (symbols), tokens/variables, bibliothèques
• Démo 7 : micro-interactions utiles (menu sticky, hover cards, accordéon faq)

Configurer des formules, contrôler la qualité et publier le site

• Formulaires, validations, notifications
• Seo on-page dans webflow (meta, open graph, sitemap)
• Performance & checklist (poids images, audits, erreurs 404)
• Démo 8 : connexion domaine, publication, redirections, sauvegardes

Prérequis

Aucun prérequis technique n’est nécessaire. Une appétence pour le digital, la communication web ou la création de contenus constitue un atout pour suivre la formation dans les meilleures conditions.

Modalités et délais d'accès

Financer sa formation en Marketing, Communication et IA

Plusieurs dispositifs de financement sont possibles en fonction de votre statut professionnel et peuvent financer jusqu’à 100% votre formation.

Pour plus de renseignements, nous vous invitons à consulter notre guide du financement et à contacter nos conseillers pour vous accompagner pas à pas dans vos démarches.

Les avantages VISIPLUS academy

Ces formations pourraient également vous intéresser