1 Journée type en alternance — tickets intégration, mises à jour, clients, urgences prod

Mode d'emploi : ta semaine réelle en école de commerce. Tes clients sont souvent des petites/moyennes entreprises (PME) du secteur digital, e-commerce, agence. Tickets varient : intégrations API, mises à jour WordPress, urgences de prod, support clients. Cette journée type montre tes vrais gestes logiciels.

Lundi matin 9 h 00 – 12 h 30 — Démarrage, triages tickets, urgences

Lundi après-midi 13 h 30 – 17 h 30 — Appels clients, mises à jour, tests

Mardi–Vendredi (journées école 9h-17h) — Pas présent agence, mais tu peux être appelé pour urgence ou support async

Jeudi 14 h 00 – 17 h 30 — Travail clients (dernière demi-journée de la semaine)

2 12 scripts mot à mot — cadrage, devis, explications techniques, livraison, urgences

Mode d'emploi : ces scripts gèrent les moments clés du projet. Lis à voix haute. Variables entre [crochets] à adapter. Ton but : clarifier besoins, éviter dérive scope, annoncer mauvaises nouvelles sans perte crédibilité.

Cadrage et devis

Livraison et support

3 5 procédures pas-à-pas chiffrées — WordPress OVH complet, Webflow, formulaire Make, backup, PageSpeed

Mode d'emploi : chaque procédure = étapes exactes, écrans, durées, prix réels 2026. Printe la section 3, garder sur bureau.

Procédure 3.A — Créer site WordPress complet sur OVH (~120 €/3ans + 80 €/domaine, 10 étapes, ~1.5h)

Résultat final : site complet live, design professionnel, paiement Stripe optionnel, backup auto.

1. Étape 1 — OVH créer compte + hosting : va ovh.com → Web → Hébergement → Web Classic 50GB (3,59 €/mois 1ère année, puis 8,99 €/mois). Ajoute panier, paye. Reçois email accès cPanel 30 min après.
2. Étape 2 — OVH registrar domaine : même site OVH → Domaines → Enregistrer domaine. Cherche nom (ex: « monboutique.fr »). ~12 €/an. Sélectionne, ajoute panier, paye. Pas oublier : connecter domaine à hosting ensuite.
3. Étape 3 — cPanel install WordPress 1-click : OVH email donne user/pass cPanel. Connexion : cpanel.monhebergeur.fr. User OVH. Dans cPanel, cherche Installers → WordPress (auto-installer). Clique Install. Demande : domain (monboutique.fr), DB name, admin user/pass. Remplis, Install. ~5 min, WordPress actif.
4. Étape 4 — WordPress premier login : va monboutique.fr/wp-admin. Identifiants que tu as choisis à l'étape 3. Login ok. Écran WordPress dashboard.
5. Étape 5 — Installer thème Astra + Elementor : Appearance → Themes. Cherche « Astra ». Installe (gratuit). Activate. Puis Plugins → Add new, cherche « Elementor ». Install → Activate. Page builder ready.
6. Étape 6 — Créer page d'accueil avec Elementor : Pages → Add new. Titre « Accueil ». Clique « Edit with Elementor » (bouton en-bas). Éditeur Elementor s'ouvre. Drag widgets (heading, image, button, text). Design layout. Save draft. Preview. Content ok ? Publish.
7. Étape 7 — Créer pages supplémentaires (Services/Contact/Blog) : Pages → Add new. Pour chaque : design simple Elementor ou template. Page Contact : ajoute plugin WPForms (free), crée form email/message/checkbox, embeds. Pages Products/Services : listes articles, images.
8. Étape 8 — Menu navigation : Appearance → Menus. Crée menu « Main Menu ». Ajoute pages (Home, Services, Blog, Contact). Affiche dans « Display location → Primary Menu ». Header maintenant have nav.
9. Étape 9 — Sécurité + backup auto : Plugins → Add new, installe « Wordfence » (free). Activate. Installe « UpdraftPlus » (free). Settings → UpdraftPlus → configure backup auto (daily, stockage Google Drive). Wordfence = monitoring.
10. Étape 10 — Site live préparation : Settings → General → vérifie URL juste. Reading → Front page displays → choisir page statique (Accueil). Change timezone France. Permalink Settings → Post name. Save. Site ready. Teste homepage, menu navigation, form contact. Screenshots avant/après = portfolio. Livraison client.

Procédure 3.B — Créer landing page Webflow (~240 €/an (Business plan), ~4-6h design, 0 € hosting)

Cas : client veut page simple vitrine pour campagne marketing (un seul page, design premium, intégration email).

1. Étape 1 — Créer projet Webflow : webflow.com → login/signup. Create new site. Choix : blank ou template. Blank = plus control. Clique Create site. Donne nom (« Landing Page Campaign »).
2. Étape 2 — Configurer page : Webflow ouvre éditeur. Default = page vide. Ajoute + Section (hero). Drag Heading (titre landing). Paragraph (sous-titre). Button (CTA). Édite texte, couleurs, fonts.
3. Étape 3 — Design hero section : ajoute image background. Add → Image, upload. Full-width. Texte overlay blanc. Add → Button, label « Découvrir ». Couleur brand. Hover state (assombrit bouton). Preview → belle hero.
4. Étape 4 — Ajouter sections (features, testimonials, CTA final) : bas de page. + Section. Ajoute grid 3 colonnes Add → Grid. 3 cards (icon + text). Puis section testimonials (photo client + quote). Puis CTA final (« Sign up now »).
5. Étape 5 — Formulaire email intégré : Add → Form. Fields : email, message. Settings → Form action → type email récipient. Ou Zapier integration pour envoyer vers Mailchimp/email provider. Test form → email reçu.
6. Étape 6 — Publish domaine : Webflow donne domaine gratuit (landing-abc-xyz.webflow.io). Mais professionnel = custom domain (~12 €/an achetés ailleurs, pointés Webflow). Settings → Hosting → add custom domain.
7. Étape 7 — Optimisations SEO + mobile : Settings → SEO → Page title, meta description. Mobile responsiveness : Webflow auto responsive, mais vérifie sur phone. Preview mobile dans editeur.
8. Étape 8 — Analytics + tracking : Settings → Integrations → Google Analytics. Copie GA tracking ID, colle. Publish. Landing live. Analytics data dans 24h.

Procédure 3.C — Formulaire connecté Google Sheets via Make (gratuit Make/Zapier, ~45 min)

Cas : client veut form (nom/email/message), data auto dans Google Sheet pour suivi facile.

1. Étape 1 — Créer Google Sheet : sheets.google.com → new sheet. Colonnes : « Timestamp », « Nom », « Email », « Message ». Url copie (va dans Make après).
2. Étape 2 — Créer form WordPress/Webflow : si WordPress : WPForms plugin, crée form (nom/email/message). Copy webhook URL après. Si Webflow : form intégré, va settings form, cherche « webhooks ».
3. Étape 3 — Make (anciennement Integromat) : make.com → login/signup. + Create scenario. Cherche trigger : « Webhook » (si WPForms) ou « HTTP request » (si Webflow form). Ajoute comme déclencheur.
4. Étape 4 — Connecter Google Sheets : après webhook, + Add action. Cherche « Google Sheets ». Create a row. Autorise Make accès Google. Sélectionne spreadsheet (celle de l'étape 1). Colonnes : map form fields (Timestamp = auto, Nom = {{Nom field}}, etc.).
5. Étape 5 — Tester flow : Make : Save → Run once. Va form, remplis champs, submit. Attends 5 sec. Google Sheets : refresh. Row nouvelle apparait ? Succès.
6. Étape 6 — Activation scenario Make : Make : Schedule (active). Scenario tourne continuellement. Chaque form sub = auto ajout Google Sheet. Zéro coût Make version gratuit (~100 ops/mois ok). Client peut voir réponses real-time dans sheet.

Procédure 3.D — Backup et update WordPress avec UpdraftPlus (gratuit, ~15 min)

Contexte : client worry backup. Tu montres comment c'est automatique et comment restore si besoin.

1. Étape 1 — UpdraftPlus install (gratuit) : WordPress admin Plugins → Add new. Cherche « UpdraftPlus ». Install → Activate.
2. Étape 2 — Config remote storage : Settings → UpdraftPlus (onglet gauche). Section « Remote storage ». Choix : Google Drive (recommandé). Authenticate with Google. Autorise. UpdraftPlus now access ton Google Drive.
3. Étape 3 — Schedule backup : UpdraftPlus Settings → « Backup schedules ». Set : Files every week, Database every day. Sauvegarde auto 24h. Clique Backup now pour immédiat test.
4. Étape 4 — Vérifier backup créé : UpdraftPlus → Existing backups. Tu vois dernière backup « Dec 15, 2025 14:32 » avec size « 85 MB ». Clique, tu vois file list (WordPress files + database). All backup dans Google Drive ton dossier « UpdraftPlus ».
5. Étape 5 — Test restore (optionnel, safety check) : si tu veux voir restore marche : Existing backups → Restore sur une vieille backup. Click « Restore ». Prend 5-10 min, site revient version old. Restore latest après test. Démo pour client : « Voir, si jamais hack ou erreur, on restore 24h backup, zéro données perte. »

Procédure 3.E — Audit vitesse PageSpeed et optimisations (gratuit Google PageSpeed, ~1h optimisations)

Contexte : site lent (score PageSpeed 55/100). Tu dois optimiser concrètement et re-tester.

1. Étape 1 — Tester PageSpeed : pagespeed.web.dev → paste URL site. Attends scan (30 sec). Score mobile 55/100 (rouge). Desktop 72/100 (orange). Rapport liste problèmes : « Image not optimized », « Reduce unused CSS », « Cache issues ».
2. Étape 2 — Optimiser images : WordPress Plugins → Add new → install « Imagify ». Activate. Media → Bulk optimize. Sélectionne toutes images. Click Optimize. Imagify compresse sans perte qualité (~60-80 % réduction taille). ~10 min traitement.
3. Étape 3 — Activer cache : Plugins → Add new → « WP Super Cache ». Install → Activate. Settings → WP Super Cache → Enable caching. Check « Preload cache ». Save. Cache = pages servies super rapide (<100ms vs 500ms).
4. Étape 4 — Lazy load images : Imagify ou plugin « Lazy Load ». Enable lazy load images. Images load seulement quand scrolling vers elles (pas load toutes d'un coup). Réduit initial page load ~300ms.
5. Étape 5 — Minify CSS/JS : Plugin « Autoptimize ». Install → activate. Settings → autoptimize → check « Optimize CSS », « Optimize JS ». Save. Enlève commentaires/whitespace du code (minify = fichiers plus petits).
6. Étape 6 — Re-tester PageSpeed : attends 1h pour cache settle. Puis pagespeed.web.dev scan site à nouveau. Avant 55/100 → Après 78/100 (good). Screenshot avant/après pour portfolio client. Email client : « Site vitesse improved 55→78, amélioration 41 % ! Clients vont charger la page plus vite, meilleur conversion. »

4 Snippets HTML/CSS prêts à coller — bouton CTA, héros, grille 3 cartes, cookies

Mode d'emploi : copie-colle dans Elementor (custom HTML block) ou HTML direct. Adapte couleurs, textes. Utilisable immédiatement.

Snippet 1 — Bouton CTA avec hover effect

<style>
.cta-button {
  display: inline-block;
  padding: 14px 32px;
  background: linear-gradient(135deg, #1d6fa5 0%, #0d4a7a 100%);
  color: white;
  text-decoration: none;
  font-weight: 700;
  border-radius: 5px;
  transition: all 0.3s ease;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.cta-button:hover {
  background: linear-gradient(135deg, #0d4a7a 0%, #051f42 100%);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(29, 111, 165, 0.4);
}
</style>

<a href="https://votre-lien.com" class="cta-button">Commencer maintenant</a>

Snippet 2 — Section héros full-width responsive

<style>
.hero-section {
  background: linear-gradient(135deg, #1d6fa5 0%, #2a8ab8 100%);
  padding: 80px 20px;
  text-align: center;
  color: white;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-content h1 {
  font-size: 48px;
  margin-bottom: 20px;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}
.hero-content p {
  font-size: 20px;
  margin-bottom: 30px;
  opacity: 0.95;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .hero-content h1 { font-size: 36px; }
  .hero-content p { font-size: 16px; }
  .hero-section { padding: 50px 20px; min-height: 300px; }
}
</style>

<div class="hero-section">
  <div class="hero-content">
    <h1>Bienvenue sur Notre Plateforme</h1>
    <p>Solution digitale complète pour votre entreprise</p>
    <a href="#" class="cta-button" style="background: white; color: #1d6fa5; font-weight: 700;">Démarrer gratuitement</a>
  </div>
</div>

Snippet 3 — Grille 3 cartes avec hover

<style>
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.card {
  background: white;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
  border-top: 4px solid #1d6fa5;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.card h3 {
  font-size: 22px;
  margin: 20px 0 15px 0;
  color: #2f3e4e;
}
.card p {
  font-size: 15px;
  line-height: 1.6;
  color: #55646f;
}
.card-icon {
  font-size: 48px;
  margin-bottom: 10px;
}
</style>

<div class="cards-grid">
  <div class="card">
    <div class="card-icon">🚀</div>
    <h3>Rapide</h3>
    <p>Mise en ligne en quelques heures. Pas d'attente, pas de complexité.</p>
  </div>
  <div class="card">
    <div class="card-icon">🛡️</div>
    <h3>Sécurisé</h3>
    <p>Certificat SSL, sauvegarde quotidienne, monitoring 24/7.</p>
  </div>
  <div class="card">
    <div class="card-icon">💬</div>
    <h3>Support</h3>
    <p>Réponse en moins de 24h. Nous sommes là pour vous.</p>
  </div>
</div>

Snippet 4 — Bandeau cookies RGPD conforme

<style>
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 3px solid #1d6fa5;
  padding: 20px;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  z-index: 9999;
  font-size: 14px;
}
.cookie-text { flex: 1; color: #55646f; }
.cookie-text a { color: #1d6fa5; text-decoration: underline; }
.cookie-buttons { display: flex; gap: 10px; }
.cookie-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.2s;
}
.btn-accept {
  background: #1d6fa5;
  color: white;
}
.btn-accept:hover { background: #0d4a7a; }
.btn-decline {
  background: #f0f0f0;
  color: #2f3e4e;
}
.btn-decline:hover { background: #e0e0e0; }
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: flex-start; }
  .cookie-buttons { width: 100%; }
  .cookie-btn { flex: 1; }
}
</style>

<div class="cookie-banner" id="cookieBanner">
  <div class="cookie-text">
    Nous utilisons des cookies pour améliorer votre expérience.
    Consultez notre <a href="/confidentialité">politique de confidentialité</a>.
  </div>
  <div class="cookie-buttons">
    <button class="cookie-btn btn-decline" onclick="rejectCookies()">Refuser</button>
    <button class="cookie-btn btn-accept" onclick="acceptCookies()">Accepter</button>
  </div>
</div>

<script>
function acceptCookies() {
  localStorage.setItem('cookiesAccepted', 'true');
  document.getElementById('cookieBanner').style.display = 'none';
  // Ici tu ajoutes Google Analytics, Facebook Pixel, etc.
}
function rejectCookies() {
  localStorage.setItem('cookiesAccepted', 'false');
  document.getElementById('cookieBanner').style.display = 'none';
}
if (localStorage.getItem('cookiesAccepted')) {
  document.getElementById('cookieBanner').style.display = 'none';
}
</script>

5 Grille recette site — 20 points critiques avant livraison

Mode d'emploi : 1 jour avant livraison, tu remplis cette grille. Tous ☑ = tu peux livrer. Si ☐ sur point critique = tu peux pas livrer, tu fixes.

Checklist recette (20 items, /20)

Interprétation : 18-20 pts = livrer (excellent). 15-17 pts = amber, fix critiques avant. <15 pts = pas livrer, relancer fixes. Avant livraisonå client, tu dois avoir 20/20. Envoie screenshot checklist complétée = preuve de qualité.

6 8 prompts IA — CSS, débogage, copywriting, UX, optimisations

Mode d'emploi : copie-colle dans Claude/ChatGPT. IA génère brouillon, tu adaptes. Gain ~30-60 min par prompt.

Tu es expert CSS animations. Génère 3 animations réutilisables :

1. Fade-in quand page load (opacity 0 → 1, durée 0.8s).
2. Hover button : légère zoom + shadow grow (scale 1 → 1.05, shadow augmente).
3. Slide-in sidebar mobile : vient de gauche (-100% → 0, duration 0.4s).

Format : CSS @keyframes + class usage. Prêt à coller dans Elementor custom CSS.

Requête : fluide, pas saccadé (use cubic-bezier ease-out). Accessible (no motion sickness pour users avec prefers-reduced-motion).

Erreur console : « Uncaught TypeError: Cannot read property 'addEventListener' of null at script.js:42 »

Je suis développeur junior. Code à la ligne 42 :
```
document.getElementById('contactForm').addEventListener('submit', function() {...});
```

Qu'est-ce que c'est l'erreur ? Pourquoi ça arrive ? Comment fixer ? Explique simple, donne solution code.

Hint : element getElementById cherche pas trouvé, return null.

Entreprise : agence web local, services : création site WordPress, Webflow, optimisation vitesse.

Génère copy pour section hero (heading + sous-heading + CTA text). Ton : professionnel mais approchable, tech-light (compréhensible PME non-tech). Max 3 lignes heading, 2 lignes sous-heading.

Accent sur : délais rapides, pas cher (vs agence Paris 15k€), support local.

Output : HTML-ready, prêt Elementor.

Form current : nom (input) / email (input) / message (textarea) / checkbox « J'accepte CGU » / button submit.

Problème : conversion rate <2 % (peu gens finissent). Améliore UX form.

Points à address : moins champs (ce qui essentiel ?), micro-copy (labels, helper text), validation clear (« Email pas valide, réessayer »), progress indication, button CTA clair.

Génère form HTML revisité + explications pourquoi chaque changement aide conversion.

E-com : vente accessoires boulangerie (moules, emballages, etc.). Page produit = « Moule à pain français carré ».

Structure sections logiques page (navigation, pricing, images, specs, reviews, related products, CTA « Ajouter panier »).

Génère HTML skeleton (div avec classes, sans CSS) pour une page produit clean, pro. Sections : hero image + gallery, titre + pricing, description détail (specs table), client testimonials, related items, footer CTA.

Prêt à styler avec Elementor après.

Page : « /blog/comment-créer-site-wordpress »

Current :
— Title : « WordPress »
— Meta description : vide
— Headings : 1 H1 « Mon blog WordPress » (pas bon keyword), pas H2/H3
— Images : 5 images, zéro alt text
— Internes links : zéro

C'est ~200 visites/mois, on veut +50 %. Qu'est-ce que fixer priorité ? Donne actions concrètes.

Output : checklist SEO simplifié (top 5 changes ROI max).

Niche : agence web freelance services web pour PME.

Objectif : 500 visitors/mois organic search en 3 mois. Stratégie content plan (15 articles).

Génère :
— 15 article ideas (titres + keywords cible + word count).
— Calendrier publication (2-3/semaine).
— Sections chaque article (outline).
— Call-to-action (comment chaque article → service upsell).

Output : spreadsheet format (copie-colle Google Sheets).

Site desktop belle (3-column grid, full-width images). Mobile : colonnes overlapping, images overflow, texte pas lisible.

Code actuel utilise CSS Grid sans media queries (pas responsive).

Génère CSS media query fix pour :
— Breakpoint 768px tablet (2 colonnes).
— Breakpoint 480px mobile (1 colonne).
— Images max-width: 100%.
— Font scale down mobile (heading 36px → 24px).
— Padding/margin ajuster mobile (pas trop cramped).

Prêt à coller, test sur iPhone/Android emulator.

7 Check-list mise en ligne et tableau « Combien ça coûte » — prix réels 2026

Mode d'emploi : section 1 = check-list jour livraison. Section 2 = budgets réels pour tous les coûts d'un projet web.

Check-list mise en ligne final (jour livraison)

• Nom domaine enregistré et pointé DNS vers hosting. Vérifier DNS propagation (max 24h, tester nslookup).
• SSL certificat installé et valide (cadenas vert). HTTPS working partout (redirect HTTP → HTTPS).
• Sauvegarde complète (backup UpdraftPlus ou cPanel) prise et vérifiée avant mise en ligne.
• WordPress + tous plugins et thème à jour (latest versions). Aucun warning de sécurité.
• Accès client fourni : admin user/password, FTP credentials si besoin, documenté sécurisé (pas email plain).
• PageSpeed teste et score mobile >70. Performance ok (load time <2.5 sec). Images optimisées.
• Responsive test sur 3+ appareils (iPhone 12, Samsung Galaxy, iPad). Aucun cassage major.
• Tous les liens testés (internes + externes). Pas de 404. Menu navigation complète et fonctionnelle.
• Formulaires testés : remplissage + envoi. Email reçu destination ? Confirmation utilisateur affiche ?
• Paiement testé (si e-com) : checkout complet avec test card Stripe ou PayPal. Order créée.
• Google Analytics tracking code installé et validé. Premiers événements arrivent dans 24h.
• Google Search Console : site soumis, sitemap.xml ajouté, robots.txt ok, pas erreurs crawl.
• Monitoring et alertes configurés. Wordfence + auto-updates + uptime monitoring actif.
• Documentation client préparée : guide « Comment ajouter article », FAQ, contact support écrit.
• Contenu final approuvé par client. Zéro typos, images à jour, dates correctes, pas lorem ipsum.

Tableau « Combien ça coûte » — budget réel projet web type (boulangerie locale, site 12 pages)

8 Outils et logiciels — WordPress, Elementor, Webflow, Make, figuration 2026

Mode d'emploi : boîte à outils complète du développeur web. Chaque outil : qu'est-ce, pros/cons, coût, quand utiliser.

WordPress + Elementor — Page builder drag-drop pour PME

Qu'est-ce : WordPress = système CMS gratuit pour créer sites. Elementor = page builder visuel (pas code, drag-drop). Combo idéal agences/freelances.

Pros : très populaire (40 % web), plugins illimités, flexible, coût faible. Design rapide sans coder HTML.

Cons : moins « fancy » design que code custom. Performance peut lag gros volumes (nécessite cache/optimization). Courbe apprentissage Elementor (~2h).

Quand : PME vitrine, e-commerce < 100 produits, budget < 10k€, délai rapide (2-4 semaines).

Coût 1ère année : ~60 € hosting + 160 € thème + 99 € Elementor + 100 € plugins = 420 €. Minimal.

Webflow — Designer web sans code (premium)

Qu'est-ce : plateforme web design visuelle. Design pixel-perfect, hosting inclus, export HTML/CSS possible. Plus professionnel que WordPress.

Pros : design ultra-custom (entièrement visuel, zéro code), hosting stable, SEO-friendly, animations avancées natives.

Cons : cher (200 €/mois), locked Webflow (pas move away facilement), e-commerce limité, courbe apprentissage moyenne.

Quand : portfolio/agence qui vendez design, client budget flexible (10k+ €), pas besoin e-com complexe.

Make (Zapier) — Automations sans code (intégrations)

Qu'est-ce : plateforme automations. « Si form rempli, envoyer email + ajouter Google Sheet + slack notification ». Connecte 1000+ apps.

Pros : puissant (créer workflows complexes), pas code, visuel, prix raisonnable. Make gratuit ~100 ops, Zapier pareil.

Cons : apprentissage interface (design interface complexe). Si besoin 1000+ ops/mois, coûts payants s'accumulent.

Quand : intégration formulaire → CRM, email marketing, Google Sheets, Slack. Essential pour client automation.

Wix / Squarespace — SaaS website builder (simple)

Qu'est-ce : SaaS « all-in-one ». Design templates, hosting inclus, support corporate. Zero config serveur.

Pros : très facile PME solo (drag-drop, pas technique), hosting stable, support 24/7.

Cons : limité customization (template-locked), export données difficile, pricing tier élevé (15-50 €/mois), moins flexible que WordPress.

Quand : très petite micro-entreprise solo (coiffeur, plombier local), zéro tech skills, veut vraiment simple.

cPanel — Gestion hosting & server (OVH, Ionos, etc.)

Qu'est-ce : control panel graphique pour gérer hosting. Crée DB, upload files, installer WordPress, gérer emails, backups.

Pros : interface visuelle (pas SSH command-line), simple pour juniors. Standard industrie hébergeurs.

Cons : interface vieillotte (2000s design). Certaines tâches plus facile SSH.

Quand : toujours. cPanel access = minimum pour gérer WordPress server-side.

Figma — Design tool collaborative

Qu'est-ce : tool design UI/UX cloud. Wireframes, mockups, design system, prototype interactive. Real-time collab plusieurs designers.

Pros : web-based (install), collaboration live (plusieurs → same file), dev handoff (specs auto pour dev).

Cons : coût 12 €/mois pro. Performance lag gros files (1000+ elements).

Quand : projet 3+ semaines ou designer sérieux. Quick sketch ? Wireframe.cc 0 € ok.

Google Analytics — Tracking visiteurs & comportement

Qu'est-ce : plateforme analytics gratuit Google. Tracking visiteurs, pages vues, événements (clic bouton), conversions.

Pros : gratuit, puissant (dashboards, segments, cohorts). Intégration Google Ads/Search Console.

Cons : interface complexe pour juniors. Données delayed ~24h.

Quand : obligatoire après launch. Jour 1 dev ? Setup après go-live ok.