Submitted about 2 months ago

NextJs - Tailwind CSS - Shadcn UI

next, tailwind-css, shadcn

Grecco Oliva, Franco•290

@GreccoOliva-Franco

A solution to the News homepage challenge

Preview Code

Solution retrospective

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

I've built the Mobile UI first with "flex flex-col" and, when tackling the Desktop UI, I had to fully change it to grid. It was fast and easy (very important)

Future improvements:

Design the layout taking into acount both screens from the starting point
Better responsive UI throughout all screens

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

Shadcn sheet component, used in the Mobile Navbar, did not close as intended. (Overcome: Had to look for a solution online and solve it)

Code

Please log in to post a comment

Community feedback

SmartAce•390
@Smart-Ace-Designs
Posted about 2 months ago
Hello @GreccoOliva-Franco, Congratulations on completing the challenge.

The mobile layout looks excellent and the mobile menu works perfectly. Good job! I also like how you used components effectively. I am not too familiar with React (I use Vue and Astro) so I can't really speak too much on the React code itself.

Here are a few things I noticed that might need adjusting:
1. The button, on hover, has black text on a black background.
2. The aside and main articles section, for the titles of each article, do not contain a link or change colors on hover.
3. The page has vertical scrollbar...not a huge deal but might be something to fix if you want.
4. You might want to add some aria tags as needed, for accessibility purposes.
Overall, just a few minor visual tweaks that you might want to adjust. But for the most part looks really good.
Marked as helpful

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