Advanced Web Design Tutorial Submission

The goal of this project is to combine the layout principles from last week with an external style sheet.

We will make this page  look like this page  or . To do so, we add semantic layout tags so that the plain, white page can take advantage of the external style sheet.

Edit the html and css files linked below to meet the following conditions:

1. Download the zipped folder adv-web-tutorial.zip to a flash drive or your computer.
2. From the file manager, right-click on the adv-web-tutorial.zip file and choose extract all. Extract the folder to your flash drive or hard drive.
3. View the index.html file in the browser of your choice.
4. Open the styles1.css file in Notepad++.
1. Change the values for the text color, background, and background-color for various elements, such as, body, container, heading, nav, . . .
2. Change the container width.
3. Don't change the width or padding for the nav or content. These are designed to add to 100%.
4. For the footer, h1, h2, and anchor selectors, change the values of some of the properties.
5. Add a section for h3, based on the h1 and h2 sections.
   NOTE: em is a relative measurement unit. So 2em is twice the size of the current font and 1.5em is 50% bigger.
6. Refresh the index.html file in your browser to see that your changes worked.
5. Open the index.html file in Notepad++.
1. Change the style sheet from styles1.css to styles2.css. Save this change and refresh the index.html file in your browser.
6. Open the styles2.css file in Notepad++. 
1. Change some color values.
2. Change the max-width of the container.
3. Add a section for h3 with the following properties:
   1. font-size: 1.2em;
   2. font-family: "Comic Sans MS", cursive, sans-serif;
7. Decide which style sheet you want to use for index.html. You will use the same style sheet for the next page, privacy.html.
8. Open the privacy.html file in Notepad++.
1. Add the same style sheet link as in index.html.
2. Add a <div> element to the top of the body and the closing tag at the end of the body.
3. Add the id "containter" to the <div>.
4. Add <header> tags around the <h1> block.
5. Add the id "title" to the <h1> element.
6. Add the navigation section from the index.html file.
7. Place <section> tags around the main content of the page.
8. Add the class "content" to the <section> block.
9. Remove the horizontal rule and last paragraph linking to the home page.
10. Add the <footer> section from the index.html file and change the file linked there to tips.html with different link text.
11. Remove the style attribute from the <img> element and add the "float-left" class.
12. Save these changes and open privacy.html in the browser of your choice to confirm your changes worked.

Depending on your style sheet and color choices, your two pages might look like this:

or like this:

Submission requirements

1. Upload your folder adv-web-tutorial to your WordPress File Manager.
2. Provide a link to your site, e.g., https://math.bluecc.edu/wordpress/user_data/LastName/adv-web-tutorial/
   Be sure to check that the link works, i.e., that you can actually view the site.