Structure

dossier de travail

Lorsque vous démarrez un projet, il est important de mettre en place une structure de fichier cohérente, logique et compréhensible. Il n’existe pas une unique manière de procéder, mais un projet basique pourrait ressembler à ce qui suit :

  • 📁 dossier de travail

    • 📄 index.html

    • 📁 assets/

      • 📁 css/

        • 📄 master.css
      • 📁 js/

        • 📄 master.js
      • 📁 fonts/

      • 📁 img/

html

Vous pouvez commencer la réflexion sur la structure de votre HTML avant de commencer à rédiger celui-ci, déjà en utilisant différentes méthodes comme le tri par carte, mais aussi en rédigeant du pseudo-code.

Par exemple, lors du précédent cours, nous avions vu l’exemple d’un document HTML présentant un menu avec divers liens, une zone de présentation, une zone projets contenant des projets (image et titre)

``
(nav)
(h2) (a)
(section)
(h1) (p)
(section)

(h2) (div)

(section)
  1. (h3) (img)

``

Il est même possible d’aller plus loin en indiquant dans le pseudo-code un prévisionnel de la stratégie CSS :

``
(nav.navigation)
(h2.navigation__titre) (a.navigation__lien)
(section.a-propos)
(h1.a-propos__titre) (p)
(section.projets)

(h2.projets__titre) (div.projets__liste)

(section.projet)
(a.projet__lien)
(h3.projet__titre) (img.projet__image)

``