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

Pixel-perfect solution using TailwindCSS and React

Brian 90

@brianlagranda

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


What are you most proud of, and what would you do differently next time?

I'm most proud of the pixel-perfect results I achieved on this project. Next time, I would avoid spending too much time looking for new ways to handle font sizing on different devices. Since I'm using TailwindCSS, I can easily manage responsive designs with their built-in utilities, like sm:, md:, and lg: breakpoints, which simplify handling layouts for different screen sizes.

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

I focused on making the font responsive for each view without using media queries, as a personal challenge inspired by FrontEndMentor. However, as I mentioned earlier, since I was already using TailwindCSS, I could have easily handled the responsiveness with its utilities, making the process much simpler.

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

Honestly, I'm not sure what I would change in this project. If you have any feedback on areas I can improve or refactor, I would greatly appreciate it. Perhaps I could make the component more dynamic, but that wasn't the main goal of this project.

Community feedback

Dotzin 80

@Dotzin

Posted

goog

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