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 design build with Tailwind

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@feernandobraga

Posted

Hey Muhammad, great solution overall, well done. Here are some points that would could take into consideration to improve your solution:

  • The font in the title doesn't match the design reference. You should be able to import it from google fonts and use in your app
  • In the preparation time section, there should be a bigger gap between the bullet point and text. You could hide the default style and use flexbox to help with the gap
  • The above also applies to the ingredients and the instructions part
  • The nutrition table is a bit challenging, but the text alignment is a bit off. Maybe consider using a table with two columns, or create one using css-grid, for example.

You are doing a great job! Good luck on your studies

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