sander-aaron / ecommerce-pattern-library Goto Github PK

Works on all screen sizes in Opera, Looks so great love the animation. Awesome Job!

Awesome website!! When tested on Firefox on an Iphone, the home page its wide and is horizontally scrollable. Other than that though, great job!

I absolutely love your website!! It's fantastic!!

I'm testing your website on webpagetest.org, and it's saying that you need to improve on "First Byte Time" for your product details page. Otherwise, it looks fantastic!!

@thomasjbradley
Chrome - Looks how it should because this is where I've coded it.
Firefox - Looks as expected
Opera - Looks as expected
Safari - Looks as expected

Add some aria details to make voiceover more accessible

Looks good:)

@thomasjbradley
I have gone through an added a bunch of aria-labels to my cards, buttons and everything else.
All my colour are visible and have enough contrast for everyone to see.
Links are obvious and easy to click
Cards are easy to tab through.

Page Speed Fast
Optimization suggestion
Total time expected to be saved (estimated value)
1
Provide images in a new generation format
12.9 s
2
Adjust the image size appropriately
12.3 s
3
Efficiently encode images
8.4 s

@thomasjbradley

I think for my overall grade I should get an A. I consistently kept up with all of the work and completed everything on time. As well, I have put a lot of hard work and effort into this project, to make it look the best it can. I really enjoy coding and this project pushed me to learn new skills and helped me build more confidence in learning the small details that come along with coding. As well, this project has taught me a lot about how to structure your code to make it compatible with everything else in a site.

Below I explain why I think I should get an A:

Style & design — 3

Fantastic: the whole pattern library feels cohesive & well designed - I feel like I met all the requirements for this section as everything on my site feels like it belongs together. My brand identity is very thorough and though out to make it easier to work around and with.

Patterns — 3

All imagined patterns, including patterns not used on the template pages - I made sure that all my patterns are written in a way to makes sense and to have all the necessities.

Explanations — 3

Excellent & clear, perfect for another person to work from - I have everything in my config files and the descriptions I have written for them would help anyone build with these patterns.

Accessibility — 2.5

Some minor accessibility problems - The accessibility of my page could probably be improved with better with more testing of the voiceover controls.

Semantics — 3

Excellent demonstration of HTML tags and correct use - I'm a very strong coder and I think my coding skills are reflected in this project.

Responsiveness — 3

Looks great on all screen sizes - My site is completely responsive, I think everything is fine as I didn't get any issues pertaining to the responsiveness and I build my site from the smallest size up so that it would work even when on mobile.

Code quality — 3

Perfect: semantics, indentation & accessibility - I think everything in my code is good and the formatting is correct.

Git & commits — 2.5

Good messages - I have a few "fix all the things" commits but otherwise most of my commits are descriptive and helpful and explain what was changed

24/24 — 95%

@thomasjbradley. Here is the code that I have to add the borders on to my cards.
.tshirt {
border-color: var(--color-blue);
border-width: 5px;
}
The .tshirt class is put on the div around the product card. Here is the code for the product card

LEAVES TEE

$34.72

-Add skip links to improve accessibility
-Can not tab through side nav items on products page

@thomasjbradley

Shareable Link with my Analysis and Ux Designs:
https://docs.google.com/document/d/1J53-iAYOhG1niEYLskE6VlcR5ojEiLfwtjKOJ7zfoR8/edit?usp=sharing

Invision Moodboard:
https://projects.invisionapp.com/boards/TN3S3M79KB7/

I understand that I am submitting this late but I'm submitting in the hopes that I can get partial marks but I also understand if that is not possible. I sent you an email a few minutes ago but am submitting sooner rather than later.

Thanks, Aaron