Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

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

@tshepomahlonoko

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

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.

Community feedback

Ralph 190

@RalphPastel972

Posted

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

0

Please log in to post a comment

Log in with GitHub
Discord logo

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