Premier projet pas à pas

Ce que vous allez créer

Dans ce tutoriel, vous allez créer non pas un, mais deux projets : d'abord une page ultra-simple (5 minutes), puis un site web complet avec design moderne. Commençons par le plus accessible.

Premier projet : votre page de présentation (5 min)

Ce premier projet est volontairement très simple. Pas de framework, pas de configuration, juste un fichier HTML que vous pourrez ouvrir directement dans votre navigateur.

Objectif : créer une page web qui dit "Bonjour, je m'appelle [votre prénom]" avec un fond bleu et du texte blanc.

Étape 1 : Créer un dossier et lancer Claude Code

Étape 2 : Demander votre page

Tapez cette demande, en remplaçant "Marie" par votre prénom :

> Crée une page HTML avec un seul fichier (index.html).
> La page doit dire "Bonjour, je m'appelle Marie" au centre de l'écran.
> Fond bleu (#1e40af), texte blanc, police grande et lisible.
> Pas de dépendances externes, tout dans un seul fichier.

Claude Code va créer le fichier index.html. Tapez y pour accepter.

Étape 3 : Voir le résultat dans votre navigateur

La façon la plus simple : glissez le fichier index.html depuis votre dossier directement dans votre navigateur (Chrome, Firefox, Safari). Votre page s'affiche instantanément !

Ou via le terminal :

# Sur macOS
open index.html

# Sur Linux
xdg-open index.html

# Sur Windows
start index.html

Deuxième projet : un site web complet avec design moderne

Prêt(e) pour quelque chose de plus ambitieux ? Passons à un portfolio complet avec navigation, sections et animations.

Étape 1 : Préparer le terrain

Créez un nouveau dossier pour votre projet et lancez Claude Code à l'intérieur.

Claude Code va s'initialiser et analyser le dossier (vide pour l'instant). Vous êtes prêt à lui parler.

Étape 2 : Décrire ce que vous voulez

La qualité du résultat dépend directement de la qualité de votre demande. Voici un bon prompt pour commencer :

> Crée-moi une page web HTML/CSS moderne avec :
> - Un header avec un logo texte "Mon Portfolio" et une navigation
> - Une section hero avec un titre accrocheur, une description et un bouton CTA
> - Une section "Mes projets" avec 3 cartes de projets fictifs
> - Un footer avec des liens vers les réseaux sociaux
> - Design : fond sombre (#0f172a), accents cyan (#06b6d4), typographie moderne
> - Responsive (mobile, tablette, desktop)
> - Animations CSS subtiles au survol des cartes
> - Le tout dans un seul fichier index.html avec CSS intégré

Étape 3 : Observer Claude Code travailler

Après avoir envoyé votre prompt, Claude Code va :

1. Analyser votre demande et formuler un plan
2. Vous montrer ce qu'il va faire avant de le faire
3. Demander votre accord pour créer le fichier

Tapez y (ou appuyez sur Entrée) pour accepter. Claude Code va générer le fichier complet.

Étape 4 : Voir le résultat

Ouvrez le fichier dans votre navigateur :

# Sur macOS
open index.html

# Sur Linux
xdg-open index.html

# Sur Windows (WSL)
explorer.exe index.html

# Ou simplement : glissez le fichier dans votre navigateur

Vous devriez voir une page web complète avec le design que vous avez demandé.

Étape 5 : Itérer et affiner

C'est là que Claude Code brille vraiment. Au lieu de modifier le code à la main, demandez simplement les changements que vous voulez :

> Ajoute une animation d'apparition progressive (fade-in)
> sur chaque section quand on scrolle vers le bas

Claude Code va modifier le fichier existant pour ajouter cette fonctionnalité. Vous pouvez enchaîner autant de demandes que nécessaire :

> Change la couleur d'accent de cyan à violet (#8b5cf6)
> et ajoute un dégradé subtil sur le header

> Ajoute un formulaire de contact avec les champs
> nom, email et message. Style-le pour qu'il soit cohérent
> avec le reste du design.

> Rends le site accessible : ajoute les attributs aria,
> vérifie les contrastes de couleur et assure-toi que tout
> est navigable au clavier

Aller plus loin : un projet Next.js

Prêt pour quelque chose de plus ambitieux ? Demandez à Claude Code de créer un projet complet avec un framework.

Claude Code va :

• Initialiser le projet (npx create-next-app)
• Configurer TypeScript et Tailwind
• Créer les composants React nécessaires
• Structurer les fichiers correctement
• Tout connecter pour que le projet fonctionne du premier coup

Bonnes pratiques pour vos premiers projets

Commandes utiles à connaître

Pendant votre session Claude Code, vous pouvez utiliser ces commandes spéciales :

Prochaines étapes

Bravo, vous avez créé votre premier projet avec Claude Code ! Vous maîtrisez maintenant les bases : lancer Claude Code, formuler des demandes, itérer sur le résultat.

Pour aller plus loin, explorez les fonctionnalités avancées qui transformeront votre quotidien :

• Les MCP : Connectez Claude Code à Gmail, GitHub, Slack et des dizaines d'autres outils
• Les Skills : Créez des workflows réutilisables pour automatiser vos tâches
• Le Prompting avancé : Maîtrisez l'art de communiquer avec l'IA pour des résultats optimaux