CP 202 - Website Design

Project

In the CP202 project you will create a website containing HTML and CSS. You are free to choose a business,     club or volunteering activity (examples: Software Development Company, Online Book Store, Hardware Store,  Sports Club, Blood donation etc.) for which you create the website but the design must address the requirements mentioned below. All the data needs to be placed in appropriate tags. For example, if you are including a             physical address, it is expected to be in an address tag rather than in a paragraph tag. You may need to search      and use tags or rules in this project that we have not covered in the lecture. It is important to start the project at    the earliest.

Please note that every software project has explicit requirements as well as implicit requirements. Take care of the implicit requirements like using bullet points, and headings etc. appropriately as required, maintaining a      professional look of the website, or including enough details on each page of your website for the user.

1.   The website has at least two separate HTML pages (index page (Home page) and a contact us page) and only one CSS file for styling both the webpages. All the styling is managed through CSS and not HTML. [5]

2.   Place the style sheet in a folder named CSS. Place all the images used in your website in a folder named images.

[5]

3.   Choose an appropriate color theme (palette) for your website. The navigation and the look and feel must be    consistent for all the pages that are part of the website. Websites likehttps://coolors.cocan be used to select a theme or a palette ofcompatible colours.

4.   Each page is divided into a header, a footer, a main content area in the middle and a column on the right and on  the left. Visually separate the left column, main content area and the right column using coloured background or lines and using padding and/or margins to make it aesthetically pleasing. A general distribution is shown in the   figure below: [5]

5.   Each page in your website uses liquid layout and the user experience is NOT disturbed as the browser size is reduced. [5]

6.   Header on each page contains a logo, in the form of an image, and a heading text. Use CSS to stylize the heading text and the logo. You can include anything else you deem useful. Clicking the logo on any page brings back the  user to the home page (index.html). [5]

7.   A list of links (at least 5) at the top of each webpage are provided for the user to navigate between webpages on

your website. As your project has only two webpages you can create the links that may not be active and point to non-existent webpages. These links are stylizes using CSS. See the example below:[5]

8.   Footer contains the business name, physical address and the copyright information. The footer has a unique           background colour to separate it visually from the rest ofthe page . You can use a fake address. Footer is the same for all the pages. Use CSS to stylize the footer and all the elements contained in it. [5]

9.   The main content area of the index page should be elaborate enough to describe your business and must contain:

a.   a paragraph

b.   multiple pictures

c.   at least one list of bullet points

d.   at least one table

Each of the elements (paragraph, multiple pictures, bullet points and a table) are stylized using CSS. The        arrangement can vary depending upon the business you choose. For example for a food business it may show pictures of main food items you offer along with information like cost, serving size, calories etc. For a sports  club it might include information about sports facilities, registration dates, and the equipment required for      each sport etc. [10]

10. The column on the right contains general information relevant to your business like links to interesting videos or articles, some upcoming events or some quotes etc. The right column and the content in it is all stylized using      CSS. [5]

11. The column on the left includes links to your social media accounts (arranged vertically). Use the social media    icons (do not write the names) and link them to the social media accounts (Twitter, Facebook, Instagram,             LinkedIn, and Youtube). The social media accounts may not be your own. They should exist but they can be any third party public accounts. Use CSS to enhance the presentation ofthe information. [5]

12. One of the pages on the website is the “Contact Us” page. Its structure is similar to the index page as mentioned in point 5 above. The main content area includes a frame showing the location of your office on Google Maps,           physical address including email and phone number, and a “Contact Us Form” for the potential users. Address ,     phone number and email address can all be fake. Clicking on the email address should automatically open the         default mailing app. The Contact Us form contains:

a.   More than one fieldsets

b.   text input fields

c.   text areas

d.   checkboxes

e.   radio buttons

f.    date input

g.   a submit button.

Each fields in the form must respond visually to mouse hovering and to user selection. [10]