elliottre / teacozy Goto Github PK

Subtlety for errors! On line 60 you have a stray ending </div> tag that needs to be deleted.

https://github.com/elliottre/TeaCozy/blob/master/index.html#L60

Simplify! Consider using semantic HTML elements like <header> (instead of the <div class="header">), <nav>, <section>, and <footer> (<div class="footer">). Using semantic elements helps make your HTML more meaningful to browsers reading your markup, helps with SEO, and improves the accessibility of your page. Here's info on how semantic elements help with accessibility: https://webflow.com/blog/html5-semantic-elements-and-webflow-the-essential-guide (scroll down to the 'So what are semantic elements good for?' heading) and a tutorial that goes over semantic elements and more reasons to use semantic HTML: https://internetingishard.com/html-and-css/semantic-html/.

Subtlety for errors! Line 5 of the CSS you have an extra colon that needs to be deleted.

https://github.com/elliottre/TeaCozy/blob/master/resources/css/style.css#L5

Simplify! Consider using group selectors for any repeated styles in your CSS like display: flex;. Also, flex-direction: row; is the default flex-direction value when you use display: flex; on an element so feel free to delete those flex-direction declarations. These changes will help make your CSS more concise.

Also, great job challenging yourself to use flexbox for your page!

Simplify! Be sure to use consistent nesting and indentation in your HTML. Here's more info on best practices for nesting and indentation (and other HTML/CSS best practices): https://learn.shayhowe.com/html-css/writing-your-best-code/. I also like your use of comments before each section, for example: https://github.com/elliottre/TeaCozy/blob/master/index.html#L61. These practices help your markup to be organized and easy to read.

Subtlety for errors! Consider using descriptive alt attributes on your <img> elements, instead of leaving them empty, or omitting them entirely - like this: <img src="resources/images/img-berryblitz.jpg" alt="mug of tea with berries" /> as this is best practice and makes your site more accessible. We can leave alt attributes empty when the image does not add information to the content of the page - see this resource to help aid in your decision to give alt attribute values (or to leave them empty): https://www.w3.org/WAI/tutorials/images/decorative/

Grade: Meets expectations

Summary:
Nice work on this project! I like your use of comments in the HTML and your use of flexbox in CSS.

A few things to work on here: 1. using consistent nesting and indentation in the HTML, 2. using alt attributes on the <img> elements, and 3. using group selectors for any repeated styles in the CSS.

Next, 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 here! 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/