SUMMARY

[aubreywullschleger]

Rubric Score

Criteria 1: HTML Structure

• Score Level: 4
• Comment(s): HTML implementation enables proper use of flexbox.

HTML structure reflects the grouping and flow of content in the web browser.

Criteria 2: Visual Layout

• Score Level: 3
• Comment(s): Layout matches the design spec in 3-4 sections.

Criteria 3: Use of Flexbox

• Score Level: 4
• Comment(s): Flexbox properties are correctly applied to flex containers and flex items throughout.

Flexbox is used properly and is the primary way of positioning.

Criteria 4: Implementation of Design Specification and Content

• Score Level: 2
• Comment(s): There are content or style omissions from the design specification in 2-3 sections of the page. Specifically, the banner section spans the entire width of the page and the text in the locations sections is not centered (this can be easily fixed by using align-items: center; on .Downtown, .Bayside, and .Oakdale classes).

Overall Score: 13/16

Grade: Meets expectations

Summary: Good work on this project! I love your semantic, organized HTML, and your use of flexbox in CSS.

A couple things to work on here would be using alt attributes on your <img> elements and using group selectors for any repeated styles in the CSS.

Next, as a stretch goal, I challenge you to research and implement media queries to make your page totally responsive for all screen widths. This is a challenge I think you are ready for based on your work with this project! Here are a couple resources to get you started: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries and https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

[jonfaley1]

Thank you so much for your input! I was honestly struggling a little bit on this project, It's nice to know that we can always get possitive feedback on how we can improve on our code ;)