Practice responsive layout techniques for beginners through a hands-on project from Frontend Mentor. Learn to analyze layouts, write semantic HTML, set up custom properties, and style components using CSS. Explore techniques like locally scoped custom properties, grid-template-areas, and mobile-first design. Follow along as the instructor guides you through creating a four-card feature section, covering everything from initial setup to final responsive adjustments.
Responsive Layout Practice for Beginners - Creating a Four Card Feature Section
Kevin Powell via YouTube
Overview
Syllabus
- Introduction
- What we’re going to be working on
- Opening the project in VS Code
- Analyzing the layout
- Writing the HTML
- Getting the Google font
- Setting up the custom properties
- Base CSS styles
- Styling the wrapper
- Styling the header
- Creating the three columns
- Using locally scoped custom properties
- Styling the individual cards
- Fixing the header font sizes and weights
- The card image position
- Fixing the layout for mobile
- Removing my columns and using grid-template-areas
Taught by
Kevin Powell
