drkjc / teacozy Goto Github PK

Great job adding comments to your HTML file!

https://github.com/derekjcerretani/teacozy/blob/e0f369e1658c60ed531afe5a8d0b4f3d4f90da50/index.html#L10

Rubric Score

Criteria 1: HTML Structure

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

Criteria 2: Visual Layout

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

Criteria 3: Use of Flexbox

• Score Level: 4
• Comment(s): All flexbox properties were applied correctly.

Criteria 4: Implementation of Design Specification and Content

• Score Level: 4
• Comment(s): The page includes all style and content provided in the design specification.

Overall Score: 16/16

Congrats on finishing the Tea Cozy project! You did an excellent job implementing most of the required design and styles specifications. Apart from that, you did an excellent job executing the layout for your HTML file in order to make use of flexbox. Finally, you did an incredible job ensuring that your code was readable by making use of comments and whitespace all throughout your project.

If you'd like to expand your project a bit more consider researching the pseudo-classes hover, active and the property transition. Hover, active and the transition property are commonly used together as showcased by this codepen.

For these links if you make use of ids for each of the links respective section you can add anchor links that take the user to each section when linked.

For example for the mission section:

    <div id="mission">
      <div class="mission image-content">
        <div class="text-content">
          <h2>Our Mission</h2>
          <h4>Handpicked, Artisanly Curated, Free Range, Sustainable, Small Batch, Fair Trade, Organic Tea</h4>
        </div>
      </div>
    </div>

Then the link can be updated to:

        <span><a href="#mission">Mission</a></span>

If you take this approach you will need to update your CSS file by targeting the new mission id instead of the class

#mission {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

https://github.com/derekjcerretani/teacozy/blob/e0f369e1658c60ed531afe5a8d0b4f3d4f90da50/index.html#L17-L19

Nice job adding comments to your CSS file!

https://github.com/derekjcerretani/teacozy/blob/e0f369e1658c60ed531afe5a8d0b4f3d4f90da50/resources/css/style.css#L1

Nice job including the alt attribute on all your images!
https://github.com/derekjcerretani/teacozy/blob/e0f369e1658c60ed531afe5a8d0b4f3d4f90da50/index.html#L14