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

01.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

02.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

03.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

04.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

05.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

06.Optimiser le design pour les mobiles (Responsive Design)

07.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

08.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

09.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

10.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

11.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.