1.2 How Does a Website Work?

Watch the video course


What you'll learn:

  • Structure of how a website's user-interface works
  • Inspect element to see behind-the-scenes of websites
  • What does source code look like?


When we visit websites such as Google, Instagram, and countless others we see an aesthetic user interface.

social media

But how do they work?

How websites work

Take Google for example, this is the HTML code that makes up the page. The browser, in conjunction with other code, creates the appealing design we see.

looking at google's html with inspect element

Since web design is all about what the users see, a local copy of the code is downloaded by every user viewing the site. As a result, we can change the code around! Fortunately, this won't affect the millions of other users or else the internet as we know it would be terrible!

Inspect Element

Right click and choose inspect element

changing google inspect elmement

We can also see the JavaScript code on this page.

viewing google's JavaScript

This is what makes the page interactive. By typing in the search box, I'll get a list of suggestions. This is powered by JavaScript.

google search bar

However, if that JavaScript code is what the developers write and read, they would be superhuman! In reality, the messy code above is prepared and optimized for web browsers — not for people. The code developers use is far more legible and useable.

changing google inspect elmement


We will be using codesandbox.io, an online code editor.

The code that developers use is called source code and looks more like this.

legible code developers use

It's the literal source code, with formating for readability, that the browser sees and interprets. We are going to write this kind of code to instruct the browser for our purposes.