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 with TailwindCSS + NextJS

Atatra 170

@Atatra

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?

So, I'm finally starting my webdev journey. What I'm not proud of is that it took me way too long to achieve this challenge, more or less. But I'm happy that I took enough time to do research, and try to really grasp what I was doing. Yeah I know.. using NextJS is probably overkill here, but I want to learn how to use this framework, so I'm glad I did!

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

It's my first time doing responsive design, and my first attempt at really trying to organize as much as possible my html page, so I had to google a lot of stuff.

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

It's a bit unfortunate that I couldn't make the page look right with super low width ( tag... Also, due to me flex-wrapping words, the text is unreadable at such dimensions. Finally the article gets resized and the beige background becomes visible again. If anyone has any suggestions, I would be very thankful!

Community feedback

Jani-B 270

@Jani-B

Posted

Looks very nice. (i did not find the white space).

Code and page both look very good and I think it is not a bad idea to use Next.js with a simple page because it is good training. I do it also for small projects to get good experience. About the super low width. i noticed problem only well under 300px but I think that is not something that people see often. The nutrition table at the bottom is the cause for that. smaller font size and smaller padding will help there, but I think it is not a real issue.

Very good looking page :)

Marked as helpful

1

Atatra 170

@Atatra

Posted

@Jani-B I'll try to apply your suggestions, thanks so much for your feedback, it's motivating! :)

0
Atatra 170

@Atatra

Posted

Someone knows why there is a white space at the bottom of my page? It didn't show up on my browser/phone. :'(

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