The final product

It’s going to be a fictional site about Boberick the llama (I get the strangest ideas sometimes…)

1. Plan your layout

The first step of any website is always to know what you want on it and (vaguely) how you want it to look. So, the first step is to do a rough sketch - either on paper or on the computer, depending on which you find easier.

Remember, it doesn’t have to look good. Here’s mine:

As you can see, it’s very rough. The lines aren’t straight and nothing is even but I can still see how the site is going to look and what sections I need to have.

In this layout, I have a header (navigation bar), three sections and a footer.

2. Get the ‘boilerplate code’ set up

Now, it’s time to get the basic code that you have at the start of any website (this is commonly called the boilerplate).

Note that we are giving the <section>s ids, so we can refer to them later.

If you reload the page, you will see there is nothing there - this is because we are just creating the sections of the page, not the actual stuff in them.

4. Filling in the HTML content

Once you have the sections of the page, it’s time to fill them up! If you know what content you are going to be using, put that in. If not, put in some dummy text and replace it with the actual content later.

5. Adding some basic layout CSS

Once we’re done with our HTML, it’s time to move on to CSS! The first and most important part to focus on first is to get it looking like our layout - then we can focus on the details.

This means that we need to focus on properties like width, height, margin, padding, position, and display. Also, we need to make sure the images are the right size so that they don’t obliterate the page.

Here, we are only adding styles to make our overall layout look similar - not the individual content. We make sure that the sections are set to 100% viewport height, make the header have a fixed position, position the items in the header, and more. We also use flexboxes to center the content in our sections.

This is the result:

6. Add more specific styles

Once the basic framework of the site is done, we can add more specific styles.

As you can see, we’ve added some general background styles to the section elements, as well as adding a background-image to each section individually.

The reason for the linear-gradient(rgba(255,255,255,0.75),rgba(255,255,255,0.75)), before the url('image.jpg') is because otherwise the text is hard to read - so we add a semi-transparent white overlay ontop. I wrote a bit more about that here.

8. Celebrate! 🎉

Woo! You’re finally done your website! Now, go show it off to your friends, family and the entire internet 😉

Further reading

If you want to know more about a specific section of what I was showing today, check out:

Conclusion

So, I hope you enjoyed this article and hopefully you learned something along the way!

I did something a little different from usual today, so tell me your thoughts. Remember, this article is less about me showing you the actual technical parts of creating a website, but more about guiding you through the thought-process of creating a website.