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 from chapters 2 4 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 <link> 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 least
one (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
