The three languages of the web
A web page is like a house. HTML is the walls and rooms (the structure). CSS is the paint and furniture (how it looks). JavaScript is the electricity: it makes the lights turn on when you press a switch.
- HTML (HyperText Markup Language) describes content and structure using tags like
<h1>(main heading) and<p>(paragraph). - CSS (Cascading Style Sheets) controls how things look: colours, fonts, spacing, layout.
- JavaScript adds behaviour: reacting to clicks, showing and hiding things, checking forms.
- A browser (Chrome, Firefox, Safari, Edge) downloads these files from a server and draws the page.
- MDN Web Docs (by Mozilla) is a free, trusted reference for all three languages. When you forget how something works, look it up there.
- A typical small site has three files in one folder:
index.html,style.cssandscript.js. The home page is usually namedindex.html.
- Open any website in your browser.
- Ask: what is the content and structure? That is HTML.
- Ask: what are the colours, fonts and spacing? That is CSS.
- Ask: what reacts when I click? That is JavaScript.
- Create a new folder on your computer called my-site.
- Check: you can say what each of the three languages does and what files you will add: index.html, style.css, script.js.
Videos by other creators on YouTube, for reference. They are not made by or affiliated with The Future Market.
Read the video script
[Host] "Every website you've ever visited is built from three languages."
[Text on screen: HTML = structure, CSS = style, JavaScript = behaviour] "HTML is the walls. CSS is the paint. JavaScript is the light switch."
[Screen: folder with index.html, style.css, script.js] "Three files in one folder. That's a website."
Install a code editor. Create a folder called my-site with three empty files: index.html, style.css and script.js.
ClaudeStuck? Copy a ready-made prompt for Claude
Copy this, open Claude, paste it, and Claude will walk you through the lesson step by step.
For a grown-up: Claude is for adults (18+). Copy this, paste it into Claude, and use the answer to explain the lesson to your child.
I'm learning "Web Development Basics (HTML, CSS, JavaScript)" on The Future Market. Lesson 1: "The three languages of the web". What the lesson teaches: - HTML (HyperText Markup Language) describes content and structure using tags like <h1> (main heading) and <p> (paragraph). - CSS (Cascading Style Sheets) controls how things look: colours, fonts, spacing, layout. - JavaScript adds behaviour: reacting to clicks, showing and hiding things, checking forms. - A browser (Chrome, Firefox, Safari, Edge) downloads these files from a server and draws the page. - MDN Web Docs (by Mozilla) is a free, trusted reference for all three languages. When you forget how something works, look it up there. - A typical small site has three files in one folder: index.html, style.css and script.js. The home page is usually named index.html. The exercise I'm working on: Install a code editor. Create a folder called my-site with three empty files: index.html, style.css and script.js. I'm stuck. Please: 1. Explain the main idea in plain, simple words with one everyday example. 2. Walk me through the exercise one small step at a time. Ask me what I've done so far before giving the next step. 3. Don't just give me the final answer. Help me do it myself, and check my work when I share it.
I'm a parent helping my child (about 8 years old) with a lesson called "The three languages of the web" from the course "Web Development Basics (HTML, CSS, JavaScript)". Here's what the lesson says: A web page is like a house. HTML is the walls and rooms (the structure). CSS is the paint and furniture (how it looks). JavaScript is the electricity: it makes the lights turn on when you press a switch. The activity: Install a code editor. Create a folder called my-site with three empty files: index.html, style.css and script.js. Please explain this so an 8-year-old understands: short sentences, a fun everyday example, and no hard words. Then give me 3 simple questions I can ask my child to check they understood, and a way to do the activity together, one tiny step at a time.
Sources
- MDN Web Docs, learn web development: developer.mozilla.org/en-US/docs/Learn_web_development
HTML: the structure
This lesson is part of full access: every course and every level for one payment.
CSS: the style
This lesson is part of full access: every course and every level for one payment.
JavaScript: the behaviour
This lesson is part of full access: every course and every level for one payment.
Developer tools: see inside any page
This lesson is part of full access: every course and every level for one payment.
Publish your site for free
This lesson is part of full access: every course and every level for one payment.
Final project
This lesson is part of full access: every course and every level for one payment.
Quiz
Which language controls structure, which controls style, and which controls behaviour?
HTML structure, CSS style, JavaScript behaviour.
What is the usual file name for a site's home page?
index.html.
Why does every image need an alt attribute?
It describes the image for screen reader users and shows if the image fails to load.
In the CSS rule
h1 { color: navy; }, what is the selector?h1.
What does a media query like
@media (max-width: 600px)do?Applies styles only on screens 600px wide or narrower.
What's the difference between
letandconst?let can be changed later; const can't be reassigned.
What does
5 + "5"give in JavaScript?"55" (text).
Which method finds an element on the page?
document.querySelector().
How do you open Chrome DevTools on Windows?
F12 or Ctrl+Shift+I.
Can you use GitHub Pages to run an online store?
No, it isn't meant for commercial sites like online stores or sensitive transactions.
Final exam
This lesson is part of full access: every course and every level for one payment.
Certificate
This lesson is part of full access: every course and every level for one payment.