Skip to content
Submitted about 2 months ago

Responsive Recipe Page Using Bootstrap and Custom CSS

Vaishnavi•30
@VaishsCode
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am really proud of completing this challenge and achieving a design that closely matches the original. Next time, I will focus on avoiding unnecessary classes and organizing my code in a more structured and efficient way.

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

One challenge I faced was ensuring that the page looked consistent across different devices and screen sizes. I overcame this by using Media Queries and Bootstrap's grid system to create a responsive layout.

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

Are there any improvements I can make to the overall structure of my HTML and CSS? How can I make my code cleaner and more maintainable?

Are there any better practices I should follow to ensure the page is fully responsive on all devices? Is there anything I can improve with my use of media queries?

Is it beneficial to use frameworks for small-scale projects, or should I focus on building everything from scratch?

Community feedback

  • Ivaylo Ivanov•260
    @ValsCodesPosted about 2 months ago

    Great work overall! I could not see sematic HTML tags being used. The code is readable from what I can see, haven't used bootstrap for the challenges but things look good.

    Here as some suggestions:

    • Simply adding role="main" to your main div is enough for the beginner challenges
    • The margin on the top could be improved as well as the margin of the image
    • The solution is a little it bigger than the design
    • Feel free to remove the frontend mentor footer if you feel like it :)

    Great Job overall. Keep going!

    Marked as helpful
    1

Please log in to post a comment

Log in with GitHub

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