Completed
- Responsive design vs intrinsic design approaches
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Responsive 4-Column Layout with CSS Grid - Build a Responsive Website from Scratch
Automatically move to the next video in the Classroom when playback concludes
- 1 - Intro
- 2 - Look at design for Latest Articles section
- 3 - Start writing HTML markup for Articles grid
- 4 - Start adding SCSS styles, using CSS grid for multi-column layout
- 5 - Explain how CSS grid works, compared to flexbox
- 6 - Using the Firefox Grid inspector
- 7 - Responsive design vs intrinsic design approaches
- 8 - Why I'm using the responsive approach for this
- 9 - CSS Tricks article on auto-fit vs auto-fill
- 10 - Start styling the card content-- card images
- 11 - Add CSS grid gap and other spacing in card
- 12 - Add background color and border-radius
- 13 - Styling the card text
- 14 - Add correct images and copy for each card
- 15 - Add box-shadow to cards
- 16 - Add hover state using transform and transition
