Formation Créer un site web professionnel avec Webflow No Code

Programme de la formation
Créer un site web professionnel avec Webflow No Code

• Introduction à Webflow et concepts du No Code

  - Comprendre le No Code et ses avantages
  - Présentation de Webflow : interface, philosophie, potentiel
  - Configuration initiale de l'environnement Webflow
  - Exercice pratique : Visiter l'interface et créer son premier projet vide

• Maîtriser l'interface Designer de Webflow

  - Vue d'ensemble des panneaux : Styles, Éléments, Navigateur
  - Organisation des éléments : Div Blocks, Section, Container
  - Utilisation des raccourcis clavier essentiels
  - Exercice pratique : Structurer une page d'accueil simple

• Les bases du HTML/CSS sans coder : Le Boxing Model

  - Comprendre le concept de Box Model (padding, margin, border)
  - Application des propriétés de taille et d'espacement
  - Gestion des unités (px, %, em, rem, vw, vh)
  - Exercice pratique : Créer des sections avec espacements cohérents

• Typographie et couleurs pour un design impactant

  - Choix et importation de polices de caractères
  - Propriétés de texte : taille, poids, interlignage
  - Gestion des couleurs via les variables et les styles globaux
  - Exercice pratique : Styliser le texte d'un site démo
  === MODULE_NUMBER: 5
  MODULE_TITLE: Implémenter les images et médias dans Webflow
  MODULE_CONTENT:
  - Optimisation des images pour le web (format, taille)
  - Insertion et gestion des images et icônes
  - Utilisation des backgrounds d'image et vidéo
  - Exercice pratique : Intégrer un portfolio d'images responsives

• Layouts responsifs avec Flexbox

  - Comprendre Flexbox : conteneur, éléments, alignement
  - Application des propriétés Flexbox pour des mises en page complexes
  - Création de grids fluides et responsives
  - Exercice pratique : Concevoir une section Nos services avec Flexbox

• Optimiser le design pour les mobiles (Responsive Design)
• Créer des composants réutilisables et symboles

  - Comprendre l'intérêt des symboles (Headers, Footers)
  - Création et gestion des symboles
  - Mettre à jour et réutiliser les symboles
  - Exercice pratique : Créer un symbole de navigation (Header) global

• Animations simples et interactions de base

  - Types d'animations : scroll, hover, clic
  - Création d'interactions simples (affichage/masquage d'éléments)
  - Animation d'éléments divers (boutons, images)
  - Exercice pratique : Animer un bouton Call to Action

• Gérer le Contenu Dynamique avec le CMS Webflow

  - Introduction aux Collections CMS (Blog, Portfolio, Produits)
  - Création et structuration d'une collection
  - Affichage dynamique de contenu sur des pages CMS
  - Exercice pratique : Mettre en place un blog simple avec CMS

• Formulaires et SEO pour un site professionnel

  - Conception et personnalisation des formulaires de contact
  - Envoi et gestion des soumissions de formulaires
  - Optimisation SEO on-page (titres, méta descriptions, alt tags)
  - Exercice pratique : Intégrer un formulaire de contact fonctionnel

• Publication, Optimisation et Bonnes Pratiques

  - Publication du site sur un sous-domaine Webflow
  - Connexion d'un nom de domaine personnalisé
  - Bonnes pratiques de nettoyage et d'organisation du projet
  - Exercice pratique : Préparer et publier son premier site Webflow en ligne
  ---
  ## Compétences acquises
  === COMPETENCE ===
  COMPETENCE_NUMBER: 1
  COMPETENCE_NAME: Maîtrise de l'environnement Webflow Designer
  COMPETENCE_CONTENT: Concevoir l'architecture visuelle et fonctionnelle de pages web en utilisant l'interface Designer de Webflow, en structurant les éléments via le Box Model et Flexbox pour un affichage précis et responsive sur toutes les tailles d'écran.
  === COMPETENCE ===
  COMPETENCE_NUMBER: 2
  COMPETENCE_NAME: Conception de layouts Responsifs multi-écrans
  COMPETENCE_CONTENT: Adapter un design web pour garantir une expérience utilisateur optimale sur divers appareils (ordinateurs, tablettes, mobiles) en gérant les points de rupture et les propriétés CSS spécifiques à l'aide des outils de responsivité de Webflow.
  === COMPETENCE ===
  COMPETENCE_NUMBER: 3
  COMPETENCE_NAME: Gestion de Contenu Dynamique et Interactivité
  COMPETENCE_CONTENT: Administrer et afficher du contenu via le CMS de Webflow (Collections) et intégrer des fonctionnalités interactives (animations, formulaires) pour doter le site de dynamisme et d'engager les utilisateurs de manière efficace.
  === COMPETENCE ===
  COMPETENCE_NUMBER: 4
  COMPETENCE_NAME: Publication & Optimisation SEO d'un site Webflow
  COMPETENCE_CONTENT: Mettre en ligne un site Webflow, le connecter à un nom de domaine personnalisé, et appliquer les fondamentaux du référencement naturel (SEO on-page) pour améliorer sa visibilité sur les moteurs de recherche.