Visual Studio Code (VSCode pour les intimes) c'est comme un bloc-notes super-vitaminé pour les développeurs. C'est un peu comme si Word et un assistant personnel avaient eu un bébé. Il est gratuit, open-source, et disponible sur tous les systèmes d'exploitation. Bref, c'est votre nouveau meilleur ami !
Installation de VSCode
- rendez-vous sur le site officiel de Visual Studio Code.
- Cliquez sur le gros bouton de téléchargement. VSCode détectera automatiquement votre système d'exploitation.
- Une fois le téléchargement terminé, lancez l'installateur. C'est comme installer un jeu vidéo, mais en plus cool (et en plus utile pour votre carrière) !
- Suivez les instructions à l'écran. Si on vous demande si vous voulez ajouter "Ouvrir avec Code" au menu contextuel, dites oui ! C'est comme avoir un bouton magique "Développer" partout sur votre ordinateur. Félicitations ! Vous venez de faire votre premier pas dans le monde du développement. Sentez-vous libre de faire une petite danse de la victoire ! 💃🕺
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
Installation des extensions utiles
Les extensions dans VSCode, c'est comme les toppings sur une pizza : ça rend tout meilleur !
Live Server
Live Server, c'est votre meilleur allié contre la touche F5 ! Plus besoin de rafraîchir manuellement votre page web à chaque modification.
- Dans VSCode, cliquez sur l'icône des extensions dans la barre latérale (ça ressemble à quatre petits carrés).
- Dans la barre de recherche, tapez "Live Server".
- Trouvez l'extension créée par Ritwick Dey et cliquez sur "Install". Tadaaa ! Vous venez d'installer votre première extension. Vous êtes officiellement un pro de VSCode maintenant ! (Bon, pas tout à fait, mais on y croit !)
Autres extensions recommandées
Voici quelques autres extensions qui vont vous faciliter la vie :
- HTML CSS Support : Pour que VSCode comprenne mieux votre CSS dans les fichiers HTML.
- Auto Rename Tag : Parce que renommer manuellement les balises HTML, c'est tellement 2010 !
- Prettier : Pour que votre code soit toujours bien habillé et présentable.
- Path Intellisense : Parce que se souvenir du chemin exact de chaque fichier, c'est pour les robots ! Pour les installer, suivez la même procédure que pour Live Server. Facile comme bonjour !
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
Structure des dossiers et fichiers
Organiser vos fichiers, c'est comme ranger votre chambre : c'est mieux quand c'est bien fait ! Voici un exemple de structure de base pour un projet web :
Cette structure, c'est un peu comme avoir des tiroirs bien étiquetés. Ça vous évitera de mettre vos chaussettes dans le tiroir à couverts !
Créer votre première page HTML
Allez, on se lance dans le grand bain ! (Pas de panique, il y a des bouées)
- Ouvrez VSCode. Admirez son interface élégante. Oooh, aah !
- Allez dans Fichier > Ouvrir un dossier et sélectionnez le dossier de votre projet.
- Faites un clic droit dans l'explorateur de fichiers (à gauche) et choisissez "Nouveau fichier".
- Nommez-le "index.html". C'est important, c'est comme le prénom de votre site !
- Dans ce nouveau fichier, tapez "!" et appuyez sur Tab. BOUM ! Comme par magie, une structure HTML de base apparaît. Vous vous sentez déjà comme un hacker, pas vrai ? Voici à quoi devrait ressembler votre chef-d'œuvre :
Ne vous inquiétez pas si ça ressemble à du charabia pour l'instant. Rome ne s'est pas construite en un jour, et votre maîtrise de l'HTML non plus !
Utiliser Live Server
Maintenant, on va voir votre création en direct !
- Faites un clic droit sur votre fichier index.html dans l'explorateur de fichiers.
- Cliquez sur "Open with Live Server".
- Tadaaa ! Votre page s'ouvre dans votre navigateur. Okay, elle est vide pour l'instant, mais c'est un début ! À partir de maintenant, chaque fois que vous sauvegarderez des modifications dans votre fichier HTML, la page se rafraîchira automatiquement dans le navigateur. C'est comme avoir un mini-assistant qui crie "Regardez ! Ça a changé !" à chaque modification.
Rejoindre la communauté de développeurs
Rejoins notre communauté de développeurs pour progresser et t'améliorer
Passer au chapitre suivant :