Se créer un bon environnement de travail est essentiel pour éviter des erreurs et améliorer son expérience du code.

Installer un éditeur de code

L’éditeur de code est simplement un interface qui vous permet d’écrire du code. Il en existe de nombreux, gratuits ou payants, avec des fonctionnalités différentes. Je vous recommande d’utiliser VS Codium, qui est gratuit et très complet.

En réalité, vous pouvez même modifier vos pages html avec un simple éditeur de texte comme Notepad ou TextEdit, mais vous perdrez beaucoup de fonctionnalités utiles.

La structure du projet

Lorsque vous démarrez un projet, utilisez un kit de démarrage qui comprend déjà la plupart des éléments nécessaires. Pour un projet HTML/CSS, je vous recommande d’utiliser le kit de démarrage que j’ai créé, qui répond à bon nombre des questions courantes que vous pourriez vous poser au moment de démarrer votre projet : Comment réinitialiser les valeurs CSS par défaut ? Comment intégrer une police ? Que dois-je inclure dans mon fichier HTML ? Comment importer des fichiers CSS dans mon fichier HTML ?

Ranger ses fichiers

Chaque projet web doit avoir son propre dossier, et tout ce qui concerne ce projet doit être stocké dans ce dossier, sans exception.

Nommer correctement !

Les noms de fichiers et de dossiers ne doivent contenir ni espaces ni caractères spéciaux. Il est crucial d’éviter les erreurs résultant d’une interprétation incohérente des espaces et des caractères spéciaux entre les serveurs. Idéalement, utilisez des lettres minuscules, des tirets et des traits de soulignement pour les espaces.

Cette technique est connue sous le nom de « slugification » et vous pouvez facilement trouver des générateurs en ligne pour en tester la précision.

Par exemple

Ne pas oublier le fichier index.html

Le fichier index.html est le point d’entrée de votre projet. C’est le fichier que le navigateur va chercher en premier lorsqu’il accède à votre projet.

Les autres pages

Pour les autres pages, nommez-les comme vous le souhaitez (en respectant la mise en forme !) mais n’oubliez pas l’extention .html.

index.html
entree-1.html
entree-2.html
a-propos.html

Bien ranger les assets

Tout ce qui n’est pas HTML doit être placé dans le dossier assets et trié en fonction de son utilisation. Par exemple, CSS séparément des images, des documents PDF, des fichiers de polices, etc. Le nom des sous-dossiers n’a pas d’importance. Par contre, nommez-les correctement (cf. slugification).

Have fun !

C’est le plus important.