This assignment is intended to provide you with some practice using basic HTML and CSS. While we
have covered a number of CSS properties for styling, there are many others we did not. The link https:
//developer.mozilla.org/en-US/docs/Web/CSS leads to considerable help with CSS, and https://
developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference provides some of the most
common properties. For this assignment, you should explore these some to become familiar with styling
of your web pages.
In a directory called first-page, create a web page that uses HTML and CSS and a proper
directory structure (e.g. a css, images, and js directory) for your files. You have a fair amount of
flexibility, and this is a good time to practice using as many features as possible. You should try
your best to make the page (and its content) look interesting, picking a theme of your choice (e.g.
a game site, a wildlife site, a store, etc.). You must meet these requirements:
(a) Do NOT use <div> tags for this page. Instead use Content Sectioning to organize your page
(See: https://developer.mozilla.org/en-US/docs/Web/HTML/…).
(b) Use at least two interesting Google fonts you get off line (See https://fonts.google.com/).
(c) Use at least two “Font Awesome” icons (See https://fontawesome.com/).
(d) Include at least two images on the page.
(e) Include styling for the Content Sections using CSS (Note: you must include <nav>, <header>,
<footer>, and some combination fo <main>, <section>, <article> and <aside> that work
for your content). You should use a selection of CSS properties of your choice that makes the
page look nice.
(f) Include at least 5 selectors (a combination of id and class) to style the page.
(g) In the main content of the page, include a table using the <table> element where each alter-
nating row is a different color or shade (e.g. all even rows light grey, all odd rows white, with
the header row darker grey; or do so using different shades of a different color, like blues or
greens).
2. Repeat the first-page project in a new directory called second-page. There, you are to use
only <div> tags to reproduce the first page you did. Note that you do not need to worry about
making the page exactly the same. You should make it look as similar as possible though. But
the <table>, <section>, <nav>, etc. tags should all be <div> tags with CSS styling.
