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

Active Blog Preview Card

Joe 30

@YoussefGaafar

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

The black border behind the card is a bit tricky, by the look of it it seems to be easily implemented by border-shadow, but it will not work. So to implement this black box you need to use ::before (Pseudo Element).

Community feedback

@CamrynTidsworth

Posted

The HTML makes use of alt descriptions which is good for accessibility. Accessiblity could be improved even more by including semantic HTML tags like <article>, <footer>, etc. in place of some of the <div> tags. The box-shadow on the main container looks great! It looks like you may be working with active states I'm not familiar with for the border, but if you want a simple static border all the way around like the design shows, you can simply add a border to the container in CSS.

Marked as helpful

1

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