Skip to content
Submitted 5 months ago

Blog Preview Card using CSS Variables and Flexbox

Younes Iddahamou Idrissi•40
@iddahadev
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

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

Things I am proud of

  • Semantic HTML (I tried my best)
  • CSS Variables where it made sense to me (I still have a lot to learn)
  • I added a transition for the box-shadow for the card and the color for the card's title
What challenges did you encounter, and how did you overcome them?
  • Pixel Perfect -> I tried my best by relying upon the Figma File but it was not enough.
  • Units for spacing and font size: I chose px for padding and rem for the rest.
What specific areas of your project would you like help with?

HTML

  • Semantic
  • Accessibility

CSS

  • Responsive
  • Which unit to choose for spacing (padding, margin, gap...)

Community feedback

  • Jordan•80
    @jdgarcia277Posted 5 months ago

    I really like the way you structured your html. The comments also gave some insight to why you made the decisions you did. The aria labels are extra thoughtful for the users who need them.

    I think your css was easy to follow. I personally would choose rem units for spacing in this project. You have a root font-size that changes across mobile to desktop view. Rem units will scale and provide a uniform look and change.

    The responsiveness at smallest devices could use a little adjustment. I used google chromes dev tools. All your content is displayed, you're just losing the left and right margin. Overall this is fantastic, and I look forward to using some of your ideas in my future projects!

    Marked as helpful
    0
    Younes Iddahamou Idrissi•40
    @iddahadevPosted 5 months ago

    @jdgarcia277 Thanks for the feedback, I appreciate it!

    I used rem spacing for gaps and margins, but px for padding (to save horizontal space if the user zooms in or changes the font size to a larger one).

    I fixed the responsiveness, I added padding for the main element. Because of the shadow on the right, I might increase the padding-right to even things out.

    0

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