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 Tailwind CSS UI

#tailwind-css
Imran 150

@xdevimran

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


your valuable feedback is always welcome... review the code and help me to make the code better... Thank you...

Community feedback

@MelvinAguilar

Posted

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

  • I've noticed that you've used <li>, but at no point do you wrap those list items in a <ul> tag, which is used for an unordered list.
  • I noticed you used arbitrary values for the color. In Tailwind CSS, you can easily define custom colors to ensure consistency throughout your design.

    In your Tailwind CSS configuration file (usually tailwind.config.js), you can define custom colors under the extend section. For example:

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ["./index.html", "./src/**/*.{html,js}"],
      theme: {
        extend: {
          colors: {
            'custom-blue': '#007acc',
            'custom-green': '#00b894',
            // Add more custom colors as needed
          },
        },
     },
      plugins: [],
    }
    

    Once you've defined your custom colors, you can use them in your HTML just like any other Tailwind utility class:

    <p class="bg-custom-blue text-custom-green">Custom Colors</p>
    

    For a more detailed guide and additional options, I recommend checking out this resource on Tailwind's official documentation: Using Custom Colors.

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

Marked as helpful

3

Imran 150

@xdevimran

Posted

@MelvinAguilar Thank you so much for your valuable feedback I'm going to update the code as you mentioned ...

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