Ta première page en ligne

Ce qu'on construit

Une page de présentation : ton activité, un projet, ou simplement toi. Un seul fichier, index.html, avec le texte et la mise en forme dedans. Pas de base de données ni de formulaire à brancher : le plus petit site possible, pour une première mise en ligne sans risque.

Tu as besoin de l'app Claude avec l'onglet Code, installée au chapitre 2, et d'un navigateur.

Étape 1, un dossier pour la page

Dans ton dossier code, crée un dossier ma-premiere-page. Puis, dans l'onglet Code de l'app Claude, choisis Local, clique sur Select folder et sélectionne ma-premiere-page.

Un dossier par projet : tout à l'heure, tu mettras ce dossier entier en ligne.

Étape 2, décrire la page

Donne à Claude le contenu, le style et les contraintes. Plus tu es précis, moins tu corriges ensuite :

"Crée une page web de présentation pour [ton activité, en une phrase]. Un seul fichier index.html, avec le style dans le même fichier. Trois sections : qui je suis, ce que je propose, comment me contacter (un lien mailto vers [ton email]). Couleurs : [deux couleurs]. Le texte est en français. La page doit être lisible sur téléphone."

Claude te propose le fichier. Accepte, puis clique sur le compteur de modifications pour voir ce qu'il a écrit. Tu n'as pas besoin de tout comprendre : vérifie surtout que tes textes y sont.

Étape 3, la regarder

Ouvre le dossier ma-premiere-page dans le Finder (Mac) ou l'Explorateur de fichiers (Windows) et double-clique sur index.html. La page s'ouvre dans ton navigateur.

Elle n'est visible que sur ton ordi pour l'instant : l'adresse commence par file://. Personne d'autre ne peut l'ouvrir.

Étape 4, l'améliorer en deux ou trois demandes

Regarde la page avec les yeux d'un visiteur, puis demande une correction à la fois :

"Le titre est trop petit sur téléphone. Agrandis-le et réduis l'espace au-dessus."

"J'ai mis une photo dans le dossier, elle s'appelle photo.jpg. Ajoute-la à côté de la section qui je suis, ronde, 160 pixels."

Après chaque demande, recharge la page dans le navigateur. Pour voir le rendu sur téléphone, rétrécis la fenêtre du navigateur.

Étape 5, la mettre en ligne avec Vercel Drop

Vercel héberge des sites web. Son outil Drop met un dossier en ligne par simple glisser-déposer, sans Git ni terminal.

1. Crée un compte gratuit sur vercel.com.
2. Va sur vercel.com/drop.
3. Fais glisser ton dossier ma-premiere-page sur la page.
4. Choisis ton équipe Vercel (ton compte personnel) et donne un nom au projet, par exemple ma-premiere-page.
5. Clique sur Deploy.

Vercel crée le projet, envoie tes fichiers et publie la page. À la fin, tu as une adresse publique, du type ma-premiere-page.vercel.app. Ouvre-la sur ton téléphone : c'est en ligne.

Étape 6, modifier la page en ligne

Tu changes quelque chose avec Claude dans ton dossier, et la version en ligne ne bouge pas. Normal : Drop envoie une copie du dossier à un instant donné.

Pour publier la nouvelle version, ouvre ton projet dans le tableau de bord Vercel et fais glisser le dossier dessus. Vercel crée une nouvelle version en production, à la même adresse.

Attention à ne pas repasser par vercel.com/drop : chaque dépôt là-bas crée un nouveau projet, avec une nouvelle adresse.

Et après

Ce que tu viens de faire en petit, tu le referas sur chaque projet. Une vraie app ajoute des comptes utilisateurs, une base de données, des paiements et un nom de domaine à toi. Pour ça, il faut d'abord savoir parler à Claude (chapitre 5) et planifier avant de coder (chapitre 6).

Sources

• Vercel Drop (vercel.com)
• Plan Hobby et usage commercial (vercel.com)
• Démarrer avec l'app desktop (code.claude.com)