Skip to content
Submitted about 1 year ago

Responsive recipe landing page made using HTML5, CSS, Grid, Bootstrap5

bootstrap
Tshepo Mahlonoko•20
@tshepomahlonoko
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'm proud of how I was able to manipulate the using Bootstrap 5 in order to achieve the required result. I'm proud of how I used the @media query to make the webpage mobile responsive. Finally I'm proud of how quickly I was able to finish the webpage. It only took me 3 days.

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

I encountered my biggest challenge when it got to the table part of the page. But with the help of MDN documentation, the Bootstrap documentation as well as the community at Stack Overflow, I was able to overcome this challenge.

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

I would like to write leaner code in the future because I feel like my CSS file is too long. I would also like to finish projects faster.

Code

Please log in to post a comment

Log in

Community feedback

  • Ralph•190
    @RalphPastel972

    Hi Tshepo,

    You did very well!

    Just a quick one: I would recommend using the <article> and <main> tags. Semantics will make your code more readable and help with accessibility.

    I alos noticed you sometimes create conflict between flex and grid, like on your line 32 of your CSS file.

    I hope that helps. Have a great day!

    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