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.
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.
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.
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.
Create a site map page that, for now, has two links: one to your home page and one
to the Lab #1 page.
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.
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.
Add lighttheme and darktheme styles that each set the CSS style properties: background-color and color.
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>
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).