tuck0066/web-design-2-independent-project

Spend a few weeks writing the code for your independent project website—and make it amazing.

summary	time	deliverables
Spend a few weeks writing the code for your independent project website—and make it amazing.	10 hours	3 HTML files, 1 CSS file, images

Code your project

Overview

Throughout the rest of the term we’ll be working on the design of a complete independent website. The subject matter independent project website is completely your choice.

• Fork this repository.
• Code the whole website you planned for your indepenent project.
• Create a multi-page website: Home, +2 more pages.
• It should have real text content.
• It should be completely designed, with real images, real colours—and it should look amazing.
• Don’t steal images—use properly licensed images. If the image requires that you credit the author use a humans.txt file. (See an example humans.txt file).
• The website should obviously be fully responsive: working on screensizes from 320px all the way to ~2500px.
• Run it through Markbot and make sure it passes all the checks.

---

Teacher’s expectations

This website is to prove that you—by yourself—can do everything we covered in class. Look back over all the assignments from the term, determine what kernel of knowledge they were trying to teach you, and see if you can implement it in this website.

There should be a significant example of everything we’ve learned this term in this website. Leave the impression that you’re confident with what we’ve learned and can apply everything.

---

Markbot’s expectations

All HTML files

• header, header nav, header nav li, header nav a
• main, h2, div, img, footer, section or article
• main.css
• A color or background-color hover state on the navigation
• A unique <title> & <h1> for everything HTML page
• Focus states on the navigation and links in the main body content
• ARIA roles & proper accessibility & colour contrast
• Fits within the standard performance budget
• Passes all accessibility checks including skip links and ARIA landmark roles
• Google Fonts are optional—you may decided they have too much of a performance impact.

CSS file

CSS requirements are really open—just make sure the CSS is valid & indented properly.

Images

• All images should be smushed, with a maximum file size of 250kB and maximum dimensions of 2500px
• Proper favicons, favicon.ico & favicon-196.png

---

Browser & accessibility testing

In class, week 14, we will be doing lots of peer testing—most of the website needs to be complete by then.

Each person will be assigned a tool and will be required to test everybody’s websites.

• Accessibility testing
• Browser testing
• Performance testing

---

Marking rubric

Below is the rubric of expectations for this project. You will be assigned a letter grade based on your standing within the rubric.

	0 points	1 points	2 points	3 points
Knowledge	Poor understanding of material	Partial understanding of material	Demonstrates full understanding of material	Demonstrates excellent understanding of material
Responsiveness	Not responsive	Works on some screens	Responsive but with lots of awkwardness	Looks great on all screen sizes
Semantics	Very little HTML	Basic HTML tags chosen	Good variety and appropriate HTML tags chosen	Excellent demonstration of HTML tags and correct use
Design	Very little design	Basic design implemented	Cohesive design implementation	Excellent design implementation
Accessibility	Not accessibile	Some accessibility but doesn’t work well with certain situations	Some minor accessibility problems	Works really well under all the standard accessibility tests
Performance	Doesn’t come close to passing the performance budget requirements	One or two performance budget requirements are not met	Just passes the performance budget requirements	Surpasses the performance budget requirements
Home page	Missing or incomplete	Started but severely lacking	Complete but with poor text or bad responsiveness—not quite perfect	Complete, amazing content, responsive, designed well—amazing
Page 2	Missing or incomplete	Started but severely lacking	Complete but with poor text or bad responsiveness—not quite perfect	Complete, amazing content, responsive, good use of tables—fantastic
Page 3	Missing or incomplete	Started but severely lacking	Complete but with poor text or bad responsiveness—not quite perfect	Complete, amazing content, responsive, logical—super
Code quality	Missing or incomplete	Poorly done, rushed, no semantics, bad accessibility	Decent: semantics, indentation & accessibility	Perfect: semantics, indentation & accessibility
Git & commits	Bad commit messages	Decent messages	Good messages	Excellent and descriptive commit messages
Markbot	Not handed in with Markbot	—	—	Handed in with Markbot

---

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.

When you submit to Progressinator, you’ll see a grey checkmark that shows the project was handed in. You’ll still have to write a Request for Grade and the teacher will still be grading it personally.

web-design-2-independent-project's Issues

Icons

@hellachella @MacKenzieRose @JessJodoin

Hi!

First, where do I get an icon maker thingie for windows? Jess was kind enough to do mine for me but that isn't going to help next semester (I assume I am taking the next part).

Next, It is giving me errors on the icon 196 and I am not sure how to set it up properly.

Last, TY so much for everything! You have all been very kind and patient with me.

Thanks again,
Keri

Browser Testing - Disable Images

There you are Keri!

Cute idea for a website! Animals are always a win!
You added an alt tag for your picture on the main page which is great! Remember to add them to the rest of the images as well.
I've also been suggesting that a background colour is added as a placeholder for images just in case they don't load. This may avoid site squishing as well.

Good luck with the rest of the semester!!

Sarah