Responsive product preview card with mobile-first workflow and BEM

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

On the progress to getting used to BEM naming convention. Using BEM in every challange and also the mobile-first workflow.

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

Switching images between desktop-view and mobile-view.

Solution: Using display: none and display: block to switch from each other. At first, I use content: url() property, but seems like it didn't work. The image just didn't show up on remote (in the github), but could show up locally.

Solution (updated): Using picture tag.

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

Thanks to @KapteynUniverse for sharing such a valuable input.

Need to learn more about:

• Semantics HTML in depth.
• Make an efficient, modular, maintainable CSS code to work with a team.
• BEM naming convention