Learn how to build a responsive website footer using CSS Grid. The course covers explaining grid template areas, creating HTML markup, adding SCSS styles, aligning content horizontally and vertically, troubleshooting layout issues, and adding hover states for interactive elements. The teaching method involves a step-by-step tutorial with practical demonstrations. This course is intended for individuals interested in front-end web development and looking to enhance their CSS Grid layout skills.
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
