Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 7 months ago

Recipe Page

nora•100
@viranora
A solution to the Recipe page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

I'm proud of how I was able to apply responsive design principles effectively while ensuring WCAG accessibility compliance. Creating a well-structured style guide helped streamline the development process and maintain consistency across components. Next time, I would focus more on refining the color contrast ratios to enhance readability and explore different typography pairings to improve the overall visual hierarchy.

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

One of the biggest challenges was maintaining pixel-perfect proportionality across different screen sizes. Ensuring that elements aligned correctly while staying visually harmonious required multiple iterations and trial-and-error adjustments. I overcame this by leveraging flexbox and grid layouts efficiently, testing designs at various breakpoints, and adjusting spacing dynamically.

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

I’d love feedback on optimizing responsiveness further, particularly ensuring smoother transitions between breakpoints. Additionally, any suggestions on refining the typography choices for better readability would be helpful. If there are areas where I could improve my WCAG compliance or any accessibility considerations I might have missed, insights on that would be greatly appreciated.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on nora'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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License