This is a solution to the Pricing component with toggle 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 component depending on their device's screen size
- Control the toggle with both their mouse/trackpad and their keyboard
- Bonus: Complete the challenge with just HTML and CSS
- Solution URL: https://www.frontendmentor.io/solutions/price-table-with-toggle-using-html-css-and-javascript-yX4xuXsUc
- Live Site URL: https://ameyadeokule.github.io/price-table-toggle/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
- To use checkbox to as a toggle between classes.
- Use only CSS to do the slider effect with changes
- Redo the project in ReactJS with Material UI
-
A Complete Guide to Flexbox - This section helped me in better understanding flexbox and how the arrangements world.
-
The “Checkbox Hack” - This article explains with examples how to use checkbox as toggles between multiple pages and elements.
-
A Complete Guide to CSS Media Queries - This is an amazing article which helped me finally understand breakpoints and how to handle HTML elements on a much smaller screen using CSS media queries.
- Name - [Ameya Deokule]
- Frontend Mentor - @ameyadeokule
I would like thank Kethmar Salumets @developerhabits for encouraging me to start completing challenges on Frontend Mentor.