THE FUTURE MARKETACADEMY
Your classroomRoom 07 · Tech Lab
School of Data & Tech

Web Development Basics (HTML, CSS, JavaScript)

Step 5 of 8 in Tech Lab

Next in your path: 7.9 Cloud Basics (what AWS/Google Cloud/Azure do)

What you'll be able to do
  • Explain what HTML, CSS and JavaScript each do.
  • Write a valid HTML page with headings, links, lists, images and sections.
  • Style it with CSS: colours, fonts, spacing and a layout that works on phones.
  • Add interaction with JavaScript: respond to a button click and change the page.
  • Use your browser's developer tools to inspect and debug.
  • Publish a small site for free with GitHub Pages.

All you need is a computer, a free code editor (for example Visual Studio Code) and a web browser. The code in this course was tested.

Words in this course 27Open the Vocabulary Hall
01

The three languages of the web

In simple words

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.

Key facts
  • 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.
Step by step
  1. Open any website in your browser.
  2. Ask: what is the content and structure? That is HTML.
  3. Ask: what are the colours, fonts and spacing? That is CSS.
  4. Ask: what reacts when I click? That is JavaScript.
  5. Create a new folder on your computer called my-site.
  6. Check: you can say what each of the three languages does and what files you will add: index.html, style.css, script.js.
Watch on YouTube
HTML, CSS and JavaScript explained in 4 minutesDanielle Thé · YouTube · youtube.com

Videos by other creators on YouTube, for reference. They are not made by or affiliated with The Future Market.

LESSON 01The three languages of the web
LESSON 01 / ANIMATED LESSON / AI VOICE00:00 / 01:00
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."
Try it now

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.
Open Claude
Sources
My notes
02

HTML: the structure

This lesson is part of full access: every course and every level for one payment.

03

CSS: the style

This lesson is part of full access: every course and every level for one payment.

04

JavaScript: the behaviour

This lesson is part of full access: every course and every level for one payment.

05

Developer tools: see inside any page

This lesson is part of full access: every course and every level for one payment.

06

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

  1. Which language controls structure, which controls style, and which controls behaviour?

  2. What is the usual file name for a site's home page?

  3. Why does every image need an alt attribute?

  4. In the CSS rule h1 { color: navy; }, what is the selector?

  5. What does a media query like @media (max-width: 600px) do?

  6. What's the difference between let and const?

  7. What does 5 + "5" give in JavaScript?

  8. Which method finds an element on the page?

  9. How do you open Chrome DevTools on Windows?

  10. Can you use GitHub Pages to run an online store?

EX

Final exam

This lesson is part of full access: every course and every level for one payment.

CE

Certificate

This lesson is part of full access: every course and every level for one payment.