Skip to content
Submitted about 1 year ago

adaptive, SCSS, hover animation, BEM, semantics

accessibility, animation, bem, sass/scss, semantic-ui
KS_18•40
@ksWebFront
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 would try to build everything using grids

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

there were no difficulties

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

I don't need help with this project

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Ethan John Paguntalan•260
    @dev-ethanjohn

    Hi, your css is pretty dope with SCSS preprocessor (I haven't tried that yet). I have some few suggestions that may help:

    1. Try to use more semantic elements like header, article, main, and many more, try to check any that will be appropriate for this project's use case.
    2. For responsiveness, currently the card's image height decreases as it moves to smaller screen width. For you may check out clamp() for adaptive font-sizing, width: 100% for your images as an add-on to your existing fixed max-width. Or try to use figure element to wrap your image instead of a div, if will help semantically.
    3. Leverage flexbox gap property to space children inside your content instead of relying on vertical margins or even paddings.
    4. Some small designs you forget like border radius, title hover to yellow color, and such.

    I can't put all but these suggestions hope may help!

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