Submitted 16 days ago

Grid Landing Page | Responsive React & Tailwind CSS

preact, tailwind-css, vite

LVL 4

Mohamed Hosny•719

@Eng-MohamedHosny

A solution to the Grid landing page challenge

Preview Code

Solution retrospective

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

Proud of the pixel-perfect responsive grid layout accurately adhering to all Figma design tokens across Desktop, Tablet, and Mobile viewports, complete with an accessible interactive navigation drawer and clean semantic HTML5 markup.

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

Ensuring the multi-column and asymmetrical grid structure seamlessly adapted across screen sizes without content breakage or layout shift, resolved by utilizing responsive CSS grid template columns and Tailwind CSS utility classes.

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

Feedback on responsive typography scaling, accessibility ARIA announcements, and Tailwind CSS code organization would be greatly appreciated!

Code

Please log in to post a comment

Community feedback

No feedback yet. Be the first to give feedback on Mohamed Hosny’s solution.

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