Prototype Midterm Project
Description
Continuing the process of building a website, you will create a responsive website of at least 3 pages using HTML and CSS based on your website prototype designed for the Design Foundation course. You are welcome to create more pages if you wish. Your homepage should set the brand, layout, look, and feel of your website. Style matters for this assignment so make it look good!!
You may create any pages you wish but you are to demonstrate the requirements as listed in the assignment. This will potentially create friction between design priorities and meeting the objectives of the assignment.
As much content as possible should be created by you but please attribute any work that is not yours.
Guidelines and Considerations
- Stay on Scope: Stick to the requirements before getting fancy or tackling any additional work
- Help Each Other: Help each other by being supportive, testing each other’s work and offering suggestions to help remove road blocks DO NOT COPY CODE !!
- Keep it Simple: Try not to get stuck in overly complex fixes and code
- Divide and Conquer: Break the problem down into smaller, manageable problems
- Pseudocode: Use everyday language to describe the structure, behaviour and style of your solution
- All Work is Gradable: Any extra work in your assignment must be implemented correctly and is subject to grading
- Validate and Test Often: Testing and validating your code often means not getting stuck trying to fix errors at the last minute.
Requirements
The following requirements must be met in order to complete the assignment successfully:
- Build a 3 page web site. To create th web site you may choose one of the following options:
- Base the web site off of the 3 page mock up you created in Design Foundation
- Create a completely original 3 page mock up and build the web site from that
- Base the web site off of the 3 page ARC mock up
- You will need to create the HTML, CSS, and any required assets.
- You HTML and CSS should be valid and well formatted.
- Comments should be provide in the HTML and CSS explaining what your code does and why you chose to use it.
- You site should be functional and visually appealing across multiple browsers.
- Your site should respond to different screen sizes. CSS grid, flexbox, or any combination of the two may be used to create the layout of the page.
- No specific media queries and break points are required, but should be used as necessary.
- All images on the site should be optimized for web use, and responsive image techniques should be incorporated.
- At least two noticeable animations should be used to enhance the over all user experience of the site, with at least one using the animation property.
- Include the mockup from Design Foundations used to create your site.
Rubric
| Criteria | Excellent | Satisfactory | Marginal | Unsatisfactory |
|---|---|---|---|---|
| 25 Points | 20 Points | 15 Points | 12 Points | |
| Layout | The layout demonstrates superior layout that transitions seamlessly between screen sizes and optimizes on all browsers. | The layout is responsive and optimized for multiple browsers and screen sizes. | The layout is partially responsive, but was not optimized to work well on multiple browsers and screen sizes. | No meaningful attempt was made to create a responsive layout. |
| 25 Points | 20 Points | 15 Points | 12 Points | |
| Design | The site provided matching the mockup perfectly | The site provided very closely matching the mockup | The site provided somewhat matches the mockup | The site provide does not resemble the mockup at all |
| 10 Points | 6 Points | 4 Points | ||
| Imagery | The site images on the site were of excellent quality, were optimized for the web, and enhanced the over all user experience. The site images were responsive and adhered the best practice techniques. | The site images on the site were of good quality and were responsive, but were not optimized or enhanced the over all user experience. | The site images were of poor quality and / or were not responsive. | |
| 10 Points | 6 Points | 4 Points | ||
| Animation | Two noticeable animations were used to enhance the user experience of site, with at least one using the animation property. | Animations were used to enhance the user experience, but the animation property was not used. | Animations were used but not in a way that enhanced the user experience of the site. | |
| 10 Points | 6 Points | 4 Points | ||
| Code | The code is well formatted and valid. | The code is valid but poorly formatted | The code is invalid | |
| 10 Points | 0 Points | |||
| Comments | Thoughtful and adequate comments were provided | No or inadequate comments were provided | ||
| 10 Points | 0 Points | |||
| Comments | A mockup was included | No mockup was included |
Maximum Points: 100
Submission
This project and all of it assets should be published to your GitHub paging site. The URL to the live version of the project should be submit to the Prototype assignment on BrightSpace.