Skip to content
Submitted about 1 month ago

blog preview card

sass/scss
Uxmal Cuellar•20
@UxmalCuellar
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

Learning how to create a responsive design using the clamp function instead of media queries

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

Understanding the 'preferred value' in the clamp function took a while for me to grasp, but after reading the docs and playing around with it, I finally got it in the end

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

How well did I structure my HTML for accessibility

Code

Please log in to post a comment

Log in

Community feedback

  • Mustafa Sen•3,180
    @mustafasen97

    Your design is quite nice and your HTML codes are semantically good. However, there are a few more improvements that can be made in this regard.

    First of all, it would be correct to put all the content except the footer section in the <main> tag.

    Example:

    <main>
<article>

Codes here

</article
</main>

    You can also use the <time> tag directly instead of the span in the date section and add the datetime property to this tag. The datetime property specifies the date and time of the text it contains.

    
<time datetime="2023-12-21" id="publish-date">Published 21 Dec 2023</time>

    Apart from that, I think your codes are quite good. You can also look at the code structures of experts to improve yourself in semantic HTML.

    Marked as helpful
  • Mohamed ashrf•340
    @x-mohamed25

    Nice job! The structure is clean and matches the original design. One suggestion would be to improve the mobile responsiveness a bit. Keep it up!

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