Responsive Layout Practice for Beginners - Creating a Four Card Feature Section

Responsive Layout Practice for Beginners - Creating a Four Card Feature Section

Kevin Powell via YouTube Direct link

- Styling the header

10 of 17

10 of 17

- Styling the header

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Responsive Layout Practice for Beginners - Creating a Four Card Feature Section

Automatically move to the next video in the Classroom when playback concludes

  1. 1 - Introduction
  2. 2 - What we’re going to be working on
  3. 3 - Opening the project in VS Code
  4. 4 - Analyzing the layout
  5. 5 - Writing the HTML
  6. 6 - Getting the Google font
  7. 7 - Setting up the custom properties
  8. 8 - Base CSS styles
  9. 9 - Styling the wrapper
  10. 10 - Styling the header
  11. 11 - Creating the three columns
  12. 12 - Using locally scoped custom properties
  13. 13 - Styling the individual cards
  14. 14 - Fixing the header font sizes and weights
  15. 15 - The card image position
  16. 16 - Fixing the layout for mobile
  17. 17 - Removing my columns and using grid-template-areas

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.