Completed
- Troubleshooting how to make the footer height less
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Building a Footer Using CSS Grid - Build a Responsive Website from Scratch
Automatically move to the next video in the Classroom when playback concludes
- 1 - Intro
- 2 - Fixing my mistake causing horizontal scrolling
- 3 - Looking at the design
- 4 - Explaining grid template areas in CSS grid
- 5 - Add HTML markup and create footer SCSS file
- 6 - Start adding basic SCSS styles
- 7 - Creating a dark mode logo SVG version
- 8 - Basic mobile styles: add spacing and centering
- 9 - Desktop styles: creating the grid template
- 10 - Adding grid template areas to styles
- 11 - Aligning the grid content horizontally
- 12 - Aligning the grid content vertically
- 13 - Separating the CTA and copyright into separate cells
- 14 - Troubleshooting how to make the footer height less
- 15 - Adjusting the second row to be auto height
- 16 - Using flexbox to align the text links vertically
- 17 - Add container class to limit the width
- 18 - FINAL final fix for the vertical height/spacing
- 19 - Adjust the width of and spacing between grid cells
- 20 - Load social icons as inline SVGs for hover state
- 21 - Adding hover state for text links
- 22 - Adjust CTA button hover state to work on dark backgrounds
