Chargement de Web Design From Scratch…
Aller au contenu

Ouverture · 29 décembre 2026

Ouverture officielle le 29 décembre 2026 à minuit, heure de Paris.

Le catalogue

Les cours

Un chapitre 0, puis 4 parcours qui s'enchaînent sur un même fil : 11 cours et 6 projets, de la première maquette au portfolio sous WordPress. Ce qui est marqué d'une étoile est réservé au premium.

Ouverture officielle le 29 décembre 2026 — l'enregistrement est en cours

  • Un fil conducteur : ce que tu produis dans un parcours sert dans le suivant
  • Une vidéo par chapitre
  • Une fiche écrite, à relire sans réappuyer sur lecture
  • Un cas pratique à réaliser dans chaque parcours
  • Des quiz pour vérifier que c’est acquis
  • Un certificat à la fin du parcours

Chapitre 0

Comprendre le web

Avant d’ouvrir un logiciel : comment une page arrive jusqu’à ton écran, ce que pèse une image, et qui fait quoi dans une équipe web.

  1. Cours

    Comprendre le web

    Le web, ses requêtes, ses formats et ses métiers : les bases que tout le reste suppose

    • L’histoire du web
    • Le modèle client-serveur
    • Requêtes et erreurs serveur
    • Les formats d’image
    • Écrans et densité de pixels
    • Framework ou CMS ?
    • Cycle en V ou agilité
    • Les métiers du web

Parcours 01

Design UI/UX

Comprendre ce qui rend une interface lisible, puis la dessiner dans Figma jusqu’à la maquette qu’un développeur peut intégrer.

  1. Cours

    Les fondamentaux de l’UX/UI

    La théorie : de la recherche utilisateur aux 7 fondamentaux de l’UI

    • La recherche continue
    • Le design thinking
    • Les personas
    • Le parcours utilisateur
    • Les 7 fondamentaux de l’UI
    • Premium : L’architecture de l’information
  2. Quiz

    Quiz de fin

    Vérifier que la théorie est acquise avant d’ouvrir Figma

  3. Cours · Fil rouge : ta maquette « témoignages »

    Figma : From Noob To Ninja

    La pratique : des wireframes à la maquette prête à livrer

    • Une maquette « témoignages »
    • Wireframes
    • Maquettes haute fidélité
    • Chartes graphiques
    • Premium : Design system
    • Premium : Prototypes
  4. Projet

    Le site d’une hypnothérapeute

    Cas pratique : sémantique, ambiance, maquette statique — un vrai brief

  5. Correction

    Ta maquette corrigée

    Tu l’envoies, elle revient avec une correction et des pistes d’amélioration

Parcours 02

Graphisme / Branding

Composer une image qui tient debout, puis poser une identité — jusqu’au logo d’un vrai client.

  1. Cours

    Les fondamentaux du graphisme et du branding

    La théorie : composition, point focal, sémantique des images

    • Les grilles de composition
    • Le point focal
    • La sémantique des images
    • L’équilibre
    • Premium : Le nombre d’or
  2. Cours

    Illustrator & Photoshop

    La pratique : les bases du vectoriel et du bitmap

    • Illustrator, les bases
    • Photoshop, les bases
  3. Cours Premium

    Illustrator & Photoshop — Perfectionnement

    Aller au-delà des bases, sur les deux logiciels

Parcours 03

Développement front-end

Donner vie aux maquettes : HTML, CSS et JavaScript, puis Vue, Nuxt et Tailwind — jusqu’à ton portfolio en ligne.

  1. Cours

    HTML5, CSS3 & JavaScript

    Les fondamentaux : un code moderne, responsive, et compris jusque dans l’inspecteur

    • HTML5 et CSS3 modernes
    • Les bases de JavaScript
    • Le responsive web design
    • L’inspecteur et la console
    • Grid et Flexbox
    • Découverte de GSAP
    • Premium : Balises vidéo et audio
    • Premium : Console avancée
    • Premium : Optimisation des requêtes
  2. Projet · Fil rouge : ta maquette « témoignages »

    Ta maquette « témoignages », intégrée

    La maquette dessinée dans Figma devient une page responsive — bonus : un sélecteur de thème en JavaScript natif

  3. Cours

    Front-end avancé

    Vue.js, Nuxt et Tailwind CSS — et pourquoi eux plutôt que les autres

    • Vue.js et Nuxt
    • Tailwind CSS
  4. Quiz

    Quiz de fin

    Vérifier que tout est acquis avant les deux projets

  5. Projet

    Une landing page animée au scroll

    Projet pratique, avec GSAP

  6. Projet · Fil rouge : ton portfolio

    Ton portfolio, from scratch

    Projet de fin : maquette statique, logo, intégration HTML/CSS

  7. Correction Premium

    Ton portfolio corrigé

    Tu fournis ton projet : corrections et améliorations, une par une

Parcours 04

WordPress

Du CMS qu’on installe au thème sur-mesure entièrement administrable : ton portfolio devient un site administrable sans coder.

  1. Cours

    WordPress — Initiation

    Découverte du CMS, de son histoire et de sa mécanique

    • L’histoire du CMS
    • Tour d’horizon
    • Thèmes et thèmes enfants
    • La Template Hierarchy
    • Local by Flywheel
    • La Loop
  2. Quiz

    Quiz

    Vérifier les bases avant de passer sous le capot

  3. Cours

    WordPress — Perfectionnement

    Sous le capot : Template Hierarchy, PHP/MySQL, ACF et Custom Post Types

    • La Template Hierarchy, le retour
    • PHP et MySQL, les bases
    • Les préfixes de base de données
    • Rappels de sécurité
    • ACF
    • Custom Post Types
  4. Projet · Fil rouge : ton portfolio

    Ton portfolio sous WordPress

    Cas pratique : intégration responsive, galerie triable, section portfolio administrable avec ACF et les CPT

  5. Après la fin du parcours

    Cours Premium

    Headless WordPress + Nuxt

    WordPress réduit à ses contenus, servis à un front Nuxt

Après l'ouverture

8 cours de plus, à l'étude

Aucune date annoncée : un cours n'entre dans le programme ci-dessus qu'une fois enregistré. Les bêta testeurs sont consultés en premier sur l'ordre dans lequel ils arrivent.

  • Design & IA Bientôt

    Concevoir avec l’IA

    Produire des images et des vidéos utilisables en production — et reconnaître les cas où l’IA dessert le projet

  • Design & IA Bientôt

    Coder avec un agent

    Claude Code, Cursor : du prototype à la mise en ligne, et comment relire ce que la machine écrit

  • Le métier Bientôt

    Trouver des clients

    Se positionner, démarcher, et transformer un premier contact en devis signé

  • Le métier Bientôt

    Fixer ses prix

    Taux horaire, forfait, abonnement, acompte : ce qu’on facture, et comment on le met par écrit

  • Le métier Bientôt

    Le portfolio qui fait signer

    Choisir trois projets, les raconter, et les mettre en ligne

  • Graphisme / Branding Bientôt

    Motion design web

    After Effects, Lottie, Rive : animer sans alourdir la page

  • Développement front-end Bientôt

    Accessibilité et performance

    WCAG et Core Web Vitals : ce qui se mesure, et ce que ça change au référencement

  • Développement front-end Bientôt

    Three.js & WebGL

    La 3D dans le navigateur, sans faire fondre les machines

Les chapitres se remplissent cours par cours. Réserve ta place pour être prévenu à chaque mise en ligne — une adresse email suffit, pas de compte à créer.