Submitted 5 months ago

Recipe Page - BA

soybrrraian• 80

@imbraian

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?

I am proud of myself because I have been capable of finishing the project, even though it has been challenging for me to do so. Next time, I'd like to improve my abilities and learn how to use them correctly.

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

The challenges I encountered were primarily with tables because I had never worked with them before

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

I'd love to receive help with everything related to tables, flexbox and more (tips, semantics, etc).

Community feedback

Thomas Dimnet• 250

@tdimnet

Posted 5 months ago

Hi @imbraian,

Very good job indeed!

I saw you used css variables: it's really cool and professionial. The same goes for the BEM notation. However, you decided to use max-width instead of min-width. I tend to prefer the second one, it makes the approach for mobile friendly.

For your table, I saw this:

<p>The table below shows nutritional values per serving without the additional fillings.</p>

You could use the caption tag instead. It makes tables more accessible, especially to screen-readers and assistive technologies. You can learn more about tables on the mdn: https://developer.mozilla.org/fr/docs/Web/HTML/Element/table

Great job! Tom.

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