Building a footer using CSS Grid | Build a responsive website from scratch (Part 7)
๐ฅ My course: Responsive Design for Beginners! https://coder-coder.com/responsive/
๐ป Become a full-stack web dev with Zero to Mastery: https://academy.zerotomastery.io/a/aff_338z7xnj/external?affcode=441520_ti97uk6b
This is the FINAL part, Part 7 of the Build a Responsive Website from Scratch using HTML, CSS (SCSS) and vanilla JavaScript! In this video we're using CSS grid template areas to build the footer of the landing page.
Full playlist here: https://www.youtube.com/playlist?list=PLUWqFDiirlsuYscECzks6zIZWr_Cfcx9k
Challenge on Frontend Mentor: https://www.frontendmentor.io/challengesโฆ
Watch on YouTube โ
(saves to browser)
Chapters (22)
Intro
0:27
Fixing my mistake causing horizontal scrolling
1:45
Looking at the design
2:58
Explaining grid template areas in CSS grid
4:33
Add HTML markup and create footer SCSS file
12:19
Start adding basic SCSS styles
13:09
Creating a dark mode logo SVG version
14:39
Basic mobile styles: add spacing and centering
22:44
Desktop styles: creating the grid template
26:47
Adding grid template areas to styles
31:02
Aligning the grid content horizontally
34:38
Aligning the grid content vertically
37:52
Separating the CTA and copyright into separate cells
39:01
Troubleshooting how to make the footer height less
40:24
Adjusting the second row to be auto height
41:43
Using flexbox to align the text links vertically
44:44
Add container class to limit the width
46:45
FINAL final fix for the vertical height/spacing
48:06
Adjust the width of and spacing between grid cells
51:32
Load social icons as inline SVGs for hover state
54:55
Adding hover state for text links
55:39
Adjust CTA button hover state to work on dark backgrounds
Playlist
Uploads from Coder Coder ยท Coder Coder ยท 26 of 60
1
![How to Make a Super Simple HTML Website [Tutorial]](https://i.ytimg.com/vi/cnt_rMA1pe0/mqdefault.jpg)
2
3
4
5
6
![Build a responsive website with HTML & CSS - Part 1 [Live Coding]](https://i.ytimg.com/vi/cX1nCBVNRqc/mqdefault.jpg)
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
โถ
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
![[Typing sound] Comparing mechanical vs regular keyboard](https://i.ytimg.com/vi/vSebG-iGBg4/mqdefault.jpg)
50
51
52
53
54
55
56
57
58
59
60
How to Make a Super Simple HTML Website [Tutorial]
Coder Coder
How to make an animated sticky header with CSS and JavaScript!
Coder Coder
How to get coding help by researching online
Coder Coder
IG Live - Advice for beginner web developers
Coder Coder
Quick Start Guide to Parcel JS
Coder Coder
Build a responsive website with HTML & CSS - Part 1 [Live Coding]
Coder Coder
Build a custom Linktree page for Instagram with HTML & CSS
Coder Coder
Gulp 4 Crash Course for Beginners
Coder Coder
How to use CSS position to layout a website
Coder Coder
CSS: 4 Reasons Your Z-Index Isn't Working
Coder Coder
Coding a landing page website with HTML & CSS
Coder Coder
Learn web development as an absolute beginner
Coder Coder
How to write media queries in CSS
Coder Coder
How to build a 2-column layout using flexbox | HTML/CSS
Coder Coder
How to build a simple responsive layout with CSS grid
Coder Coder
Write code faster in VS Code with Emmet shortcuts
Coder Coder
How I setup VS Code for a beginners front-end workflow
Coder Coder
How to make a background-image transparent in CSS
Coder Coder
Build a responsive website from scratch with HTML & CSS | Part 1: Navigation bar
Coder Coder
Animated Hamburger Menu in CSS/JS | Build a responsive website from scratch (Part 2)
Coder Coder
Animated mobile menu with CSS/JS | Build a responsive website from scratch (Part 3)
Coder Coder
How to stay motivated when learning to code?
Coder Coder
Responsive hero | Build a responsive website from scratch (Part 4)
Coder Coder
Responsive 4-column layout with flexbox | Build a responsive website from scratch (Part 5)
Coder Coder
Responsive 4-column layout with CSS Grid | Build a responsive website from scratch (Part 6)
Coder Coder
Building a footer using CSS Grid | Build a responsive website from scratch (Part 7)
Coder Coder
Browsersync + Sass + Gulp in 15 minutes
Coder Coder
Responsive card UI with flexbox and hover effects | HTML/CSS
Coder Coder
CSS grid cards with animated hover effect | HTML/CSS
Coder Coder
How I learned to code and landed a job (no CS degree!)
Coder Coder
Building the website for my course (coding timelapse)
Coder Coder
How to debug your code faster ๐ฅ
Coder Coder
Full timelapse + walkthrough of building my website
Coder Coder
Your questions answered!! โจ100K Q&Aโจ
Coder Coder
Building a pricing block with HTML & PuRe CSS
Coder Coder
Use the Google Maps API to build a custom map with markers
Coder Coder
Building an accordion with HTML, CSS & JS (Part 1)
Coder Coder
How to make your own VS Code theme!
Coder Coder
How to build an accordion with HTML, CSS, and JavaScript (Part 2)
Coder Coder
Life/channel update
Coder Coder
Building a Light/Dark Dashboard, Part 1
Coder Coder
What is NPM, and why do we need it? | Tutorial for beginners
Coder Coder
Building a Node.js app (as a JavaScript noob) | ๐ด LIVE CODING
Coder Coder
Free website project ideas for your portfolio #shorts
Coder Coder
How to add quickly emojis on Windows #shorts
Coder Coder
Building a Light/Dark Dashboard, Part 2
Coder Coder
Learn to code with these 4 free resources! #shorts
Coder Coder
Learn flexbox with these 4 resources! #shorts
Coder Coder
[Typing sound] Comparing mechanical vs regular keyboard
Coder Coder
Building a Light/Dark Dashboard, Part 3
Coder Coder
what making web development tutorials is really like ๐
#shorts
Coder Coder
Generate website starter files with just one command!
Coder Coder
emojis in code
Coder Coder
Stay motivated when coding: don't compare yourself with others #shorts
Coder Coder
Building a Light/Dark Dashboard, Part 4
Coder Coder
Coding motivation: slow and steady wins the race ๐ข๐
Coder Coder
Sass @import is being replaced with @use and @forward
Coder Coder
Coding motivation tip: keep your goal in mind
Coder Coder
How do websites work?
Coder Coder
Building a Light/Dark Dashboard, Part 5
Coder Coder
DeepCamp AI