For some of us, the thought of designing a website from scratch can seem like a really daunting task. The irony of it is that for most of us, websites form part of our daily life. The same way the internet connects us, there are special web languages that work together to make up the internet and the websites it contains. HTML, CSS and JavaScript work together to form the front-end design of a website by applying information that affects content, style and interactivity of a site.

There are many web languages available, however we’re just going to look at three of them. They are HTML, CSS and JavaScript and they are considered to be the backbone of the web. When it comes to web development there is front-end web development and back end-web development. These three languages are for front-end web development and are responsible for what you can see and do on a website. They are referred to as client side languages as they run in the browser (Google Chrome, Firefox etc.) of your computer. The browser translates these languages and the result of this translation is the visual web page.

It’s important to note HTML and CSS are not considered to be programming languages. HTML is a markup language and CSS is a styling language. JavaScript, however, is a programming language. Hence, they are all web languages, but they perform different jobs.

To make this easy to understand, I’m going to refer to these three web languages as different aspects of the human body. We’re going to look at the body itself as a sort of command centre; the accessories that are worn on the body as a way of representing personal style; and then the actions that the body is capable of as a way of animating ourselves. So for the purpose of this discussion, HTML will be referred to as the physical body, CSS will be the body’s accessories and JavaScript is the body’s ability to talk or move. All of these ‘bodily aspects’ need to work together to form a functional, visually appealing, interactive website.

• The Body
• HyperText Markup Language (HTML)
• Content and basic structure
• Describes and defines
• Made up of tags
• Tells the browser what to display

HyperText Markup Language (HTML) can be broken down into HyperText, which is what grants access to other texts through links, and Markup which outlines the basic structure and appearance of raw text. What this means is that HTML describes and defines the content and basic structure of the website. It does this through a means of special tags or codes which tell the browser what to do. HTML is the bare basics of a website.

An HTML only website can be compared to a functioning human body. Note, I didn’t say fully-functional. An HTML only website has all of its body parts, although it doesn’t offer much to look at because it doesn’t have any accessories or personal style. At this stage, it’s also a body which is not capable of moving or speaking. A website which consists of only HTML would probably look a little like this:

This is where CSS comes in.

• The Accessories
• Cascading Style Sheet (CSS)
• Gives style and structure to the content
• Link the CSS file to the HTML
• Tells the browser how to display

A Cascading Style Sheet is the website’s accessories. It’s responsible for outlining the colours, font and positioning of the content on a website. It adds some style and structure to the content. In order to make use of the CSS capabilities it needs to be linked within the HTML content so that style can be added to the website. CSS will tell the browser how to display the existing HTML.

CSS can be compared to adding personal style to the body. When you link CSS to HTML, it’s like dressing up the body. For example, you can choose a specific colour shirt and match it with a specific colour pair of trousers. On a website, you can choose the colour of the background or the font size of a heading and much more. It’s important to note that CSS cannot live without HTML as there would be nothing to style. Just like clothes or shoes would be pointless without someone to wear them.

So by now you should have an understanding of how structure and style are constructed on a website. A website that consists of HTML and CSS might looks like this:

However, you can’t help but notice that something is missing. The web page is lacking certain functions like a search box or options to comment. Right now the body, with all its accessories, looks more like a mannequin in a store window than a real human being. That’s where JavaScript comes in.

• The body’s ability to perform actions
• JavaScript is not Java
• Behaviour of the website
• Used for interactive functionality
• Allows for the user to interact with the browser

JavaScript controls the behaviour of the website. It’s important to note that JavaScript and Java are two different things. JavaScript was designed to manipulate web pages and it is used to create interactive functionality. Without JavaScript a website will still be functional, but in a limited way. JavaScript is what animates HTML and CSS, and it’s what brings your website to life.

JavaScript can be compared to the body’s ability to perform actions such as walking or talking. So when you add JavaScript to HTML and CSS, it transforms the body from being a beautifully dressed mannequin into a real-life walking talking human being. It animates the body, giving it lifelike qualities. JavaScript can also be compared to a fully functional body that has the ability to interact. As we all know, having an interactive website is critical, otherwise its just a boring page filled with information. Here we see a website which consists of HTML, CSS and JavaScript:

If you look at this example of twitter, JavaScript allows you to expand the tweet to see re-tweets, to set a tweet as a favourite and more. A popular JavaScript App is Google Maps.