Submitted about 2 months ago

Practising semantic HTML

innitman• 130

@innitman

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Reading about semantic HTML :) Made me rethink how often I reach for div all the time.

What challenges did you encounter, and how did you overcome them?

Thinking of how to include a heading or similar in each article or section, but found this comes naturally after a while.

What specific areas of your project would you like help with?

I've read the MDN docs, and my take home understanding is is used for something "standalone" and/or reusable. is more for highlighting a non-standalone area or group of items (or basically when a more specific element isn't available). is use purely when styling needs to be added to a block. I'd be grateful for any mental models people have found helpful for when to use one or the other.

Community feedback

Sunil• 130

@SunilParbhoo

Posted about 2 months ago

Nice job on this project! Nice job utilizing html elements other than divs for everything. To address your question regarding possible additional elements to use other than divs, here is an article that may be useful (although I see you already read through the MDN docs for this as well). Stop using so many divs! An intro to semantic HTML

One thing to possibly get this to look more closer to the design is to make sure you are using the correct font color for the text. Other than that, keep up the good work!

Marked as helpful

innitman• 130

@innitman

Posted about 2 months ago

Many thanks @SunilParbhoo, really nice link. Re: matching colors -> I'm red-green colour blind so it's a little tricky for me, especially when it's in the red to brown range! I sometimes use tools like Sip http://sipapp.io/ to help

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord