Skip to content
Submitted 6 days ago

Responsive Recipe Page React + Tailwind CSS

tOnski86•240
@tOnski86
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?

Implemented a few components to get reps on React - also got to practice implementing Tailwind on specific components to ensure DRY code.

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

Not thinking about React or Tailwind as separate technologies, but to mesh them together as part of a singular efficient workflow in preparation for implementing interactive web applications.

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

Speed and efficiency when implementing a mobile-first design with Tailwind CSS.

Community feedback

  • KoalaChang•60
    @KoalaChangPosted 3 days ago

    Nice work! I struggled with Tailwind CSS as well. Thank you for the advice on mobile-first design, I completed this challenge that way, and the result is satisfying!

    By the way, your GitHub page seems to be unavailable. Is that intentional?

    0
    tOnski86•240
    @tOnski86Posted 3 days ago

    @KoalaChang Hi! I think it's def easier to implement Tailwind if you know its vanilla CSS counterparts. Although I am still figuring it out as well, you'll soon realize that you're not technically learning something new but rather, translating what you already know!

    Biggest benefit I can think of when using utility classes so far is how you can override and apply some sort of a "style guide" on the tailwind.config.js file. Also not having to think about naming CSS classes is def a plus!

    I might have set the other projects to private - the last ones I did are public you can check them out if you want :)

    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