summary	time	deliverables	download
Create a wireframe/prototype for a confectionery website—showing what you learned this term.	10 hours	1 HTML file, 1 CSS file, images	https://assets.learn-the-web.algonquindesign.ca/web-dev-1/confectionery-website-prototype-download.zip

Confectionery website prototype

Overview

Fork this repository.
Create an interative wireframe/prototype for a confectionery website. The name of the company must be either:
- Beau’s Bonbons
- Coco’s Chocolatiers
It should have real text content—that you have to write yourself.
Greys can be used for everything if you’d like. If you choose to use colours make sure they’re nicely designed and consistent.
Placeholder images are good—there’s a bunch of different sizes and shapes in the “images” folder.
The website should obviously be fully responsive: working on screensizes from 320px all the way to ~2500px.
There’s also a bunch of images that you can download and use in the site as extra—but the layout is the most important thing. If the images are there but the site isn’t responsive you’ll lose grades.
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’ve confident with what we’ve learned and can apply everything.

Markbot’s expectations

header, header nav, header h1, header li, header nav a
main, h2, div, section, img.img-flex, footer
A Google Font
CSS boilerplate: cssviewport, borderbox, textsize
Standard media query widths: 25em, 38em, 60em, 90em
Standard text sizes & line heights: 100%/1.3, 110%/1.4, 120%/1.5, 130%/1.5
margin, padding, position: absolute, position: relative, display: block, display: inline-block, display: flex
A background-color or color hover state for the navigation links

Browser testing

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

Each person will be assigned a browser or validator and will be required to test everybody’s websites.

Example

See the example website mockups in the “example-website” folder for a better idea of what’s expected.

If your website looks exactly like this you’ll receive a 0.

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
Styling	Very little CSS	Basic CSS implemented	Good variety and appropriate CSS implementations	Excellent demonstration of different CSS functionality and implementations
Text content	Fake content only	Some real content, some fake	All real content but with lots of errors	Real content, well written, no grammar or spelling errors
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 grading 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.

Request for Grade

Going into the final project, I hadn't planned on completing the website because of how poorly I was doing in this class. I didn't think I could competently build a website. It would take me an average of 3 hours to write code and please markbot on excercises that were listed as approximate completion time: 1 hour". It has been struggle street.

But someone in the class encouraged me to build a website and he would help me out a bit. I gave it a go and he gave me a really basic skeleton of code. It wasn't a copy of his website, but it helped me to get started. I spent 2 days at Starbucks (morning to evening) and a lot of late nights, trying to "crack the code" and I found that eventually, I started to fix problems I'd had in the past just by keeping at it. I ended up not using any of the code he gave me because I was slowly figuring it out for myself and designing the layout I'd drawn in class. I'm really proud of that.

My website proves that I can create a responsive website that functions across all devices - even though it still might be a bit awkward.
Here are some elements I used and styled successfully in my code:

Header
Nav
UL/LIs
DL/DDs/DTs
image flex
images that retain their size even though the browser changes
style a link card (the chocolate making classes)
applying max and min widths on elements so they retain their integrity and limit awkwardness
Creating buttons (a hrefs) and styling them.
Creating a footer with social icons
Responsive header. Getting it to change on different browser and still retain its integrity.

Flexbox was also the main street on struggle street. I couldn't wrap my head around it but I keep like I've somewhat grasped the concept in this project. The best examples of my understanding of it are under the css elements ".img-flex", the header ul, and in the header (under 60em media query).

I actually successfully applied position relative to an image and position absolute to an h1 on the first try and made the h1 sit center, on top of the image. I removed it in the end though because I felt that it didn't have great readability and I wanted my h1 to stand out enough on all browsers.

On a sliding scale I'd give myself either a B+ or an A, purely for how much I struggled compared to how it looks now. I didn't think I'd be able to create the website I did.

oliviagrce / confectionery-website-prototype Goto Github PK