Introduction
Continuing from P1: Process, this project has you coding and designing a functional, responsive version of the product website.
All code must be your own. No frameworks or pre-processing is permitted for this project. You are permitted to work with JavaScript libraries (i.e. jQuery, Anime.js, etc). If unsure if permitted, please contact your instructor.
P2: Company is done in teams of two, and is worth 30% of your final grade.
Website content requirements
The website will require the following content:
- a description of the company
- how to contact the company
- the product or service offered
- the ability to purchase the product or service online, including:
- a listing of products
- a detailed view of a product
- a complete purchase process (selecting a product, inputting payment information, and receiving purchase confirmation at a minimum)
The list above is not a list of 'pages' required. As we will discuss all this content could appear in one URL or multiple URLs across a website.
Since this project focuses on the front-end, we do not expect the forms or cart to be populated based on real user input. Please pre-select input to replicate a complete purchase process.
Weekly instructions
This project spans multiple weeks. Please read the weekly instructions carefully.
From Oct 6 to Oct 13
This week is about getting set up with git and practicing using it.
- Come up with a team name. Have fun but keep it appropriate.
- Sign up as a team on Canvas and SFU GitHub. Use the same team name for Canvas and GitHub please.
- As a group complete the Git exercise and push all your changes to the new git repository you have created.
- Decide your group's direction for P1. This can be working with one of your P1 directions, a combination of your P1s, or an entirely new direction. Please create a new GitHub repository and push an updated P1 styleguide to the repository.
Bring to your Oct 13 lab
A URL to one git repository containing the updated P1 styleguide.
We will chat about your deliverables in-lab.
From Oct 13 to Oct 27
This week is about building out larger templates — putting together the pieces from your styleguide — for the website.
- Build out templates for the website. These are collections of the individual components from your styleguide that will define the structure and aesthetic of the website. Remember to:
- Build responsively from the start. Design and code as if the browser size will change.
- Use a consistent and understandable naming convention for your CSS.
- Consider how the content will be structured. You are not required to include actual content yet, but do consider what content you intend to include.
- Having built out the templates, build all the necessary HTML files for your website. Focus on:
- If using one HTML file for the majority of the website, why will someone want to continue scrolling down? What about the design or content suggests they should?
- If using multiple HTML files for the website, link the files together and consider what is the most usable means of moving between HTML files?
- Please push your changes to your git repository.
- Please upload your website to your SFU filespace.
Bring to your Oct 27 lab
A URL to the site. We will chat about your deliverables in-lab.
From Oct 27 to Nov 3
This week is for integrating content into your website and continuing to ensure your site is responsive.
- Collect or generate all content for your site. This includes any images and text you may be using. Keep track of anything that you did not make using citations.
- Integrate all the content into your site.
- Test responsiveness. Make sure to test the responsiveness of your site once the content has been integrated. At minimum test between 320 to 1280 pixels in width to ensure the site still renders and functions correctly.
- Please push your changes to your git repository.
- Please upload your website to your SFU filespace.
Bring to your Nov 3 lab
A URL to your updated site. We will chat about your deliverables in-lab.
From Nov 3 to Nov 10
This week is all about testing and debugging your website.
- Test on multiple browsers:
- Test on Multiple devices:
- Laptop,
- desktop,
- tablet,
- smartphone,
- TV,
- gaming console,
- etc. (use whatever is available to you)
- Test at multiple resolutions:
- 320 pixels wide
- 1920 pixels wide
- 1280 pixels wide by 320 pixels tall
- etc. (use any resolutions you can)
- Please push your changes to your git repository.
- Please upload your website to your SFU filespace.
Grading rubric
Your project will be graded on the following criteria:
Grading rubric for P2: Company.| | A | B | C | D |
|---|
Process (5 points): - Provided weekly teamwork reflections? (done in-lab)
- Used git effectively for the project?
| - Completed all weekly teamwork reflections (done in-lab)
- Used git through-out the project with meaningful commit messages and effective use of branching
| - Missed one teamwork reflection (done in-lab)
- Used git through-out the project with meaningful commit messages and some use of branching
| - Missed two teamwork reflections (done in-lab)
- Used git through-out the project with meaningful commit messages
| - Missed three or more teamwork reflections (done in-lab)
- Used git through-out the project with unclear commit messages
|
|---|
| Code (11 points): - Is HTML mark-up semantically appropriate?
- Does CSS use responsive units? Are they applied appropriately?
- Is the website still usable without JS (if used)?
- Is JS functionality (if used) accessible through appropriate application of ARIA?
- Does the code follow modern best practices as taught?
- Are there any HTML and CSS errors identified by a validator?
- Is the file and folder structure organized and web appropriate?
| - There is little to no room for improving the semantics of the HTML.
- The CSS is using responsive units appropriately for sizing fonts and adjusting media queries.
- Added JS functionality is made accessible through appropriate application of ARIA.
- The website is still usable without JS.
- The code follows modern best practices as taught or discovered.
- The code is valid HTML5 and CSS3.
- File/folder structure is clean and web appropriate.
| - Semantic HTML elements are used appropriately but there are missed opportunites for improving the semantics.
- The CSS is using responsive units appropriately for sizing fonts and adjusting media queries.
- Added JS functionality is made accessible through appropriate application of ARIA.
- The website is still usable without JS.
- There are up to 4 minor errors (things we have not taught you) in following modern best practices.
- The code is valid HTML5 and CSS3.
- File/folder structure is clean and web appropriate.
| - There is a semantically inappropriate use of HTML elements.
- The CSS is using responsive units appropriately for sizing fonts but not for adjusting media queries.
- Added JS functionality makes no use of ARIA to ensure accessibility.
- The website is still usable without JS.
- There is 1 major error (a thing we have taught you directly) and up to 4 minor errors in following modern best practices.
- The code is valid HTML5 and CSS3.
- There are some minor concerns with the cleanliness or web appropriateness of the file and folder structure.
| - There is a semantically inappropriate use of HTML elements or old non-semantic elements continue to be used.
- There is little use of responsive units in the CSS for sizing fonts and adjusting media queries.
- The website is still usable without JS.
- There are up to 4 major errors (things we have taught you directly) and up to 8 minor errors in following modern best practices.
- The code is not valid HTML5 or CSS3.
- There are major concerns with the cleanliness or web appropriateness of the file and folder structure.
|
| Design (11 points): - Does the website look unique or distinct?
- Does the website look cohesive and consistent?
- Does the website make effective use of space at different browser sizes?
- Does the website use responsive images to enhance responsive experience (when appropriate)?
- Is it clear what is an interactive element (and not)?
- Do interactive elements provide clear feedback on mouse hover and keyboard focus?
| - The website looks uniquely branded.
- The website uses a consistent visual language.
- The website reorganizes effectively to make use of space in the browser window.
- The website uses responsive images to support a variety of devices and display resolutions (when appropriate).
- It is easy to distinguish between interactive and non-interactive elements.
- Interactive elements clearly change visual states on mouse hover and keyboard focus.
| - The website looks similar to other websites selling the same sort of product or service.
- The website uses a consistent visual language.
- The website reorganizes at different window sizes, but could use the space more effectively.
- There is some use of response images, though there are also missed opportunities to do so.
- It is easy to distinguish between interactive and non-interactive elements.
- Interactive elements clearly change visual states on mouse hover, but not keyboard focus.
| - The website looks similar to other websites selling the same sort of product or service.
- The website uses a consistent visual language.
- The website reorganizes at different window sizes, but could use the space more effectively.
- The website does not use responsive images.
- It is somewhat difficult to distinguish between interactive and non-interactive elements.
- Interactive elements clearly change visual states on mouse hover, but not keyboard focus.
| - The website looks similar to other websites selling the same sort of product or service.
- The website uses a somewhat consistent visual language.
- The website somewhat reorganizes at different window sizes and/or a horizontal scrollbar appears at some browser sizes.
- The website does not use responsive images.
- It is somewhat difficult to distinguish between interactive and non-interactive elements.
- Interactive elements do clearly change visual states on mouse hover, but not keyboard focus.
|
| Content (3 points): - Are there different and effective routes to find products?
- Is labelling of navigation and headings logical for the user?
- Is all the required project content included?
| - The user can find products through different types of navigation - i.e. on-page listings of products and top-level headings.
- All labelling of navigation and headings is clear and logical for the user.
- All required project content is included.
| - The user can find products through different types of navigation - i.e. on-page listings of products and top-level headings.
- Most of the labelling of navigation and headings is clear and logical for the user.
- All required project content is included.
| - The user can find products through different types of navigation - i.e. on-page listings of products and top-level headings.
- Some of the labelling of navigation and headings is clear and logical for the user.
- Most of the required project content is included.
| - The user can find products through mostly one type of navigation.
- Little of the labelling of navigation and headings is clear and logical for the user.
- Some of the required project content is included.
|
|---|
Final submission requirements (Nov 10)
The final submission for P2 is:
- An uploaded product site,
- a citation list,
- a git repository.
All are submitted as a URL (or set of URLs) to Canvas. You can use the git readme file to link to the citations and the uploaded project site.
Your project submission is due to Canvas before your Nov 10 lecture.
Please make sure double-check all your submitted files and URLs to ensure they can be opened. We want to avoid late or problematic submission penalties whenever possible.