PURPOSE:
The purpose of this project is to begin incorporating color, graphics, and other visual elements in your webpages by implementing the HTML5 and CSS3 code discussed in chapters 3 and 4.
INSTRUCTIONS:
For Website Project 2, you will be creating an external style sheet to style the three HTML pages from Web Site Project 1. Embedded styles, inline styles, and phrase elements should NOT be used to style the pages. You will also be using Google Fonts for typefaces and Adobe Color CC to create a color scheme (see the Creating Color Schemes Using Adobe Color CC page in Canvas Midterm Module).
To begin the project, 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.
REQUIREMENTS:
Your web page must demonstrate effective use of the basic HTML5 and CSS3 code by following the requirements below. The page should be structured using one of the wireframe examples on the next page.
HTML Pages
- In the head section of each page,
o add elements to
- link the external CSS
- include the href and rel attributes
- link at least two typefaces from Google Fonts
- you can choose to code each typeface in one link element or separate link elements
- note that in some cases, Google Fonts will have you insert "+" symbols in the code, which may cause validation errors; this the only acceptable validation error
o Change the title element on each page to display Website Project 2
- In the body section of each page, remove all phrase elements, type attributes, and align attributes
- all styling must be coded using external CSS of include
- the heading 1 element for main headings
- the heading 2 element for secondary headings, and if desired, heading 3 - 6
elements for subheadings
- site navigation links (one link for each page) using the anchor element
- the paragraph element and blockquote element
- at least one (1) of each should be used, but not necessarily on every page
- unordered, ordered, and description lists
- at least one (1) of each should be used, but not necessarily on every page
- an image element to display one (1) image per page
- must include the src and alt attributes
- do NOT include the width and height attributes - use external CSS instead
- structural elements
- header, nav, main, and footer
- one (1) div element must be used to contain or "wrap" all of the elements in the body section
- at least two (2) other div elements must be coded within the main element to contain sections of content
- an email link and copyright information in the footer section
- make sure to include the copyright symbol, using the appropriate HTML code image and font sources in the footer section
- provide a link to each of the Google Fonts used (HINT: link to the "pop out" window)
- all appropriate links for correct image attribution (example)
External Style Sheet
- Use the following CSS properties to style the website of background color and color properties
- at least three (3) colors other than black and white should be used of font-family property
- specify one (1) font other than the default for the entire body section and at leastone (1) font other than the default for special use (like headings) of margin, width, and padding properties
- to center the main content on the page and to provide space between content, borders, and adjacent elements of text-align property of text-shadow
- style the main heading only of text-decoration property
- remove the underline from all links of font-style and font-weight
- to italicize text and/or bold text
- make sure to use this type of styling sparingly of font-size property
- provide contrasting text sizes of border property
- add a border around the content images of border-top and border-bottom properties
- create a border between the main content area and header/footer sections
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 (images are also available to view in Canvas).
NOTE: Failure to follow the project instructions, including submission and formatting requirements, may result in the deduction of points. Please refer to the Saving and Submitting Assignments page in Canvas for specific requirements, and/or contact your instructor for additional information.