Give the page a proper head

Read first Task 56

`meta name="description"` is what a search result shows, and the viewport tag is what makes the page readable on a phone.

What you are building

The task in front of you: Which meta tag controls phone scaling?.

The editor already holds a working starting point. Do not delete it and start again — read it, change one thing, run it, and watch which check moves. That loop is the whole method.

Why this matters

You are inside the section “Capstone: a real page” of the Responsive Web Design track. Everything in this section builds towards the section project, and this task is one of the pieces that project leans on.

In real work nobody marks your code — it either runs or it does not, and someone is waiting for the result. The checks here are deliberately strict about output, because a program that prints the right thing in the wrong shape fails in the real world too.

The key idea

A browser turns markup into a tree, and every tag you write becomes one node in it. Elements nest; text lives inside an element, never floating between two of them.

Write the structure first and the styling later. A page with clean, meaningful tags is easy to style and easy for a screen reader to follow.

Two mistakes to avoid

Leaving a tag open. One unclosed element silently swallows everything after it, and the page looks "almost right" in a way that is hard to spot.
Using a div where a heading belongs. The checks look for real structure — h1, h2, ul, li — not styled text.

What the automatic checks look for

The right-hand column runs 1 check every time you press Run code. Nothing is hidden:

The output has to contain “js:expect(document.query…”.

Task

Which meta tag controls phone scaling?

The editor already contains a starting point. Change it until every check passes — the Next task button unlocks when it does.

What you start with

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Free Coding Lab - AI Computer Science Academy</title>
  <meta name="description" content="Learn Python, SQL, JavaScript and C++ free in your browser at AI Computer Science Academy, Faisalabad.">
</head>
<body>
  <h1>Free Coding Lab</h1>
</body>
</html>

HTML & CSS 1 automatic check Capstone: a real page

Code editor Ctrl + Enter runs

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Free Coding Lab - AI Computer Science Academy</title>
  <meta name="description" content="Learn Python, SQL, JavaScript and C++ free in your browser at AI Computer Science Academy, Faisalabad.">
</head>
<body>
  <h1>Free Coding Lab</h1>
</body>
</html>

Run your code to see the output and the checks.

Your result

Submit your code to see results

Write your code in the middle column and press Run code.

Checks on this task:

Check 1

Stuck? The Hint button at the bottom nudges you one step without handing over the answer — that is on purpose: an exercise you copied teaches nothing.

Track progress

0 of 56 tasks complete

Next task unlocks when every check passes.

← Previous

Next task (pass every check first)

Give the page a proper head