WEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS:

Size: px

Start display at page:

Download "WEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS:"

Magdalene Webb
5 years ago
Views:

WEBSITE PROJECT 2 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

1 WEBSITE PROJECT 2 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,

2 o remove all phrase elements, type attributes, and align attributes all styling must be coded using external CSS o 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 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 o background-color and color properties at least three (3) colors other than black and white should be used o 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) o margin, width, and padding properties to center the main content on the page and to provide space between content, borders, and adjacent elements o text-align property o text-shadow style the main heading only o text-decoration property remove the underline from all links o font-style and font-weight

to italicize text and/or bold text make sure to use this type of styling sparingly o font-size property provide contrasting text sizes o border property add a border around the content images o

3 to italicize text and/or bold text make sure to use this type of styling sparingly o font-size property provide contrasting text sizes o border property add a border around the content images o 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. Page 1 (second page below)

4 Page 2 (third page below)

5 Page 3

Website Development with HTML5, CSS and Bootstrap

Contact Us 978.250.4983 Website Development with HTML5, CSS and Bootstrap Duration: 28 hours Prerequisites: Basic personal computer skills and basic Internet knowledge. Course Description: This hands on