Beginner · How the web works · topic 2 of 64 · 20 min
HTML, CSS and JavaScript: three jobs
Explanation
One page, three languages
HTML (HyperText Markup Language) describes what is on the page: headings, paragraphs, images, buttons. CSS (Cascading Style Sheets) describes how it looks: colours, sizes, spacing, layout. JavaScript describes what it does: reacting to clicks, checking forms, loading new data.
HTML: the content
HTML uses tags. A tag is a word inside angle brackets, like <h1>. Most tags come in pairs: an opening tag <p> and a closing tag </p>, with content between them. The tag plus its content is called an element.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first page</title>
</head>
<body>
<h1>Namaste, web!</h1>
<p>This is my first web page.</p>
</body>
</html>CSS: the look
CSS is a list of rules. Each rule picks some elements (the selector) and gives them properties with values. You can put CSS inside a <style> tag in the head, or in a separate .css file linked with <link>.
<style>
h1 { color: darkgreen; }
p { font-size: 18px; }
</style>JavaScript: the behaviour
JavaScript is a programming language that runs in the browser. It can read the page, change it and react to what the user does. You add it with a <script> tag, usually just before </body> or with the defer attribute in the head.
<button id="hello">Say hello</button>
<script>
document.querySelector('#hello').addEventListener('click', () => {
alert('Namaste!');
});
</script>Watch the lesson
HTML, CSS and JavaScript: three jobs · 1/6
Every page you have ever opened is made from three languages working together.
Prefer a video by a teacher? Find free videos on “html css javascript difference explained for beginners” on YouTube ↗
In real life: A shopping site product card
On a shopping site, the product name, price and photo are HTML. The rounded card, the orange "Add to cart" button and the grid of cards are CSS. When you press "Add to cart" and the cart count goes from 0 to 1 without reloading, that is JavaScript.
Practice (0/2 done)
Write your first full HTML page. It must have <!doctype html>, an <html lang="en"> element, a <title>, one <h1> with your name, and one <p> about what you want to build.
Add CSS to this page: inside a <style> tag in the head, make every <h1> have the colour "darkgreen".
Quick quiz
Read more (free)
Pass the quiz (60% or more) or mark this topic as done when you are ready.
Your progress is saved on this device only.