Skip to content
Submitted 10 months ago

Responsive card using HTML and CSS

Richardā€¢10
@rangapin
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

How would you rate this code out of 10?

The code is not designed to be responsive yet the card on mobile seems adequate (not sure about this)

Are there any obvious mistakes here?

Thanks:)

Community feedback

  • Daniel šŸ›øā€¢44,310
    @danielmrz-devPosted 10 months ago

    Hello @rangapin!

    Your solution looks great!

    I have a suggestion for improvement:

    • For semantic reasons, use <main> to wrap the whole main content, not just the text. The whole card is the main content on the page. The tag <main> is not just for texts, so you can use it to wrap it all.

    šŸ“Œ This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.

    I hope it helps!

    Other than that, great job!

    Marked as helpful
    0
  • Ahlamā€¢300
    @AhlamAb22Posted 10 months ago

    Good work Richard!

    I have one suggestion, "HTML & CSS foundations" is clickable, and clickable items should be either a button or an anchor depending on the action :)

    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