Learn how to build a responsive footer using CSS Grid in this comprehensive video tutorial. Explore grid template areas, create mobile and desktop styles, and implement hover states for interactive elements. Master techniques for aligning content, adjusting layout spacing, and optimizing footer height. Gain practical insights into troubleshooting common issues and creating a polished, professional footer design for your responsive website.
Overview
Syllabus
- Intro.
- Fixing my mistake causing horizontal scrolling.
- Looking at the design.
- Explaining grid template areas in CSS grid.
- Add HTML markup and create footer SCSS file.
- Start adding basic SCSS styles.
- Creating a dark mode logo SVG version.
- Basic mobile styles: add spacing and centering.
- Desktop styles: creating the grid template.
- Adding grid template areas to styles.
- Aligning the grid content horizontally.
- Aligning the grid content vertically.
- Separating the CTA and copyright into separate cells.
- Troubleshooting how to make the footer height less.
- Adjusting the second row to be auto height.
- Using flexbox to align the text links vertically.
- Add container class to limit the width.
- FINAL final fix for the vertical height/spacing.
- Adjust the width of and spacing between grid cells.
- Load social icons as inline SVGs for hover state.
- Adding hover state for text links.
- Adjust CTA button hover state to work on dark backgrounds .
Taught by
Coder Coder
