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: click-here
- Live Site URL: click-here
I started with semantic HTML, after building out the total HTML of the challenge. I added basic css-reset and typography. I started the solution with mobile-first approach. I used grid to make a 1column layout for mobile and used flexbox with a column direction. After completing the mobile design, I started with the desktop design which consisted everything same as mobile except that I made it a 3column layout as the design suggested
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
Just before starting out this project I have read and completed the theoritical part of CSS-grid and media queries. This project helped me in using both of them and this helped me learn the practical approach to my learning. I learned the way of mobile approach first while designing a mobile-responsive layout. I also learned how to center the whole content using flexbox.
<h1>This is how I centered my content</h1>main{
display: flex;
min-height: 95vh;
justify-content: center;
align-content: center;
}- CSS Grid - This was a one stop destination for any query realted to CSS grid. I really liked the tips and will use it going forward.
- Responsive Web Design - This is an amazing course which helped me finally understand Responsive Web Design. I'd recommend it to anyone still learning this concept.
- Website - Maruthi Konjeti
- Frontend Mentor - @Konjeti Maruthi
- Twitter - @Maruthi18_