1. Screens as Containers

HTML for the Screen Containers

Below you see the HTML for the three screen "containers" as <div> elements. We will add more detail to each screen later. Notice that each screen has class='screen' . This will allow us to easily change the style (CSS) of all three screens later in the same way. Also, notice that each screen has a unique id that will allow us to target each screen in a particular way later.

Copy the HTML code and paste it into a new index.html file, or use the CodePen version if you are starting with CodePen's HTML. The browser page preview is not exciting, but it should contain text from all three screens.

<!DOCTYPE html>
<html>

<head>
  <title>iDEW Trivia</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <!-------------- WELCOME SCREEN --------------->
  <div class='screen' id='welcome-screen'>
    <h1>Welcome screen.</h1>
  </div>

  <!-------------- QUESTION SCREEN --------------->
  <div class='screen' id='question-screen'>
    <h1>Question screen.</h1>
  </div>

  <!-------------- THANK YOU SCREEN --------------->
  <div class='screen' id='thankyou-screen'>
    <h1>Thank you screen.</h1>
  </div>
  
  <script src="script.js"></script>
</body>

</html>

<!-------------- WELCOME SCREEN --------------->
<div class='screen' id='welcome-screen'>
  <h1>Welcome screen.</h1>
</div>

<!-------------- QUESTION SCREEN --------------->
<div class='screen' id='question-screen'>
  <h1>Question screen.</h1>
</div>

<!-------------- THANK YOU SCREEN --------------->
<div class='screen' id='thankyou-screen'>
  <h1>Thank you screen.</h1>
</div>

This is single page web app.

What is a single page web app? Most traditional web sites are a collection of HTML files (pages) that link to each other. With a single page web app you will create a single HTML file that contain different views (we call them screens in our case) that you hide or show depending on the state of the app.

For example, in the trivia game, you will hide the question and thank you screens at the beginning and show the welcome screen. When the visitor starts the game, you will hide the welcome screen and show the question screen, and so on.

Don't worry if this isn't totally clear yet. It will make more sense when we get to the JavaScript programming part later.

CSS for the Body and Screens

Let's add a little style to our screens next. In the code below notice how the body , which contains all contents of the page, is given a background color of "gray" and a margin of "0". This gives us a nice edge-to-edge background for placing our screen content.

Next you will see several styles being applied to screens, since .screen affects all elements with that class. Notice how background-color uses rgba( ) so that we can "see through" the screen a bit to the background. You will want this feature later. The rest of the styling has to do with sizing the screens and content in a way that fits nicely on any device, and you will probably want to leave these elements alone.

Copy the CSS code below into your style.css file and notice the change. You will need to scroll down in the live preview to see all the screens now.

CSS

body {
  margin: 0;
  background-color: gray;
}

.screen {
  background-color: rgba(255,255,255,.5);
  box-sizing: border-box;
  margin: 15px auto;
  padding: 15px;
  max-width: 700px;
  width: calc(100vw - 30px);
  height: calc(100vh - 30px);
}

Save your Code before the next step!

PreviousTemplate Build Tutorial Next2. Welcome Screen