tommygebru/bws-teacozy

bws-teacozy's Issues

Flexbox

Flexbox properties are properly applied throughout and flexbox is the primary means of positioning. Way to go!

Layout

Your layout matches the design spec in 3 - 4 sections. Nice work! I found only a couple of small differences between your project and the design specification.

First, good job getting the 10px of space to offset the logo image from the left side. I encourage you to consider implicit styling and balance of design. In this project, we will see this 10px explicitly marked on the redline document in a few places; if we consider balance, it would make sense that we can expect to find it in other places implicitly.
Inspecting your <header> in DevTools, I found the 10px of padding applied to the right side to match what the logo offset, but it is pushed off the page:


If we double this 10px between the links for a total of 20px, it more closely resembles what is found in the design specification. Try the change and see what you think!

In the Locations section, the design specification marks the <h2> at 15px above the address card. In your project, a default styling has applied 27.39px of margin:

In Unit 5, we'll learn to add a second stylesheet to clear out these default stylings applied by the browser. For now, try manually targeting the element to make the necessary change.

Also in the locations section, the redline document designates 40px of space between the address cards. I like your implementation of flexbox to layout these address cards, but my math puts the space between the cards at 50px:

  1200px (total width)
- 900px (300px x 3 address cards)
- 200px (100px margin value left and right created by flexbox and justify-content)
----------
  100px 
/     2 (spaces between cards)
----------
  50px between cards

Lastly, consider again the ideas of balance and implicit styling when looking at the amount of space between the bottom of the locations section and the start of the footer/contact information. Currently, default styling applied by the browser adds 25.74px of margin, found again through inspection with DevTools:

Try targeting this <h3> and changing that top margin to - you guessed it - 10px like we've seen in other places on the page. I think you'll find that this more closely resembles what is found in the design specification.

Rubric and Summary

Rubric Score

Criteria 1: HTML Structure

• Score Level: 4/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/4
• Comment(s): Layout matches the design spec in 3-4 sections.

(This includes a sticky header w/ no gap between it and top of viewport )

Criteria 3: Use of Flexbox

• Score Level: 4/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: 4/4
• Comment(s): The page includes all style and content provided in the design specification.

(For example, anchor colors match the design spec.)

Overall Score: 15/16

Your project Exceeds Expectations - great job! Good use of comments in your code and semantic elements in your HTML. These practices will help keep your code more readable for you and other developers, make your page more accessible, and improve the search engine optimization of deployed pages and sites. For extra practice as you work through Unit 5 and responsive design, see if you can use media queries to make your Tea Cozy page mobile friendly.
Keep up the excellent work, and happy coding!

HTML structure

Your HTML implementation enables the proper use of flexbox, and your structure reflects the grouping and flow of content in the browser. Great job!