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.
- The challenge
- Screenshot
- Links
- Built with
- What I learned
- Continued development
- Useful resources
- Author
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- Solution URL: [https://www.frontendmentor.io/solutions/responsive-section-using-css-grid-lXngHkbiLr]
- Live Site URL: [https://bienvenudev.github.io/fm-four-card-feature-section/]
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Header tag is for repeating content across a site, not page specific content.
- It's better for performance to link fonts in the HTML head
- Em should be used when you specifically want a property to scale with that element's font size.
- Reinforced my understanding of grid and how I can achieve complex designs with grid rows and columns
I want to learn more about grid (ex:grid-template-areas)
- Grid Crash Course - This video helped me to understand how to span rows and columns in grid. I really liked this pattern and will use it going forward.
- Frontend Mentor - jwben1