Skip to content
Submitted 3 months ago

Recipe Page with TailwindCSS + NextJS

Atatra•170
@Atatra
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

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•370
    @Jani-BPosted 3 months ago

    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
    @AtatraPosted 3 months ago

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

    0
  • Atatra•170
    @AtatraPosted 3 months ago

    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

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