🔥 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/easybank-landing-page-WaUhkoDN
Source code on GitHub: https://github.com/thecodercoder/fem-easybank
See the final website: https://codercoder-easybank.pages.dev/
0:00 – Intro
0:27 – Fixing my mistake causing horizontal scrolling
1:45 – Looking at the design
2:58 – Explaining grid template areas in CSS grid
04: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
_____________________________________
SUPPORT THE CHANNEL
⭐ Join channel members and get perks: https://www.youtube.com/channel/UCzNf0liwUzMN6_pixbQlMhQ/join
👏🏽 Hit the THANKS button in any video!
🎨 Get my VS Code theme: https://marketplace.visualstudio.com/items?itemName=CoderCoder.codercoder-dark-theme
WANT TO LEARN WEB DEV?
Check out my courses:
🌟 Responsive Design for Beginners: https://coder-coder.com/responsive/
🌟 Gulp for Beginners: https://coder-coder.com/gulp-course/
RECOMMENDATIONS
⌨ My keyboard– get 10% off with code THECODERCODER — https://vissles.com/?ref=mu96kxst5w
💻 Other gear — https://www.amazon.com/shop/thecodercoder?listId=1LMCKGUTMVYXD
📚 My Favorite Books — https://coder-coder.com/best-web-development-books/
📺 My Favorite Courses — https://coder-coder.com/best-web-development-courses/
🔽 FOLLOW CODER CODER
Blog — https://coder-coder.com/
Twitter — https://twitter.com/thecodercoder
Instagram — https://www.instagram.com/thecodercoder
#webdevelopment #coding #programming
