Synopsis

Using HTML$5,$ CSS$,$ and JavaScript create a website for a hypothetical client, and upload it to the World Wide Web. The content and design of the website is up to you.

$*$Lorem Ipsum $($or any other $$ipsum$)$ is not allowed for your project.

$**$The $$client$$ could be yourself. Consider making this project a portfolio for yourself that you could include on resumes.

If you have another idea but aren$$t sure if it$$s appropriate for this project, run the idea by your instructor. You have a lot of latitude!

Pages

Your website must contain at least three HTML$5$ Validated pages $($any page not validated will result in a deduction of $1$ mark per unvalidated page $($up to $2$ marks maximum$)).$

A generic example of your pages could be:

Home page

The home page is a welcome page for the user. It should give a brief description of the company, with some updates on recent activity with the company $($i$.$e$.$ a sale or promotion$).$

There must be at least two headings of different sizes used on the home page. There must also be at least one image included on the page.

$*$The home page should always be named index.html$.$ When a domain name is typed in a browser $($i$.$e$.$ www$.$thinkgeek.com$),$ the index page is usually considered the home page by the web server, and is the one that is returned to the browser.

Products$/$Services page

A products or services page should describe what goods the company sells or what services it provides.

At least two goods or services must be included. Images and appropriate headings should be included for each good$/$service$,$ along with a detailed description.

If choosing a portfolio site for yourself, consider listing skills you have.

Contact page

The contact page will include a form the user can fill out to send feedback to or ask questions of the company.

The form should contain at least:

A name field

A phone number field

An email field

A comments area

Submit and Reset buttons

Functional labels for each input

$*$Use HTML$5$ input types where appropriate

Inline validation is required of the contact page. Use an external JavaScript file to ensure the user has entered data in the name field, a ten digit number in the phone number field, and a valid email address $($use Regular Expressions$).$

When an error is encountered, a previously hidden error message should display, focus should be set to the field in error, and the text highlighted.

Style the form so that when the user has focus on a field, its background colour and font colour are changed. All validation should take place once the user has clicked on the submit button.

You can set the form's action attribute to the site$$s home page. This won$$t send the form data anywhere, but at the least it can simulate the form submission process.

Design

The website will have a common header and navigation area for every page. A footer area should be shown at the bottom of every page, and have a similar look on every page.

Use media queries to ensure that your site is responsive in multiple resolutions.

Header area

The header area is your design choice completely. The only requirement is that it looks exactly the same on each page.

Navigation

The navigation can be horizontal or vertical. It must contain links to every page in your site.

Like the header area, the navigation must be in the same location on every page.

Similar to your previous assignments, the navigation should have hover effects. Meaning when the user is either hovering with the mouse, or has focus on that navigation item, highlighting must be present.

Content

The content area should appear with exactly the same width on each page. Of course, the height is variable on each page.

All other styles for the content are up to you.

Footer

A footer should be included that includes the links the navigation area has, but much more subtle.

If you researched other websites, you would notice that most footer links are using smaller text than anywhere else on the page. This is a common practice in web design, and should be considered here.

Styles

Include all styling within one external CSS file.

For the header, navigation, content and footer areas, IDs should be used, not classes.