INSTRUCTIONS: Continuing with the code from the first project, Website Project 2 will have you add images to the content and create an external style sheet to style the three HTML pages. You will also be using the Google Fonts online font library for access to custom typefaces, Adobe Color CC to create a color scheme (see the Creating Color Schemes Using Adobe Color CC page in Canvas, Module 5), and demonstrate ideal image attribution following Creative Commons best practices. To complete the project, you should first select three images you want to use (see Requirements below), and develop your color scheme; then: 1. Make a copy of your HTML files from Website Project 1 and save them in another location in order to avoid losing the code from your original project 2. Open each page in your text editor and make adjustments to the html as required below 3. Periodically save your files to ensure no data is lost, and retain backup copies in case of emergencies 4. After coding is complete Save and close all the html files 5. Open the W3C HTML Validation Tool in your web browser and validate each html file. If the files successfully pass validation, proceed to the next step; but, if there are errors, review the error messages, make changes to your documents, and revalidate the files. Continue ad nauseam until all errors have been corrected. a. It is important to make sure your html passes validation before you begin styling the pages with CSS to ensure each page will display as intended 6. Open your text editor and create the external style sheet; save it using a name that is relevant to you and your project (use all lowercase letters; no spaces). Make sure the file extension is .css 7. Begin coding the style rules using the requirements below, periodically saving your file to ensure no data is lost and retaining a backup copy in case of emergencies 8. After coding is complete Save and close the file 9. Open the W3C CSS Validation Tool in your web browser and validate the external style sheet. If the file successfully passes validation, proceed to submitting; but, if there are errors, review the error messages, make changes to your document, and revalidate the file. Continue ad nauseam until all errors have been corrected. 10. Copy ALL files html, css, and images to CWUs web server, saving them directly in the website_project_2 folder 11. Make another copy of the files and compress them into one (1) .zip file, making sure to include ALL files html, css, and images. If desired, rename the .zip file (make sure you DO NOT compress the files used on the web server) 12. Upload your .zip file to Canvas, and add your student URL in the comment box; then, click Submit. REQUIREMENTS: Your web page must demonstrate effective use of the basic HTML5 and CSS3 code from chapters 2 4 by following the requirements below. In each html page add the link element in the correct location to link the external CSS o include ONLY the href and rel attributes remove all phrase elements, type attributes, and align attributes add the span element to demonstrate its appropriate use add the image element to display one (1) image in the content area o include ONLY the src and alt attributes; height and width must be specified in the css add font source info and image attribution links in the footer section o provide a link to each of the Google Fonts used (HINT: link to the Google Font pop out window for each font) o all appropriate links for ideal image attribution (there will be three links per image) if needed, review the Image Attribution Tutorial and associated reading material in Canvas, Module 4 Demonstrate appropriate and effective use of external css using, at a minimum, the following css properties: background-color and color at least three (3) colors from your Adobe Color CC color scheme should be used (black and white do not count) font-family specify one (1) custom font from Google Fonts for the entire body section and at least one (1) custom font from Google Fonts for special use (like headings) box-shadow to create a box shadow on the centered content area font-style and font-weight to italicize and/or bold text; must be used sparingly text-align and text-shadow style the main heading only font-size provide contrasting text sizes between headings, navigation links, and bodies of text text-decoration remove the underline from all links padding provide space between content, borders, and adjacent elements border to add a border around the content images margin and width to center the main content on the page (see pg. 111 of your textbook) border-top and border-bottom create a border between the main content area and header/footer sections @import rule to import all custom fonts from Google Fonts **NO phrase elements, inline css, or embedded css should be used to style the site** Please use the screen shots below for an example of how your site might display; this will help you determine how to code the underlying structure and styling of your pages.

Page 1

Page 2

Page 3