grudinsky/teacozy

teacozy's Issues

Classes and IDs

https://github.com/GRudinsky/teacozy/blob/master/index.html#L32-L56

It'd be best to use the tag that best represents the type of content you're writing. For example:

If you're using an image, use an img tag. If you're using a paragraph, use a p tag. There's no need to write "image" or "paragraph" in class names when the HTML tag already indicates this purpose.

You've also got your IDs and Classes mixed up. Use an ID for an element that needs to be identified individually. Use a class to group multiple similar elements. If you're going to use "featured" for every tea, you should use it as a class. Then "berry", "spiced", etc. can be the IDs that identify a single tea element on the page.

Same for your locations section.

Semantic markup

https://github.com/GRudinsky/teacozy/blob/master/index.html#L10-L18

Nice job using header, nav, and footer here to make your markup more semantic. 👍

Try to go the extra mile and add a couple more semantic elements, like: main, section, menu, figure, etc. These can all make your markup a lot easier to read and reason about than just using div.

Images

https://github.com/GRudinsky/teacozy/blob/master/index.html#L33-L34

Why use an empty div tag with a class of "image" instead of a regular img tag? This is exactly what the img tag is for.

https://github.com/GRudinsky/teacozy/blob/master/resources/css/style.css#L92-L106

Nice job including your website's assets (in this case images) in your project and providing a relative file path to them in your img tags. 👍

It's always better to provide static assets up front instead of depending on external URLs that could fail or otherwise become unavailable.

`head`

https://github.com/GRudinsky/teacozy/blob/master/index.html#L3-L7

Nicely done providing a relative file path to your stylesheet and giving your your webpage a relevant title 👍

Summary

Satisfactory 👍

Good job reproducing the web page according to the design mock.

You've demonstrated adequate understanding of both basic CSS properties and advanced properties like flexbox and have these concepts to implement your site layout.

CSS and Flexbox

https://github.com/GRudinsky/teacozy/blob/master/resources/css/style.css#L66-L111

🆗