This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Solution URL: @github
- Live Site URL: @github pages
VSCode + Volar (and disable Vetur) + TypeScript Vue Plugin (Volar).
See Vite Configuration Reference.
npm installnpm run devnpm run buildLint with ESLint
npm run lintI 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.
- Vue3 with Vite
- Semantic HTML5 markup
- Mobile-first workflow
- SCSS preprocessing
- CSS custom properties
- Flexbox
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.
I am looking forward to the next project to build on the CSS grid experience and to add JavaScript for an additional challenge.
- 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 Flexbox - I have found css.tricks.com to be a valuable resourse for flexbox, and all things CSS.