Submitted about 2 months ago

Recipe Page with Semantic Tag HTML and Flexbox

andrean-sihombing• 320

@imandreans

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'm proud that I can made it identical to the design. But, I think I can do better.

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

Hard to understand which semantic html tag to use and what's the precise length or size of the component.

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

More explanation on semantic html tag and determine the similar size of design to be implemented in solution

Community feedback

Dylan de Bruijn• 3,190

@DylandeBruijn

Posted about 2 months ago

@imandreans

Hiya! 👋

Congratulations on your solution, it looks very close to the design! I can tell you put a lot of effort into it.

Things I like about your solution 🎉

Use of semantic HTML elements
Clear descriptive CSS classes
Use of CSS custom properties

Things you could improve ✍️

Try using using relative CSS units like rem and em they make your layout more adaptable.
Try making your solution responsive, at the moment it doesn't scale when the viewport changes.
Try setting the font family on the body and override it for specific elements.
Try using the gap property in combination with Flexbox.

I hope you find my feedback helpful! 🌟

Let me know if you have more questions and I'll do my best to answer them. 🙋‍♂️

Happy coding! 😎

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