Responsive landing page using Next.js and Tailwind css

Solution retrospective
I’m most proud of completing this project and being able to turn the design into a fully functional, responsive interface. It gave me confidence in using modern layout techniques like Flexbox/Grid and helped me practice writing cleaner, more structured code. If I were to do it again, I’d spend more time focusing on accessibility and writing more reusable CSS to make the project easier to scale and maintain. I’d also try to plan my workflow better by breaking tasks into smaller steps so I can catch issues earlier.
What challenges did you encounter, and how did you overcome them?One of the main challenges I faced was getting the layout to look exactly like the design, especially with spacing and alignment across different screen sizes. At first, my sections looked a bit off, but I overcame this by carefully inspecting the design details, using browser dev tools, and adjusting my CSS step by step.
Another challenge was keeping my CSS organized, because it’s easy for styles to get messy as the project grows. To fix this, I tried grouping related styles together and reusing classes instead of writing everything from scratch.
I also ran into some issues with responsiveness, but breaking down the design into smaller components and testing frequently on different screen widths helped me solve those problems.
What specific areas of your project would you like help with?I’d love feedback on how I structured my code, especially my CSS. Are there areas where I could make it more reusable or easier to maintain?
I’m also interested in tips for improving accessibility, things like using semantic HTML correctly, handling alt text, or adding ARIA attributes where necessary.
Finally, if anyone notices places where my responsive design could be improved (like better breakpoints or smoother scaling between screen sizes), I’d really appreciate your suggestions.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Marvel’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