“How do websites work?”
You use the Internet almost every day. And there’s a high chance that you visit websites. But have you ever wondered how you typing in “cat pictures” and hitting Enter results in your monitor being covered with images of cute cats? Well, we’ll go over that today!
“So, what exactly is a website?”
In the simplest way possible, a website is just a file.
“What? Just a file?”
Yes! Any website on the internet is a file.
It can be as simple as this:
Or as complex as this:
“Then, how do we make it?”
By writing code, of course. The process of making any website can be split into 2 parts:
- the front-end (what you see)
- the back-end (what you don’t see)
Let us first talk about front-end development.
The front-end of almost every website on the internet has 3 major components:
- HTML
- CSS
- JavaScript
“Woah! Sounds fancy…”
Nah, not really. It’s pretty straightforward, honestly.
HTML (HyperText Markup Language)
In simple words, HTML is what’s left when you remove all the fancy animations, styling, and colours from the website.
It is the bare minimum required to make a website. So you can think of it as the website’s skeleton or structure.
Here’s a website with only HTML:
“Ugh, that’s horrifying to look at. How do I change that?”
Why do you want it to change? You must learn to love things for what they are, and not what they could be.
“Okay, I’m leaving”
NO, wait, listen. The answer you’re looking for is —
CSS (Cascading Style Sheets)
You can think of HTML as drawing. Then, that would make CSS equivalent to colouring.
A website doesn’t need to have CSS, but when used correctly, it does makes the website more user-friendly. Like Uncle Ben said —
“With great style-sheets comes great aesthetics”
…or something.
The point is, always remember to use matching colours, in the right proportions! CSS can make or break the look of your website.
The same website that we saw earlier, with CSS, now looks like this:
“Wow! That looks so much better. Are we done? Isn’t that the entire website?”
For the website to actually do stuff, it needs just one more thing —
JavaScript
From our previous analogy, where HTML is like drawing, and CSS is colouring, then the only way to describe JavaScript is that it’s magic.
You made a poorly drawn picture of a cow (i.e. HTML) and then added colour (CSS). Now, guess what? You can make the cow give milk by adding JavaScript to it.
Every self-respecting website utilises JavaScript in some way, either for drop-drown menus or fancy background animations — you name it!
“But, won’t all of this require a lot of code?! Is there an easier way?”
Spoken like a true programmer! And, you know what, there is! Instead of writing our own code, we can use the code others have already written for us. How? By using —
Libraries
A library is a bunch of code someone wrote long ago to make everyone’s lives a bit easier.
In fact, even you can write your very own library and put it on the internet for others to use!
You can do anything you put your mind to, kiddo
“Okay, I think I get it. So, all this was just for front-end development. What about the back-end?”
Right on cue!
Like front-end development, back-end development also, has a few major components, all of which are necessary! Some of those components are:
- APIs
- Databases
- Servers
“…what”
I’ll explain.
Let’s say you open Spotify and start playing your Joji playlist because it’s just “one of those days”. You click on a song, and it starts to play. Magic?
NO! It’s —
APIs (Application Programming Interface)
An API is a software interface that takes your “request” to play Glimpse of Us and sends it to the Spotify servers.
The servers process the request, and then on your device, you hear the soothing voice of Joji. Awesome, isn’t it?
Hmm… Maybe it is a bit like magic! :D
“But to whom are we sending this request? And, how do they have this song ready all the time?”
The answer to your question is not “who” but “what”.
Nobody is sitting “on the other side”, manually responding to your frantic song-changing. It’s actually a lifeless entity called —
Servers
Servers are a bunch of computers (and sometimes software) that respond to your 2 AM Netflix requests to watch FRIENDS.
They collect all these “requests” and process them. They are even connected to magic boxes called (*SPOILER ALERT*) databases that store all user and company data!
With the help of these magic boxes, the servers can respond to your requests at any time, all the time.
The big towering object in the above animation is a server.
“I see! But what are these magic boxes you talked about?”
Databases
A database is a collection of, well, data that can be accessed at any time.
The data can be simple things such as names, phone numbers, email ids but also, complex stuff like your favourite Taylor Swift songs!
Databases have a special language called SQL (Structured Query Language), that is used to get information via special commands called queries.
“Woah… I don’t know what to say.”
That’s alright. But hey! At least now, you know how most websites on the internet work. And if you want to know more, Google is your friend!
