JavaScript, HTML and CSS
Relationship Explained by Building A City

If you have ever visited a walkable city, then you can understand the way that HTML, CSS and JavaScript work together.

For example, an “Intro to JavaScript” tutorial will usually focus on fundamentals like loops and 'if' statements, rather than using JavaScript alongside HTML.

After you get through these preliminary exercises, you reach the point where you need to set up your first full website. Even if this is a single-page, personal site that you never intend to release, you still face a series of new challenges like:

After thinking about this for awhile, I realized that these pieces work together in the same way that cities can still function, even when businesses are constantly moving in or going out of businesses, or real estate developers are remaking certain neighborhoods.

So, I am going to show how you can set up your first development environment with these three pieces. In order to understand this tutorial, you just need to know the basic parts of HTML, CSS and JavaScript. Even if you have not written any code in your life, you still will be able to understand how to link the three languages.

The Differences Between HTML, CSS and JavaScript

Let’s imagine that you are in charge of planning the layout of a new neighborhood in the city. This neighborhood will have some residential buildings, some eateries, a bank branch and a mall.

This means that there will be at least 10 pixels of space between this element and adjacent page elements — the margin “pushes away” its neighbors. If we put multiple of these elements together, we see how margins create space between them, giving them room to breathe:

This corresponds to the three different types of files that you can use in your first website.

An HTML file contains the structure of the page itself. It is kind of like the structure of the building.

A JavaScript file determines the dynamic and interactive elements on the page. It determines what happens when users click, hover or type within certain elements. This is kind of like the functionality of the building.

Let’s take the example of one of the houses. A house has 2 bedrooms, 2 bathrooms and 2 stories. That is the HTML of the building.

It is made of brick and has a solid wood door. That corresponds to the CSS of the building.

What can you do within the house? You can eat… sleep… make meals… anything that you do at home, really! That is the JavaScript of the building.

Use the slider on this interactive image to see how the parts work together.

Mouse Interection

An Example of A Basic File Directory

Mouse Interection