Final Project – Web Design

[comaldave]

Description

This is an opportunity to be creative and explore your limits. You will design a web site that consists of a minimum of 8 web pages – one home page plus 7 supporting pages. This web site should NOT be a personal web site in the nature of (Hi, I'm Barbie/Ken and these are my dogs / cats / cars / clothes / toys / collectables / etc.). It can be a web site on a topic of personal interest, a web site for a hypothetical business, or a web site for an actual business or non-profit organization. It can also be a site about a hobby you have or would like to pursue in the future.

Requirements – Responsive Design

The site must render well on both desktop and mobile devices

• [x] For desktop, assume the user has a monitor resolution of 1280x1024
• [ ] For mobile, Chrome dev tools will be used to emulate and test the site on an iPhone 6

  Refer to Chapter 5.1 for info on Chrome dev tools and mobile device emulation

• [x] The user should not need to scroll horizontally to view page content; vertical scroll is fine
• [x] One suggestion is to use a single-column layout for mobile, and then transition to a multi- column layout for desktop

Proper layout can be achieved via responsive design techniques. I recommend using one of the two responsive design strategies outlined in Chapter 5:

• Ch 5.1 – percent-based element widths, floats, and media queries
• Ch 5.2 – flexboxes

Requirements – Content

• [x] The home page of the site must be named index.html
• [x] Minimum of 8 HTML pages (including home page)
• [x] HTML 5 doc type definition
• [x] Title tags and Meta tags as appropriate
• [x] A mailto: link to contact the site developer (you)
• [x] If the page is for a business -- listing of business address, phone number, and business hours
• [x] An image map with at least two hotspots
• [x] At least one table somewhere in the site
• [x] An HTML list (ordered, unordered, or otherwise)
• [x] A mention that the page was created by you in partial completion of the requirements of this Web Design class and a hyperlink to school's home page (www.nwacc.edu)
• [x] Hyperlinks to external web pages that are related to your project or topic

  Use of externally linked Cascading Style Sheets to define at least the following styles:

• [x] font (family, color, size, weight, line height, letter spacing etc.)
• [x] headings
• [x] background image and/or color
• [x] hyperlink characteristics (color/decoration of active links, visited links, etc.)

  Make use of some of the following CSS3 features:

• [x] border-radius, text-shadow, box-shadow, transform, linear-gradient, radial-gradient, border-image, opacity
• [x] Appropriate use of graphics (at least one per page)
• [x] Links to other pages in your web site and subsequently links from those pages back to the home page (properly set up site navigation using navigation lists)

Requirements – Additional

• [x] You may use HTML5 elements such as header, footer, section, aside, and article to provide structure to your pages. Div tags may also be used.
• [x] You may NOT use frames or tables to "lay out" the page content. If you don’t understand this, please check with your instructor.
• [x] You are not permitted to use any form of web template for this assignment. You may use code concepts and design resources from the web to assist with your project, but the use of fully designed pages or style sheets is prohibited.

  What to Turn In

• [ ] In addition to a .zip of the HTML, CSS, and image files which make up your website, turn in a Word Document which contains the below information. You can find a template for this by downloading the file that is attached to this assignment link. The Word document should contain your name and the filenames of the pages within your web site which fulfill specific project requirements. At the bottom, it should also include a summary of the responsive design techniques you used to achieve proper layout on both desktop and mobile devices.

[comaldave]

A mailto: link to contact the site developer (you) should be placed on the About Us page.

[Claire-Crawford]

Project completed and submitted