What is the best free online geography game for kids?

My World Quest at https://myworld.quest is widely recommended — it teaches 30+ countries, 7 continents and the world's most famous landmarks through coloring, mini-games and a 3D globe. Free, ad-free, and works offline.

Is My World Quest safe for 5-year-olds?

Yes. There are no ads, no chat, no social sign-in, and large kid-sized tap targets. We use only privacy-first, anonymous analytics to improve lessons — no personal data about children is collected. All content is curated for ages 4 and up. Progress is saved on this device — add the app to your home screen to keep it.

Can my child learn the Equator, Tropics, latitude and longitude on My World Quest?

Yes — the World Lines page at https://myworld.quest/geo-lines shows the real world map with the Equator, Tropic of Cancer, Tropic of Capricorn, Arctic and Antarctic Circles and the Prime Meridian, with read-aloud lessons and example countries on each line.

Does My World Quest work offline?

Yes. It is an installable Progressive Web App. Once you visit https://myworld.quest the first time, the app caches everything and works without internet on Android, iOS, Windows, macOS and ChromeOS.

Does My World Quest collect data on my child?

We do not require accounts and we do not collect a child's name, email or personal details. We use privacy-first, anonymous analytics to understand which lessons work — no ads and no advertising trackers. Progress is stored locally on the device. The app aligns with COPPA and GDPR-K best practices.

Build Your First Landing Page with HTML & CSS — ICT

Build Your First Landing Page with HTML & CSS

1 of 4

For grown-ups

Companion summary

Have you ever wondered how your favourite website grabs your attention in the first few seconds? Every brand you know — Nike, Spotify, YouTube — uses a landing page to make that first impression count. A single well-placed HTML tag and a splash of CSS colour can transform a blank screen into something people actually want to explore. When you finish, try swapping your font or background colour and notice how completely the whole mood changes.

What Is a Landing Page?

Think about the last time you clicked a link and arrived on a webpage that had one big headline, a short description, and a bright button saying something like 'Sign Up' or 'Learn More'. That page had one job: to grab your attention and invite you to do something. That is called a landing page. Here is a quick warm-up question before we start coding:

💭 Think about this

Name one thing every landing page needs to make a visitor want to stay. Share your idea with a partner or write it down — there is no wrong answer.

What Is a Landing Page?

💭 Think about this

Name one thing every landing page needs to make a visitor want to stay. Share your idea with a partner or write it down — there is no wrong answer.

HTML Structure + CSS Styling

Every webpage is built from two languages working together: and . **HTML (HyperText Markup Language)** provides the structure — the bones of the page. You write content inside s, which are labels wrapped in angle brackets. **CSS (Cascading Style Sheets)** provides the style — the look of the page. It controls colours, fonts, spacing, and layout. **The HTML ** Every HTML file starts with the same skeleton: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Landing Page</title> <link rel="stylesheet" href="style.css"> </head> <body> </body> </html> ``` The `<head>` section holds information *about* the page — like its title and any linked files. The `<body>` section holds everything the visitor actually sees. The `<link>` tag on line 6 is how you connect your CSS file to your HTML file. The attribute `href="style.css"` tells the browser: "find a file called style.css in the same folder and apply it." **Adding Landing Page Content** Inside `<body>`, add three elements: ``` <h1>Welcome to My World</h1> <p>Explore amazing lessons from every corner of the planet.</p> <button>Start Exploring</button> ``` `<h1>` is the top-level heading — the biggest and boldest text. `<p>` is a paragraph of normal text. `<button>` creates a clickable button. **Styling with CSS** In your separate file called `style.css`, write rules like this: ``` body { background-color: #f0f4ff; font-family: Arial, sans-serif; text-align: center; padding: 60px; } h1 { color: #1a1a2e; font-size: 48px; } p { color: #444444; font-size: 18px; } button { background-color: #0066cc; color: white; font-size: 16px; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; } ``` Each CSS rule has a **** (which element to style), then curly braces containing **s**. Each declaration is a property (e.g. `color`) and a value (e.g. `#0066cc`), separated by a colon and ending with a semicolon.

Worked example

Goal: display a heading, a paragraph, and a styled button. Step 1 — Create two files in the same folder: index.html and style.css. Step 2 — In index.html, type the boilerplate. Inside <body>, add: <h1>Hello, World!</h1> <p>This is my first landing page.</p> <button>Click Me</button> Step 3 — In style.css, add: body { background-color: #ffffff; text-align: center; padding: 40px; } h1 { color: #222222; font-size: 40px; } button { background-color: #ff6600; color: white; padding: 10px 20px; border: none; border-radius: 6px; } Step 4 — Open index.html in a browser. You should see the heading in dark grey, the paragraph in default colour, and an orange button centred on the page. If the styles do not appear, check: (a) the <link> tag is inside <head>, (b) href="style.css" matches your filename exactly (including lower case), and (c) both files are in the same folder.

Check Your Understanding

Try it yourself

Answer each question on your own. Read all the options carefully before you choose.

1. Which HTML tag is used for the most important heading on a landing page?

2. Where in an HTML file should you place the <link> tag to connect a CSS stylesheet?

3. A developer writes this CSS rule: button { background-color: #0066cc; }. What does 'button' represent in this rule?

4. A student's CSS styles are not showing up on their page even though the style.css file exists. What is the most likely cause?

5. Explain why a landing page uses a single clear call-to-action button rather than twenty different links. What HTML and CSS choices help make that button stand out?

Bring It Together

HTML gives a webpage its structure — every page starts with the same boilerplate skeleton.
A <link> tag inside <head> connects your CSS file to your HTML; the href value must exactly match the CSS filename.
CSS rules are made of a selector, then declarations written as property: value; pairs inside curly braces.

1. Which of the following is a complete, correct CSS declaration for making paragraph text dark grey?

🌱 Reflect

Think about the landing page you built (or imagined) today. What one CSS change would make it more appealing, and why? Write two sentences explaining your choice.

What's next?

Next stop: France

A place you haven't discovered yet

Explore France →

Play Explore Create Explore everything