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-main with HTML5 and CSS Flexbox

Pepper 250

@TeewsPepper

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
edpau 240

@edpau

Posted

Very good code, I like how you handle the image and content in responsive design, nice and clean. Your class names are well structure and easy to understand.

I used <table> for the Nutrition section, I think it is more semantic in HTML.

What is your opinion on strong tags to make things bold, not span?

Marked as helpful

0

Pepper 250

@TeewsPepper

Posted

@edpau Hi, thanks for your feedback, you've helped me improve. It is correct to use <table> for nutritional values instead of <div> as it improves accessibility and makes the work of search engines easier. As for the use of <span> or <strong>, it would have been better to use <strong> instead of <span> in this case for the same reasons mentioned earlier. If the content has special relevance, as in this case, it's advisable to use <strong>, while if it's just about changing the visual appearance but the content is not relevant, <span> can be used. Thanks again for helping me improve; I'll make the corrections based on your feedback as soon as possible.

1
P
Steven Stroud 4,100

@Stroudy

Posted

Great job with this solution, Its not 100% correct to the specification but it works, I didn't look at this with different screen sizes and doesn't look like it should from the design file. Love the fact you are using the correct units instead of px.

1

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