File organisation

File naming conventions

All website must have a index.html file at the root of the website. This is the file the browser will load by default when you visit the website.

All other file and folder should be named using the kebab-case convention. For example:

style.css
script-name.js
images/image-name.jpg
icons/icon-name.svg
project-name/index.html

File structure

For a simple static website, use the following file structure:

portfolio/
├── index.html
├── favicon.ico
├── css/
│   ├── main.css
│   ├── project.css
│   └── reset.css
├── js/
│   ├── main.js
│   └── project.js
├── assets/
│   └── media/
│   │   ├──hero-image.jpg
│   │   └──profile-photo.jpg
│   └── documents/
│       └── cv.pdf
├── projects/
│   ├── project-1/
│   │   ├── index.html
│   │   ├── css/
│   │   │   └── additional-style.css
│   │   ├── js/
│   │   │   └── additional-script.js
│   │   └── media/
│   │       ├── hero.jpg
│   │       ├── process-1.jpg
│   │       ├── final-design.jpg
│   │       └──showreel-1.mp4
│   ├──project-2/
│   …
│   
└── about/
    └── index.html

Absolute vs relative paths

Absolute paths are used to specify a path that is independent of the current location. They start with a forward slash / and are used to specify paths that are located on the same server as the current page or with https:// if the target file is on a different server.

Relative paths are used to specify a path that is relative to the current location. They start with the name of the folder or file (some-folder/ or some-other-file.html) and are used to specify paths that are located on the same server as the current page. You can navigate to up one level by using the ../ syntax (../some-folder/ or ../some-other-file.html).

<!-- Relative to the root of the website
A --> <a href="/index.html">Home</a>

<!-- Relative to the current folder
B --> <link rel="stylesheet" href="css/additional-style.css"><!--
C --> <img src="media/hero.jpg" alt="Hero image" />

<!-- Relative moving up the folder hierarchy
D --> <a href="/about/index.html">About</a>

<!-- Absolute link to another website
E --> <a href="https://example.com/">Somehwere else</a>

portfolio/
├── index.html ←─────────────────────── A ┐
├── favicon.ico                           │
├── css/                                  │
│   ├── main.css                          │
│   ├── project.css                       │
│   └── reset.css                         │
├── js/                                   │
│   ├── main.js                           │
│   └── project.js                        ↑
├── assets/                               │
│   └── media/                            │
│   │   ├──hero-image.jpg                 │
│   │   └──profile-photo.jpg              │
│   └── documents/                        │
│       └── cv.pdf                        │
├── projects/                             │
│   ├── project-1/                        │
│   │   ├── index.html ─────────→─────────┤
│   │   ├── css/                          │
│   │   │   └── additional-style.css ←─ B ┤
│   │   ├── js/                           │
│   │   │   └── additional-script.js      ↓
│   │   └── media/                        │
│   │       ├── hero.jpg ←───────────── C ┤
│   │       ├── process-1.jpg             │
│   │       ├── final-design.jpg          │
│   │       └──showreel-1.mp4             │
│   ├──project-2/                         ↓
│   …                                     │
│                                         │
└── about/                                │
    └── index.html ←─────────────────── D ┤
                                          │
https://example.com/ ←───────────────── E ┘