
Solution retrospective
For this project, I am most proud of how I was able to replicate the responsive layout of the hero section, use clamp for fluid font-sizing and width of some elements, and creating the number circle with vertical line.
What challenges did you encounter, and how did you overcome them?I really tried to focus on using utility classes where possible to avoid duplicated styles. I can still refactor further and I came into the issue of some styles needing to change for larger screens.
I would plan for this better in future projects.
I am generally unsure as to whether to use the exact spacing in the Figma designs or to stick to the spacing specified in the design system, to keep it more uniform, even if it differs slightly from the design. But I think I struck a happy medium.
What specific areas of your project would you like help with?I would like help with:
- Opportunities for refactoring
- Feedback on my solution to creating the responsive hero design.
- Replicating the overflowing hero image on desktop
- Mixing methods. Sometimes I have used flexbox (where spacing between elements is even), and at other times I have used margin-bottom (where spacing differs between elements)
- To get the right layout for the desktop cta section, I used max-width on the text-containers, but this does not feel like the most effective way.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Scott Martin'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