course_freecodecamp/tabindex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p:focus {
          background-color: yellow;
        }
    </style>
</head>
<body>
    <header>
        <h1>Ninja Survey</h1>
    </header>
    <section>

      <form>
        <p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>

        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br>
        <fieldset>
          <legend>What level ninja are you?</legend>
          <input id="newbie" type="radio" name="levels" value="newbie">
          <label for="newbie">Newbie Kitten</label><br>
          <input id="intermediate" type="radio" name="levels" value="intermediate">
          <label for="intermediate">Developing Student</label><br>
          <input id="master" type="radio" name="levels" value="master">
          <label for="master">9th Life Master</label>
        </fieldset>

        <br>

        <fieldset>
        <legend>Select your favorite weapons:</legend>
        <input id="stars" type="checkbox" name="weapons" value="stars">
        <label for="stars">Throwing Stars</label><br>
        <input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
        <label for="nunchucks">Nunchucks</label><br>
        <input id="sai" type="checkbox" name="weapons" value="sai">
        <label for="sai">Sai Set</label><br>
        <input id="sword" type="checkbox" name="weapons" value="sword">
        <label for="sword">Sword</label>
        </fieldset>

        <br>

        <input type="submit" name="submit" value="Submit">
      </form>

      <br>
    </section>

    <footer>&copy; 2018 Camper Cat</footer>
</body>
</html>