HTML en CSS leren: De viewport-meta en mobiel eerst

Mobiel eerst

Walter opent de website op zijn gsm: alles is piepklein, alsof hij een krant leest van op een meter afstand. Eén regel HTML lost dat op, en een andere manier van denken doet de rest.

De viewport

Een gsm doet zonder hulp alsof hij een computerscherm van zo'n 980px breed is, en verkleint dan alles. De regel <meta name="viewport" content="width=device-width, initial-scale=1"> in de <head> zegt: gebruik de echte breedte van het toestel, zonder in te zoomen. Elke site die op een gsm moet werken, heeft hem.

Mobiel eerst wil zeggen: je schrijft eerst de CSS voor een smal scherm, en voegt daarna toe wat een breed scherm extra krijgt. Het smalle scherm is de basis, het brede de uitzondering. Hoe je die uitzondering schrijft, leer je in les 4.

Hier zie je de pagina zoals een gsm van 375px breed ze toont, met de viewport-regel in de <head>.

index.html

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Kapot? Mag Niet!</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>Kapot? Mag Niet!</h1>13  </header>14  <main>15    <p class="slogan">Breng je kapotte spullen mee: we herstellen ze samen.</p>16    <a class="knop" href="aanmelden.html">Meld je toestel aan</a>17  </main>18</body>19</html>

repaircafe.example

Probeer het zelf

Zet de viewport-regel in de <head> van de pagina.

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Kapot? Mag Niet!</title>5  <link rel="stylesheet" href="style.css">6</head>7<body>8  <header>9    <h1>Kapot? Mag Niet!</h1>10  </header>11  <main>12    <p class="slogan">Breng je kapotte spullen mee: we herstellen ze samen.</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.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {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/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {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.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {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

Klaar voor meer?

De volledige les heeft 4 oefeningen, van makkelijk naar uitdagend, met hints, punten en een reeks die je kan opbouwen.

Begin aan de les

De viewport

Hier zie je de pagina zoals een gsm van 375px breed ze toont, met de viewport-regel in de <head>.

index.html

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Kapot? Mag Niet!</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>Kapot? Mag Niet!</h1>13  </header>14  <main>15    <p class="slogan">Breng je kapotte spullen mee: we herstellen ze samen.</p>16    <a class="knop" href="aanmelden.html">Meld je toestel aan</a>17  </main>18</body>19</html>

repaircafe.example

Probeer het zelf

Zet de viewport-regel in de <head> van de pagina.

1<!DOCTYPE html>2<html lang="nl">3<head>4  <title>Kapot? Mag Niet!</title>5  <link rel="stylesheet" href="style.css">6</head>7<body>8  <header>9    <h1>Kapot? Mag Niet!</h1>10  </header>11  <main>12    <p class="slogan">Breng je kapotte spullen mee: we herstellen ze samen.</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.tafels {30  display: grid;31  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));32  gap: 12px;33  margin: 16px 0;34}35.knop {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/* Een gekleurde rand per tafel en een etiket met een gaatje: alleen voor de sier. */46.tafel {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.tafel h2 {54  margin: 0 0 6px;55  font-size: 1.1rem;56}57.tafel p {58  margin: 0;59  color: #5b544c;60}61.fiets {62  border-top-color: #2a9d8f;63}64.elektro {65  border-top-color: #f2a541;66}67.naai {68  border-top-color: #d1495b;69}70.computer {71  border-top-color: #5b6cae;72}73.etiket {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