Skip to content
Submitted 9 months ago

Recipe Page with semantic HTML

matbac85•600
@matbac85
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?

Hello There !

-I managed to implement media queries well, ensuring responsiveness by prioritizing the mobile version. -I sense that I'm beginning to grasp some best practices, which is a satisfying progression.

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

-Styling lists, particularly customizing li::marker. -Styling the table in the last section, specifically inserting lines between each row. -Uncertainty regarding the header within the article.

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

-I'm seeking reliable resources on HTML semantic tags. Any recommendations would be greatly appreciated! -What's more, I know I've probably made a lot of mistakes again. Feel free to point them out to me. It will help me improve.

Community feedback

  • Kamran Kiani•1,280
    @kaamiikPosted 9 months ago

    Good job Mathilde I think the responsiveness is very good. even I test it on galaxy fold mobile and that was very good. There are some points I see in your code although:

    • Using <em> instead of <strong> is better I think.
    • On ingredients part, the markers on ul is not as same as the design. I don't know you did this on purpose or not.
    • Using clamp is great. I've personally never used it before.
    0
    matbac85•600
    @matbac85Posted 9 months ago

    @kaamiik

    Thank you for your kind feedback.

    • I'm still unsure about the usage of <em> and <strong>. Despite reading various articles, it remains unclear to me. Here is one of them: When to Use <strong>, <em>, and <i> Tags in Your Markup

    • I realized that after submitting my challenge. It wasn't intentional, and I appreciate you bringing it to my attention. I've corrected it along with some padding issues.

    • Absolutely, clamp() is fantastic if you only need to adjust width and font size proportionally to screen size. I'm a big fan :)

    0
    Kamran Kiani•1,280
    @kaamiikPosted 9 months ago

    Oh sorry. I read somewhere that <b> tag is deprecated. In some projects It is better to use <strong> and in some <em>

    @matbac85

    0
    matbac85•600
    @matbac85Posted 9 months ago

    @kaamiik

    I think you are right about <b> tag :)

    0
  • Mags•270
    @DshizaPosted 9 months ago

    Think yours looks better than the design. Good job.

    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