Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Recipe Page

P
gfunk77 1,200

@gfunk77

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Feedback and tips are always appreciated.

Community feedback

P
solvman 1,670

@solvman

Posted

Hi @gfunk77 👋

Your projects look to be very well done:

  • ⭐️ Very well-structured semantic HTML 👍
  • ⭐️ Clean CSS without repeated code 👍
  • ⭐️ Mobile Design First is always a win in my book 👍
  • ⭐️ Using REM units for fonts, padding, and margin 👍 (Though there are a few occurrences of pixels in the media query section. Is there a purpose for that?)

I have one minor suggestion. I don't quite agree with using the <article> element for what seems like a <section> content. As per HTML5 Living Standard:

"The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content."

So, as I understand it, <article> is more suitable to be used with self-contained and independent pieces of information; using it with sections such as Ingredients, Instructions, and Nutrition is not semantically fitting since those sections are integral and non-separable part of the recipe. However, using <article> to wrap around the recipe is a semantically correct choice. Since the recipe is, in principle, an independently distributable or reusable piece of content. (refer to: HTML5 - Living Standard - Section or Article)

I hope you don't mind my nitpicking. 😅 I appreciate your hard work and believe these minor adjustments could improve the project. Thank you for being so understanding. Otherwise, your project is very well done! Congratulation! 🎉

Marked as helpful

0

P
gfunk77 1,200

@gfunk77

Posted

@solvman

Thanks! I appreciate it!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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