Skip to content
Submitted 4 months ago

SASS, Flexbox, Responsive media queries

accessibility, sass/scss
mark orrente•180
@markorrente01
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

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

i will improve next time on all the techniques i used.

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

Encountered media queries issue and add spacing in between the list items and markers.

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

it will be of great honor if y'all can review my code and tell me where i need to make improvements. Thanks

Code

Please log in to post a comment

Log in

Community feedback

  • Tetiana•540
    @TetianaAleks

    Nice work putting together the Recipe Page! 🍳 ✅ What’s good:

    • The layout is visually clean and easy to follow.
    • Good effort using SCSS for maintainability — variables and mixins are helpful in scaling projects.
    • Semantic HTML is mostly in place, and structure makes sense.
    • The use of clamp() in media queries shows you’re thinking about responsive typography. 🔍 Suggestions for improvement:
    • There are multiple <link> tags importing the same Google Fonts — one is enough.
    • Avoid using font-size: normal; — that’s not a valid value. Consider using rem/em values instead.
    • Class names like Preparation-time or Instructions would be more consistent in lowercase kebab-case (preparation-time).
    • Try using semantic elements like <time> for dates or durations to improve accessibility.

    Overall, solid effort! With a bit of cleanup, this would be even more professional. Great job and keep practicing! 🚀

    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