What websites are made of

This post is also available in Finnish.

Coding your own website is one of the easiest ways to start to learn to code. You only need any text editor and a web browser. But what are websites actually made of? Most of them include three building materials: HTML, CSS and JavaScript. No worries if these words don’t ring any bells yet. By the end of this post you’ll definitely have an idea!

House of code

A house is a good metaphor for understanding the coding languages of the web. HTML is a language a programmer uses to tell the browser what parts the website includes. It is also used to show the rough order of these parts. CSS on the other hand tells what the parts should look like and where they should be put. Finally JavaScript (JS) is like the electricity and water system of the house. Nothing happens without them. Most interactive components like buttons on a website include some JS.

House of code building materials: HTML, CSS and JavaScript.
Image 1: House of code building materials

Next we’ll start to build the house.

Building blocks

The skeleton of the website is made up of parts written with HTML coding language. These parts are called tags and they look like this:

<h1>Hi, this is a heading tag!</h1>

In our house of code the tags written in HTML represent, for example, the walls, lamp posts and furniture. If we would only build our house of code with HTML, it would look like someone dropped all the building materials in a neat line on the plot:

House of code with just HTML. All the parts are in a line and look like rectangles.
Image 2: House of code with just the HTML code

Now it’s time to put the parts in order and try out how they could look.

Adding some color

CSS was created for changing the style of the parts of the website. With CSS, you could say things like “I want the text to be pink” or “I want the background to be light blue.” We can also change things like the size of the text. For example, the style of the heading tag (h1) in the paragraph above can be changed like this:

h1 {
color: pink;
background-color: lightblue;
font-size: 48px;
}

We can also use CSS to say what size and where the parts of the website should be. After CSS our house of code could look somewhat like this:

House of code with HTML and CSS. The parts are arranged into a shape of a room, with a table in the middle, surrounded by chairs. There is also a lamp hanging over the table and two lamp posts outside the walls.
Image 3: House of code where CSS styles have been added to the HTML code

By adding CSS styles to the parts in HTML we are already pretty far in our house of code project! We could even have some light switches on the walls, but without JavaScript, nothing would happen when we press those.

Just missing the finishing touches

The house of code is almost ready for living. However, modern people want to have a bit more functionality, and so do website users. That’s why we have JavaScript! With JavaScript we could add things like automatic lights and lamps that light up with a switch. It could look something like this:

The house of code with HTML, CSS and JavaScript. The lights in the house of code are on.
Image 4: House of code where the HTML and CSS have been augmented with JavaScript lights.

All the automatics in the house have been created with JavaScript. For example automatic lights could work with this kind of code:

if (motionDetected) {
turnLightsOn();
}

There’s a lot of other stuff on the background as well, but nothing too hard. To summarize, in HTML we write the required parts in their order, in CSS we give them styles and places, and with JavaScript we add functionality.

I hope this post has helped you to get a better understanding of what kind of building materials websites are made of. Anyone can learn any of these languages, even the most versatile JavaScript. Pug Fix game is an easy and fun way to get started, and why not go a bit further as well! You can try Pug Fix for free.

Latest posts by Matti Haapamäki (see all)

Leave a Reply

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