Submitted 8 months ago

Blog preview card using SASS

Kenny Ng• 400

@kennylun123

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

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

@ricardodcc

Posted 8 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

Kenny Ng• 400

@kennylun123

Posted 8 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!

Mazen Hassan• 580

@Mazz100

Posted 8 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 🙂

Kenny Ng• 400

@kennylun123

Posted 8 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

Francisco silva• 50

@franciscosilva01

Posted 8 months ago

Achei muito da hora sua animção

Kenny Ng• 400

@kennylun123

Posted 8 months ago

@franciscosilva01 Thank you for your kind words :)

Please log in to post a comment

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