By Jerome Kalumbu

Project Setup

Setup a clean base to build your project

Start by setting up your project folder and organise your files following a clear structure to work efficiently.

Since your website will require HTML, stylesheets, and media content to function, you will make changes in various places to implement your designs.

Problem: Bad architecture leads to messy projects

Without a clear file architecture, updating files can become a pain and impact your efficiency. A bad site structure and naming convention can also affect SEO.

To prevent these issues, organise your project's files properly and use a clear naming convention to name your files.

The solution: Organise your files properly

This is how we generally structure any web project to improve our workflow:

  Index.html
  About.html
  contact.html      
  assets
  ├── css (style.css)
  ├── img (images and icons) 
  ├── fonts (includes your fonts if hosted locally)
  ├── js (specific scripts files)
  └── sass (individual CSS partials)

We will dive deep into the structure of our SASS folder and explain how you can use partials to generate your end CSS file.

Checklist

Make sure to check each points

Did we organise properly our assets files?
Do we have SASS correctly configured?
Did we organise our HTML files properly?
Can we self-host our fonts?
Do we have a clear naming convention for our files?
Do we have assets like JS, CSS and other paths are rights?

Takeaways

Create a /assets folder to host all your assets files
Put your images, CSS, fonts and js files inside their respective folders
Put your local fonts inside a /fonts sub-folder
Use SASS to write and organise well your CSS
Keep your HTML files at the root of your project
Use lowercases and hyphens to name your files
Make sure that file paths are correct and everything is setup properly

Resource

Links for further reading:

Don't Start With Visuals

By Jerome Kalumbu