lees3 / ecommerce-pattern-library

A term-long project redesigning an ecommerce website focusing on making a pattern library.
https://silly-darwin-5c69c5.netlify.com/pattern-library/
0 stars 0 forks source link

Request For Grade #17

Open lees3 opened 5 years ago

lees3 commented 5 years ago

My ecommerce pattern library does represent all components and variations that an ecommerce website should have. It is put together and embodies an overall bright and positive feel to it. The descriptions do explain the use of the code to someone else, although more in-depth explanations could have been used. Another person could definitely code another page without asking questions. Besides technical problems being had between the files and Terminal/Netlify, the code itself was simple and self-explanatory. The majority of the components are included and are complete. There are some contrast issues with the colours that I was not able to figure out in time (pink and green together at specific areas). There was more of a struggle than anticipated with the colour theme I had chosen and those colours not contrasting enough with other colours. I found this process to be on the difficult side. I do enjoy coding when it is kept simple and I know what I am doing, but I am a slower learner and I personally find the learning curve can be too sharp for me at times. The amount of elements to keep track of and knowing how they connect to other elements is confusing and often gets jumbled in my head. I am glad to have the experience and am hoping the next time I code a pattern library I will feel much more comfortable and familiar with that I am doing. Hopefully it makes the next process much faster and less stressful. Thanks for your patience and have a great summer Thomas!


Style & design2

Consistent colours are used throughout the pattern library and create a put-together looking appearance. Colours from the banner photo of the soap were the inspiration for the bright and fresh colours applied to the entirety of the site.

Patterns3 All imagined patterns were coded, including ones not currently used on the website- including extra cards, extra buttons, and extra sections.

Explanations - 2

Explanations were implemented properly and were descriptive.

Accessibility - 1

Shows good accessibility over all. The banner and card descriptions are explanatory enough that aria labels did not need to be implemented, but they were implemented on the social media banners and the website logo. Specific areas will probably need more of a contrast between colours.

Semantics - 2

A good variety of HTML tags were chosen. Some of these include lists, a variety of links, proper form tags, proper use of snippets, proper use of layouts, proper use of grids, a variety of text sizes and icons.

Responsiveness - 3

The website is fully responsive and looks good at all sizes.

Code Quality - 2

The code is kept on the simpler side. The indentation is perfect, and it has accessibility.

Git & Commits - 0

Commits are often forgotten and are submitted with large chunks of edits done. Sorry


15/24 — 63%

@thomasjbradley