If you’re looking to learn frontend development or become a frontend developer, then you need to know — to a reasonable extent — HTML, CSS, and JavaScript.

HTML, CSS, and JavaScript are the three pillars of frontend development; they enable you to build a holistic website. In this article, I will explain what each does, and why you need them, using the human body as an analogy. I will also link to an excellent resource that can help you get started on your journey.

HTML

HTML that stands for HyperText Markup Language, is the standard markup language used to display content on the web. This content could be text, images, audio, or even video. In order words, HTML defines the basic structure, format, and content of a page. 

For example, in the human body, a website with only HTML can be thought of as a person with just a skeletal frame. The skeleton determines the basic structure of the human body.

So when you place content in between HTML tags, it tells the browser what the content is and how to structure it — as a heading, a paragraph, a list, a link, or an image.

A website with only HTML. Source

CSS

CSS stands for Cascading Style Sheets. It is a rule-based language used to specify how HTML elements should be presented, styled, or laid out. 

For example, the HTML-only web page shown above is quite boring, just like a human with only a skeletal frame. With CSS, you can add things like colors, animations, double-column layouts, etc. CSS is used to add aesthetics to websites and make them more visually appealing.

As the human body, adding CSS to HTML is like adding a coat to the skeletal frame with skin — a pretty face, eyes, mouth, hands, legs, etc. Now it is more appealing.

CSS can transform the barebones HTML website we have above to something like:

A skeletal frame covered with skin is not yet a complete human if it cannot carry out primary human functions like talk, walk, breathe, etc. Enter JavaScript.

JavaScript

JavaScript is a scripting language used to add functionality to websites. 

Like the skeletal frame with beautiful skin, JavaScript is like adding a brain, a heart, blood, nerves, etc. to make the body functional. 

With JavaScript, you can do things like “click” a button to start a sequence of animations, or update content based on user inputs, etc.

Useful Resources

• How to tech yourself to code

Blog Credits: Linda Ikechukwu