Responsive Product Preview Card

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

During this project, I focused on implementing a clean component structure using BEM methodology in SCSS. I organized my styles modularly by separating the reset, variables, and utility classes into their own files.

I'm particularly proud of my responsive image handling, which switches between desktop and mobile versions based on screen size:

<picture className="product-card__image">
    <source srcset="{DesktopProduct}" media="(min-width: 40rem)" />
    <img src="{MobileProduct}" alt="Product" />
</picture>

The BEM methodology helped me create maintainable CSS with clear parent-child relationships:

.product-card {
    &__content {
        // Content styles
    }

    &__button {
        // Button styles

        &:hover {
            // Hover state
        }
    }
}

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

Learning proper BEM methodology with nested CSS variables in SCSS. The documentation for SCSS is not well laid out. I ended up using Ai to help me parse through the documentation and understand how to setup the file structure and learn the best practices. Overall, a fun little practice project. I'm not sure if I like SCSS or TailwindCSS better.

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

In future projects, I'd like to further explore:

• TypeScript integration for component props
• Creating more reusable components
• Implementing better accessibility practices
• Exploring animation and microinteractions