Aller au contenu

Comment structurer un projet Web ?

Lorsque que le démarre un nouveau projet Web, il est important du structuré la façon dont est organisé les différents fichiers que forme un projet. Il y a plusieurs manière possible de si prendre, tout dépend de la taille du projet.

Voici ci-dessous convention du structure qui peut s'appliqué à la majorité des projets de site Web n'utilisant pas un Framework spécifique:

  • Structure Projet

  • Les fichiers médias

    /media : ce répertoire contient les répertoires dédié aux fichiers inclus dans les pages HTML, on y retrouve:

    • /css : on y retrouve les feuilles de style CSS, comme style.css.
    • /img ou /image: contient tout les fichiers d'images, ex: *.jpg, *.png, *.webp. L'on peut y retrouver des sous-répertoires pour regrouper les images des sous-pages HTML.
    • /js : ce répertoire contient tout les fichiers JavaScript, ex: main.js.
    • /fonts : contient les fichiers de polices de caractères spécifique ajouté avec @font-face.

  • Les pages HTML

    A la racine du dossier du projet l'on retrouve les fichiers *.html. C'est là que l'on retrouve le fichier d'entrée du site index.html.

  • Les sous-pages HTML

    Si une section du site contient des sous-pages, il est bien de les grouper dans un dossier dédier à cette section pour une meilleures lisibilité de la structure du site.

Règles et Convention de nommage

  1. Le nom des fichiers sont toujours en minuscule
  2. Le nom des fichiers ou des répertoires ne contiennent pas d'espace, de caractères accentués ou de symboles
  3. Le symbole - est utilisé pour séparer les mots d'un nom de fichier ou de répertoire

Vous pouvez vous aider de cette utils pour générer le nom de vos fichier: slug-generator