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

Recipe Page with semantic HTML

matbac85 600

@matbac85

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?

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

P

@kaamiik

Posted

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

@matbac85

Posted

@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
P

@kaamiik

Posted

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

@matbac85

Posted

@kaamiik

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

0
P
Mags 270

@Dshiza

Posted

Think yours looks better than the design. Good job.

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