Firstly, what are websites even?
You probably know that websites are the things you find when you search for something using Google. And you probably know that the app you use to browse websites, like Chrome or Safari, is called a web browser.
When you go to a website from Google, usually you’ll land up on the “home page” of the website, and it’ll contain a bunch of pictures and text. It may have only one “page” because everything is on the Home page, or it may have thousands of pages that you get to by clicking on buttons and “links”.
The skeleton of a webpage: HTML
You probably know that websites are made of “code”, but do you know that there are many “coding languages” that it might use? In reality though, the websites that we see in our browsers are made of 3 core languages: HTML, CSS and JavaScript.
HTML is like the scaffolding language; it turns the text into something “structured”. For example:
<p>This is a paragraph.</p> <header> <h1>This is a large heading, inside a “header”</h1> </header>
So we use HTML to set up the various parts of each page. And we save each webpage as a single file ending in “.html”. In fact, you could make a whole website with just HTML! But it would look pretty ugly, and it wouldn’t be particularly interactive and fun.
Making websites beautiful: CSS
CSS is the language that we use to change the appearance of parts of webpages. For instance, it can make text red, or it can make a box have a grey background.
We also use CSS for layout. When we want a part of our webpage to have 2 columns, there are a few ways we can do that using CSS. It also lets us set the space between things, like the gap between paragraphs of text.
There are a few more fun things CSS can also do, like animations. Animations determine how things move and change size and shape. For instance, when someone presses a button, we might use CSS to make it slowly change its colour.
Making websites interactive: JavaScript
The third and final core language of websites is JavaScript (sometimes written as JS). It’s the real “programming language” of the internet, because it lets us do almost anything we can imagine in a webpage.
Often, we use JavaScript in “if this happens, do that” situations. For example:
- When we click on a picture, it might pop up large on our screen
- When we swipe left and right, the next slide might move onto the page
And we need JavaScript to power more complex things that we add to our webpages, such as interactive maps, videos from YouTube or TikTok, and search boxes.
The content of websites
Since some websites have thousands of pages, and each page has loads of text and pictures, you might wonder how the people making websites keep this all organised. The answer is usually that we use software called “content management systems”, or CMSs. These allow us to log in, add new content by filling in a form, and clicking “publish” when it’s done.
But these days, most people want websites to load super quickly, and be very interactive. And CMSs aren’t always very good at that. So while the content might be stored in a CMS, the website developer might have built the site using other software.
The last piece of the puzzle: Frameworks
Many websites these days are built using software called “front end frameworks”. They let developers write code in all sorts of programming languages for the website, and use all sorts of techniques, even though they’re mostly trying to do the same thing: to make great websites.
While they might sound complicated (and they really are), they all essentially end up doing the simple thing; they help us build fast and pretty websites that are composed of just HTML, CSS, and JavaScript.
Websites don’t have to be scary
It’s true that websites can be pretty complicated, but you don’t need to let that scare you. Really good developers will be able to explain how certain websites work just like this article if you’re curious, but most of the time you don’t even need to know that.
If you really want to understand websites, you mostly need to know what they do for us - like allowing us to browse products - and what we want them to be - fast, secure, and beautiful.
