3-column-preview-card-component with flex-box and grid

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

What I’m most proud of

• I’m most proud of how clean and organized my code turned out, both in the HTML and CSS.
• I used semantic HTML5 elements like <main>, <section>, and <article> to improve structure and accessibility.
• In CSS, I successfully combined Flexbox and CSS Grid to make the layout responsive — stacking the cards vertically on mobile and horizontally on larger screens.

I’m also proud of using CSS custom properties (variables) for consistent colors, which made it easier to manage and tweak the color palette across all sections. The hover states for the buttons add a nice interactive touch that improves the user experience.

What I’d do differently next time

• Focus more on accessibility — adding aria-labels or improving color contrast for better readability.
• Experiment with CSS transitions and animations to make the hover interactions smoother.
• Try using a component-based approach with tools like Sass or a CSS framework to make the styling even more scalable.
• Optimize for better reusability, maybe by creating a reusable “card” class instead of repeating styles for each variant (sedan, SUV, luxury).

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

What challenges did I encounter, and how did I overcome them

One of the main challenges I faced was making the layout fully responsive. At first, the three cards didn’t align correctly when switching between mobile and desktop views. The text and buttons would shift unpredictably. To fix this, I decided to use a mobile-first approach and combine CSS Grid for the overall structure with Flexbox inside each card to handle alignment and spacing.

Another challenge was keeping the color scheme consistent across different elements. Initially, I manually repeated color values, which made it harder to manage changes. I overcame this by creating CSS custom properties (variables) in the :root selector, so updating one color automatically reflected throughout the project.

Lastly, styling the hover states on the buttons took some trial and error — I wanted them to look interactive without breaking the color harmony. By using smooth transitions and slightly adjusting the border and background colors, I achieved a clean and responsive hover effect.

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

There are a few areas I’d like to improve with some guidance:

Accessibility (a11y):

I’d like to learn more about how to make small projects like this more accessible — for example, improving keyboard navigation, using better alt text, and ensuring proper contrast ratios.

Code reusability and maintainability:

Currently, each card (Sedan, SUV, Luxury) has its own class with separate styles. I’d like help refactoring this so it uses a more modular or DRY (Don’t Repeat Yourself) approach — maybe through shared utility classes or a preprocessor like Sass.

Responsive design best practices:

Although the layout works on different screen sizes, I’m interested in improving how I handle breakpoints and scaling text or padding more fluidly (perhaps using clamp(), min(), or max() functions).

Design polish and interaction:

I’d like to add small animations or transitions to make the user interaction feel smoother and more dynamic, but I’m not fully confident about timing and subtle motion design principles yet.