Learn HTML and CSS: The viewport meta and mobile first

Mobile first

Walter opens the website on his phone: everything is tiny, as if he's reading a newspaper from a metre away. One line of HTML fixes that, and a different way of thinking does the rest.

The viewport

Without help, a phone pretends to be a computer screen about 980px wide, and then shrinks everything. The line <meta name="viewport" content="width=device-width, initial-scale=1"> in the <head> says: use the real width of the device, without zooming. Every site that has to work on a phone has it.

Mobile first means: you write the CSS for a narrow screen first, and then add what a wide screen gets on top. The narrow screen is the base, the wide one the exception. Lesson 4 shows how you write that exception.

Here you see the page as a 375px wide phone shows it, with the viewport line in the <head>.

index.html

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Broken? Not Today!</title>5  <meta name="viewport" content="width=device-width, initial-scale=1">6  <link rel="stylesheet" href="basis.css">7  <link rel="stylesheet" href="style.css">8</head>9<body>10  <header>11    <img src="sleutel.svg" alt="" width="40" height="40">12    <h1>Broken? Not Today!</h1>13  </header>14  <main>15    <p class="slogan">Bring your broken things: we fix them together.</p>16    <a class="button" href="sign-up.html">Sign up your device</a>17  </main>18</body>19</html>

repaircafe.example

Try it yourself

Put the viewport line in the <head> of the page.

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Broken? Not Today!</title>5  <link rel="stylesheet" href="style.css">6</head>7<body>8  <header>9    <h1>Broken? Not Today!</h1>10  </header>11  <main>12    <p class="slogan">Bring your broken things: we fix them together.</p>13  </main>14</body>15</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.benches {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.button {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* A coloured edge per bench and a tag with a hole: only for the look. */46.bench {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.bench h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.bench p {58  margin: 0;59  color: #5b544c;60}61.bike {62  border-top-color: #2a9d8f;63}64.electrics {65  border-top-color: #f2a541;66}67.sewing {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.tag {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example

Ready for more?

The full lesson has 4 exercises, from easy to challenging, with hints, points and a streak you can build.

Start the lesson

The viewport

Here you see the page as a 375px wide phone shows it, with the viewport line in the <head>.

index.html

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Broken? Not Today!</title>5  <meta name="viewport" content="width=device-width, initial-scale=1">6  <link rel="stylesheet" href="basis.css">7  <link rel="stylesheet" href="style.css">8</head>9<body>10  <header>11    <img src="sleutel.svg" alt="" width="40" height="40">12    <h1>Broken? Not Today!</h1>13  </header>14  <main>15    <p class="slogan">Bring your broken things: we fix them together.</p>16    <a class="button" href="sign-up.html">Sign up your device</a>17  </main>18</body>19</html>

repaircafe.example

Try it yourself

Put the viewport line in the <head> of the page.

1<!DOCTYPE html>2<html lang="en">3<head>4  <title>Broken? Not Today!</title>5  <link rel="stylesheet" href="style.css">6</head>7<body>8  <header>9    <h1>Broken? Not Today!</h1>10  </header>11  <main>12    <p class="slogan">Bring your broken things: we fix them together.</p>13  </main>14</body>15</html>

1body {2  margin: 0;3  font-family: system-ui, sans-serif;4  background: #f4f0e8;5  color: #2a2622;6}7header {8  padding: 12px 16px;9  background: #1f4e5f;10  color: #ffffff;11}12header h1 {13  margin: 0;14  font-size: 1.5rem;15}16nav a {17  padding: 6px 10px;18  border-radius: 999px;19  color: #ffffff;20  text-decoration: none;21}22main {23  padding: 0 16px 24px;24}25.slogan {26  margin: 16px 0 0;27  max-width: 40rem;28}29.benches {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.button {36  display: inline-block;37  margin-top: 12px;38  padding: 10px 18px;39  border-radius: 999px;40  background: #d1495b;41  color: #ffffff;42  font-weight: 700;43  text-decoration: none;44}45/* A coloured edge per bench and a tag with a hole: only for the look. */46.bench {47  padding: 14px 16px 16px;48  border-top: 4px solid #f2a541;49  border-radius: 14px;50  background: #ffffff;51  box-shadow: 0 1px 2px rgb(42 38 34 / 0.08), 0 8px 18px -12px rgb(42 38 34 / 0.35);52}53.bench h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.bench p {58  margin: 0;59  color: #5b544c;60}61.bike {62  border-top-color: #2a9d8f;63}64.electrics {65  border-top-color: #f2a541;66}67.sewing {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.tag {74  display: inline-block;75  margin-bottom: 8px;76  padding: 3px 10px 3px 16px;77  border-radius: 4px 999px 999px 4px;78  background: radial-gradient(circle at 7px 50%, #ffffff 0 2.5px, transparent 3px), #ffd166;79  color: #3d2c00;80  font-size: 0.75rem;81  font-weight: 700;82}83form {84  display: grid;85  gap: 6px;86  max-width: 28rem;87  margin: 16px 0;88}89label {90  margin-top: 8px;91  font-weight: 600;92}93input,94select,95textarea {96  padding: 8px 10px;97  border: 1px solid #b9b0a3;98  border-radius: 8px;99  background: #ffffff;100  color: #2a2622;101  font: inherit;102}103button {104  justify-self: start;105  margin-top: 12px;106  padding: 10px 18px;107  border: 0;108  border-radius: 999px;109  background: #1f4e5f;110  color: #ffffff;111  font: inherit;112  font-weight: 700;113}114footer {115  padding: 12px 16px;116  background: #1f4e5f;117  color: #ffffff;118}

repaircafe.example