Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 4

Mettre en place l'environnement de développement

Recommended resources

Bonjour et bienvenue dans cette quatrième leçon. Jusqu'à présent, nous avons posé les bases théoriques de votre projet : nous avons exploré les principes de design UI/UX, la hiérarchie visuelle et analysé l'esthétique minimaliste des marques de luxe.

Aujourd'hui, nous passons de la théorie à la pratique et nous mettons les mains dans le code, ou presque. L'objectif de cette leçon est de mettre en place votre environnement de développement local. C'est une étape fondamentale qui consiste à installer et configurer les outils nécessaires pour construire votre site web. Nous allons choisir un éditeur de code moderne, l'équiper de quelques extensions utiles et définir une structure de dossiers propre et organisée pour votre projet. En tant qu'étudiant en génie logiciel, vous savez déjà à quel point une bonne organisation et de bons outils sont cruciaux pour la réussite d'un projet.

1. L'outil principal : l'éditeur de code

Pour écrire du code HTML, CSS et JavaScript, un simple bloc-notes pourrait suffire, mais il serait très inefficace. Un éditeur de code moderne offre des fonctionnalités conçues pour faciliter la vie des développeurs, comme la coloration syntaxique, l'autocomplétion et l'intégration d'outils.

Nous allons utiliser Visual Studio Code (VS Code). C'est un éditeur de code gratuit, puissant et extrêmement populaire, développé par Microsoft. Il est disponible sur Windows, macOS et Linux.

Cette image montre l'interface principale de VS Code, que vous allez bientôt maîtriser. Elle se compose principalement d'un explorateur de fichiers sur la gauche et de la zone d'édition de texte sur la droite.

L'article suivant vous guidera pour l'installation.

Installer et configurer VSCode

Cet article vous explique comment télécharger et installer Visual Studio Code.

Lisez la section Installation de VSCode et suivez les étapes pour installer le logiciel sur votre ordinateur. L'auteur a un ton léger, mais les instructions sont claires et directes.

2. Améliorer VS Code avec des extensions

L'un des plus grands atouts de VS Code est son écosystème d'extensions, qui permettent d'ajouter de nouvelles fonctionnalités. Pour le développement web, certaines sont quasi indispensables.

La vidéo suivante, bien qu'elle présente plusieurs extensions, est particulièrement utile pour visualiser leur installation et leur intérêt.

Développer des applications et des sites web avec Visual Studio Code

Regardez ce passage pour découvrir une sélection d'extensions très utiles pour le développement web.

Concentrez-vous sur la section qui commence à l'installation des extensions. L'auteur présente plusieurs extensions, mais pour l'instant, nous allons nous concentrer sur les plus importantes pour démarrer : French Language Pack : Pour avoir l'interface en français. Live Server : Absolument essentiel. Il crée un petit serveur de développement local et rafraîchit automatiquement votre navigateur à chaque sauvegarde de fichier. C'est un gain de temps considérable. Prettier - Code formatter : Pour garder votre code propre et bien formaté automatiquement.

Je vous recommande vivement d'installer au minimum Live Server et Prettier. Suivez les instructions de la vidéo ou utilisez le tutoriel textuel ci-dessous pour les installer.

Installer et configurer VSCode

Ce guide textuel vous montre comment rechercher et installer les extensions que nous venons de mentionner.

Lisez la section "Installation des extensions utiles". Suivez la procédure pour installer Live Server et Prettier. Les autres extensions mentionnées sont aussi intéressantes, mais nous nous concentrons sur l'essentiel pour le moment.

3. La structure de votre projet

Une bonne organisation des fichiers est la clé d'un projet maintenable. Chaque type de fichier (HTML, CSS, images, etc.) doit avoir sa place. Cela évite le chaos et facilite la navigation dans le projet à mesure qu'il grandit.

Le document du MDN (Mozilla Developer Network), une référence en matière de documentation web, explique très bien ces concepts.

Gérer les fichiers - Apprendre | MDN

Ce document vous explique comment structurer un projet web de manière standard et les bonnes pratiques pour nommer vos fichiers.

Lisez attentivement les sections "Quelle structure pour un site web ?" et "Bonnes pratiques pour nommer les fichiers". Retenez surtout la structure type avec les dossiers images, styles (ou css), et scripts (ou js), ainsi que la règle d'or : noms de fichiers en minuscules, sans espaces, en utilisant des tirets - comme séparateurs.

La vidéo suivante de Kevin Powell, un excellent pédagogue du web, illustre parfaitement ces principes. Même si la vidéo est en anglais, les démonstrations visuelles sont très claires.

HTML & CSS for Beginners Part 7: File Structure

Cette vidéo montre de manière très concrète pourquoi et comment organiser ses fichiers.

Regardez les deux passages suivants : De la création des dossiers, où il crée les dossiers IMG (ou images), CSS et JS. De l'explication des règles de nommage, qui renforce l'importance d'utiliser des minuscules et d'éviter les espaces.

Pour notre projet, voici la structure que nous allons adopter :

Voici un exemple d'arborescence de projet simple et efficace. Nous allons recréer une structure similaire.

4. Mise en place de votre projet

Il est temps de créer concrètement cette structure.

  1. Créez le dossier principal : Sur votre ordinateur (par exemple dans votre dossier "Documents"), créez un nouveau dossier pour votre projet. Nommez-le site-parfum (en respectant les conventions : minuscules, pas d'espaces).
  2. Ouvrez-le dans VS Code : Lancez VS Code. Allez dans le menu Fichier > Ouvrir un dossier... et sélectionnez le dossier site-parfum que vous venez de créer.
  3. Créez l'arborescence : Dans l'explorateur de fichiers de VS Code (le panneau de gauche), vous pouvez maintenant créer les fichiers et dossiers :
    • Cliquez sur l'icône "Nouveau fichier" et nommez-le index.html.
    • Cliquez sur l'icône "Nouveau dossier" pour créer un dossier css.
    • Créez de la même manière un dossier images.
    • À la fin, votre explorateur de fichiers devrait ressembler à ceci : 
      site-parfum/
├── css/
├── images/
└── index.html
  4. Créez votre première page HTML : Ouvrez le fichier index.html que vous venez de créer. Il est vide pour l'instant. VS Code intègre un outil nommé Emmet qui permet de générer du code rapidement.
    • Dans le fichier index.html, tapez simplement un point d'exclamation ! et appuyez sur la touche Tab (ou Entrée).
    • Magie ! Une structure HTML5 de base apparaît. C'est un raccourci que vous utiliserez constamment.

Si vous avez installé l'extension Live Server, vous pouvez faire un clic droit sur votre fichier index.html dans l'explorateur et choisir "Open with Live Server". Une page blanche s'ouvrira dans votre navigateur. C'est le début de votre site !

Conclusion

Félicitations ! Vous avez franchi une étape technique majeure aujourd'hui. Votre ordinateur est maintenant un véritable atelier de développement web.

Voici ce que vous avez accompli :

  • Vous avez installé et découvert Visual Studio Code, votre principal outil de travail.
  • Vous l'avez enrichi avec des extensions essentielles comme Live Server pour visualiser votre travail en temps réel.
  • Vous avez appris et mis en place une structure de projet propre et standardisée, une compétence fondamentale en développement.
  • Vous avez créé votre tout premier fichier index.html et appris un raccourci puissant (!) pour générer son squelette.

Votre environnement est prêt et n'attend plus que le contenu. Dans la prochaine leçon, nous reviendrons au design pour définir une palette de couleurs et une typographie adaptées à l'identité de votre marque de parfum. Nous commencerons ensuite à traduire ces choix de design en code CSS.