Skip to content
Submitted 9 days ago

Recipe page HTML & CSS

Sara•80
@saruuja
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?

  • For doing what I love the most Developing something and making my path of dev skills consistently

  • developing my code skills further

What challenges did you encounter, and how did you overcome them?
  • It was an excellent challenge and I wrote more code than previous challenges but I dint face serious challenge
What specific areas of your project would you like help with?
  • As I said before the areas I would like to make more in developing my frontend skills is the Responsive part

Community feedback

  • kareem sakr•140
    @kareemsakrPosted 9 days ago

    You’ve used <div class="container" role="main" id="Home">. While this is fine for a container, consider replacing it with a <main> element since it’s wrapping the main content of the page.

    There’s an unnecessary . Remove it as there’s no opening s where possible. For example:

    Recipe Image: Consider wrapping the recipe image in a <figure> and adding a <figcaption> if you want to provide an additional caption.

    <figure class="recipe-img"> <img src="assets/images/image-omelette.jpeg" alt="A delicious omelette on a plate"> </figure> Ingredients: Use <section> instead of <div class="recipe-ingredients"> for semantic clarity. Instructions: Replace <div class="Instructions"> with <section> as well. Preparation Time and Nutrition: These could also use <section> instead of <div> to enhance readability and accessibility.
    0
    Sara•80
    @saruujaPosted 9 days ago

    @kareemsakr thanks for your feedback it's so helpful

    1
    kareem sakr•140
    @kareemsakrPosted 7 days ago

    @saruuja My pleasure, feel free to reach out if you need any support

    0

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