This is a solution to the 3-column preview card 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 depending on their device's screen size
- See hover states for interactive elements
- Solution URL: https://www.frontendmentor.io/solutions/responsive-3column-preview-cards-using-css-KF0YVS3CZ
- Live Site URL: https://ameyadeokule.github.io/column-preview/
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Media Queries
Using Flexbox and arranging the components using flex features. Using media queries along with flex to change element sizes for smaller screens.
I would love to make this design using tailwind or SASS to improve my skills and later convert it to React as a SAP.
- A Complete Guide to Flexbox - This section helped me in better understanding flexbox and how the arrangements world
- 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.