This is a solution to the Interactive pricing 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 app depending on their device's screen size
- See hover states for all interactive elements on the page
- Use the slider and toggle to see prices for different page view numbers
- Solution URL: [https://github.com/jordanlewis9/interactivepricingcomponent]
- Live Site URL: [https://interactivepricingcomponent-real.vercel.app/]
- Semantic HTML5 markup
- CSS custom properties
- Sass preprocessor
- Flexbox
- CSS Grid
- Custom webpack
I really focused on implementing Sass for this project, as well as creating a custom webpack. I have prior experience with Sass, but none with webpack. I learned how to create a custom webpack configuration, as well as the differences between dev and production environments.
The checkbox CSS "hack" was necessary to complete this challenge, and I was able to master it as well as the :before and :after CSS pseudo-elements.
I failed to do this project with a mobile-first design, and I felt the pain of it later on. I need to emphasize the necessity of mobile-first design.
- (https://css-tricks.com/almanac/selectors/a/after-and-before/) - This helped me a ton with understanding what exactly :before and :after did, and how to utilize those pseudo-elements.
- (https://codepen.io/Qvcool/pen/bdzVYW) - I was able to review this code and play around with it to see exactly what properties controlled each aspect of the toggler.
- (https://dev.to/christo_pr/create-a-nice-looking-input-range-with-only-css-4oa2) - This article got me started with the range input element. I had no idea that there were shadow DOM elements on the range input, and that allowed me to figure out how to target these elements for styling purposes.
- Website - Jordan Lewis
- Frontend Mentor - @jordanlewis9
- Twitter - @ohsnapzbrah