Pratique débutant · Un fichier, un projet complet
Créer votre première page personnelle
Décrivez votre besoin, puis enregistrez, ouvrez, modifiez et vérifiez une page vous-même. Commencez maintenant et revenez aux bases lorsqu’un concept demande une explication.
Téléchargement bloqué ? Voir le code complet
Copiez tout le texte ci-dessous, enregistrez-le dans index.html en UTF-8, puis ouvrez-le dans votre navigateur.
Avant de commencer
- Un ordinateur permettant d’enregistrer des fichiers, un navigateur et un éditeur de texte brut.
- Facultatif : votre outil habituel de conversation ou de programmation IA. Il peut nécessiter Internet, un compte ou un paiement ; consultez ses conditions actuelles. Aucun achat n’est requis pour ce tutoriel.
- L’exemple ne nécessite ni compte, serveur, clé API ni dépendance. Une fois téléchargé, il fonctionne hors ligne.
- Le projet utilise HTML et CSS standard. La durée dépend de votre expérience et de vos outils ; avancez à votre rythme.
De l’idée à une page fonctionnelle
1. Préparer un dossier de projet
Créez un dossier first-website. Dans un éditeur de texte brut, créez index.html. Affichez les extensions dans votre système et vérifiez qu’il ne s’agit pas de index.html.txt.
Résultat attendu :Le dossier contient un fichier se terminant par .html. Vous n’avez pas besoin de Node.js ni de dépendances à ce stade.
2. Transmettre vos besoins à l’IA ou lancer l’exemple
Collez le prompt ci-dessous dans votre outil d’IA habituel et ajoutez votre présentation et votre projet. Copiez tout le HTML sans les accents graves qui délimitent le bloc de code. Sans accès à l’IA, téléchargez l’exemple complet ci-dessus.
Résultat attendu :Vous obtenez un fichier complet, de <!doctype html> à </html>, et non des fragments isolés.
3. Enregistrer et ouvrir la page
Enregistrez le code complet dans index.html en UTF-8. Double-cliquez sur le fichier ou glissez-le dans le navigateur. Si l’exemple téléchargé porte l’extension .txt, renommez-le d’abord en index.html.
Résultat attendu :Le navigateur affiche la présentation, le projet et les notes avec leur mise en forme. Une adresse commençant par file: est normale en local.
4. Faire votre propre modification
Dans l’éditeur, remplacez Lin par votre pseudonyme et la description par votre texte. Enregistrez et actualisez le navigateur. Remplacez ensuite #5b21b6 par #1e40af dans le CSS pour observer la couleur d’accent.
Résultat attendu :Votre pseudonyme, votre présentation et les couleurs changent. Modifiez un type de contenu à la fois pour repérer plus facilement les problèmes.
5. Vérifier les liens et l’affichage mobile
Cliquez sur My work, About et le bouton principal pour vérifier leurs destinations. Réduisez la largeur du navigateur, puis utilisez Tab et Entrée pour les liens.
Résultat attendu :Chaque bouton mène à une destination réelle, le texte n’est pas coupé, le focus est visible et rien ne déborde horizontalement.
6. Valider le projet et continuer
Vérifiez votre fichier avec la liste ci-dessous. Une fois validé, utilisez « Marquer comme terminé » pour enregistrer votre progression, puis passez à la leçon suivante.
Résultat attendu :Votre projet s’ouvre, se modifie et vous pouvez l’expliquer. Le marquer terminé enregistre votre progression, sans constituer une validation automatique du travail.
Prompt de spécification
Copiez le prompt et remplacez le texte entre crochets. Les réponses de l’IA varient ; utilisez les critères ci-dessous pour juger le résultat.
Aide-moi à créer une page personnelle. Fournis uniquement un fichier index.html complet.
Objectif : me présenter, montrer un projet et noter ce que j’ai appris.
Exigences :
1. Utiliser seulement HTML et du CSS intégré, sans framework, JavaScript, police ou image externe.
2. Inclure un nom, une courte présentation, un projet et des notes d’apprentissage.
3. La navigation et le bouton principal doivent pointer vers des sections existantes avec des ancres.
4. Assurer la lisibilité sur téléphone, un contraste suffisant et un focus clavier visible.
5. Utiliser des informations fictives, sans connexion, paiement, statistiques ni envoi de formulaire.
6. Ajouter l’encodage UTF-8 et une balise viewport.
Ma présentation : [saisir une présentation non sensible]
Mon projet : [décrire le contenu à présenter]Ma liste de validation du projet
Vérifiez chaque point vous-même. Ces cases servent uniquement à cette auto-vérification ; utilisez « Marquer comme terminé » pour enregistrer la fin de la leçon.
En cas de problème
Le fichier affiche le code source
Vérifiez que le fichier s’appelle index.html, et non index.html.txt, puis ouvrez-le dans un navigateur plutôt que dans l’éditeur.
Texte illisible ou modifications invisibles
Enregistrez en UTF-8 et conservez la balise meta charset. Vérifiez que vous modifiez le fichier que vous ouvrez, puis enregistrez et actualisez.
L’IA demande des dépendances ou des clés
Ces étapes sont inutiles ici. Ajoutez : réécris le projet dans un seul fichier HTML avec du CSS intégré, sans framework, script ni service externe.
La mise en forme ou les liens ne fonctionnent pas
Vérifiez que tout le contenu style et les balises fermantes ont été copiés. Les liens #work et #about doivent correspondre exactement aux id des sections. Comparez votre fichier à l’exemple téléchargé, section par section.
L’IA ajoute toujours plus de fonctionnalités
Gardez trois sections : présentation, un projet et notes d’apprentissage. Placez les fonctions supplémentaires dans une liste pour plus tard et validez d’abord la version actuelle.
Passer à l’étape suivante
Ajoutez un deuxième projet en conservant une mise en page adaptée aux petits écrans. Définissez d’abord les critères, demandez la modification à l’IA, puis vérifiez vous-même.
La publication est facultative. Votre fichier local n’est pas automatiquement accessible aux autres. Avant de choisir un hébergeur, vérifiez les comptes requis, les coûts et la visibilité, puis retirez les données sensibles. Au besoin, consultez Déploiement et exploitation。
Pour essayer d’autres projets, consultez Pratique full-stack、Outils de génération de pages ou Flux de travail Fabric。
Sources et retours
Sources vérifiées le 2026-09-22. Exemple de référence v1, sans framework tiers.
Signaler un problème dans ce tutoriel, en précisant l’étape qui vous bloque et ce que vous avez observé.