Submitted 3 months ago

Responsive Blog Preview Card - Angular 18 - SSR - SCSS

Juan Gomez• 260

@newbpydev

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

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

I am most proud of the SCSS mixin that I have used, as I continue exploring the possibilities of SCSS each project will add more features for me to share with everyone.

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

The main challenge was trying to make sense of the possibilities of SCSS, on the README.md file I added a responsive function that I made up which helped me understand how the inner workings of SCSS.

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

Feel free to share any insights on SCSS, mixins, or BEM that could enhance my project. I’m open to learning and improving!

Community feedback

AymaneOnline• 220

@AymaneOnline

Posted 3 months ago

Your solution seems amazing. I recommend you use lighthouse for accessibility measures (you got 89% score on it), even if does not exactly match the style-guides but it's a bonus for legibility.

Juan Gomez• 260

@newbpydev

Posted 3 months ago

@AymaneOnline Thanks for the tip, but I actually use it, on the README.md file I placed a screenshot of the results but if you look at the details you will noticed it is related to the description part of the card, since it is the styles that Frontend Mentor wanted I didn't change that, but I am digging through web.dev to find possible solution besides changing the colors.

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