Submitted about 1 month ago

mobile-first-recipe page

C.Junior• 50

@Clar-Junior

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 of submit my first project on frontend mentor.
I'd like to organize my project better.

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

Main challenge that I encounter was how plan the project before, in fact, try code it.
CSS units rem needs improved a lot. Pseudo-elements seems far away yet.
I tried to overcome this challenges studying each point and practing.

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

CSS grid
CSS flexbox
CSS rem/em units.

Community feedback

Woldu Tsegazgi• 910

@weldu0

Posted about 1 month ago

👋 Hey, @Clar-Junior!

💡 Semantic HTML: Consider using more semantic HTML elements such as:

<section> for different parts of your content.
<main> for the main parts of your content.
<table> and its properties for the last part of the site.

To convert from px to em:

1em is typically equivalent to 16px (assuming the default font size).
To convert pixels to ems, divide the pixel value by 16 (px / 16 = em).

I hope this helps you. 😊

Marked as helpful

C.Junior• 50

@Clar-Junior

Posted 30 days ago

@weldu0

Thank you! This tips will help me a lot.

Woldu Tsegazgi• 910

@weldu0

Posted 30 days ago

You're welcome! I'm glad to hear that. @Clar-Junior

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