HTML, CSS and JavaScript: How the Front End of the Web Was Invented
Every web page you have ever used is built from three languages. HTML says what is on the page, CSS says how it looks, and JavaScript says what it does. In this tutorial you will learn what each one does, write a small working tool with all three, and then change the code live in an editor on this page. No install, no account, nothing to break.
| You will build | A tip calculator, a click counter and a colour mixer |
| You need | A browser. A text editor such as VS Code is useful for later |
| Level | Beginner |
| Time | About 40 minutes |
| Reading time | 10 min read |
The big picture: skeleton, skin and muscles
| Language | Job | Body analogy | Looks like |
|---|---|---|---|
| HTML | Structure and content: headings, text, images, buttons | Skeleton | Hello |
| CSS | Colours, fonts, spacing and layout | Skin and clothes | h1 { color: tomato; } |
| JavaScript | Behaviour: clicks, calculations, updates | Muscles and nerves | button.onclick = … |
A browser downloads an HTML file, reads it into a tree of elements called the DOM (Document Object Model), applies the CSS rules to that tree and then runs the JavaScript, which can change the tree at any moment. Everything you see changing on a page is JavaScript editing the DOM.
Step 1: write the HTML
HTML uses tags in angle brackets. Most tags come in pairs: an opening tag, content and a closing tag with a slash. Create a file named index.html and paste this in:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tip calculator</title>
</head>
<body>
<h1>Tip calculator</h1>
<label>Bill: <input id="bill" type="number" value="500"></label>
<label>Tip: <input id="pct" type="range" min="0" max="30" value="10"> <span id="pv">10</span>%</label>
<p>Tip: <strong id="tip">50</strong><br>Total: <strong id="tot">550</strong></p>
</body>
</html>Double-click index.html. Your browser opens it. You should see a heading, a number box, a slider and two numbers. They do not do anything yet. Notice the id attributes: they are name tags that CSS and JavaScript use to find elements.
Step 2: style it with CSS
CSS is a list of rules. Each rule has a selector (what to style) and declarations (how). Add this between the head tags, inside a style element:
<style>
body { font-family: sans-serif; max-width: 420px; margin: 24px auto; padding: 0 16px; }
label { display: block; margin: 14px 0; }
input[type=number] { padding: 8px; width: 120px; }
strong { font-size: 1.4rem; color: #b4531f; }
</style>Three ideas to remember. Selectors can target tags (label), ids (#bill) or classes (.card). The box model says every element is a box with content, padding, border and margin. And a modern layout is done with flexbox or grid, not tables.
Step 3: add behaviour with JavaScript
Put this just before the closing body tag. It finds the elements by id, listens for input and recalculates:
<script>
var bill = document.getElementById("bill");
var pct = document.getElementById("pct");
function update() {
var b = +bill.value || 0;
var p = +pct.value;
document.getElementById("pv").textContent = p;
var tip = b * p / 100;
document.getElementById("tip").textContent = tip.toFixed(2);
document.getElementById("tot").textContent = (b + tip).toFixed(2);
}
bill.addEventListener("input", update);
pct.addEventListener("input", update);
update();
</script>1. Find the elements
document.getElementById looks up an element by its id and gives you a handle to it.
2. Define update()
A function is a reusable block. This one reads both inputs, calculates the tip, and writes the answers into the page.
3. Listen for events
addEventListener says: when the user types or drags, run update.
4. Run once at the start
The final update() call fills in the numbers when the page first loads.
Try it live: the code playground
Below is the same project, split into three tabs. Edit any of them and the result updates by itself. Try changing the colour in CSS, the label text in HTML, or the rounding in JavaScript. Use the menu to switch to other examples. The preview runs in a sandbox, so you cannot break the page.
Challenges to try: make the tip slider go up to 50 percent; add a third input for the number of people and show the share per person; change the button colour when the mouse is over it using the CSS hover state.
Open your page like a developer
Every browser has built-in developer tools. Press F12 or right-click and choose Inspect. The Elements tab shows the live DOM and lets you edit HTML and CSS on the fly. The Console tab shows JavaScript errors and lets you run code. When something does not work, the Console is the first place to look.
Common mistakes
Nothing happens when I type
Open the Console (F12). A red error usually names the line. The most common cause is a typo in an id, such as getElementById(“bil”) instead of “bill”.
My CSS does not apply
Check the selector matches: a dot for class, a hash for id. Also check you closed every curly brace and ended each declaration with a semicolon.
The JavaScript runs before the page exists
If the script sits in the head, it runs before the elements are created. Put the script at the end of the body, or add the defer attribute.
I see my code as text on the page
Save the file with the .html ending and open it in the browser, not in a text viewer. Make sure the first line is the doctype line.
How the web got these three languages
1989 to 1991: HTML and the first website
Tim Berners-Lee at CERN proposes a web of linked documents. The first website goes public in 1991.
1994 to 1996: CSS
Håkon Wium Lie proposes style sheets in 1994, and CSS level 1 becomes a W3C recommendation in December 1996.
1995: JavaScript
Brendan Eich builds the first version at Netscape in about ten days, first called Mocha, then LiveScript, then JavaScript.
2009: Node.js
JavaScript leaves the browser and runs on servers.
2015: ES6
A big update adds let, const, arrow functions and modules, and modern JavaScript is born.
India and the web
Public internet access began in India on 15 August 1995, when VSNL launched its Gateway Internet Access Service in major cities. Within a generation India became one of the world’s largest web audiences and a major source of web and software developers. Every Indian government form, UPI payment screen and online exam page is, at heart, HTML, CSS and JavaScript, which is why this is one of the best first skills a student can learn.
Cheat sheet
| Goal | Code |
|---|---|
| Centre something horizontally and vertically | display:flex; justify-content:center; align-items:center; |
| Make an element a card | padding:16px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.1); |
| Run code on click | el.addEventListener(“click”, function(){ … }); |
| Change text | el.textContent = “New text”; |
| Change a style | el.style.background = “tomato”; |
| Show or hide | el.hidden = true; |
| Make a layout responsive | @media (max-width: 600px) { … } |
Mind map: the front end
- Front end
- HTML
- Tags
- Attributes
- Forms
- Semantics
- CSS
- Selectors
- Box model
- Flexbox and grid
- Responsive design
- JavaScript
- Variables
- Functions
- Events
- DOM
- Tools
- Browser DevTools
- VS Code
- Git
- History
- 1991 first site
- 1995 JavaScript
- 1996 CSS1
- HTML
Test yourself
Where to go next
Save every version of your page.Mobile apps history
The same skills, on a phone.Forminator Guide
Put a working form on a real website.Smartphone history
Where most pages are viewed today.
Sources
- How the Web works, MDN Web Docs, free beginner courses
- JavaScript, Wikipedia, history and creator
- CSS, Wikipedia, history of style sheets
- History of the Internet in India, Wikipedia, VSNL launch in 1995
Facts were cross-checked and rewritten in our own words. The code in this tutorial is original.
2 Comments
[…] HTML, CSS and JavaScriptBuild the page you will put under version control.Forminator GuideA real WordPress project to practise on.Mind Map hubSee how computing fits into the wider story.Smartphone historyThe devices most of this code runs on. […]
[…] LabSee a Forminator lead form in action.HTML, CSS and JavaScriptStyle and extend your pages.What Is Version Control?Keep your site files safe.Mobile apps historyWhere your visitors will fill […]