Lab #2 - Static Web Pages

Version 1.1

This lab focuses on building static web pages, using HTML5, CSS3, and EC6 (latest version of JavaScript). You will use all three to define a theme for your web pages.

Lab Resources - HTML5, CSS3, JavaScript6:

W3schools.com, MDN, htmldog.com, TutorialRepublic References tutorialspoint library


The intent of this lab is to start building a very simple, local drive based, web site that integrates all your lab results. We will use that for grading purposes.
  1. Create an HTML5 home page that displays your name, the course, and date. On that page provide links to a Lab #1 page and a site map page.
  2. Create a Lab #1 page that uses at least one feature new to HTML5, with a Lab #1 header and a brief description of what your are doing for the lab.
  3. Create a site map page that, for now, has two links: one to your home page and one to the Lab #1 page.
  4. Create a CSS style sheet and add a link to it on each of the html pages you've developed. Add a few styles that make your site look reasonably professional.
  5. Add a JavaScript page with code to apply a theme to each page that contains an html div element with a class whose name is either lighttheme or darktheme. Call this function from the body load event.
  6. Add lighttheme and darktheme styles that each set the CSS style properties: background-color and color.
  7. On your home page add the lighttheme div, e.g.:
    <div class="lighttheme"></div>
    On the Lab #1 and site map pages add:
    <div class="darktheme"></div>
  8. At the top of every page, add three check boxes for light theme, dark theme, page theme. The first two will be used to change the theme, ignoring the divs with theme classes. So all pages will have the same theme. The third checkbox supports reverting to page themes. Save the state of the buttons in local storage, and retrieve from local storage on page load. See the implementation of the nav keys script on our web site for an example (scroll to the bottom).
The links below provide information you need to accomplish Lab #1 activities: Lab2Helper.htm, Lab2Helper.css, Lab2Helper.js, DOM reference - MDN

Please zip your Lab #2 folder and Submit Lab. Note: just zip, no rar, tar, ...