Stephen Build ← Roadmap
0/0
Roadmap des Builders · Étape 7 sur 7

Un vrai client un vrai site

Pas un clone de Netflix. Un site pour un commerce, une asso ou un artisan que tu connais, mis en ligne et utilisé pour de vrai. C'est là que t'apprends ce qu'aucun cours ne t'apprend : un vrai besoin, des retours, et un site que tu dois maintenir.

Durée 2 à 4 semaines Niveau étapes 1 à 6 Projet le site de ton premier client Mis à jour

À la fin, tu sauras

Les missions

Cette fois, le plus dur, c'est pas le code. Fais les missions dans l'ordre. Tu vas attendre des réponses et des photos : avance sur le reste pendant ce temps.

Mission 0

Ton premier client, tu le connais déjà. Regarde autour de toi :

  • Un commerce : la boulangerie, le coiffeur du quartier.
  • Une asso : ton club de sport.
  • Un artisan : le plombier de ton oncle.

Le bon candidat a pas de site, un site cassé sur téléphone, ou juste une page Facebook. Fais une liste de 5 noms et tape-les sur Google, depuis ton téléphone. Garde ceux que tu peux voir en vrai, qui sont dispo, et dont le besoin est simple.

Erreur fréquente

Choisir un projet trop gros pour impressionner. Un petit site fini et utilisé vaut plus qu'une grosse appli abandonnée.

Résultat attendu
Ta liste
1. Boulangerie Martin : juste une page Facebook, horaires pas à jour.
   Je connais Martine, j'y passe tous les matins.
2. Club de foot du quartier : site de 2012, illisible sur téléphone.
   Le président est le père d'un pote.
3. Céramiste (amie de ma sœur) : seulement Instagram, aucun site.
   Elle a du temps en ce moment.

Au moins 3 candidats, avec ce que tu as vu en ligne. Le premier, c'est celui que tu contactes.

Mission 1

Pas de pitch. Dis la vérité : t'apprends et tu cherches un vrai projet. Le mieux, c'est en face. Sinon, un message court :

message.txt
Salut Martine,

J'apprends à créer des sites web depuis quelques mois,
et je cherche un premier vrai projet pour m'entraîner.

J'ai vu que la boulangerie n'avait pas encore de site
(ou : que le site actuel s'affiche mal sur téléphone).
Ça te dirait que je t'en fasse un ? Simple : vos horaires,
l'adresse, vos produits, un moyen de vous contacter.

Je suis encore en apprentissage, donc je te le propose
gratuitement, en échange de ton avis honnête et du droit
de le montrer comme exemple de mon travail.

On peut en parler 20 minutes cette semaine ?

Alex

Honnête, concret, court. On te dit non ? Passe au nom suivant.

Demande à l'IA
Voici le message que je veux envoyer à un commerçant pour lui proposer de faire son site : [colle ton message]. Dis-moi ce qui pourrait le faire hésiter ou mal le prendre, sans réécrire le message à ma place.
Résultat attendu
Ton message
Envoyé à Martine, mardi 9 h 12 :
« Salut Martine, j'apprends à créer des sites web [...]
  On peut en parler 20 minutes cette semaine ? Alex »

Réponse : « Oui, passe jeudi vers 15 h, c'est calme. »

Un message envoyé et une date de rendez-vous. Si c'est non, le message part au nom suivant.

Mission 2

C'est toi qui poses les questions. Ton but : comprendre son métier, pas lui parler de code.

  1. Qu'est-ce que tu veux que les gens fassent sur le site ? C'est LA question.
  2. Qui sont tes clients ? Sur téléphone ou sur ordi ?
  3. Qu'est-ce qu'on te demande le plus souvent ?
  4. Qu'est-ce que t'as déjà ? Logo, photos, domaine ?
  5. Un site que t'aimes bien ?
  6. Pour quand ?
  7. Qui le mettra à jour ?

Prends des notes, et reformule à la fin : « Si je résume, tu veux que... ».

À toi

Prends des photos de la boutique et des produits. Des vraies photos font plus que n'importe quel design.

Résultat attendu
Tes notes
RDV Boulangerie Martin, jeudi 15 h
1. But : qu'on trouve les horaires et qu'on appelle pour les gâteaux
2. Clients : gens du quartier, surtout sur téléphone
3. Questions fréquentes : horaires, gâteaux sur commande, ouvert dimanche ?
4. Déjà là : logo, page Facebook, pas de domaine, pas de photos pro
5. Site aimé : celui de la fromagerie d'à côté
6. Date : avant le 1er avril
7. Mises à jour : Martine m'envoie un message, je modifie
Reformulé à la fin : OK (« pas de commande en ligne, juste appeler »)

Une réponse aux 7 questions, la reformulation validée, et quelques photos.

Mission 3

Avant de coder, écris ce que t'as compris. Une page, pas plus. Ça évite le « c'est pas ce que je voulais » à la fin.

brief.md
# Site de la Boulangerie Martin

## Le but
Que les gens du quartier trouvent nos horaires
et passent commander leurs gâteaux par téléphone.

## Pour qui
Habitants du quartier, surtout sur téléphone.

## Les pages
1. Accueil : photo, horaires, adresse, bouton "Appeler"
2. Nos produits : pains, viennoiseries, gâteaux sur commande
3. Contact : téléphone, email, carte, accès
+ Mentions légales (obligatoire)

## Ce que le client fournit (avant le 15/03)
- Logo
- 10 photos des produits
- Liste des gâteaux sur commande

## Ce qui n'est PAS dans le projet
- Commande ou paiement en ligne
- Blog

## Qui met à jour quoi
- Horaires de vacances : le client m'envoie un message,
  je mets à jour sous 48 h

## Date de mise en ligne
Avant le 1er avril

La section « Ce qui n'est PAS dans le projet » évite que le projet grossisse tout seul. Envoie le brief et demande un « OK » écrit.

Demande à l'IA
Voici le brief de mon premier site client : [colle ton brief]. Qu'est-ce qui est flou, qu'est-ce qui manque, et qu'est-ce qui risque de poser problème pendant le projet ? Ne rédige pas le site, critique juste le brief.
Résultat attendu
Ton brief validé
Toi    : Voici le brief du site, tu peux me dire si c'est bon ?
         [brief.md]
Martine : C'est bon pour moi ! Je t'envoie les photos ce week-end.

Un brief d'une page, et le « OK » écrit du client, gardé quelque part.

Mission 4

Une règle : l'outil le plus simple qui fait le job. Pour un site vitrine, HTML, CSS et un peu de JavaScript suffisent.

Adresse, horaires, contact : rends tout ça cliquable.

contact.html
<section id="contact">
  <h2>Nous trouver</h2>

  <p><strong>Boulangerie Martin</strong><br>
  12 rue des Lilas, 69000 Lyon</p>

  <!-- Sur téléphone, un tap lance l'appel -->
  <a class="btn" href="tel:+33412345678">Appeler : 04 12 34 56 78</a>

  <!-- Ouvre l'appli mail avec l'adresse remplie -->
  <a href="mailto:contact@boulangerie-martin.fr">contact@boulangerie-martin.fr</a>

  <h3>Horaires</h3>
  <ul>
    <li>Mardi à samedi : 7 h - 19 h 30</li>
    <li>Dimanche : 7 h - 13 h</li>
    <li>Lundi : fermé</li>
  </ul>

  <!-- Google Maps : Partager > Intégrer une carte, et colle le code ici -->
  <iframe src="https://www.google.com/maps/embed?pb=..."
          width="100%" height="300" style="border:0"
          loading="lazy" title="Plan d'accès à la boulangerie"></iframe>
</section>
  • tel:+33... : format international, sans espaces ni le premier 0. Teste-le sur ton téléphone.
  • Les photos pèsent souvent plusieurs Mo : compresse-les avec Squoosh.

Les mentions légales

En France, un site pro doit dire qui l'édite et qui l'héberge, sur une page liée dans le footer. Vérifie la liste sur Service Public Entreprendre et fais remplir les infos par ton client.

Erreur fréquente

Des horaires codés à trois endroits. Le jour où ils changent, t'en oublies un. Mets-les à un seul endroit.

Résultat attendu
boulangerie-martin.fr/#contact

Le bloc contact sur téléphone : « Appeler » lance l'appel, horaires et adresse se lisent sans chercher. Le reste du site doit aussi être là, mentions légales comprises.

Mission 5

Un .vercel.app, c'est bien pour toi. Un commerce a besoin de sa propre adresse, genre boulangerie-martin.fr.

  1. Mets le site en ligne comme à l'étape 5 : GitHub relié à Vercel ou Netlify.
  2. Achète le domaine chez un registrar (OVHcloud, Gandi...), au nom de ton client, avec son compte et sa carte. Le domaine, c'est à lui.
  3. Relie le domaine : ajoute-le dans les réglages du projet Vercel ou Netlify, puis crée chez le registrar les enregistrements DNS indiqués. Copie-les exactement.
  4. Attends (de quelques minutes à quelques heures), puis vérifie le cadenas HTTPS.
terminal
# Vérifie vers où pointe le domaine (Mac et Linux)
dig boulangerie-martin.fr +short
Résultat attendu
Terminal
$ dig boulangerie-martin.fr +short
76.76.21.21
$ dig www.boulangerie-martin.fr +short
cname.vercel-dns.com.
76.76.21.21

Le domaine pointe vers ton hébergeur (ici Vercel), et https://boulangerie-martin.fr s'ouvre avec le cadenas.

Mission 6

Assieds-toi à côté de ton client, donne-lui son propre téléphone, et demande-lui des choses concrètes :

  • « Trouve les horaires du dimanche. »
  • « Appelle la boutique depuis le site. »
  • « Montre-moi comment venir en voiture. »

Et là, tu te tais. Tu regardes où il hésite, où il tape à côté. Chaque hésitation, c'est un truc à corriger.

  1. Note tout, sans te justifier.
  2. Trie : ce qui bloque, ce qui gêne, ce qui sort du brief.
  3. Corrige, remets en ligne, refais tester.
Résultat attendu
Tes retours triés
BLOQUE (corrigé tout de suite)
- Le bouton « Appeler » est caché sous la photo sur téléphone
GÊNE (corrigé)
- Horaires du dimanche trouvés après 20 secondes : remontés en haut
- Texte des produits trop petit
NOUVELLE IDÉE (hors brief, à discuter)
- « On pourrait prendre les commandes de gâteaux en ligne ? »

Une liste triée, les corrections en ligne, et un deuxième test où le client trouve tout sans hésiter.

Mission 7

Un site, ça vit. Mettez-vous d'accord sur la suite.

  • Les accès : domaine et hébergement, dans un document que tu lui donnes.
  • Les modifs : comment il te les demande, et en combien de temps tu réponds.
  • Le domaine : un rappel dans ton agenda avant le renouvellement.

Parler d'argent

Gratuit ou petit montant, c'est un choix honnête pour un premier projet, si tu l'as dit dès le début. En échange, demande vraiment :

  • Un témoignage de deux ou trois phrases.
  • Le droit de montrer le site, par écrit.
  • Une recommandation : souvent, c'est ton deuxième client.

Si c'est gratuit, la limite, c'est le brief. Le reste se discute, et dis-le maintenant.

Demande à l'IA
Je viens de livrer mon premier site client, gratuitement contre un témoignage. Aide-moi à préparer ce que je vais lui dire pour la suite : qui fait les modifications, comment il me les demande, et ce qui ne sera plus gratuit. Pose-moi d'abord des questions sur ma situation.
Résultat attendu
Ta passation
Remis à Martine :
- Domaine boulangerie-martin.fr : compte OVHcloud à son nom,
  renouvellement le 20/03 de chaque année
- Hébergement : Vercel (projet partagé avec son email)
- Modifs : un message à Alex, faites sous 48 h
Dans ton agenda : rappel renouvellement du domaine, le 1er mars
Reçu : témoignage + accord écrit pour ton portfolio

Le client a ses accès, sait comment demander une modif, et tu as son témoignage écrit.

Le projet

Le site de ton premier client

Un site vitrine pour une vraie personne, construit à partir de son besoin, en ligne sur son domaine et utilisé pour de vrai. Il sera pas parfait, et c'est pas le but. Le but, c'est qu'il serve : que des gens trouvent les horaires, appellent, passent la porte.

Ton projet est validé quand :

Bonus

Un mois après la mise en ligne, retourne voir ton client. Demande-lui ce que le site a changé : des appels, des questions en moins, des nouveaux clients ? Écris ce que t'as appris dans un post, et partage-le avec les Builders.

Pour aller plus loin

Roadmap bouclée. Bravo.

T'as construit un vrai site, pour une vraie personne, qui s'en sert. Beaucoup de gens qui apprennent à coder n'arrivent jamais jusque-là. Mais savoir coder un site, c'est la moitié du chemin. L'autre moitié, c'est trouver quelqu'un qui le paie. C'est ce qu'on apprend chez les Builders : rejoins la communauté, et montre-nous ce que t'as construit.

Rejoindre les Builders