Skip to content
Submitted 8 months ago

Recipe page

Carisa Elam•100
@carisaelam
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?

Proud that I was able to get this done in a timely manner. Proud of my attempt to use semantic HTML.

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

Honestly, I was tired when I was doing this, and I kept making simple mistakes (typos, not closing tags, etc.)

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

right now I have "body" serving as the overall container for all of my elements. Is this best practice, or should I have created a catch-all "container" div to put everything in? If that is the case, what would be the correct semantic HTML for that div?

Community feedback

  • I'mVeryZyla•500
    @RaulTindoganPosted 8 months ago

    Great Work ma'am! I think this is a great start. I saw some issues on this specially on mobile responsiveness.

    -Is it really okay if we use body as the whole container for our html elements? Answer: Yes it is actually the container. Base on your code I saw that you set the body width property to 700px. You can remove it, since the default value of body's width is 100% you don't need to edit it you can leave it as it is. After inspecting your work I saw that it also the reason why it is not mobile friendly.

    1. Heading tags (<h1></h1> - <h6></h6>) must be sequentially-descending order.
    • On your code this <h3 class="preparation__title">Preparation time</h3> comes first than this <h2 class="ingredients__title" id="ingredients">Ingredients</h2>. I think you use it because of their size, but you can also use <p> for preparation__title and adjust its style using css.

    1. You can also remove the width: 100%; property to a block element since its default property is 100%.

    2. You can add padding top and bottom to the body.

    3. I think you can change the <header></header> to <section></section> and put it inside the <main></main> because we usually use <header> tag for navigation and branding.

    4. You can make the <main></main> as a container and body as a background.

    You can learn HTML here: https://www.w3schools.com/html/

    It is normal to make mistakes like not closing a tag, when you are coding for a long time you will master it. You can also use Visual Studio Code for coding because there is an assistance to it for typing tags and elements. It will make your coding easier.

    You can download it here: https://code.visualstudio.com/

    Marked as helpful
    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