Project Review - Githubissues

Rubric Score

Criteria 1: All Pages are Included

Score Level: 4/4
Comment(s): All pages for this project were included and looked pretty good! I have a few comments about various aspects of some pages, but I have noted those in the appropriate criteria sections below.

Criteria 2: Consistent CSS Styling Across all Pages

Score Level: 4/4
Comment(s): From the home page, product page, shopping card, jobs, etc., every page on your site included a very nice consistent style. Great job paying attention to detail and ensuring continuity across every single aspect of the site!

Criteria 3: Correct Use of CSS Selectors and Syntax

Score Level: 4/4
Comment(s): Great job on your CSS! I reviewed each of your stylesheets for both selector correctness, syntax, and even ran each file through a CSS validator service and everything was perfect.

Criteria 4: Use of CSS Grid Element Spacing and Margins

Score Level: 4/4
Comment(s): You correctly used CSS Grid throughout your project as well as included a proper amount of spacing between grid elements. I really felt that the spacing was really good and aesthetically pleasing.

Criteria 5: All Pages Updated with Consistent Personality and Branding

Score Level: 2/4
Comment(s): Pretty much every singe page was consistent with the specific branding that you brought to the table. With that said, I did find a couple of issues that I have highlighted below.

Watch out for Nav Bar inconsistency

https://github.com/jmyah/bwui-capstone-placeholder/blob/f68adf0b8f990c82d48d86817564319ff2ae6fd8/ware-house-starting-code/help.html#L34

I wasn't sure if this was just a typo or in inconsistency with how your nav bar worked (e.g. the ">" character could have been used to indicate what nav bar page you were currently on). At any rate, regardless of what this is, is does cause the Help page to stand out quite a bit.

Watch out for HTML typos, especially when they impact the visual look of your page.

https://github.com/jmyah/bwui-capstone-placeholder/blob/f68adf0b8f990c82d48d86817564319ff2ae6fd8/ware-house-starting-code/help.html#L43

This just appears to be a typo, but it visually presents itself as a random floating ">" character right after the "subject" form field.

Missing Images.

I typically use the rawgit service to actually view your website hosted on GitHub as if it were deployed to GitHub Pages or some other hosting service, and I noticed that several pages had problems loading images. When I dug into your code it looks like that these instances all have capitalization inconsistencies. For example, on the Home page your relative path for the image is...

https://github.com/jmyah/bwui-capstone-placeholder/blob/f68adf0b8f990c82d48d86817564319ff2ae6fd8/ware-house-starting-code/index.html#L18

However, the image file is actually Home.png. The bottom line is that you need to ensure that your capitalization is accurate as not every operating system treats this the same. Some will be able to load the image (e.g. Windows) while others will not because it thinks you are referring to a differing file (e.g. Linux). Here is the rawgit link so you can see what I mean.

https://rawgit.com/jmyah/bwui-capstone-placeholder/master/ware-house-starting-code/index.html

Criteria 6: Typography Hierarchy (Are body text and heading text distinguishable?)

Score Level: 3/4
Comment(s): Your typography hierarchy is pretty good, however I found it difficult to draw attention to most of your page headers because the font size is so small. Take a look at the home page for example, the hero image header (e.g. "Shop Dining Tables") just gets swallowed by the image and the other heading section fonts are actually smaller than the image fonts. I would personally recommend increasing the size of your headings across the site by at least 2 points.

Criteria 7: Page Linking

Score Level: 4/4
Comment(s): All of your page links were correct and the links themselves fit in well with the overall site branding. Looking good!

Criteria 8: Accessibility

Score Level: 4/4
Comment(s): You did a very nice job including common accessibility capabilities to your entire site by using HTML5 elements, ARIA roles, and labels. My recommendation here is to make sure you are familiar with some of the other lesser known special purpose HTML5 elements such as <main>, <section>, <article>, <figure>, and <figcaption>. I think these elements would definitely be relevant for this website and they provide that extra bit a semantics that is critically important for accessibility.

Criteria 9 (Optional): Responsive Design

Score Level: ?
Comment(s): It wasn't clear to me if you took on the challenge of creating a responsive design for this site, so I am not including this in the final score. There were several media queries included in your CSS and of course CSS Grid is responsive by design, but some page components were not included in your media queries...so I wasn't sure. The main thing that I would recommend here is to use media queries to modify your header/nav bar in order to achieve a good responsive design. For example, if you shrink the screen size on your site, the nav bar lnks bunch up such that they are no longer visually pleasing and difficult to read. I think a good approach here is to switch over to Icons for each link and then either remove the search bar or move it to the next line and make it the entire screen width. This is a common way to deal with this style of header/nav bar on small form factors.

Overall Score: 29/32

Overall you did a fantastic job on this project! It was very clear that you learned a lot from this course and spend a proper amount of time on your project to end up with a nice piece of work. If you are interested in learning more about HTML and CSS I would definitely recommend the Building Websites from Scratch Intensive (where you will go into more depth about CSS, Flexbox, and responsive design).

Keep up the great work!

jmyah / bwui-capstone-placeholder

Project Review #1