Website Structure


Before we start with the web development, we need to know the correct approach for web development. We will now discuss the mandatory steps, before starting the web development, which is recommended by professionals. In this article we will explore the right way to structure your website from scratch. We recommend to use the tools used by professionals before starting the website development.

What structure should your website have?

A website consists of different types of files: html code file (.html file), styling code file (.css file), scripting file (like .js file), media files (like images) and many more. When the project gets bigger, it becomes important to organize these files in their separate folders. Also, it is recommended to name them in lower case and without any space (dash “-” or underscore “_” may be used).
Now let us have a look on the structure of our website:

  • html: This is the first file that is searched and executed by a browser
  • styles folder: In this folder we will keep all our CSS files.
  • scripts folder: This folder will contain all our JavaScript files.
  • images folder: This folder will contain all our images.

As of now, your folder structure should look something like this:

Website Structure

Here test-form is the folder which has all our development files and folders. Once you have made these folders and files, open index.html file in notepad++. In upcoming examples, we will be just coding in HTML.


  • Barry Allen

    A Full Stack Developer with 10+ years of experience in different domain including SAP, Blockchain, AI and Web Development.


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.