text:
# Advanced form styling marking guide

The aim of the tasks is to demonstrate an understanding of the features covered in the [Advanced form styling](https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling) and [UI pseudo-classes](https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes) lessons in Learn Web Development on MDN.

## Task 1

In our first advanced styling tasks, we want you to handle making a search input as consistent as possible across browsers — a trickier task than with standard text inputs, even on modern browsers.

We've already provided you with a basic reset to build upon.

1. First of all, try giving the search box a consistent width, height, padding, and border color across browsers. This is pretty self-explanatory; `line-height` tends to work better than `height` for keeping a consistent height in which the input text is vertically-centered.
2. You'll find that some browsers will not behave in terms of the form element's height. This is due to native OS styling being used in some cases. How can you remove this native styling? The answer here is `-webkit-appearance: none;`.
3. Once you've removed the native styling, you'll need to add back one of the features it was providing, to keep same look and feel we originally had. How do you do this? Answer: rounded corners! We need `border-radius`.
4. One thing that is inconsistent across browsers (particularly looking at Safari here) is the position of the standard blue focus outline. How can you remove this? Answer: `outline: none;`
5. There is a major problem with just getting rid of the blue focus outline. What is it? Can you add some kind of styling back in so that users can tell when the search box is being hovered or focused? Answer: Use some kind of styling applied to the input using the `:hover` and `:focus` pseudo-classes.
6. Another thing that commonly denotes a search box is a magnifying glass icon. We've made one available in the same directory as `search-24px.png`, plus a `<div>` element after the search input to help you attach it, should you need it. Can you figure out a sensible way to attach it, and can you use some CSS to get it to sit to the right of the search box, and be lined up vertically as well? Answer: There are many ways to do this, but the easiest is probably to make it a background image of the `<div>`, and then use flexbox to line it up.

The finished CSS could look something like this:

```
body {
  background-color: #fff;
  color: #333;
  font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

button,
input,
select {
  font-family: inherit;
  font-size: 100%;
  padding: 0; margin: 0;
}

input[type="search"] {
  line-height: 1.5rem;
  padding: 5px;
  border: 2px solid #ccc;
  width: 200px;

  -webkit-appearance: none;
  border-radius: 6px;

  outline: none;
}

input[type="search"]:hover, input[type="search"]:focus {
  border: 2px solid red;
  box-shadow: 1px 1px 1px gray;
}

div {
  width: 36px;
  height: 24px;
  background: url(search-24px.png) no-repeat center;
  background-size: 18px;
}

form {
  display: flex;
  align-items: center;
}
```

## Task 2

In our next task we provide you with a set of three radio buttons. We want you to give them custom styling.

We've already provided you with a basic reset to build upon.

1. First of all, get rid of their default styling. Again, `-webkit-appearance: none;` is what you need here.
2. Next, give the radio buttons a reasonable base style — the style they have when the page first loads. This can be anything you like, but you probably want to set a width and height (of somewhere between about 18 and 24 pixels), and a subtle border and/or background color.
3. Now give the radio buttons a different style for when they are selected. You'll need to use the `:checked` pseudo-class for selecting when the radio button is selected. If you want to do something a bit more fancy, you can also use a combination of `:checked` and `::before` or `::after` to use some generated content to provide a central glyph, or image. You'd need to use absolute positioning on the generated content and relative positioning on the radio button to help line things up. Bear in mind that using an actual text character is a pain to align, so using a background image would be more successful.
4. Align the radio buttons nicely with the labels. A simple bit of flexbox would work nicely here as well.

The finished CSS could look something like this:

```
body {
  background-color: #fff;
  color: #333;
  font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

button,
input,
select {
  font-family: inherit;
  font-size: 100%;
  padding: 0; margin: 0;
}

input[type="radio"] {
  -webkit-appearance: none;

  height: 24px;
  width: 24px;
  border: 2px solid #ccc;
}

input[type="radio"]:checked {
  border: 2px solid red;
  position: relative;
}

input[type="radio"]:checked::before {
  content: '';
  background-color: red;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 4px;
  left: 4px;
}

li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

label {
  width: 150px;
  margin-right: 10px;
}
```

## Task 3

In our final task for this assessment series, we provide you with a feedback form that is already nicely-styled — you've already seen something similar if you've worked through our UI pseudo-classes article, and now we want you to come up with your own solution.

What we'd like you to do is make use of some advanced pseudo-classes to provide some useful indicators of validity.

1. First of all, we want you to provide some specific styling to visually indicate which inputs have to be filled in — they cannot be left empty. The basis of doing this is use of the `:required` pseudo-class. Apart from that, you can use whatever styling you like, as long as it reasonably indicates what inputs are reuired. In our case, we've used `:required` plus an adjacent combinator to attach some generated content to the `<span>` that appears after the input, but the provided solution doesn't have to be this complex.
2. Second, we want you to provide a useful visual indicator of whether the data entered inside each input is valid or not. This requires use of the `:valid` and `:invalid` pseudo-classes. Again, any reasonable solution is OK here, and attaching something to the trailing `<span>` in each case remains an option.

The finished CSS could look something like this:

```
body {
  background-color: #fff;
  color: #333;
  font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

button,
input,
select {
  font-family: inherit;
  font-size: 100%;
  padding: 0; margin: 0;
}

fieldset {
  padding: 10px 30px 0;
  width: 400px;
}

legend {
  color: white;
  background: black;
  padding: 5px 10px;
}

fieldset > div {
  margin-bottom: 20px;
  display: flex;
  flex-flow: row wrap;
}

button, label, input {
  display: block;
  font-family: inherit;
  font-size: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
  height: 30px;
}

input {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}

input:hover, input:focus {
  background-color: #eee;
}

button {
  width: 60%;
  margin: 0 auto;
}

input + span {
  position: relative;
}

input:required + span::after {
  font-size: 0.7rem;
  position: absolute;
  content: "required";
  color: white;
  background-color: black;
  padding: 5px 10px;
  top: -26px;
  left: -70px;
}

input + span::before {
  position: absolute;
  right: -20px;
  top: 5px;
}

input:invalid {
  border: 2px solid red;
}

input:invalid + span::before {
  content: '✖';
  color: red;
}

input:valid + span::before {
  content: '✓';
  color: green;
}
```


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Advanced styling: Task 3</title>

    <form>
      <fieldset>
        <legend>Feedback form</legend>

Required fields are labelled with "required".

          First name:
          <input id="fname" name="fname" type="text" required>

          Last name:
          <input id="lname" name="lname" type="text" required>

          Email address:
          <input id="email" name="email" type="email">

<button>Submit</button>

      </fieldset>
    </form>

repo_name: mdn/learning-area

repo_language: HTML

mime_type: text/plain


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Advanced styling: Task 1</title>

    <form>
      <input type="search" name="search" id="search" aria-label="Search our site">

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Advanced styling: Task 2</title>
    <link rel="stylesheet" href="../styles.css" />

    <textarea class="playable playable-css" style="height: 130px;">
body {
  background-color: #fff;
  color: #333;
  font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

button,
input,
select {
  font-family: inherit;
  font-size: 100%;
  padding: 0; margin: 0;
}
</textarea>

    <textarea class="playable playable-html" style="height: 220px;">
<form>
  <fieldset>
    <legend>Who is your favorite pony?</legend>

        Pinkie Pie
        <input type="radio" id="pinkie" name="pony" value="pinkie">

        Rainbow Dash
        <input type="radio" id="rainbow" name="pony" value="rainbow">

        Twilight Sparkle
        <input type="radio" id="twilight" name="pony" value="twilight">

  </fieldset>
</form>
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Advanced styling: Task 2</title>

    <form>
      <fieldset>
        <legend>Who is your favorite pony?</legend>

            Pinkie Pie
            <input type="radio" id="pinkie" name="pony" value="pinkie">

            Rainbow Dash
            <input type="radio" id="rainbow" name="pony" value="rainbow">

            Twilight Sparkle
            <input type="radio" id="twilight" name="pony" value="twilight">

      </fieldset>
    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Advanced styling: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />

    <textarea class="playable playable-css" style="height: 130px;">
body {
  background-color: #fff;
  color: #333;
  font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0;
}

* {
  box-sizing: border-box;
}

button,
input,
select {
  font-family: inherit;
  font-size: 100%;
  padding: 0; margin: 0;
}
</textarea>

    <textarea class="playable playable-html" style="height: 220px;">
<form>
  <input type="search" name="search" id="search" aria-label="Search our site">

</form>
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Editable form <input> example</title>

    <textarea id="code" class="playable-code">
<input id="input1" type="text">
<input id="input2" type="text">
    </textarea>

      <input id="reset" type="button" value="Reset">


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>:user-valid and :user-invalid example</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">

    <form>
      <fieldset>
        <legend>Feedback form</legend>

Required fields are labelled with "required".

          First name:
          <input id="fname" name="fname" type="text" required>

          Last name:
          <input id="lname" name="lname" type="text" required>

          Email address (include if you want a response):
          <input id="email" name="email" type="email">

<button>Submit</button>

      </fieldset>
    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>:out-of-range example</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">

    <form>
      <fieldset>
        <legend>Feedback form</legend>

Required fields are labelled with "required".

          Name:
          <input id="name" name="name" type="text" required>

          Age (must be 12+):
          <input id="age" name="age" type="number" min="12" max="120" required>

          Email address (include if you want a response):
          <input id="email" name="email" type="email">

<button>Submit</button>

      </fieldset>
    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>:valid and :invalid example</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">

    <form>
      <fieldset>
        <legend>Feedback form</legend>

Required fields are labelled with "required".

          First name:
          <input id="fname" name="fname" type="text" required>

          Last name:
          <input id="lname" name="lname" type="text" required>

          Email address (include if you want a response):
          <input id="email" name="email" type="email">

<button>Submit</button>

      </fieldset>
    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>:read-only demo — confirmation form</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">

    <form>
      <fieldset>
        <legend contenteditable="true">Check shipping details</legend>

          Name:
          <input id="name" name="name" type="text"
                 value="Mr Soft" readonly>

          Address:
          <textarea id="address" name="address" readonly>
23 Elastic Way,
Viscous,
Bright Ridge,
CA
</textarea>

          Zip/postal code:
          <input id="pcode" name="pcode" type="text"
                 value="94708" readonly>

      </fieldset>

      <fieldset>
        <legend>Final instructions</legend>

          Send confirmation by SMS?
          <input id="sms-confirm" name="sms-confirm" type="checkbox">

          Any special instructions?
          <textarea id="instructions" name="instructions"></textarea>

      </fieldset>

<button type="button">Amend details</button>

<button type="submit">Submit</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>:enabled and :disabled demo — shipping form</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">

    <form>
      <fieldset id="shipping">
        <legend>Shipping address</legend>

          Name:
          <input id="name1" name="name1" type="text" required>

          Address:
          <input id="address1" name="address1" type="text" required>

          Zip/postal code:
          <input id="pcode1" name="pcode1" type="text" required>

      </fieldset>
      <fieldset id="billing">
        <legend>Billing address</legend>

          Same as shipping address:
          <input type="checkbox" id="billing-checkbox" checked>

          Name:
          <input id="name" name="name" type="text" disabled required>

          Address:
          <input id="address2" name="address2" type="text" disabled required>

          Zip/postal code:
          <input id="pcode2" name="pcode2" type="text" disabled required>

      </fieldset>

<button>Submit</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>:required and :optional with generated content</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">

    <form>
      <fieldset>
        <legend>Feedback form</legend>

Required fields are labelled with "required".

          First name:
          <input id="fname" name="fname" type="text" required>

          Last name:
          <input id="lname" name="lname" type="text" required>

          Email address (include if you want a response):
          <input id="email" name="email" type="email">

<button>Submit</button>

      </fieldset>
    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Radio buttons :checked, :default</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">

  <form>
    <fieldset>
      <legend>Choose your favourite fruit</legend>

        <input type="radio" name="fruit" value="cherry" id="cherry">
        Cherry

        <input type="radio" name="fruit" value="banana" id="banana" checked>
        Banana

        <input type="radio" name="fruit" value="strawberry" id="strawberry">
        Strawberry

    </fieldset>
  </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Radio buttons :checked, :indeterminate</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">

  <form>
    <fieldset>
      <legend>Choose your favourite fruit</legend>

  <input type="radio" name="fruit" value="cherry" id="cherry">
  Cherry

        <input type="radio" name="fruit" value="banana" id="banana">
        Banana

        <input type="radio" name="fruit" value="strawberry" id="strawberry">
        Strawberry

    </fieldset>
  </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Basic :required and :optional demo</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">

    <form>
      <fieldset>
        <legend>Feedback form</legend>

          First name:
          <input id="fname" name="fname" type="text" required>

          Last name:
          <input id="lname" name="lname" type="text" required>

          Email address (include if you want a response):
          <input id="email" name="email" type="email">

<button>Submit</button>

      </fieldset>
    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Button examples</title>

    <form>

          <button type="submit">
            This a
submit button
          </button>

          <input type="submit" value="This is a submit button">

          <button type="reset">
              This a
reset button
          </button>

          <input type="reset" value="This is a reset button">

          <button type="button">
              This an
anonymous button
          </button>

          <input type="button" value="This is an anonymous button">

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Positioned legend example</title>

    <form>
        <fieldset>
          <legend>Choose all the vegetables you like to eat</legend>

              Carrots
              <input type="checkbox" checked id="carrots" name="carrots" value="carrots">

              Peas
              <input type="checkbox" id="peas" name="peas" value="peas">

              Cabbage
              <input type="checkbox" id="cabbage" name="cabbage" value="cabbage">

              Cauliflower
              <input type="checkbox" id="cauli" name="cauli" value="cauli">

              Broccoli
              <input type="checkbox" id="broc" name="broc" value="broc">

        </fieldset>
        <fieldset>
          <legend>What is your favorite meal?</legend>

              Soup
              <input type="radio" checked id="soup" name="meal" value="soup">

              Curry
              <input type="radio" id="curry" name="meal" value="curry">

              Pizza
              <input type="radio" id="pizza" name="meal" value="pizza">

              Tacos
              <input type="radio" id="tacos" name="meal" value="tacos">

              Bolognaise
              <input type="radio" id="bolognaise" name="meal"  value="bolognaise">

        </fieldset>
    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Multiple line text field example</title>

    <form>

          Add a comment here:
          <textarea cols="30" rows="10">
This is my default content.
          </textarea>

          <button type="submit">Submit me!</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Other examples</title>

    <form>

          Choose an image to upload
          <input type="file" name="file" id="file" accept="image/*" multiple>

          <input type="hidden" id="timestamp" name="timestamp" value="1286705410">

          <input type="image" name="pos" alt="Ramsbottom" src="map.png">

          <progress max="100" value="75">75/100</progress>

          <meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Drop down content examples</title>

    <form>

          A simple select box:
          <select id="simple" name="simple">
            <option>Banana</option>
            <option>Cherry</option>
            <option>Lemon</option>
          </select>

            Select box with option groups:
            <select id="groups" name="groups">
            <optgroup label="fruits">
              <option>Banana</option>
              <option selected>Cherry</option>
              <option>Lemon</option>
            </optgroup>
            <optgroup label="vegetables">
              <option>Carrot</option>
              <option>Eggplant</option>
              <option>Potato</option>
            </optgroup>
          </select>

            Select box allowing multiple selections:
            <select multiple id="multi" name="multi">
            <option>Banana</option>
            <option>Cherry</option>
            <option>Lemon</option>
          </select>

            What's your favorite fruit?
            <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
            <datalist id="mySuggestion">
              <option>Apple</option>
              <option>Banana</option>
              <option>Blackberry</option>
              <option>Blueberry</option>
              <option>Lemon</option>
              <option>Lychee</option>
              <option>Peach</option>
              <option>Pear</option>
            </datalist>

            What is your favorite fruit? (With fallback)
            <input type="text" id="myFruit" name="fruit" list="fruitList">
            <datalist id="fruitList">   or pick a fruit
              <select id="suggestion" name="altFruit">
                <option>Apple</option>
                <option>Banana</option>
                <option>Blackberry</option>
                <option>Blueberry</option>
                <option>Lemon</option>
                <option>Lychee</option>
                <option>Peach</option>
                <option>Pear</option>
              </select>
            </datalist>

            <button type="submit">Submit me!</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Advanced examples</title>

    <form>

          What is your age?
          <input type="number" name="age" id="age" min="1" max="10" step="2">

          How many beans can you eat?
          <input type="range" name="beans" id="beans" min="0" max="500" step="10">

          When are you available this summer?
          <input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">

          When shall we have the meeting?
          <input type="datetime-local" name="meet" id="meet">

          What month is your favorite?
          <input type="month" name="month" id="month">

          Set the time for your wifi fridge
          <input type="time" name="time" id="time">

          What is your favourite color?
          <input type="color" name="color" id="color">

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Checkable items examples</title>

    <form>
        <fieldset>
          <legend>Choose all the vegetables you like to eat</legend>

              Carrots
              <input type="checkbox" checked id="carrots" name="vegetable" value="carrots">

              Peas
              <input type="checkbox" id="peas" name="vegetable" value="peas">

              Cabbage
              <input type="checkbox" id="cabbage" name="vegetable" value="cabbage">

              Cauliflower
              <input type="checkbox" id="cauli" name="vegetable" value="cauli">

              Broccoli
              <input type="checkbox" id="broc" name="vegetable" value="broc">

        </fieldset>
        <fieldset>
          <legend>What is your favorite meal?</legend>

              Soup
              <input type="radio" checked id="soup" name="meal" value="soup">

              Curry
              <input type="radio" id="curry" name="meal" value="curry">

              Pizza
              <input type="radio" id="pizza" name="meal" value="pizza">

              Tacos
              <input type="radio" id="tacos" name="meal" value="tacos">

              Bolognaise
              <input type="radio" id="bolognaise" name="meal"  value="bolognaise">

        </fieldset>
    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Single line text field examples</title>

    <form>

          Add a comment here:
          <input type="text" id="comment" name="comment" value="I'm a text field">

          Enter your email address:
          <input type="email" id="email" name="email" multiple>

          Enter your password:
          <input type="password" id="pwd" name="pwd">

          Search:
          <input type="search" id="search" name="search">

          Enter your number:
          <input type="tel" id="tel" name="tel">

          Web address:
          <input type="url" id="url" name="url">

          <button type="submit">Submit me!</button>

    </form>


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>My test page</title>
    <style>
      select {
        /* font-family: cursive; */
      }
    </style>
  </head>
  <body>
    <select id="pet-select" name="pet" multiple size="4">
    <option value="none" selected>-- Please choose one or more --</option>
    <optgroup label="4-legged pets">
      <option value="dog">Dog</option>
      <option value="cat">Cat</option>
      <option value="hamster" disabled>Hamster</option>
    </optgroup>
    <optgroup label="Flying pets">
      <option value="parrot">Parrot</option>
      <option value="macaw">Macaw</option>
      <option value="albatross">Albatross</option>
    </optgroup>
</select>
  </body>
</html>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>fieldset and legend example</title>

    <form>
        <fieldset>
            <legend>Fruit juice size</legend>

 <input type="radio" name="size" id="size_1" value="small"> Small

 <input type="radio" name="size" id="size_2" value="medium"> Medium

 <input type="radio" name="size" id="size_3" value="large"> Large

        </fieldset>
    </form>


text:
h1 {
    margin-top: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

form {
    margin: 0 auto;
    width: 400px;
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
}

div+div {
    margin-top: 1em;
}

label span {
    display: inline-block;
    width: 120px;
    text-align: right;
}

input, textarea {
    font: 1em sans-serif;
    width: 250px;
    box-sizing: border-box;
    border: 1px solid #999;
}

input[type=checkbox], input[type=radio] {
    width: auto;
    border: none;
}

input:focus, textarea:focus {
    border-color: #000;
}

textarea {
    vertical-align: top;
    height: 5em;
    resize: vertical;
}

fieldset {
    width: 250px;
    box-sizing: border-box;
    margin-right: 136px;
    border: 1px solid #999;
}

button {
    margin: 20px 0 0 124px;
}

label {
  position: relative;
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Payment form example</title>
    <link href="payment-form.css" rel="stylesheet">

    <form method="post">

Payment form

Required fields are followed by *.

Contact information

            <fieldset>
              <legend>Title</legend>

                      <input type="radio" id="title_1" name="title" value="A">
                      Ace

                      <input type="radio" id="title_2" name="title" value="K" >
                      King

                      <input type="radio" id="title_3" name="title" value="Q">
                      Queen

            </fieldset>

                Name:
                *

              <input type="text" id="name" name="username" required>

                E-mail:
                *

              <input type="email" id="mail" name="usermail" required>

                Password:
                *

              <input type="password" id="pwd" name="password" required>

Payment information

                Card type:

              <select id="card" name="usercard">
                <option value="visa">Visa</option>
                <option value="mc">Mastercard</option>
                <option value="amex">American Express</option>
              </select>

                Card number:
                *

                <input type="tel" id="number" name="cardnumber" required>

                Expiration date:
                *

              <input type="text" id="expiration" required="true" placeholder="MM/YY" pattern="^(0[1-9]|1[0-2])\/([0-9]{2})$">

 <button type="submit">Validate the payment</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Checkbox label example</title>

    <form>

            <input type="checkbox" id="taste_1" name="taste_cherry" value="cherry">
            I like cherry

            <input type="checkbox" id="taste_2" name="taste_banana" value="banana">
            I like banana

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Required label examples</title>

    <form>

Required fields are followed by *.

          Name: *
          <input id="username" type="text" name="username">

    </form>


text:
<!DOCTYPE html>

		<meta charset="utf-8" />
		<title>Your first HTML form, styled</title>

		<form action="/my-handling-form-page" method="post">

					Name:
					<input type="text" id="name" name="user_name" />

					E-mail:
					<input type="email" id="mail" name="user_mail" />

					Message:
					<textarea id="msg" name="user_message"></textarea>

					<button type="submit">Send your message</button>

		</form>


text:
<!DOCTYPE html>

		<meta charset="utf-8" />
		<title>Your first HTML form</title>

		<form action="/my-handling-form-page" method="post">

					Name:
					<input type="text" id="name" name="user_name" />

					E-mail:
					<input type="email" id="mail" name="user_mail" />

					Message:
					<textarea id="msg" name="user_message"></textarea>

					<button type="submit">Send your message</button>

		</form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Toggle switch example</title>

        <input type="checkbox" name="power" id="power">
        On Off


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Postcard example</title>

  <form>

to: Mozilla

      from:
      <input type="text" id="name" name="user_name">

      reply:
      <input type="email" id="mail" name="user_email">

      Your message:
      <textarea id="msg" name="user_message"></textarea>

      <button type="submit">Send your message</button>

  </form>


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Postcard example</title>
    <style>

    </style>
  </head>

<body>

</body>

</html>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title><input type="datetime-local"> example</title>

<form>

        Choose your preferred party date and time (required, June 1st 8.30am to June 30th 4.30pm):
        <input id="party" type="datetime-local" name="partydate"
               min="2017-06-01T08:30" max="2017-06-30T16:30"
               pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required>

        <input type="submit" value="Book party!">

    <input type="hidden" id="timezone" name="timezone" value="-08:00">
</form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Checkboxes styled</title>

  <form>
    <fieldset>
      <legend>Fruit preferences</legend>

          <input type="checkbox" name="fruit" value="cherry">
          I like cherry

          <input type="checkbox" name="fruit" value="banana" disabled>
          I can't like banana

          <input type="checkbox" name="fruit" value="strawberry">
          I like strawberry

    </fieldset>
  </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Styled file picker example</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">

    <form>

        Choose a file to upload
        <input id="file" name="file" type="file" multiple>

<button>Submit?</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Search Appearance</title>

    <form>

        search:
        <input id="search1" name="search1" type="search">

    </form>

    <form>

        search:
        <input id="search2" name="search2" type="search">

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Ugly controls basic styling</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">

    <form>

        Select box:

            <select id="select" name="select">
              <option>Banana</option>
              <option>Cherry</option>
              <option>Lemon</option>
            </select>

        "Favorite fruit?" datalist:
        <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
        <datalist id="mySuggestion">
          <option>Apple</option>
          <option>Banana</option>
          <option>Blackberry</option>
          <option>Blueberry</option>
          <option>Lemon</option>
          <option>Lychee</option>
          <option>Peach</option>
          <option>Pear</option>
        </datalist>

        Datetime local:
        <input id="date1" name="date1" type="datetime-local">

        Range:
        <input id="range" name="range" type="range">

        Color:
        <input id="color" name="color" type="color">

        File picker:
        <input id="file" name="file" type="file" multiple>

        Progress:
        <progress max="100" value="75" id="progress">75/100</progress>

        Meter:
        <meter  id="meter" min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>

<button>Submit?</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Radio buttons styled</title>

  <form>
    <fieldset>
      <legend>Choose your favourite fruit</legend>

          <input type="radio" name="fruit" value="cherry">
          Cherry

          <input type="radio" name="fruit" value="banana">
          Banana

          <input type="radio" name="fruit" value="strawberry">
          Strawberry

    </fieldset>
  </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Styled search</title>

    <form>

        search:
        <input id="search2" name="search2" type="search">

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Appearance Tester</title>

    <form>

        search:
        <input id="search1" name="search1" type="search">

        text:
        <input id="text1" name="text1" type="text">

        date:
        <input id="date1" name="date1" type="datetime-local">

        radio:
        <input id="radio1" name="radio1" type="radio">

        checkbox:
        <input id="checkbox1" name="checkbox1" type="checkbox">

<input type="submit" value="submit">

<input type="button" value="button">

    </form>

    <form>

        search:
        <input id="search2" name="search2" type="search">

        text:
        <input id="text2" name="text2" type="text">

        date:
        <input id="date2" name="date2" type="datetime-local">

        radio:
        <input id="radio2" name="radio2" type="radio">

        checkbox:
        <input id="checkbox2" name="checkbox2" type="checkbox">

<input type="submit" value="submit">

<input type="button" value="button">

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title><input type="tel"> example</title>

    <form>

        Choose your country:
        <select id="country" name="country">
          <option>UK</option>
          <option selected>US</option>
          <option>Germany</option>
        </select>

Enter your telephone number:

          <input id="areaNo" name="areaNo" type="tel" required
                 placeholder="Area code" pattern="[0-9]{3}"
                 aria-label="Area code">

          <input id="number1" name="number1" type="tel" required
                 placeholder="First part" pattern="[0-9]{3}"
                 aria-label="First part of number">

          <input id="number2" name="number2" type="tel" required
                 placeholder="Second part" pattern="[0-9]{4}"
                 aria-label="Second part of number">

        <button>Submit</button>

    </form>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>School timetable</title>

School timetable

        Mon
        Tues
        Wed
        Thurs
        Fri
        Sat
        Sun

        1st period
        English

        German
        Dutch

        2nd period
        English
        English

        German
        Dutch

        3rd period

        German

        German
        Dutch

        4th period

        English

        English
        Dutch


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Personal pronouns table</title>

Personal pronouns table

Personal pronouns

       Subject
       Object

       Singular
       1st Person
       I
       me

       2nd Person
       you
       you

       3rd Person
       ♂
       he
       him

       ♀
       she
       her

       o
       it
       it

       Plural
       1st Person
       we
       we

       2nd Person
       you
       you

       3rd Person
       they
       they


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Table template</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">

Table template


text:
html {
  font-family: sans-serif;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(200,200,200);
  letter-spacing: 1px;
  font-size: 0.8rem;
}

td, th {
  border: 1px solid rgb(190,190,190);
  padding: 10px 20px;
}

th {
  background-color: rgb(235,235,235);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
  background-color: rgb(245,245,245);
}

caption {
  padding: 10px;
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Dogs table</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">

Dogs Table

        Knocky
        Flor
        Ella
        Juan

        Breed
        Jack Russell
        Poodle
        Streetdog
        Cocker Spaniel

        Age
        16
        9
        10
        5

        Owner
        Mother-in-law
        Me
        Me
        Sister-in-law

        Eating Habits
        Eats everyone's leftovers
        Nibbles at food
        Hearty eater
        Will eat till he explodes


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Animals table</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">

Animals table

        Animals

        Hippopotamus

        Horse
        Mare

        Stallion

        Crocodile

        Chicken
        Hen

        Rooster


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple table</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">

Simple table

        Hi, I'm your first cell.
        I'm your second cell.
        I'm your third cell.
        I'm your fourth cell.

        Second row, first cell.
        Cell 2.
        Cell 3.
        Cell 4.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>School timetable</title>

School timetable

      <colgroup>
        <col span="2">
        <col style="background-color:#97DB9A;">
        <col style="width:42px;">
        <col style="background-color:#97DB9A;">
        <col style="background-color:#DCC48E; border:4px solid #C1437A;">
        <col span="2" style="width:42px;">
      </colgroup>

        Mon
        Tues
        Wed
        Thurs
        Fri
        Sat
        Sun

        1st period
        English

        German
        Dutch

        2nd period
        English
        English

        German
        Dutch

        3rd period

        German

        German
        Dutch

        4th period

        English

        English
        Dutch


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Personal pronouns table</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">

Personal pronouns table

Personal pronouns

       Subject
       Object

       Singular
       1st Person
       I
       me

       2nd Person
       you
       you

       3rd Person
       ♂
       he
       him

       ♀
       she
       her

       o
       it
       it

       Plural
       1st Person
       we
       we

       2nd Person
       you
       you

       3rd Person
       they
       they


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>School timetable</title>

School timetable

Florence's weekly lesson timetable

      <colgroup>
        <col span="2">
        <col style="background-color:#97DB9A;">
        <col style="width:42px;">
        <col style="background-color:#97DB9A;">
        <col style="background-color:#DCC48E; border:4px solid #C1437A;">
        <col span="2" style="width:42px;">
      </colgroup>

        Mon
        Tues
        Wed
        Thurs
        Fri
        Sat
        Sun

        1st period
        English

        German
        Dutch

        2nd period
        English
        English

        German
        Dutch

        3rd period

        German

        German
        Dutch

        4th period

        English

        English
        Dutch


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Nested tables</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">

Nested tables

            title1
            title2
            title3

                        cell1
                        cell2
                        cell3

            cell2
            cell3

            cell4
            cell5
            cell6


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Items sold summary</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">

Items sold summary

Items Sold August 2016

            Clothes
            Accessories

            Trousers
            Skirts
            Dresses
            Bracelets
            Rings

            Belgium
            Antwerp
            56
            22
            43
            72
            23

            Gent
            46
            18
            50
            61
            15

           Brussels
           51
           27
           38
           69
           28

           The Netherlands
           Amsterdam
           89
           34
           69
           85
           38

           Utrecht
           80
           12
           43
           36
           19


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>My spending record</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">

My spending record

How I chose to spend my money

            Purchase
            Location
            Date
            Evaluation
            Cost (€)

            SUM
            118

            Haircut
            Hairdresser
            12/09
            Great idea
            30

            Lasagna
            Restaurant
            12/09
            Regrets
            18

            Shoes
            Shoeshop
            13/09
            Big regrets
            65

            Toothpaste
            Supermarket
            13/09
            Good
            5


text:
Rows

Terrestrial planets

Mercury 0.330 4,879 5427 3.7 4222.6 57.9 167 0 Closest to the Sun
Venus 4.87 12,104 5243 8.9 2802.0 108.2 464 0
Earth 5.97 12,756 5514 9.8 24.0 149.6 15 1 Our world
Mars 0.642 6,792 3933 3.7 24.7 227.9 -65 2 The red planet

Jovian planets

Gas giants

Jupiter 1898 142,984 1326 23.1 9.9 778.6 -110 67 The largest planet
Saturn 568 120,536 687 9.0 10.7 1433.5 -140 62

Ice giants

Uranus 86.8 51,118 1271 8.7 17.2 2872.5 -195 27
Neptune 102 49,528 1638 11.0 16.1 4495.1 -200 14

Dwarf planets*

Pluto 0.0146 2,370 2095 0.7 153.3 5906.4 -225 5 Declassified as a planet in 2006, but this remains controversial.

Columns

Name
Mass (1024kg)
Diameter (km)
Density (kg/m3)
Gravity (m/s2)
Length of day (hours)
Distance from Sun (106km)
Mean temperature (°C)
Number of moons
Notes

Caption

Data about the planets of our solar system (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric).


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Planets data</title>
    <link href="minimal-table.css" rel="stylesheet" type="text/css">

Planets data

Data about the planets of our solar system (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric).

      <colgroup>
        <col span="2">
        <col style="border: 2px solid black">
        <col span="9">
      </colgroup>

          Name
          Mass (1024kg)
          Diameter (km)
          Density (kg/m3)
          Gravity (m/s2)
          Length of day (hours)
          Distance from Sun (106km)
          Mean temperature (°C)
          Number of moons
          Notes

          Terrestrial planets
          Mercury
          0.330
          4,879
          5427
          3.7
          4222.6
          57.9
          167
          0
          Closest to the Sun

          Venus
          4.87
          12,104
          5243
          8.9
          2802.0
          108.2
          464
          0

          Earth
          5.97
          12,756
          5514
          9.8
          24.0
          149.6
          15
          1
          Our world

          Mars
          0.642
          6,792
          3933
          3.7
          24.7
          227.9
          -65
          2
          The red planet

          Jovian planets
          Gas giants
          Jupiter
          1898
          142,984
          1326
          23.1
          9.9
          778.6
          -110
          67
          The largest planet

          Saturn
          568
          120,536
          687
          9.0
          10.7
          1433.5
          -140
          62

          Ice giants
          Uranus
          86.8
          51,118
          1271
          8.7
          17.2
          2872.5
          -195
          27

          Neptune
          102
          49,528
          1638
          11.0
          16.1
          4495.1
          -200
          14

          Dwarf planets
          Pluto
          0.0146
          2,370
          2095
          0.7
          153.3
          5906.4
          -225
          5
          Declassified as a planet in 2006, but this remains controversial.


text:
# Marking guide for "Structuring planet data"
The following guide outlines a marking guide for the MDN Learning Area HTML Topic — [Structuring planet data](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Structuring_planet_data). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth.

Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clearly cut.

The overall mark awarded is out of 34. Work out their final mark, and then divide by 34 and multiply by 100 to give a percentage mark. For reference, you can find a [finished marked up page](planets-data.html) that would be awarded top marks.

## Block/structural semantics

Giving the table a basic high level structure — an outer container, a table header, and a table body (3 marks.)

This is pretty simple. The student just needs to include a <table> element in the page, with a <thead> and <tbody> as children.

Add the provided caption to your table. (2 marks)

Again, simple, but it needs it be put in the right place — the provided caption needs to be put in a <caption> element, right below the opening <table> tag.

Add a row to the table header containing all the column headers (5 marks).

The student needs to:

Put the cells of the row inside a <tr> element and use <th> elements for the cells because they are headers (2 marks).

Put the column header text in each cell correctly, copied from the raw data (1 mark).

Leave a two-column gap at the start of the row — this is best done with a single cell with colspan="2" set on it, but we would accept two cells (2 marks).

Note: Giving the planet names column a header of "Name" is recommended, but they won't lose a mark if they forget this.

Create all the content rows inside the table body, remembering to make all the row headings into headings semantically (15 marks).

This is the most difficult part of the table — it requires getting all the group row headings in the right rows, and making them span the right number of rows and columns.

First of all, each row needs to be put inside the <tbody> (1 mark).

Each row needs to contain a <th> element containing the planet name at the start followed by nine <td> elements containing the planet's data (5 marks). Give full marks if this is mostly right with a couple of typos, but start to reduce the mark at your discretion if significant data points are wrong, wrongly placed, or omitted. Take two marks off if the planet names are not put in headers.

The first body row needs to contain an extra <th> element at the start of it, containing "Terrestial planets", with rowspan="4" and colspan="2" (2 marks).

The fifth body row needs to contain two extra <th> elements at the start, containing "Jovian planets" and "Gas giants" respectively. The former needs rowspan="4", and the latter needs rowspan="2" (3 marks).

The seventh body row needs to contain an extra <th> element at the start, containing "Ice giants", with rowspan="2" (2 marks).

The ninth body row needs to contain an extra <th> element at the start, containing "Dwarf planets", with colspan="2" (2 marks).

Add attributes to make the row and column headers unambiguously associated with the rows, columns, or rowgroups that they act as headings for (5 marks).

    The student needs to add the scope value to all the <th> elements, giving them appropriate values as shown below:

col: All the <th> elements in the table header row.

row: All the <th> elements containing planet names, and the one containing "Dwarf planets" (it is also a heading over only one row).

rowgroup: The <th> elements containing "Terrestial planets", "Jovian planets", "Gas giants", and "Ice giants".

Add a black border just around the column that contains all the planet name row headers (4 marks).

The easiest way to do this is to:

Add a <colgroup> element just below the <caption> element.

Inside this, nest two <col> elements, one with a span="2" attribute, and the other with a style attribute along the lines of style="border: 2px solid black".

Notes: It would be acceptable to define all the columns in the table inside the colgroup, although you don't need to. Adding the style to each cell in the column individual would not be acceptable — this would put the styling around every cell in the column, not the column.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Images in HTML</title>

Images in HTML


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Responsive HTML images demo</title>

My website

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget venenatis ligula. Ut lacinia at dolor vitae pulvinar. Aliquam pretium dignissim eros. Integer faucibus, dui non aliquet bibendum, lectus orci lobortis odio, ornare porttitor est tellus eget velit. Nulla eros elit, malesuada id neque vel, viverra vehicula neque. Nullam auctor turpis non leo iaculis finibus. Quisque blandit arcu venenatis libero tempor, ac pulvinar ligula dapibus.

        <picture>
          <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
          <source media="(min-width: 800px)" srcset="elva-800w.jpg">

        </picture>

Suspendisse potenti. Ut in luctus eros. Mauris pulvinar vehicula aliquet. Etiam imperdiet eleifend luctus. Duis ut justo nec eros ornare consectetur. Vestibulum convallis condimentum varius. Maecenas rutrum porta varius. Phasellus volutpat sem id sagittis luctus. Morbi vitae quam vitae nisi iaculis dignissim.

Header image originally by Miwok.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Not responsive demo</title>

My website

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget venenatis ligula. Ut lacinia at dolor vitae pulvinar. Aliquam pretium dignissim eros. Integer faucibus, dui non aliquet bibendum, lectus orci lobortis odio, ornare porttitor est tellus eget velit. Nulla eros elit, malesuada id neque vel, viverra vehicula neque. Nullam auctor turpis non leo iaculis finibus. Quisque blandit arcu venenatis libero tempor, ac pulvinar ligula dapibus.

Suspendisse potenti. Ut in luctus eros. Mauris pulvinar vehicula aliquet. Etiam imperdiet eleifend luctus. Duis ut justo nec eros ornare consectetur. Vestibulum convallis condimentum varius. Maecenas rutrum porta varius. Phasellus volutpat sem id sagittis luctus. Morbi vitae quam vitae nisi iaculis dignissim.

Header image originally by Miwok.


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Responsive HTML images demo</title>
    <style>

      img {
        width: 320px;
      }

    </style>
  </head>
  <body>

        <img srcset="elva-fairy-320w.jpg,
                     elva-fairy-480w.jpg 1.5x,
                     elva-fairy-640w.jpg 2x"
             src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

  </body>
</html>


text:
/* Some default styling for cookbook examples */
/*
rgb(53,43,34)
rgb(75,70,74)
rgb(95,97,110)
rgb(137,151,188)
rgb(160,178,226)
*/
body {
    background-color: #fff;
    color: #333;
    font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
    padding: 0;
    margin: 0;
}

h1 {
  font-size: 2rem;
  margin: 0;
}

h2 {
  font-size: 1.6rem;
  margin: 0;
}

p {
  margin: 0.5em 0;
}

/* styles for the editor */

.playable {
    font-family: monospace;
    display: block;
    margin-bottom: 10px;
    background-color: #F4F7F8;
    border: none;
    border-left: 6px solid #558ABB;
    color: #4D4E53;
    width: 90%;
    max-width: 700px;
    padding: 10px 10px 0px;
    font-size: 90%;
  }

  .playable-css {
    height: 80px;
  }

  .playable-html {
    height: 160px;
  }

  .playable-buttons {
    text-align: right;
    width: 90%;
    max-width: 700px;
    padding: 5px 10px 5px 26px;
    font-size: 100%;
  }

  .preview {
    width: 90%;
    max-width: 700px;
    border: 1px solid #4D4E53;
    border-radius: 2px;
    padding: 10px 14px 10px 10px;
    margin-bottom: 10px;
  }

  .preview input {
    display: block;
    margin: 5px;
  }


text:
var section = document.querySelector('section');
var editable = document.querySelector('.editable');
var textareaHTML = document.querySelector('.playable-html');
var textareaCSS = document.querySelector('.playable-css');
var reset = document.getElementById('reset');
var htmlCode = textareaHTML.value;
var cssCode = textareaCSS.value;

function fillCode() {
    editable.innerHTML = textareaCSS.value;
    section.innerHTML = textareaHTML.value;
}

reset.addEventListener('click', function () {
    textareaHTML.value = htmlCode;
    textareaCSS.value = cssCode;
    fillCode();
});

textareaHTML.addEventListener('input', fillCode);
textareaCSS.addEventListener('input', fillCode);
window.addEventListener('load', fillCode);


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>HTML images: Task 2</title>
    <link rel="stylesheet" href="../styles.css" />

Basic image title

    <textarea class="playable playable-css" style="height: 130px;">
img {
  border: 1px solid black;
  max-width: 100%;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

Basic image title

    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>HTML images: Task 3</title>
    <link rel="stylesheet" href="../styles.css" />

Image and caption

    	The Firefox logo, newly abstracted for 2019!

    <textarea class="playable playable-css" style="height: 130px;">

    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

Image and caption

The Firefox logo, newly abstracted for 2019!
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
# Images marking guide

The aim of the tasks is to demonstrate an understanding of the HTML features covered in the [Images in HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML) lesson in Learn Web Development on MDN.

## Task 1

This task tests your ability to embed a simple image on the page, give it some alternative text, and give it some `width` and `height` attributes. Ideally the answer should look something like this:

```
<h1>Basic image embed</h1>

<img src="images/blueberries.jpg"
     alt="A pile of blueberries, small, round, blue berries"
     width="615" height="419">
```

The filename and path must be correct for the image to show up. The `alt` text should describe the visual appeareance of image for those that can't see it. Finally, the `width` and `height` attributes should contain the same values as the image's intrinsic width and height, so it displays at the correct size.

## Task 2

Here the student needs to add a `title` to the `<image>` element to create a tooltip that appears when moused over. The code would look something like this:

```
<h1>Basic image title</h1>

<img src="larch.jpg"
     alt="Several tall evergreen trees called larches"
     title="Number 1 in Monty Python's How to recognise different trees from quite a long way away">
```

Because screenreader support is unreliable and potentially unhelpful, information contained in the `title` attributes should be non-essential. Here were are just having a bit of fun.

## Task 3

In task 3 the student needs to create an image that is associated with a caption inside the HTML itself.

The finished would probably look like this:

```
<h1>Image and caption</h1>

<figure>
	<img src="firefox.png"
	     alt="An abstract flaming fox wrapping around a blue sphere"
	     width="446" height="460">
	<figcaption>The Firefox logo, newly abstracted for 2019!</figcaption>
</figure>
```

Note that the caption should contain additional information, and not just repeat the image description found in the `alt` text.


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>HTML images: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />

Basic image embed

    <textarea class="playable playable-css" style="height: 130px;">
img {
  border: 1px solid black;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

Basic image embed

    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>HTML images: Task 1</title>

Basic image embed


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>HTML images: Task 2</title>

Basic image title


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>HTML images: Task 3</title>

Image and caption

  	The Firefox logo, newly abstracted for 2019!


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Media/embedding: Task 1</title>
    <link rel="stylesheet" href="../styles.css" />

Basic audio embed

      <audio>
      </audio>

    <textarea class="playable playable-css" style="height: 130px;">
audio {
  border: 1px solid black;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

Basic audio embed

<audio>
</audio>
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
# Media and embedding marking guide

The aim of the tasks is to demonstrate an understanding of the HTML features covered in the [Video and audio content](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content) and [From object to iframe — other embedding technologies](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies) lessons in Learn Web Development on MDN.

## Task 1

This task tests your ability to put together a simple audio player with a single source. Ideally the answer should look something like this:

```
<h1>Basic audio embed</h1>

<audio src="media/audio.mp3" controls>
  <p>Your browser doesn't support HTML5 audio. Here is a <a href="media/audio.mp3">link to the audio</a> instead.</p>
</audio>
```

The filename and path must be correct for the audio to show up. The `controls` attribute should be included so we can easily play the audio, and the fallback text is also a best practice, although most browsers will support this now.

## Task 2

In this next task we're doing something a bit more complex; a full-featured video player with multiple sources. The code would look something like this:

```
<h1>Video embed</h1>

<video controls muted
       width="320" height="240">
  <source src="media/video.mp4" type="video/mp4">
  <source src="media/video.webm" type="video/webm">
  <track kind="subtitles" src="media/subtitles_en.vtt" srclang="en">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="media/video.mp4">link to the video</a> instead.</p>
</video>
```

Here we've got a number of things that need to be put in place:

* `controls` to make the controls appear.
* `width` and `height` as requested.
* `muted` to make sure no sound is played, as per the requirements.
* two separate `<source>` elements pointing to the two different video formats, to provide support in older browsers that don't support MP4 and instead support WebM. Each should be given a `type` attribute to indicate what the video's MIME type is, so the browser can tell up front if it can play with video without needing to start downloading it.
* A `<track>` element to display the subtitles, with appropriate `kind`, `src`, and `srclang` attributes.
* Suitable fallback content, as before.

Note that the subtitles will not load if you try to run the example locally, due to browser security policy. To see the subtitles you must run the example from an actual web server.

## Task 3

In task 3 the student needs to test embedding techniques.

The finished code would probably look like something this:

```
<h1>Embedding</h1>

<object data="media/mypdf.pdf" type="application/pdf"
        width="400" height="400">
</object>

<hr>

<iframe width="560" height="315" src="https://www.youtube.com/embed/SB-qEYVdvXA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

```

In the first example, you just need to look up the correct code to embed a PDF in the page, making sure you get the path to the PDF file correct.

In the second example, you'll need to go to YouTube, Google Maps, or a similar site, find the embed functionality, and copy over the embed code into the live example. This code will look markedly different depending on what service you use.


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Media/embedding: Task 3</title>

Embedding


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Media/embedding: Task 2</title>
    <link rel="stylesheet" href="../styles.css" />

Video embed

      <video>
      </video>

    <textarea class="playable playable-css" style="height: 130px;">
video {
  border: 1px solid black;
}
    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

Video embed

<video>
</video>
    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Media/embedding: Task 2</title>

Video embed

    <video>
    </video>


text:
<!DOCTYPE html>

    <meta charset="utf-8"/>
    <title>Media/embedding: Task 1</title>

Basic audio embed

    <audio>

    </audio>


text:
<!DOCTYPE html>

    <meta charset="utf-8" />
    <title>Media/embedding: Task 3</title>
    <link rel="stylesheet" href="../styles.css" />

Embedding

    <textarea class="playable playable-css" style="height: 130px;">

    </textarea>

    <textarea class="playable playable-html" style="height: 220px;">

Embedding

    </textarea>

      <input id="reset" type="button" value="Reset" />


text:
WEBVTT

1
00:00:02.010 --> 00:00:03.500
This is the first subtitle.

2
00:00:05.739 --> 00:00:06.074
This is the second.

3
00:00:06.901 --> 00:00:08.000
And this is the third!


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Vector versus raster</title>

Vector versus raster


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Simple video example</title>

Below is a simple video example

    <video src="rabbit320.webm" controls>

Your browser doesn't support HTML5 video. Here is a link to the video instead.

    </video>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Multiple format video example</title>

Below is a video that will play in all modern browsers

    <video controls>
      <source src="rabbit320.mp4" type="video/mp4">
      <source src="rabbit320.webm" type="video/webm">

Your browser doesn't support HTML5 video. Here is a link to the video instead.

    </video>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Extra video features example</title>

Extra video features example

    <video controls width="400" height="400"
           loop muted preload="auto"
           poster="poster.png">
      <source src="rabbit320.mp4" type="video/mp4">
      <source src="rabbit320.webm" type="video/webm">

Your browser doesn't support HTML5 video. Here is a link to the video instead.

    </video>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Multiple format audio example</title>

Below is an audio player that will play in all modern browsers

    <audio controls>
      <source src="viper.mp3" type="audio/mp3">
      <source src="viper.ogg" type="audio/ogg">

Your browser doesn't support HTML5 audio. Here is a link to the audio instead.

    </audio>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Multiple format video example</title>

Below is a video that will play in all modern browsers

    <video>
      <source src="rabbit320.mp4" type="video/mp4">
      <source src="rabbit320.webm" type="video/webm">

Your browser doesn't support HTML5 video. Here is a link to the video instead.

    </video>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Iframe youtube example</title>

Everybody loves Nyancat

    \n


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Iframe with basic details</title>

Iframe with basic details

  Fallback link for browsers that don't support iframes


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Object element example</title>

Object element example

    <object data="dinosaur.jpg" type="image/jpeg" width="400" height="341">

Why oh why didn't we just use the image element?

    </object>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Object element example</title>

Object element example

    <object data="mypdf.pdf" type="application/pdf" width="800" height="1200">

You don't have a PDF plugin, but you can download the PDF file.

    </object>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Mozilla splash page</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

Mozilla

Rocking the free web

Mozilla are a global community of technologists, thinkers, and builders, working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.

Click on the images below to find more information about the cool stuff Mozilla does. Red panda picture by Mathias Appel.


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Mozilla splash page</title>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

Mozilla

Rocking the free web

Mozilla are a global community of technologists, thinkers, and builders, working together to keep the Internet alive and accessible, so people worldwide can be informed contributors and creators of the Web. We believe this act of human collaboration across an open platform is essential to individual growth and our collective future.

Click on the images below to find more information about the cool stuff Mozilla does. Red panda picture by Mathias Appel.

        <picture>
          <source media="(max-width: 600px)" srcset="red-panda-portrait-small.jpg">

        </picture>


text:
# Marking guide for "Mozilla splash page"
The following article outlines a marking guide for the MDN Learning Area HTML Assessment — [Mozilla splash page](https://developer.mozilla.org/en-US/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page). Each subtask detailed in the assessment is listed below, along with an explanation of how many marks the task is worth, and the mark breakdown.

Note: These are guidelines, not set in stone rules — you are of course free to use your judgement on mark awarding when you meet an edge case, or something that isn't clearly cut.

The overall mark awarded is out of 28. Work out their final mark, and then divide by 28 and multiply by 100 to give a percentage mark. For reference, you can find a [finished splash page](index.html) that would be awarded top marks.

## Preparing images

A total of 6 marks should be awarded for this section

1 for creating the 400px and 120px version of the Firefox logo.

1 for creating the 400px and 120px version of the Addons image.

1 for creating the 400px and 120px version of the Dinosaur logo.

1 for leaving the MDN logo SVG as it is.

1 for creating the 1200px and 600px version of the Red Panda image, but only if the former is landscape, and the latter is portrait and shows the panda close up.

1 for optimizing them so they are nice and compact.

## Adding a logo to the header

A total of 2 marks should be awarded for this section

1 for making the image src point to the 120px version of the Firefox logo.

1 for giving the image appropriate alt text.

## Adding a video to the main article content

A total of 2 marks should be awarded for this section

1 for embedding the correct video.

1 for making it 400px wide, and a reasonable amount tall.

## Adding responsive images to the further info links

A total of 14 marks should be awarded for this section

4 for each of the first three links. To get full marks for each one, the student must:

Use the correct image inside the link (Firefox logo for "Download Firefox", Dinosaur for mozilla.org, Add-ons image for the add-ons site.)

Include an appropriate src and alt attribute.

Include a srcset attribute that declares the 120px version of the image as 120w, and the 400px version of 400w.

Include a sizes attribute that declares that the 120px version should be used if the viewport is 500px wide or narrower ((max-width: 500px)), and the 400px version should be used otherwise.

2 for embedding the SVG image inside the last link, just in a normal image element, with appropriate src attribute and alt text.

## An art directed red panda

A total of 5 marks should be awarded for this section

1 for using a <picture> element.

2 for including an <img> element inside the <picture> element, pointing to the landscape version, with appropriate alt text.

2 for including a <source> element with a srcset attribute pointing to the portrait version of the image, and a media attribute that causes the portrait image to show up only if the viewport is 600px wide or less ((max-width: 600px).)


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping list example</title>

My shopping list

      Enter a new item:
      <input type="text" name="item" id="item">
      <button>Add item</button>


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple DOM example</title>

Here we will add a link to the Mozilla homepage


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NY Times API example</title>

    <link href="style.css" rel="stylesheet">

NY Times article search

      <form>

          Enter a SINGLE search term (required):
          <input type="text" id="search" class="search" required>

          Enter a start date (format YYYYMMDD):
          <input type="date" id="start-date" class="start-date" pattern="[0-9]{8}">

          Enter an end date (format YYYYMMDD):
          <input type="date" id="end-date" class="end-date" pattern="[0-9]{8}">

          <button class="submit">Submit search</button>

      </form>

        <button class="prev">Previous 10</button>
        <button class="next">Next 10</button>


text:
body {
  font-family: sans-serif;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

.controls, .results {
  flex: 1;
  padding: 10px;
}

form p:nth-of-type(1) {
  margin-top: 0;
}

h1 {
  text-align: center;
}

h2 {
  font-size: 20px;
}

article p {
  font-size: 14px;
  line-height: 1.5;
}

article p.keywords {
  line-height: 2;
}

nav {
  margin-bottom: 50px;
}

.prev {
  float: left;
}

.next {
  float: right;
}

article {
  padding: 10px;
  margin-bottom: 20px;
  background-color: #ddd;
  border: 1px solid #ccc;
}

img {
  float: right;
  margin-left: 20px;
  max-width: 200px;
}

span {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
}


text:
// Defining a baseURL and key to as part of the request URL

const baseURL = 'https://api.nytimes.com/svc/search/v2/articlesearch.json';
const key = 'INSERT-YOUR-API-KEY-HERE';

// Grab references to all the DOM elements you'll need to manipulate
const searchTerm = document.querySelector('.search');
const startDate = document.querySelector('.start-date');
const endDate = document.querySelector('.end-date');
const searchForm = document.querySelector('form');
const nextBtn = document.querySelector('.next');
const previousBtn = document.querySelector('.prev');
const section = document.querySelector('section');
const nav = document.querySelector('nav');

// Hide the "Previous"/"Next" navigation to begin with, as we don't need it immediately
nav.style.display = 'none';

// define the initial page number and status of the navigation being displayed
let pageNumber = 0;

// Event listeners to control the functionality


text:
body {
  font-family: sans-serif;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

.controls, .results {
  flex: 1;
  padding: 10px;
}

form p:nth-of-type(1) {
  margin-top: 0;
}

h1 {
  text-align: center;
}

h2 {
  font-size: 20px;
}

article p {
  font-size: 14px;
  line-height: 1.5;
}

article p.keywords {
  font-size: 14px;
  line-height: 2;
}

nav {
  margin-bottom: 50px;
}

.prev {
  float: left;
}

.next {
  float: right;
}

article {
  padding: 10px;
  margin-bottom: 20px;
  background-color: #ddd;
  border: 1px solid #ccc;
}

img {
  float: right;
  margin-left: 20px;
  max-width: 200px;
}

span {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
}


text:
// Defining a baseURL and key to as part of the request URL

const baseURL = 'https://api.nytimes.com/svc/search/v2/articlesearch.json';
const key = '3Cm3bHxG1I3ROE2N94Y8vw7347XEAaQk';

// Grab references to all the DOM elements you'll need to manipulate
const searchTerm = document.querySelector('.search');
const startDate = document.querySelector('.start-date');
const endDate = document.querySelector('.end-date');
const searchForm = document.querySelector('form');
const nextBtn = document.querySelector('.next');
const previousBtn = document.querySelector('.prev');
const section = document.querySelector('section');
const nav = document.querySelector('nav');

// Hide the "Previous"/"Next" navigation to begin with, as we don't need it immediately
nav.style.display = 'none';

// define the initial page number and status of the navigation being displayed
let pageNumber = 0;

// Event listeners to control the functionality
searchForm.addEventListener('submit', submitSearch);
nextBtn.addEventListener('click', nextPage);
previousBtn.addEventListener('click', previousPage);

function submitSearch(e){
  pageNumber = 0;
  fetchResults(e);
}

function fetchResults(e) {
  // Use preventDefault() to stop the form submitting
  e.preventDefault();

  // Assemble the full URL
  let url = `${baseURL}?api-key=${key}&page=${pageNumber}&q=${searchTerm.value}&fq=document_type:("article")`;

  if (startDate.value !== '') {
    url = `${url}&begin_date=${startDate.value}`;
  };

  if (endDate.value !== '') {
    url = `${url}&end_date=${endDate.value}`;
  };

  // Use fetch() to make the request to the API
  fetch(url)
    .then( response => response.json() )
    .then( json => displayResults(json) )
    .catch( error => console.error(`Error fetching data: ${error.message}`) );
}

function displayResults(json) {
  while (section.firstChild) {
    section.removeChild(section.firstChild);
  }

  const articles = json.response.docs;

  if (articles.length === 10) {
    nav.style.display = 'block';
  } else {
    nav.style.display = 'none';
  }

  if (articles.length === 0) {
    const para = document.createElement('p');
    para.textContent = 'No results returned.'
    section.appendChild(para);
  } else {
    for (const current of articles) {
      const article = document.createElement('article');
      const heading = document.createElement('h2');
      const link = document.createElement('a');
      const img = document.createElement('img');
      const para1 = document.createElement('p');
      const keywordPara = document.createElement('p');
      keywordPara.classList.add('keywords');

      console.log(current);

      link.href = current.web_url;
      link.textContent = current.headline.main;
      para1.textContent = current.snippet;
      keywordPara.textContent = 'Keywords: ';
      for (const keyword of current.keywords) {
        const span = document.createElement('span');
        span.textContent = `${keyword.value} `;
        keywordPara.appendChild(span);
      }

      if (current.multimedia.length > 0) {
        img.src = `http://www.nytimes.com/${current.multimedia[0].url}`;
        img.alt = current.headline.main;
      }

      article.appendChild(heading);
      heading.appendChild(link);
      article.appendChild(img);
      article.appendChild(para1);
      article.appendChild(keywordPara);
      section.appendChild(article);
    }
  }
};

function nextPage(e) {
  pageNumber++;
  fetchResults(e);
};

function previousPage(e) {
  if(pageNumber > 0) {
    pageNumber--;
  } else {
    return;
  }
  fetchResults(e);
};


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>YouTube APIs example</title>

    <link href="youtube.css" rel="stylesheet">

YouTube video search

        <form>

            Enter a search term (required):
            <input type="text" id="search" class="search" required>

            <button class="submit">Submit search</button>

        </form>


text:
// Get references to DOM elements we need to manipulate
const searchTerm = document.querySelector('.search');
const searchForm = document.querySelector('form');
const submitBtn = document.querySelector('.submit');

const section = document.querySelector('section');

// When the window (tab) has finished loading, run onClientLoad()
// to get it all started
window.addEventListener('load', onClientLoad);

// Load and initialize the API, then run the onYouTubeApiLoad() function once this is done
function onClientLoad() {
  gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
}

// Attach your key to the API
function onYouTubeApiLoad() {
  // To get a key for your own application:
  // 1. Go to https://console.cloud.google.com/apis/dashboard
  // 2. Create a new project if you've not already got one
  // 3. Click the Enable API button
  // 4. Choose YouTube Data API
  // 5. Click the Enable button
  // 6. Click create credentials
  // 7. Select "Web browser (JavaScript)" from the second dropdown
  // 8. Click the "Public data" radio button
  // 9. Click the "What credentials do I need?" button
  // 10. Copy your API key and paste it in below
  gapi.client.setApiKey('YOUR-API-KEY-HERE');

  // Attach an event listener to the form so that a search is carried out
  // when it is submitted — the search() function
  searchForm.addEventListener('submit', search);
}

function search(e) {
  // use preventDefault() to stop form actually submitting
  e.preventDefault();

  // create a search request using the Data API;
  const request = gapi.client.youtube.search.list({
    // set what kind of data the response will include
    part: 'snippet',
    // set the number of results that will be returned
    maxResults: 10,
    // set the search query to search for
    q: searchTerm.value
  });

  // send the request, and specify a function to run when the response returns
  request.execute(onSearchResponse);
}

// This function automatically has the response passed in as a parameter
function onSearchResponse(response) {
  // Empty the <section> element
  while (section.firstChild) {
      section.removeChild(section.firstChild);
  }

  // Store the actual results of the search in a variable
  const results = response.items;

  // loop through the results and run displayVideo() on each
  for (let i = 0; i < results.length; i++) {
    displayVideo(results[i], i);
  }
}

function displayVideo(result, i) {
  // Create a div with a unique ID for each video, and append it to the <section>
  // The YouTube Iframe Player API will replace each one with
  // an <iframe> containing the corresponding video
  const vid = document.createElement('div');
  vidId = 'vid' + i;
  vid.id = vidId;
  section.appendChild(vid);

  // Use the YT.Player() constructor to create a new video player object,
  // Specifying the ID of the element to be replaced by it (the <div>),
  // A height and width, and an event handler to handle the custom onReady event
  const player = new YT.Player(vidId, {
    height: '360',
    width: '480',
    videoId: result.id.videoId,
    events: {
      'onReady': onPlayerReady
    }
  });

  // The onPlayerReady() handler grabs the ID of each video, and checks its duration
  // If the duration is 0, the video can't be played, so we just delete it
  function onPlayerReady(e) {
    console.log(e.target)
    const myId = e.target.id;
    const duration = e.target.getDuration();
    if (duration === 0) {
      console.log(`Video ${myId} cannot be played, so it was deleted.`);
      section.removeChild(e.target.a);
    } else {
      console.log(`Video ${myId} ready to play.`);
    }
  }
}


text:
body {
  font-family: sans-serif;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
  display: flex;
}

.controls, .results {
  flex: 1;
  padding: 10px;
}

form p:nth-of-type(1) {
  margin-top: 0;
}

h1 {
  text-align: center;
}

h2 {
  font-size: 20px;
}

article p {
  font-size: 14px;
  line-height: 1.5;
}

article p:nth-of-type(2) {
  font-size: 14px;
  line-height: 2;
}

nav {
  margin-bottom: 50px;
}

.prev {
  float: left;
}

.next {
  float: right;
}

article {
  padding: 10px;
  margin-bottom: 20px;
  background-color: #ddd;
  border: 1px solid #ccc;
}

img {
  float: right;
  margin-left: 20px;
  max-width: 200px;
}

.clearfix {
  clear: both;
}

span {
  background-color: #ccc;
  padding: 5px;
  margin: 5px;
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mapquest example</title>

    <link type="text/css" rel="stylesheet" href="https://api.mqcdn.com/sdk/mapquest-js/v1.3.2/mapquest.css"/>
    <link href="style.css" rel="stylesheet">

Simple Mapquest example


text:
#map {
  width: 600px;
  height: 600px;
}


text:
L.mapquest.key = 'YOUR-API-KEY-HERE';

// 'map' refers to a <div> element with the ID map
const map = L.mapquest.map('map', {
  center: [53.480759, -2.242631],
  layers: L.mapquest.tileLayer('map'),
  zoom: 12
});


text:
L.mapquest.key = 'YOUR-API-KEY-HERE';

// 'map' refers to a <div> element with the ID map
const map = L.mapquest.map('map', {
  center: [53.480759, -2.242631],
  // 1. change 'map' to 'hybrid', try other type of map
  layers: L.mapquest.tileLayer('hybrid'),
  zoom: 12
});

// 2. Add control
map.addControl(L.mapquest.control());

// 3. Add icon
L.marker([53.480759, -2.242631], {
  icon: L.mapquest.icons.marker({
    primaryColor: '#22407F',
    secondaryColor: '#3B5998',
    shadow: true,
    size: 'md',
    symbol: 'A'
  })
})
.bindPopup('This is Manchester!')
.addTo(map);


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>

    <link href="style.css" rel="stylesheet">

    <canvas class="myCanvas">

Add suitable fallback here.

    </canvas>


text:
body {
  margin: 0;
  overflow: hidden;
}


text:
const canvas = document.querySelector('.myCanvas');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);

const image = new Image();
image.src = 'firefox.png';
image.addEventListener('load', () => ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175));


text:
const canvas = document.querySelector('.myCanvas');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);

ctx.strokeStyle = 'white';
ctx.lineWidth = 1;
ctx.font = '36px arial';
ctx.strokeText('Canvas text', 50, 50);

ctx.fillStyle = 'red';
ctx.font = '48px georgia';
ctx.fillText('Canvas text', 50, 150);

canvas.setAttribute('aria-label', 'Canvas text');


text:
const canvas = document.querySelector('.myCanvas');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);


text:
const canvas = document.querySelector('.myCanvas');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);

ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(50,50,100,150);

ctx.fillStyle = 'rgb(0,255,0)';
ctx.fillRect(75,75,100,100);

ctx.fillStyle = 'rgba(255,0,255,0.75)';
ctx.fillRect(25,100,175,50);

ctx.strokeStyle = 'rgb(255,255,255)';
ctx.lineWidth = 5;
ctx.strokeRect(25,25,175,200);


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>
    <script src="script.js" defer></script>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>
  </body>
</html>


text:
const canvas = document.querySelector('.myCanvas');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);

function degToRad(degrees) {
  return degrees * Math.PI / 180;
};

ctx.fillStyle = 'rgb(255,0,0)';
ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineTo(150,50);
const triHeight = 50 * Math.tan(degToRad(60));
ctx.lineTo(100,50+triHeight);
ctx.lineTo(50,50);
ctx.fill();

ctx.fillStyle = 'rgb(0,0,255)';
ctx.beginPath();
ctx.arc(150, 106, 50, degToRad(0), degToRad(360), false);
ctx.fill()

ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.arc(200, 106, 50, degToRad(-45), degToRad(45), true);
ctx.lineTo(200,106);
ctx.fill();


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Three.js basic cube example</title>

    <script src="three.min.js" defer></script>
    <script src="script.js" defer></script>
    <link href="style.css" rel="stylesheet" />
  </head>

  <body></body>
</html>


text:
html,body {
  margin: 0;
}

body {
  overflow: hidden;
}


text:
const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

let cube;

const loader = new THREE.TextureLoader();

loader.load('metal003.png', texture => {
	texture.wrapS = THREE.RepeatWrapping;
	texture.wrapT = THREE.RepeatWrapping;
	texture.repeat.set(2, 2);

	const geometry = new THREE.BoxGeometry(2.4,2.4,2.4);
	const material = new THREE.MeshLambertMaterial( { map: texture } );
	cube = new THREE.Mesh(geometry, material);
	scene.add(cube);

	draw();
});

const light = new THREE.AmbientLight('rgb(255,255,255)'); // soft white light
scene.add(light);

const spotLight = new THREE.SpotLight('rgb(255,255,255)');
spotLight.position.set( 100, 1000, 1000 );
spotLight.castShadow = true;
scene.add(spotLight);

function draw() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);

	requestAnimationFrame(draw);
}


text:
<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Three.js video cube</title>

    <script src="three.min.js" defer></script>
    <script src="script.js" defer></script>
    <link rel="stylesheet" href="style/style.css" />
  </head>

  <body></body>
</html>


text:
html,body {
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
}


text:
//main block for doing the video recording

if (navigator.mediaDevices.getUserMedia) {
  const constraints = {
     audio: false,
     video: true
  }

  navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    const video = document.createElement('video');
    video.srcObject = stream;
    video.addEventListener('loadedmetadata', () => {
      video.play();
      threeRender(video);
    });
  })
  .catch(err => console.error(`The following gUM error occured: ${err}`));
} else {
   console.error('getUserMedia not supported on your browser!');
}

// three.js cube drawing

function threeRender(video) {

  const scene = new THREE.Scene();

  const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
  const renderer = new THREE.WebGLRenderer();

  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  // load a texture, set wrap mode to repeat
  const texture = new THREE.Texture(video);
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set( 1, 1 );

  const geometry = new THREE.BoxGeometry(3,3,3);
  const material = new THREE.MeshLambertMaterial( { map: texture } );
  const cube = new THREE.Mesh( geometry, material );
  scene.add( cube );

  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 5;

  const light = new THREE.AmbientLight( 'rgb(100,100,100)' ); // soft white light
  scene.add( light );

  // White directional light at half intensity shining from the top.
  //var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 );
  //directionalLight.position.set( 0, 1, 0 );
  //scene.add( directionalLight );

  // white spotlight shining from the side, casting shadow
  const spotLight = new THREE.SpotLight( 'rgb(255,255,255)' );
  spotLight.position.set( 100, 1000, 1000 );
  spotLight.castShadow = true;
  spotLight.shadowMapWidth = 1024;
  spotLight.shadowMapHeight = 1024;
  spotLight.shadowCameraNear = 500;
  spotLight.shadowCameraFar = 4000;
  spotLight.shadowCameraFov = 30;
  scene.add( spotLight );

  //render the scene

  function render() {
    requestAnimationFrame(render);

    cube.rotation.x += 0.005;
    cube.rotation.y += 0.005;
    texture.needsUpdate = true;
    renderer.render(scene, camera);
  }

  render();

  // keyboard controls

  const body = document.querySelector('body');

  body.addEventListener('keydown', e => {
    // 37 is arrow left, 39 is arrow right,
    // 38 is arrow up, 40 is arrow down

    if (e.keyCode == 37) {
      camera.position.x += 0.05;
    };

    if (e.keyCode == 39) {
      camera.position.x -= 0.05;
    };

    if (e.keyCode == 38) {
      camera.position.y -= 0.05;
    };

    if (e.keyCode == 40) {
      camera.position.y += 0.05;
    };
  });

  function onWindowResize() {
      renderer.setSize( window.innerWidth, window.innerHeight );
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
  }
  window.addEventListener( 'resize', onWindowResize, false );

}


text:
const canvas = document.querySelector('.myCanvas');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');

ctx.fillStyle = 'rgb(0,0,0)';
ctx.fillRect(0,0,width,height);

ctx.translate(width/2, height/2);

function degToRad(degrees) {
  return degrees * Math.PI / 180;
};

function rand(min, max) {
  return Math.floor(Math.random() * (max-min+1)) + (min);
}

let length = 250;
let moveOffset = 20;

for (let i = 0; i < length; i++) {
  ctx.fillStyle = `rgba(${255-length},0,${255-length},0.9)`;
  ctx.beginPath();
  ctx.moveTo(moveOffset,moveOffset);
  ctx.lineTo(moveOffset+length,moveOffset);
  const triHeight = length/2 * Math.tan(degToRad(60));
  ctx.lineTo(moveOffset+(length/2),moveOffset+triHeight);
  ctx.lineTo(moveOffset,moveOffset);
  ctx.fill();

  length--;
  moveOffset+=0.7;
  ctx.rotate(degToRad(5));
}


text:
<!DOCTYPE html>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas</title>

    <link href="style.css" rel="stylesheet">

      <input type="color" aria-label="select pen color" value="#ff0000">
      <input type="range" min="2" max="50" value="30" aria-label="select pen size">30
      <button>Clear canvas</button>

    <canvas class="myCanvas">

Add suitable fallback here.

    </canvas>


text:
body {
  margin: 0;
  overflow: hidden;
  background: #ccc;
}

.toolbar {
  width: 150px;
  height: 75px;
  background: #ccc;
  padding: 5px;
}

input[type="color"], button {
  width: 90%;
  margin: 0 auto;
  display: block;
}

input[type="range"] {
  width: 70%;
}

span {
 position: relative;
 bottom: 5px;
}