🧠 Philosophie Pédagogique : L'Andragogie en Action
Cette formation s'appuie sur les 6 principes de l'andragogie de Malcolm Knowles, adaptés aux artistes et adultes sénior souhaitant maîtriser la création web en 2026. Contrairement à la pédagogie enfantine, l'andragogie place l'apprenant au centre : son expérience de vie est une ressource, son besoin est concret, et son apprentissage est orienté problème.
Chaque session de 2h alterne théorie contextualisée (pourquoi c'est utile, pas juste comment ça marche) et application immédiate sur le projet final. Le reste de la journée est consacré au coaching individuel et au travail de projet, avec des points de synchronisation collectifs.
📐 Les 6 Piliers de cette Formation
1. Besoin de SavoirChaque concept est introduit par son utilité concrète pour le projet final de l'artiste.
2. AutonomieL'apprenant choisit son rythme, ses outils préférés, et personnalise son projet.
3. ExpérienceLes acquis personnels (art, communication, organisation) sont valorisés et intégrés.
4. PréparationLe contenu répond à un besoin immédiat : "Je veux mon portfolio en ligne pour mon expo".
5. Orientation ProblèmePas de théorie abstraite. On apprend en résolvant des problèmes réels du projet.
6. Motivation InterneLa réussite est mesurée par le site fonctionnel, pas par une note. L'artiste est son propre juge.
1
Fondations & Mindset Digital
Comprendre le web de 2026 sans jargon
Lundi — ThéorieTutoriel 2h
Le Web en 2026 : ce qui a changé, ce qui compte.
- Comment fonctionne un site web (serveur, navigateur, DNS) — analogie poste/relais
- WordPress vs Headless vs No-Code : quand choisir quoi ?
- Sobriété numérique : pourquoi un site léger est un site meilleur
- Accessibilité : le web pour tous (malvoyants, seniors, connexions lentes)
Mardi — ProjetProjet
Définir mon projet de site.
- Rédiger le brief de son propre site (objectif, public, contenu)
- Choisir sa stack : WordPress (facile) vs Headless (performant) vs Carrd (rapide)
- Créer un compte et installer son environnement
Mercredi — CoachingCoaching
Atelier collectif : valider son brief et sa stack.
- Partage des briefs entre pairs
- Feedback constructif (technique du sandwich)
- Choix final validé avec le formateur
Jeudi — ThéorieTutoriel 2h
HTML & CSS : les briques du web.
- Structure d'une page HTML (titres, paragraphes, images, liens)
- CSS : couleurs, polices, marges, flexbox simplifié
- Mobile-first : penser smartphone avant desktop
- Exercice guidé : créer sa première page "Hello World" personnalisée
Vendredi — ProjetProjet
Structurer la page d'accueil de son site.
- Créer la structure HTML de sa homepage
- Appliquer un style CSS basique (couleurs de marque, typographie)
- Insérer sa photo/illustration principale
📄 Fiche Synthétique — Semaine 1
- Le web = requête → serveur → réponse → affichage
- WordPress = tout-en-un | Headless = rapide mais technique | No-Code = rapide mais limité
- HTML = structure | CSS = apparence | JS = interactivité
- Mobile-first = concevoir pour téléphone d'abord, agrandir ensuite
- Un site accessible = contrastes suffisants, taille de police ≥ 16px, alt text sur images
- Sobriété = moins de plugins, images optimisées, hébergement vert si possible
2
Design & Identité Visuelle
Donner une âme à son site
Lundi — ThéorieTutoriel 2h
Design system & identité visuelle.
- Psychologie des couleurs : quelle émotion pour quel secteur artistique ?
- Typographie : serif (classique) vs sans-serif (moderne), hiérarchie visuelle
- Espacement, grille, et règle des tiers
- Outils : Figma (gratuit) ou Canva pour créer son moodboard
Mardi — ProjetProjet
Créer son design system.
- Choisir 2–3 couleurs principales + 1 accent
- Sélectionner 2 polices (titre + corps de texte)
- Définir les tailles de texte (h1, h2, paragraphe, légende)
- Créer un moodboard visuel (inspirations, références)
Mercredi — CoachingCoaching
Revue de design en groupe.
- Chacun présente son moodboard et son design system
- Feedback sur la cohérence et l'accessibilité (contraste)
- Ajustements guidés par le formateur
Jeudi — ThéorieTutoriel 2h
Responsive design & accessibilité visuelle.
- Media queries CSS : adapter le site à mobile, tablette, desktop
- Images responsives : srcset, formats modernes (WebP, AVIF)
- Accessibilité : contrastes WCAG AA, focus clavier, lecteurs d'écran
- Outils : Lighthouse, axe DevTools, contrast checker
Vendredi — ProjetProjet
Appliquer le design system à sa homepage.
- Intégrer les couleurs, polices et espacements définis
- Rendre la page responsive (test sur téléphone)
- Vérifier les contrastes avec un outil en ligne
📄 Fiche Synthétique — Semaine 2
- Design system = couleurs + typographie + espacement + composants réutilisables
- Maximum 3 couleurs principales + 1 couleur d'accent
- Hiérarchie typographique : h1 (titre principal) > h2 (section) > h3 (sous-section) > p (corps)
- Contraste minimum : 4.5:1 pour texte normal, 3:1 pour texte large (WCAG AA)
- Responsive = le site s'adapte à la taille de l'écran (mobile, tablette, desktop)
- Images WebP/AVIF = 30–50% plus légères que JPEG sans perte visible
- Test d'accessibilité : navigation au clavier (Tab), lecteur d'écran (NVDA/VoiceOver)
3
Contenu & Rédaction Web
Raconter son histoire en ligne
Lundi — ThéorieTutoriel 2h
Rédaction web & storytelling artistique.
- Le web n'est pas un livre : écrire pour scanner, pas pour lire
- Structure inversée : conclusion d'abord, détails ensuite
- Micro-copy : boutons, menus, messages d'erreur qui parlent humain
- SEO de base : mots-clés naturels, meta descriptions, titres structurés
Mardi — ProjetProjet
Rédiger le contenu de son site.
- Bio/À propos : qui suis-je, pourquoi je crée, ma démarche artistique
- Portfolio : description de 3–5 œuvres avec storytelling
- Page contact : invitation claire à l'action
- Blog (optionnel) : 3 idées d'articles liés à son univers
Mercredi — CoachingCoaching
Atelier d'écriture collective.
- Lecture à voix haute des textes (détecter les lourdeurs)
- Technique du "utilisateur lambda" : quelqu'un qui ne me connaît pas comprend-il ?
- Optimisation SEO guidée (1 mot-clé par page)
Jeudi — ThéorieTutoriel 2h
Gestion des images & médias.
- Formats d'image : JPEG (photos), PNG (transparence), SVG (logos), WebP (tout)
- Compression sans perte : Squoosh, TinyPNG, ImageOptim
- Lazy loading : charger les images quand on scroll
- Vidéos : hébergement externe (YouTube/Vimeo) vs self-hosting
Vendredi — ProjetProjet
Intégrer son contenu et optimiser ses images.
- Insérer les textes rédigés dans les pages HTML
- Compresser et convertir toutes les images en WebP
- Ajouter les balises alt descriptives pour l'accessibilité
- Vérifier le poids total de la page (objectif : < 1 Mo)
📄 Fiche Synthétique — Semaine 3
- Sur le web, on scanne : paragraphes courts (3–4 lignes), titres explicites, listes à puces
- Structure inversée : dire l'essentiel dans les 2 premières lignes
- SEO on-page = 1 mot-clé principal par page + meta title + meta description
- Alt text = description textuelle de l'image pour les malvoyants et le SEO
- WebP = format moderne, 30% plus léger que JPEG, supporté par 95% des navigateurs
- Lazy loading = attribut loading="lazy" sur les images hors écran
- Poids d'une page : idéal < 1 Mo, acceptable < 3 Mo, critique > 5 Mo
4
Interactivité & JavaScript Léger
Rendre son site vivant sans complexité
Lundi — ThéorieTutoriel 2h
JavaScript : juste ce qu'il faut.
- Qu'est-ce que JavaScript et pourquoi on en a besoin (menu mobile, formulaires, animations)
- Variables, fonctions, événements : les 3 concepts essentiels
- DOM manipulation : changer du texte, ajouter une classe, écouter un clic
- Console du navigateur : débuguer sans paniquer
Mardi — ProjetProjet
Ajouter de l'interactivité à son site.
- Menu hamburger mobile (ouvrir/fermer)
- Smooth scroll vers les ancres
- Lightbox pour les images du portfolio (clic → zoom)
- Bouton "retour en haut" qui apparaît au scroll
Mercredi — CoachingCoaching
Débogage collectif & peer review.
- Chacun présente une fonctionnalité JS ajoutée
- Résolution de bugs en groupe (technique du canard en plastique)
- Optimisation : est-ce que mon JS ralentit ma page ?
Jeudi — ThéorieTutoriel 2h
Formulaires & collecte de données.
- Structure d'un formulaire HTML (input, textarea, select, button)
- Validation côté client (required, pattern, type="email")
- Soumission sans backend : Formspree, Netlify Forms, Tally
- RGPD : consentement, politique de confidentialité, droit à l'oubli
Vendredi — ProjetProjet
Créer son formulaire de contact fonctionnel.
- Design du formulaire cohérent avec le design system
- Validation en temps réel (messages d'erreur clairs)
- Intégration avec un service de collecte (Formspree/Netlify)
- Page de remerciement personnalisée
📄 Fiche Synthétique — Semaine 4
- JavaScript = langage de programmation du navigateur, exécuté côté client
- 3 concepts clés : variable (stocker), fonction (action), événement (déclencheur)
- DOM = Document Object Model = représentation en arbre de la page HTML
- Console (F12) = outil de débogage indispensable, ne pas en avoir peur
- Formulaire sans backend = Formspree, Netlify Forms, Tally, Airtable Forms
- RGPD = consentement explicite, finalité claire, droit de suppression, hébergement UE si possible
- Performance JS : minifier, différer (defer), charger uniquement si nécessaire
5
CMS & Gestion de Contenu
Mettre à jour son site sans coder
Lundi — ThéorieTutoriel 2h
Qu'est-ce qu'un CMS et pourquoi ça change tout.
- CMS classique (WordPress) vs Headless (Strapi + frontend) vs No-Code (Webflow, Framer)
- WordPress en 2026 : forces, faiblesses, et quand l'éviter
- Headless pour les artistes : pourquoi c'est le futur
- No-Code : la voie rapide pour un MVP
Mardi — ProjetProjet
Choisir et installer son CMS.
- Option A : WordPress (hébergement Infomaniak/O2Switch) + thème léger
- Option B : Strapi Cloud (gratuit) + frontend statique
- Option C : Webflow/Framer (payant mais tout-en-un)
- Configuration de base : utilisateurs, médias, premiers contenus
Mercredi — CoachingCoaching
Atelier : migrer son contenu statique vers le CMS.
- Créer les types de contenu (articles, œuvres, pages)
- Importer les images et textes déjà préparés
- Organiser la médiathèque (dossiers, métadonnées)
- Preview du rendu frontend
Jeudi — ThéorieTutoriel 2h
SEO technique & performances.
- Balises meta essentielles (title, description, OG tags)
- Schema.org pour les artistes (Person, CreativeWork, ExhibitionEvent)
- Sitemap XML et robots.txt
- Core Web Vitals : LCP, FID, CLS expliqués simplement
Vendredi — ProjetProjet
Optimiser le SEO de son site.
- Ajouter les meta tags sur toutes les pages
- Générer et soumettre le sitemap XML à Google Search Console
- Vérifier les Core Web Vitals avec Lighthouse (objectif : >90)
- Configurer Google Analytics 4 (respect RGPD)
📄 Fiche Synthétique — Semaine 5
- CMS = Content Management System = interface pour gérer le contenu sans coder
- WordPress = 42% du web, facile mais lourd | Headless = rapide, moderne, technique | No-Code = rapide, limité
- Schema.org = vocabulaire structuré pour les moteurs de recherche (rich snippets)
- Core Web Vitals : LCP (vitesse d'affichage) < 2.5s, FID (interactivité) < 100ms, CLS (stabilité) < 0.1
- Sitemap XML = carte du site pour les moteurs de recherche
- robots.txt = instructions pour les crawlers (autoriser/interdire)
- Google Search Console = outil gratuit de Google pour monitorer son référencement
6
Déploiement & Mise en Ligne
Passer de local à mondial
Lundi — ThéorieTutoriel 2h
Hébergement, domaine & déploiement.
- Comment choisir son hébergeur (prix, localisation, éthique, support)
- Nom de domaine : choisir, vérifier la disponibilité, configurer les DNS
- SSL/TLS : le cadenas HTTPS, pourquoi c'est obligatoire
- CDN & Edge : rapprocher son site de ses visiteurs
Mardi — ProjetProjet
Acheter son domaine et configurer l'hébergement.
- Recherche et achat du nom de domaine (Gandi, OVH, Infomaniak)
- Configuration DNS (A record, CNAME)
- Installation SSL (Let's Encrypt auto ou Cloudflare)
- Upload du site sur le serveur (FTP, Git, ou déploiement auto)
Mercredi — CoachingCoaching
Go-Live collectif & dépannage.
- Chacun déploie son site en direct (séance de groupe)
- Résolution des problèmes communs (DNS qui ne propage pas, erreur 404, certificat SSL)
- Vérification cross-device (téléphone, tablette, ordinateur d'un ami)
Jeudi — ThéorieTutoriel 2h
Sécurité & sauvegardes.
- Menaces courantes : XSS, injection SQL, brute force (simplifié)
- Headers de sécurité essentiels (CSP, HSTS, X-Frame-Options)
- Sauvegardes automatiques : quoi, quand, où
- Plan de reprise d'activité (restauration en cas de crash)
Vendredi — ProjetProjet
Sécuriser son site et configurer les backups.
- Activer les mises à jour automatiques (si applicable)
- Configurer une sauvegarde quotidienne (plugin ou script)
- Tester la restauration (crucial !)
- Documenter les accès (admin, FTP, base de données)
📄 Fiche Synthétique — Semaine 6
- Hébergeur vert recommandé : Infomaniak (Suisse), Greenhost (NL), O2Switch (FR)
- DNS propagation = délai de 1–48h pour que le nom de domaine pointe vers le bon serveur
- SSL/TLS = chiffrement HTTPS, obligatoire pour le SEO et la confiance utilisateur
- CDN = Content Delivery Network = serveurs répartis géographiquement pour la vitesse
- Backup 3-2-1 : 3 copies, 2 supports différents, 1 hors site
- Headers de sécurité : CSP (quels scripts autorisés), HSTS (forcer HTTPS), X-Frame-Options (anti-clickjacking)
- Documentation des accès = fichier sécurisé (password manager) avec tous les logins
7
Tests, Optimisation & Accessibilité
Polir son site comme une œuvre
Lundi — ThéorieTutoriel 2h
Tests utilisateurs & accessibilité avancée.
- Test à 5 utilisateurs : pourquoi 5 suffisent (loi de Nielsen)
- Navigation au clavier : Tab, Enter, Escape, flèches
- Tests avec lecteur d'écran (NVDA gratuit, VoiceOver Mac)
- Outils automatisés : axe, WAVE, Lighthouse accessibilité
Mardi — ProjetProjet
Audit complet de son site.
- Passer tous les tests Lighthouse (Performance, Accessibilité, Best Practices, SEO)
- Tester la navigation au clavier sur toutes les pages
- Vérifier les contrastes avec axe DevTools
- Corriger les erreurs détectées (priorité aux bloquantes)
Mercredi — CoachingCoaching
Session de tests croisés.
- Chacun teste le site d'un pair (fresh eyes)
- Grille de validation commune (checklist partagée)
- Feedback structuré : 3 forces, 2 axes d'amélioration, 1 bug
Jeudi — ThéorieTutoriel 2h
Optimisation des performances.
- Audit du poids des pages (objectif : < 1 Mo)
- Compression des images, minification du CSS/JS
- Lazy loading avancé, prefetching, preloading
- Cache navigateur et cache serveur
Vendredi — ProjetProjet
Optimiser les performances de son site.
- Compresser toutes les ressources (images, CSS, JS)
- Configurer le cache (headers Cache-Control)
- Vérifier le score Lighthouse final (objectif : >90 partout)
- Documenter les optimisations réalisées
📄 Fiche Synthétique — Semaine 7
- Test à 5 utilisateurs = détecte 85% des problèmes d'usabilité (loi de Nielsen)
- Navigation clavier : Tab (suivant), Shift+Tab (précédent), Enter (activer), Escape (fermer)
- Lecteur d'écran : NVDA (Windows, gratuit), VoiceOver (Mac, intégré), TalkBack (Android)
- Lighthouse scores : Performance >90, Accessibilité >90, Best Practices >90, SEO >90
- Minification = suppression des espaces et commentaires (CSS/JS plus léger)
- Cache-Control = header qui dit au navigateur combien de temps garder le fichier en cache
- Prefetch = charger une ressource en avance (ex: page suivante)
8
Lancement & Autonomie
Devenir son propre webmaster
Lundi — ThéorieTutoriel 2h
Maintenance & veille technologique.
- Calendrier de maintenance mensuelle (updates, backups, checks)
- Monitoring : UptimeRobot, Google Search Console, Analytics
- Veille : newsletters, podcasts, communautés à suivre
- Quand faire appel à un pro (et quand pas besoin)
Mardi — ProjetProjet
Créer son plan de maintenance.
- Checklist mensuelle (updates, backups, tests de liens)
- Configuration des alertes (email si site down)
- Plan de mise à jour de contenu (blog, portfolio, événements)
- Documentation personnelle ("mon guide à moi")
Mercredi — CoachingCoaching
Répétition générale & préparation au lancement.
- Dernière revue complète du site avec le formateur
- Simulation de scénarios : "un client me contacte", "je veux ajouter une œuvre"
- Préparation de l'annonce de lancement (réseaux, newsletter)
Jeudi — ThéorieTutoriel 2h
Marketing digital pour artistes.
- SEO local : Google Business Profile pour les ateliers/galeries
- Réseaux sociaux : quels choisir, quelle fréquence, quels formats
- Newsletter : Mailchimp, Brevo, ou Substack — construire sa liste
- Analyse des données : que mesurer, quelles décisions en tirer
Vendredi — REVIEWReview Finale
Présentation des projets finaux.
- Chaque artiste présente son site (5 min + 5 min Q&A)
- Démonstration live : ajouter un contenu, modifier une page
- Remise du certificat de compétences
- Photo de groupe & réseau de pairs pérenne
📄 Fiche Synthétique — Semaine 8
- Maintenance mensuelle : updates, backups, test des liens, vérification des formulaires
- Google Business Profile = vitrine gratuite sur Google Maps (indispensable pour les ateliers)
- Newsletter = actif le plus rentable du marketing digital (ROI moyen 36:1)
- Analytics : suivre le trafic, les pages populaires, les sources de visite
- Veille : newsletters (Smashing Magazine, CSS-Tricks), podcasts (La French Touch), Discord/Slack
- Autonomie = savoir résoudre seul 80% des problèmes courants
- Communauté = groupe de pairs pour s'entraider après la formation
🏆 Projet Final : "Mon Site Internet Nouvelle Génération"
À l'issue des 8 semaines, chaque artiste livre un site web complet, fonctionnel, et optimisé pour 2026. Le projet est évalué sur les critères suivants :
Structure obligatoire :
• Page d'accueil avec présentation claire et CTA (call-to-action)
• Page portfolio avec minimum 5 œuvres (images optimisées, lightbox)
• Page "À propos" avec bio artistique et démarche créative
• Page contact avec formulaire fonctionnel et liens réseaux sociaux
• Blog (optionnel mais recommandé) avec 2 articles minimum
Critères d'évaluation :
✅ Design & UX (20%) : cohérence visuelle, hiérarchie, responsive
✅ Performance (20%) : Lighthouse >90, poids < 2 Mo, temps de chargement < 3s
✅ Accessibilité (20%) : navigation clavier, contrastes, alt text, lecteur d'écran
✅ SEO (15%) : meta tags, sitemap, schema.org, Search Console configuré
✅ Sécurité (15%) : HTTPS, backups, headers de sécurité, RGPD respecté
✅ Autonomie (10%) : capacité à ajouter/modifier du contenu sans aide
💡 Le projet n'est pas noté sur la perfection technique, mais sur la capacité à créer un outil de communication efficace, accessible, et maintenable par l'artiste lui-même.
🛠️ Boîte à Outils Recommandée
🎨 Design
Figma (gratuit), Canva, Coolors (palette), Google Fonts
💻 Développement
VS Code, CodePen, GitHub, Vercel/Netlify (déploiement gratuit)
🖼️ Images
Squoosh (compression), Unsplash (photos libres), SVGOMG (SVG)
📊 SEO & Perf
Lighthouse, GTmetrix, Google Search Console, Screaming Frog (free)
🔒 Sécurité
Let's Encrypt (SSL), Snyk (vulnérabilités), Have I Been Pwned
📧 Formulaires
Formspree, Netlify Forms, Tally, Airtable Forms
📚 CMS
WordPress, Strapi, Ghost, Webflow, Framer
🤖 IA Assistive
ChatGPT/Claude (explications), Midjourney (images), Copilot (code)
📊 Modalités d'Évaluation (Andragogie)
📝 Auto-évaluation Continue
Chaque semaine, l'apprenant remplit une grille de compétences (0–4) et identifie ses 2 priorités d'apprentissage pour la semaine suivante.
👥 Peer Review
Évaluation croisée entre pairs à mi-parcours et en fin de formation. Grille structurée : forces, axes d'amélioration, questions.
🎯 Projet Final
Présentation orale de 5 min + démonstration live de l'autonomie (ajout de contenu). Évaluation sur 6 critères pondérés.
💬 Portfolio Réflexif
Document de 2 pages rédigé par l'apprenant : ce que j'ai appris, mes difficultés, mes réussites, mes prochaines étapes.
🤝 Coaching Individuel
2 sessions de 30 min (semaine 4 et 7) avec le formateur pour ajuster le parcours et valider la progression.
📜 Certificat
Attestation de compétences délivrée avec le détail des acquis (transférable sur LinkedIn, portfolio, etc.)