Skip to content
Submitted 7 months ago

Blog preview card using HTML and SCSS

Vadim Pospelov•40
@VH135
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?

It was a good challenge to refresh my knowledge of using hover effects and media queries to add a mobile version of the card.

Also I'm back to SCSS and it's awesome, my work with styles is more comfortable and effective now.

Pixel Perfect is a great tool to check how my work matches with the layout and I'm quite satisfied this time with the result.

Next time I want to do a fully responsive design.

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

It still takes a lot of time, I have to make it faster. It comes with time, so I have to be patient and persistent.

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

Any feedback about media queries and responsive design is very welcome.

Community feedback

  • Erratic Enigma•200
    @erratic-enigmaPosted 7 months ago

    Hello, nice work on this challenge! There's a few improvements I can suggest:

    I would recommend using either flexbox or grid to center the card. The position: absolute and transform method is unwieldly and will likely give you problems on future challenges. Here's an article about this if you're unsure.

    I see you used role="main" on the .container div. You should replace the div with the main element instead. It serves the same purpose as role="main". Same thing with the .attribution div; replace it with a footer element.

    I would recommend applying classes directly to the elements you want to style rather than wrap them in a div with a class. Some wrappers are necessary (i.e.: .card-author-wrapper, .card-image and .card-tag), but most of them just add unnecessary noise for no benefit.

    Regarding making this challenge responsive, I would start by trying to remove the fixed px width in favour of max-width for the card. The image shouldn't need a fixed px width either.

    Marked as helpful
    1
    Vadim Pospelov•40
    @VH135Posted 7 months ago

    @erratic-enigma Hi there! Very detailed and helpful feedback, much appreciated! In the next project here I will try to apply all of these recommendations for sure. Also I've found some useful tips in your project, very nice work too.

    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