Submitted about 2 years 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

Design comparison

SolutionDesign

Solution retrospective

My process

Built with

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

What I learned

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