Skip to content
Submitted 10 months ago

Blog preview card using SASS

Kenny Ng•400
@kennylun123
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

Hi everyone, this is my first SASS solution. I also want to know the best practice of updating SASS variables using media query.

Any comment would be appreciated. Thanks for your help!

Community feedback

  • ricardodcc•110
    @ricardodccPosted 10 months ago

    Hi Kenny N! Great execution and I only suggest using all the content of this challenge because inside of a <article> tag, this card could be at some random website and it would be possible to understand the context of the card.

    So, when the content of the components is perceivable and independent of the content of the rest of the page, then it is good HTML5 practice to use these same components as article tags.

    Hope to see more projects from you!

    Marked as helpful
    1
    Kenny Ng•400
    @kennylun123Posted 10 months ago

    @ricardodcc That's true we can consider some blog post, forum post, product card and even comment as an <article> since its independence. Thanks for your advice!

    1
  • Mazen Hassan•600
    @Mazz100Posted 10 months ago

    Looks Great Well Done! 😃

    Was very close to be pixel-perfect you LOST haha 🤣

    One small thing I noticed on HTML which I always did too is wrapping main in a parent div container while we could just assign a class like .main-wrapper for main and use it as a grid instead. Got the advice on my last challenge 🙂

    1
    Kenny Ng•400
    @kennylun123Posted 10 months ago

    @Mazz100

    Haha thank you, I tried my best to judge with my bare eyes XD.

    Actually I used that parent div to nest all semantic elements on purpose. Imagine if we have <header>, <nav>, <main>, <footer> in our website and we can just compose the grid system on the parent div. Or you can apply on <body> instead of a parent div.

    It's just my general practice of wrapping everything in this way. And sure we could use main only if making a card component. Depends on what we need. :D

    1
  • Francisco silva•50
    @franciscosilva01Posted 10 months ago

    Achei muito da hora sua animção

    0
    Kenny Ng•400
    @kennylun123Posted 10 months ago

    @franciscosilva01 Thank you for your kind words :)

    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