evrendev / product-preview-card-component

Frontend Mentor | Product preview card component

Frontend Mentor - Testimonials grid section solution

This is a solution to the Product preview card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
  • Project Setup
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size

Screenshot

Links

• Solution URL: @github
• Live Site URL: @github pages

Setup

Recommended IDE Setup

VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).

Customize configuration

See Vite Configuration Reference.

Project Setup

npm install

Compile and Hot-Reload for Development

npm run dev

Compile and Minify for Production

npm run build

Lint with ESLint

npm run lint

My process

I started by reviewing the design specification. I then started markup knowing that the mobile and desktop layouts would use the same cards, with different page layouts. From there, I stated the styling with mobile-first workflow and then created two media queries to handle the transition from the mobile to the desktop layouts.

Built with

• Vue3 with Vite
• Semantic HTML5 markup
• Mobile-first workflow
• SCSS preprocessing
• CSS custom properties
• CSS Grid
• Flexbox

What I learned

This project was an excellent excercise in CSS grid and I learned how CSS grid made the layout of the individual card and the page significantly easier than traditional CSS. I learned how to use minmax, auto, and 1fr to make the page flow from mobile-first to the desktop.

Continued development

I am looking forward to the next project to build on the CSS grid experience and to add JavaScript for an additional challenge.

Useful resources

• Kevin Powell - Kevin Powell is an excellent teacher and I relied heavily on the notes that I took from his CSS courses taught on scrimba.com.
• A Complete Guide to Grid - I have found css.tricks.com to be a valuable resourse for grid, flexbox, and all things CSS.

Author

• Frontend Mentor - @evrendev
• Twitter - @evrendev