Skip to content
Submitted over 1 year ago

Blog Preview Card Component Using HTML and CSS

karthickg24•130
@karthickg24
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?

I m very much happy to be able to complete the solution in quick span of time

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

Challenges are

  1. to set width for different screen sizes
  2. to set style when doing mouse-enter
What specific areas of your project would you like help with?

Regarding the spacing between each content. Need suggestions on how to improve on the CSS Skills.

Code

Please log in to post a comment

Log in

Community feedback

  • Grace•32,130
    @grace-snow

    I recommend you refactor this by applying learnings from your next few challenges and the feedback you've received. You should be able to improve this quite a bit now.

    Note

    • it is overflowing my mobile screen on the sides
    • there is currently no interactive element so people would be unable to ever access this blog if it was on a real site.
    • inline svgs like this need focusable="false" as some screen readers will focus on svgs (annoyingly!)
    • inline svgs either need aria-hidden (if a decorative image) or they need an accessible name (if meaningful content).
    • h1s are for page headings but a component like this is a signposting component. It would never act as the page title on a real site.
  • totorocod•70
    @totorocod

    It's awesome that you completed the solution quickly! For responsive designs, try using relative units like percentages or viewport units so it can adapt to different screen sizes.

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