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

KingX 150

@iwedibah

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • 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 most proud of the fact i successfully completed this challenge

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

I think my major challenge has been on responsiveness

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

please all the areas you'd find out in the codes that needs improvement, i'd definitely improve

Community feedback

@reteov

Posted

It looks like the page handles transitions well between mobile and desktop viewing. The image placement and resizing is responsive, and gets the job done well.

The text, however, needs some work.

One thing that you should avoid is the use of px measurements. You can never tell what a person's screen resolution will be, so you always want to use relative units, so that the browser can decide what the exact sizes should be.

As such, you might want to try converting your px measurements to em measurements. This allows the display to be adjustable based on the size of the screen.

Marked as helpful

0

KingX 150

@iwedibah

Posted

@reteov thank you very much, tho i am having the challenge of converting pixels to em or rem but i will improve

0

@reteov

Posted

@iwedibah It takes some getting used to. The key is that 1em is the same size as the font... If you set a font size to 16px, then 1em=16px. However, if the user needs a larger font, then 1em will translate to that size instead.

Another thing is, if you're adjusting sections or the like, using percentages can also help, as long as you remember that the percentage will always compare to its hosting container.

I hope this helps!

Marked as helpful

0
KingX 150

@iwedibah

Posted

@reteov thanks a million times marked as helpful

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