How does a website even work?

How does a website even work?

Have you ever stopped to think about how websites work?

When you type in a URL and hit "enter," it might seem like magic, but there's actually a lot that goes on behind the scenes to bring you the content you see on your screen.


First, let's talk about HTML (HyperText Markup Language).

HTML is a programming language that is used to structure the content of a website. It defines the different elements on a page, such as headings, paragraphs, and links. HTML uses tags to mark up the content on a website. For example, a heading might be marked up like this: <h1>This is a heading</h1>. When you visit a website, the HTML code for the website is sent to your web browser, which then uses it to render the website on your screen.

Next, there's CSS (Cascading Style Sheets).

CSS is a programming language that is used to style the content on a website. It defines how the different elements on a page should look, such as the colours, fonts, and layout. CSS uses a set of rules, called styles, to apply styles to the content on a website. For example, you might have a rule that says all headings should be red and have a certain font size. When you visit a website, the CSS code for the website is also sent to your web browser, which uses it to apply the appropriate styles to the website.

Finally, there's JavaScript.

JavaScript is a programming language that is used to make websites interactive. It allows you to add functionality to a website, such as showing or hiding content, or validating a form. JavaScript uses a set of instructions, called scripts, to add interactivity to a website. For example, you might have a script that changes the colour of a button when you hover over it. When you visit a website, the JavaScript code for the website is also sent to your web browser, which uses it to add interactivity to the website.


So, how do all of these technologies come together to bring you a website?

When you type in the address of a website (like "google.com") into your web browser and hit "enter," your web browser sends a request to the server where the website is stored. The server then sends the HTML, CSS, and JavaScript code for the website back to your web browser. The web browser then uses this code to render the website on your screen.

But how does the server know which website you want to visit?

When you type in a URL, your web browser sends a request to the domain name system (DNS) server, which translates the domain name (like "google.com") into an IP address (like "172.217.3.110"). The IP address is a set of numbers that represents the location of the server where the website is stored. Once the IP address is known, the web browser can send a request to the server to retrieve the website.


And that's it! Websites might seem like magic, but they're actually just a combination of technologies working together to bring you the content you see on your screen. From HTML, which structures the content, to CSS, which styles it, to JavaScript, which adds interactivity, there's a lot that goes into making a website work.

Did you find this article valuable?

Support Shumaila's blog by becoming a sponsor. Any amount is appreciated!