How Website Works?

Previous Blog                                                                                                                               Next Blog

Now that we've spoken about how the internet works, in this Blog, you will learn about 

How exactly do websites work?

What exactly do HTML, CSS, and JavaScript do exactly?

 Now, in order to access a webpage, we all know that you need a browser, right? And that can be Chrome, Safari, Firefox, whatever is your favorite one. These are all pieces of software that allow you to look up the IP address of your website and be able to receive data that it can render into this beautiful website that we see. Now, the data that you receive from the server usually consists of three types of files

1. HTML
2. CSS
3. JavaScript

And it's very likely that you would have come across these types of files or these words before because they're so common and there are so integral to how websites work. But, 

• What exactly do they do and why are there so many different types of files?
• Why can't we just have one file that's, you know, a website? 

Well, these all different files have very different jobs.

HTML

The HTML code file is responsible for the structure of your website.

So if a website was a house, then the HTML would be the builder who would come in to build the walls.  Basically, they establish the structure of your house. And when you write HTML code, you also build up the structure of your website.

So you could use HTML to add an image or button or text box, whatever it is that you need in your website. 

Now, the second type of file is CSS files, and 

CSS

These files are responsible for styling your website.

If you were building a house, then this would be the painters and decorators. They would be going around painting the walls or adding stylistic flourishes to your place, and generally making the place look the way that you want it to. And that's exactly what CSS code does as well. When you incorporate CSS, it allows you to specify how you want your website to look. 

For Instance:

So you could say that, yes, I have a button that I got from my HTML, but that button I want to be red and I want the text to be white and I want the font of the text to be an Arial. That is all done using CSS code.

Now the final component is the JavaScript code.

JavaScript

And this is the code that allows your website to actually do things or have behavior. 

And if you were building a house, you would have the electrician come in, who would be able to connect the wires so that your light bulbs actually switch on, or somebody who comes in and does the plumbing so that your toilet can actually flush. And the JavaScript code does exactly that. It allows your website to actually do things and have behavior.

So if we take the Google website as an example again, once we receive these files from the Google server when our browser loads up the HTML files, we'll get to see the structure of the website, namely, there's one image which has their logo, there are two buttons, and there's a text box where we can enter our search. 

Now, when we receive the CSS files, then that will modify the appearance of all of those components. We don't have any more buttons or any more images, but they now look the way that Google wanted it to. 

And finally, when we incorporate the JavaScript files, then our website actually starts having behavior. It has functionality and it's actually able to do something rather than just display some images and texts to us. 

Chrome developer tools

Now, with the knowledge that we've already acquired, we can already start messing around with websites on the internet. So open up Chrome and head over to any website. Once you're over here, I want you to right-click on the title here and click on inspect. Now, this brings up the Chrome developer tools, and we're going to be exploring this in a lot more detail, but for now, we're going to use it to do something really simple. You can see that when I right-click on that heading and click inspect, it automatically opens up the entire code file that was used to render this website. So these are all of the elements that make up this website. And when you click on inspect, it will highlight to you the part of the code that corresponds to the thing that you right-clicked, right? 

In this case, it's this title. And inside this title, but it also got a bit of text.

So right inside Chrome developer tools, if you double click on the bit of text that corresponds to the title, you can actually edit it.

So let's go ahead and change the front page of any website you like. You can change the data by double-clicking on any section you want. And this is a great joke to play on friends who are maybe not quite as technologically advanced as you.

Now, unfortunately, when I hit refresh on this website, all of my good work is gone. And the reason is that when I'm editing it here inside my browser, I'm actually changing the local copy of this file that I got back from the server. But when I click refresh, then that makes a new request to the servers to load up a fresh copy of the website. So of course, then it updates to the original content. 

But in the coming blog, we're going to be working with HTML, CSS, and JavaScript so that you can create and host live on the internet, your very own websites, and through learning how to code and how to build websites. you are going to be able to make websites that say anything that you want it to, look the way that you want it to, and have the functionality that you need.

You read the whole blog wow, stay curious and I'll see you in the next Blog.

Previous Blog                        Next Blog