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! :)
