Submitted over 1 year ago

Responsive page using HTML5, CSS, SASS, BEM and JS

#sass/scss#bem

Elio Flores• 400

@elioflo

Preview site View code

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Semantic HTML5 markup
CSS custom properties
Flexbox
CSS Grid
Mobile-first workflow
SASS
BEM

Some things I learned doing this challenge:

To show just a part of an image using object-fit and object-position.
To make a bubble dialog and use ::before for its tail.
Use classList's toggle method instead of if's.

A fun challenge! Any feedback is welcome!

Thank you.

Elio Flores

Community feedback

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