What’s the Difference Between HTML, CSS, and JavaScript?

Learn about the difference between HTML, CSS, and JavaScript.

When you start learning about web development, specifically front-end development, HTML, CSS, and JavaScript are largely considered to be the 3 most fundamental elements of your skill stack.

HTML, CSS, and JavaScript are all part of the same web development eco-system and need to work together to maximize the potential of the modern web.

But... what exactly makes HTML, CSS, and JavaScript different from each other?

• HTML stands for Hypertext Markup Language.
• CSS stands for Cascading Stylesheets
• JavaScript stands for... well JavaScript (shortcut JS)

HTML

HTML is a markup language that we use to describe its content and layout a basic rough structure of a website.

Analogy: HTML is the frame and content of a house. So things like chairs, tables, doors, stairs, the bare essentials of what constitutes a house, nothing more.

HTML developers’ job is to supply the bare minimum requirements of a website by describing the content of the website correctly so when the designers come in, they know what’s a button and what’s a paragraph.

Example:

<!-- Describe content -->

<p>This text is described correctly by wrapping it between opening and closing paragraph tags.</p>

<button>I’m a button</button>

CSS

CSS is a styling language that we use to shape and style website content in terms of colors, typography, spacing, borders, and more.

Analogy: CSS is the paint and the rounded edges of a house that makes visually appealing and comfortable to live in. Technically, the definition of a chair is something that you sit on, but things like shape, size, and padding (design) is what makes chairs comfortable (or uncomfortable) to sit on.

CSS developers’ job is to make sure that a website has the right visual style that the owner wants in terms of color, typography, spacing, shape, and overall layout when viewed on different devices.

Example:

/* Style text element */
p {
	font-family: "Helvetica";
	font-size: 20px;
	line-height: 1.5;
}

/* Style button */
button {
	font-size: 16px;
	font-weight: bold;
	padding: 16px 32px;
	border-radius: 8px;
	color: white;
	background-color: green;
}

JavaScript

JavaScript is a dynamic programming language that allows you to make websites interactive, and reactive.

Analogy: JavaScript is the electricity and water supply that makes a modern home a modern home, and makes taking baths, cooking food, and not freezing to death during the winter possible. A JavaScript developer make sure that light switches on when you flip the switch, and hot/cold water comes out when you turn the water tap.

JavaScript developers’ job is to make sure that when you click on a button that says “Menu”, an off-canvas menu slides up ready to use. JavaScrip is what makes the elements of a website respond to user input.

Example:

// Make button interactive 

const button = document.querySelector("button")

button.addEventListener("click", showModal)

function showModal() {
	alert("You clicked on the button!")
}