Skip to content
Submitted about 1 month ago

Static page using Semantic HTML and CSS

Chrystiana Penalber•100
@chryspenalber
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?

I was proud of successfully adapting the code for smaller screens without major difficulties. I finished the project in two days, but I believe it could have been faster. And I think I could work better on accessibility next time.

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

Actually, I didn't encounter any major challenges with this project. Adapting the code for smaller screens was simple and straightforward. I was able to complete it quickly without any difficulties.

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

I would like to know what I can improve in terms of semantic HTML and accessibility.

Community feedback

  • Isaac Alvarez•250
    @isAlvarezDevPosted about 1 month ago

    Hey, Chrystiana. Good job, your solution is great.

    There are two thing I would advise you. The first one is, the <b> tag is deprecated, MDN suggests using <strong> because <b> is an element doesn't convey such special semantic information. The second one is, you should read about clamp() property in css. It will help you to create dynamic font sizes and spacing. Instead of type a specific font-size o padding depending the screen width, with clamp() can make it easy for you.

    Marked as helpful
    1
    Chrystiana Penalber•100
    @chryspenalberPosted 27 days ago

    @isAlvarezDev Thank you for your suggestions! I really appreciated them. Regarding the <b> tag, since it has no semantic value, should I use <span> with CSS instead? I will study clamp(), as I haven't heard about it before.

    0
    Isaac Alvarez•250
    @isAlvarezDevPosted 27 days ago

    @chryspenalber In this case, I'd recommend you to use <strong></strong> tag instead <span></span>.

    After all, <span> element is a generic inline container for phrasing content, which does not inherently represent anything; just, for styling purposes.

    An example in your code:

    <ul>
 <li><b>Total:</b> Approximately 10 minutes</li>
 <li><b>Preparation:</b> 5 minutes</li>
 <li><b>Cooking:</b> 5 minutes</li>
</ul>

    You're trying to indicate that it's contents have strong importance, seriousness, or urgency. And, this is the perfect definition for strong tag.

    Marked as helpful
    1

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