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

Blog-Preview-Card

yagnik0 420

@yagnik0

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


First Project with Tailwind CSS.🚀 Any tips & tricks would be helpful.

Happy Coding!🫡

Community feedback

P

@tatasadi

Posted

Hello there, good job on completing the challenge.

I have a suggestion for you. Instead of using a fixed maximum width for the parent of "Learning" label, consider using flex on the parent to allow the content to adapt more fluidly to the available space. You also does not need extra parent for the label. Something like this:

<div className="flex flex-col items-start gap-3">
    <p className="bg-yellow flex items-center justify-center gap-2 rounded-[0.25rem] px-3 py-1 text-xs font-extrabold lg:text-sm">Learning</p>
    ....
</div>

I hope you find it useful!

Happy coding!

Marked as helpful

0

yagnik0 420

@yagnik0

Posted

@tatasadi thank you, for taking your time to review my code I'll implement it soon.😊

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