Product Preview Card

A simple product preview card UI component

Frontend Mentor - Product preview card component solution

This is a solution to the Product preview card component challenge on Frontend Mentor.

Screenshot

Links

• Solution URL: https://github.com/LiyanNguyen/product-preview-card
• Live Site URL: https://liyannguyen.github.io/product-preview-card/

My Process

• Design the Desktop Viewport WHILE desinging the Mobile viewport at the same time using LESS CSS Preprocessor
• Design the flex/grid system, making sure to have both Desktop and Mobile Viewport layout correct
• Add in all the other HTML content
• Finished up all the CSS designs

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Grid
• Desktop-first workflow
• LESS CSS Preprocessor

What I Learned

• More Flexbox
• More LESS CSS Preprocessor

Author

• Website - Liyan Anajao
• Frontend Mentor - @LiyanNguyen
• Twitter - @LiyanAnajao

Acknowledgments