This is a solution to the Four card feature section 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
- Solution URL: Solution github URL
- Live Site URL: Live site URL
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid-template-areas
- Mobile-first workflow
I first started this project in August 2020 and I am finally submitting it 12 months later. My code has improve heaps. I am more confident with pseudo-class positions, as well as always opting for a mobile-first approach. Planning was of utmost importance in this project.
When I first submitted my solution I still hadn't positioned the divs properly in the desktop design. With help from the FEM community it was suggested that I use grid-areas and after some reading I tried it out and it solved my problem.
- Kevin Powell's Why CSS grid-area is the best property for laying out content - It is indeed the best property!
- Website - Krista Calleja
- Frontend Mentor - @kristacalleja
- Twitter - @krista_calleja
A member of the FEM slack community helped me figure out how to give separate colour borders to the divs. Thanks go to Emma-duru! Upon my first submission, Chamu from the Slack community helped me try out grid-areas to fix my grid. Worked like a charm! Thank you!