P4: Design and Develop (due April 8)
Introduction
In this project you will build a mockup of the site you designed as part of P3 in HTML and CSS with you now being permitted to make use of other visual treatments that suit the branding.
This project is completed in groups of two or three.
P4: Design and Develop is worth 25% of your final grade.
This term's context
For both P3 and P4 we will be working with the Embark Sustainability Society to propose an alternative to their Find Your Climate Community flowchart. This alternative should clarify the information provided through an interactive website.
You are welcome to:
- Organize or reorganize the content as long as relationships stay consistent with the original flow-chart.
- Re-label or re-write link text and headings for clarity.
You are expected to work within Embark's branding for this project. There is an Embark Sustainability style guide available for use.
Weekly instructions
This project spans multiple weeks. Please read the weekly instructions carefully.
From March 11 to March 18
Please complete the following:
- As a group complete the team contract. Bring a printed copy to the next lab.
- As a group join a P4 Group on Canvas.
- To set up FTP, email Andrew or message over course chat with each team member cc'd. Andrew can create you a server space for your team to upload your files to. This will be important for being able to test your websites.
- Review your P3 submission(s). As a team discuss what you may keep or need to revise while working on P4.
- Determine the visual treatment of elements. You are now permitted to work with more visual treatments within Embark's branding. There is an Embark Sustainability style guide available for use.
- Decide how to divide the HTML and CSS work. Build out all of the sections proposed in P3 as HTML files.
- Once FTP has been set up, upload and validate your code. We recommend using the HTML and CSS validator we have set up as it will allow you to do multiple pages at the same time.
Bring to your March 18 lab
A URL to your uploaded website for review in the labs.
From March 18 to March 25
Please complete the following:
- Ensure you have completed building out all the necessary pages and styling. Aim to have your mockup as close to finished as possible to allow for the best testing and critique in next week's labs.
- Validate your HTML and CSS code using our course validator. We have set up as it will allow you to do multiple pages at the same time, though only if they are uploaded to a server.
- Test the responsiveness of your website. Use our course responsiveness tester to test your website at a variety of resolutions.
Bring to your March 25 lab
- A URL to your uploaded website for review in the labs.
From March 25 to April 8
Working with the feedback you receive in the labs, revise your final designs.
Embark members will likely be joining in for an in-lecture critique in April 8.
Grading rubric
Grading for this project focuses on the final website and code. Please email Andrew with any questions about the rubric.
A | B | C | D/F | |
---|---|---|---|---|
Teamwork (4 points): | Team contract has been completed and all weekly teamwork reflections completed (graded individually). | Team contract has been completed and one weekly teamwork reflections missing (graded individually). | Team contract has been completed and two weekly teamwork reflections missing (graded individually). | Team contract is missing and two weekly teamwork reflections missing (graded individually). |
Design (7 points): |
|
|
|
|
Code (7 points): | The code is human readable, semantic and valid HTML5 and CSS3 with absolutely no errors. | The code is human readable, semantic and valid HTML5 and CSS3 with 1 major error (things we have taught you directly) and up to 4 minor errors (things we have not taught you). | The code is human readable, valid HTML5 and CSS3 with up to 2 major errors (things we have taught you directly) and up to 6 minor errors (things we have not taught you). | The code is not human readable and/or is not valid HTML5 and CSS3 with up to 4 major errors (things we have taught you directly) and up to 8 minor errors (things we have not taught you). |
Consistency (4 points): | Visual treatment of elements — headings, links, buttons, images (if applicable) — is consistent across the website. | Visual treatment of elements — headings, links, buttons, images (if applicable) — is mostly across the website. | Visual treatment of elements — headings, links, buttons, images (if applicable) — is inconsistent across the website. | Visual treatment of elements — headings, links, buttons, images (if applicable) — is inconsistent across the website. |
Responsive design (3 points): |
|
|
|
|
Final submission requirements (April 8)
The final submission for P4 is a responsive mockup of the website in HTML and CSS. Please make sure:
- All links between pages of the site work
- All content is real (not placeholder)
Your project submission is due to Canvas before your lab time on April 8.
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.