Projet final HTML & configuration de ton environnement
Tu as vu les bases du HTML, les listes, liens, images, formulaires, tableaux
et le HTML sémantique.
Maintenant : à toi de créer une vraie page tout seul, avec l’aide
de Visual Studio Code, de l’extension Live Server et d’un
petit vérificateur automatique de ton code.
1. Installer Visual Studio Code
Visual Studio Code (VS Code) est un éditeur de code gratuit, léger et très utilisé
pour coder en HTML, CSS, JavaScript, Python, etc.
Ouvre ton navigateur (Chrome, Edge, Firefox...).
Va sur le site officiel : https://code.visualstudio.com/
Télécharge la version adaptée à ton système (Windows / macOS / Linux).
Installe VS Code en suivant les étapes (tu peux laisser les options par défaut).
Quand l’installation est finie, lance VS Code : tu vas t’en servir pour écrire
tout ton code (HTML, CSS, JavaScript, etc.).
VS Code est surtout…
2. Installer l’extension Live Server
Live Server te permet de voir ta page HTML se recharger automatiquement
à chaque fois que tu enregistres ton fichier. Super pratique pour apprendre.
Étapes pour installer Live Server
Ouvre VS Code.
Clique sur l’icône des Extensions (sur la gauche).
Dans la barre de recherche, tape : Live Server.
Choisis l’extension qui s’appelle “Live Server” (auteur : Ritwick Dey).
Clique sur Install.
Comment utiliser Live Server
Ouvre ton dossier de projet dans VS Code (menu File > Open Folder…).
Ouvre ton fichier index.html ou mon-projet.html.
Clique droit dans l’éditeur et choisis
“Open with Live Server”.
Ton navigateur s’ouvre automatiquement sur ta page.
À chaque Ctrl + S (enregistrer), la page se recharge.
Si tu ne vois pas “Open with Live Server” : vérifie que l’extension est bien installée
et que tu as ouvert un fichier .html.
3. Ton défi : créer une page complète tout seul
Maintenant, tu vas créer une page HTML de A à Z par toi-même.
Utilise tout ce que tu as appris dans les pages 1 à 4.
Objectif
Crée un fichier mon-projet.html dans un dossier de ton choix
(par exemple projet-html/) et construis une page sur le thème que tu veux :
Un site de présentation de toi / ton pseudo
Une page sur ton jeu préféré
Une page “club e-sport”, “crew RP”, “serveur Discord”, etc.
Checklist de ce que ta page doit contenir
Un document complet avec <!DOCTYPE html>, <html>, <head>, <body>.
Un <header> avec le titre du site + un menu de navigation simple.
Un <main> avec au moins :
1 titre principal <h1>
2 sous-titres <h2> ou <h3>
plusieurs <p> pour tes textes
au moins 1 liste (<ul> ou <ol>)
au moins 1 image avec <img> + attribut alt
Un petit formulaire (contact, inscription, etc.)
Optionnel : un petit tableau (ex : planning, stats, tarifs).
Un <footer> avec ton pseudo et l’année.
Quand tu as fini ta page, tu peux la tester avec Live Server,
puis la coller dans l’outil ci-dessous pour une première vérification automatique.
4. Colle ton code ici pour le faire vérifier
Quand tu as terminé mon-projet.html :
Ouvre ton fichier dans ton éditeur (VS Code).
Sélectionne tout le code (Ctrl + A), puis copie (Ctrl + C).
Colle-le dans la zone ci-dessous (Ctrl + V).
Clique sur “Vérifier mon code”.
⚠️ Ce vérificateur fait seulement des contrôles simples (présence des balises importantes, etc.).
Il ne remplace pas un vrai validateur HTML, mais il t’aide à repérer les erreurs classiques.
5. Petit quiz récap HTML
Quelques questions rapides pour vérifier que tu es prêt à passer à la suite (CSS) :
1) La balise utilisée pour un paragraphe de texte est :
2) La balise sémantique qui représente le pied de page du site est :
3) L’extension qui te permet de recharger la page automatiquement à chaque sauvegarde dans VS Code s’appelle :