Setting up the Layout

• Inside the <div class="container">, create the following elements nested as follows:
  • <h1> - with a title of Rock Paper Scissors.
  • 2 <div>s with IDs of welcome-screen & game-screen.
    • Tip: try typing the emmet abbreviation #welcome-screen+#game-screen and hit enter. 😉
  • Inside <div id="welcome-screen">, create the following elements nested as follows:
    • <form> - with an id of name-form
      • <div>
        • <label> - with:
          • text of Your Name.
          • for attribute of username
        • <input> - with:
          • placeholder text of Enter Name Here….
          • id of username
          • name property of username
      • <button> - with:
        • the text of Start Game!.
        • id of start-game-button
  • Inside <div id="game-screen">, create the following elements nested as follows:
    • <div> - with an id of score-tally.
      • <p> - with id of score and text of User: 0 v CPU: 0
        • Tip: Emmet abbreviation for a div with an id of score-tally and a paragraph with id of score is #score-tally>p#score.
    • <form> - with an id of game-form
      • <div>
        • <label> - with:
          • a text of Select your choice
          • for attribute of user-selection
        • <select> - with:
          • id of user-selection
          • 3 <option>s for Rock, Paper, & Scissors
          • Tip: use the Emmet abbreviation: select#user-selection>option*3
      • <button> - with:
        • the text of Go!.
        • id of go-button
    • <p> - with an id of game-history

Result

It should now look like this.

I think We can do a little better.

Next: Styling