How Do HTML, CSS & Javascript Fit Together?

So I’m sure you’ve heard these acronyms being tossed around over the last few years but maybe you’re not sure how and why they go hand-in-hand in the world of web development.

HTML

HyperText Markup Language is the standard markup language for creating web pages. Using the concept of tags, which are essentially different elements, HTML describes the structure of a page so the browser knows how to display the content. An element is defined by a start tag (e.g. <h1>), content and an end tag (e.g. </h1>).

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title> <------ This is what a tag looks like!
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>

CSS

Cascading Style Sheets is a stylesheet language that is used to describe how the content that is defined by the HTML code should be rendered in the browser. In other words, it’s used to style the HTML elements. You can style by element (1), class (2) or id (3).

(1)div {
background-color: grey;
color: red;
width: 10px;
font-size: 12px;
}
(2).textArea {
background-color: grey;
color: red;
width: 300px;
font-size: 12px;
}
(3)#simpleButton {
width: 100px;
font-size: 12px;
border-radius: 15px;
}

Javascript

Javascript is a programming language used to control how a particular web page behaves. It is typically used to add a layer of interactivity to a website.

function add(num1, num2) {
return num1 + num2;
}

So now we know how to describe the structure of the page (HTML), modify the appearance of the content (CSS) and control the behaviour of elements (JS) making the website more ‘interactive’.

These can be combined into a single page or split across three different files (.html, .css and .js).

So let’s make a quick webpage which contains an interactive button which when clicked, results in red text being displayed below it.

<!DOCTYPE html>
<html>
<head>
<title>Interactive Button</title>
<style>
#interactive {
color: white;
background-color: blue;
font-size: 20px;
}
#sensor {
color: red;
}
</style>
</head>
<body>
<button id="interactive">Click Me!</button>
<p id="sensor"></p>
</body>
<script>
document.getElementById("interactive").onclick = function() {
document.getElementById("sensor").innerHTML = "Clicked!";
}​;​
</script>
</html>

Combining all three on a single page is seen as bad practice which is why you will see projects contain folders of split up HTML, CSS and Javascript files.

Nowadays, web developers rarely use ‘vanilla’ (i.e. plain code without frameworks/plugins/dependencies) HTML, CSS or Javascript. Instead, they utilise frameworks such as Angular, React or Vue which provide a suite of tools and help make more robust and maintainable code. They also make use of a virtual DOM which is both faster and more performant at scale.

Hope that helped — please do leave a comment below if you have anymore questions. Happy coding! :)

--

--

--

Tech Enthusiast | Entrepreneur | Music Artist | MEng @ Cambridge

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Permissionless DApp from UniLend is now available on @DappRadar!

React, Inline CSS, and the need for CSS Modules

Creating Firebase dynamic links with Firebase cloud functions

A Functional Approach to Learning JavaScript: Looping with Recursion

BubblePlugin — ChartJS3 TimeSeries

GYRO-WEB: ACCESSING THE DEVICE ORIENTATION IN JAVASCRIPT

A short intro to the magic of date-fns

How to send email using Nodemailer with Gmail’s APIs.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Akhil Sonthi

Akhil Sonthi

Tech Enthusiast | Entrepreneur | Music Artist | MEng @ Cambridge

More from Medium

Chapter 19: CSS Flexbox Alignment and JavaScript Function Declaration

Add to cart button HTML | add to cart HTML & CSS javascript

Colors in #CSS

SYNTAX VS SEMANTICS; NAMING CSS CLASSES