Skip to content
Submitted over 1 year ago

Responsive vue and tailwindcss recipe page

tailwind-css, vite, vue
Moses•340
@mbtenkorang
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

All suggestions and comments, especially on improving semantic html and accessibility are welcome.

Code

Please log in to post a comment

Log in

Community feedback

  • yyuntzpan•40
    @yyuntzpan

    Corner Radius Suggestion:

    • I recommend paying attention to the distance between the outer and inner corner radii when handling corner radius. Adjusting the size of the corner radius based on this distance can make the element appear more balanced.

    Ordered List (OL) Display Suggestion:

    • For items in an ordered list, I suggest making the numbers bold to improve readability and make the content stand out. You can set class="marker:font-bold" on the <ol> element

    Component Breakdown and Reusability:

    • You did a great job breaking down each component and assembling them again. This not only improves code reusability but also makes maintenance easier. In the future, you might consider breaking down common components like buttons and cards into smaller functional modules to make them reusable across other pages.

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