Build a responsive website with HTML & CSS | Part seven: the footer

In this one, we look at setting up the footer, including creating some SVG sprites for our social icons and using CSS grid for the layout.

🔗 Links

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[dev__institute_official]

This moment at 5:02 shows exactly why Kevin is in love with CSS, little victories feel amazing

[vasyaqwe]

Absolutely love this series, I'm learning so much. Thanks Kevin, keep it up!

[sayeghjoe]

Hey Kevin, love your videos. I realise I'm late to this. I only saw this for the first time today. Personally, I would have rewrote the footer with flex. Then I would have assigned each column an order value. order: 1, order: 2 and order:3. Then I would have changed the order of each column via a media query. Your way is more sophisticated. I just went for the easy option.

[felixc.programs]

Good stuff as always! Finding your channel is one of the best things to ever happen to me, it motivated me to change careers, join the tech industry and start my own Tech Youtube channel. Thanks a lot!

[SjaakLulMaarRaak]

Hi Kevin,

I really like your videos and they're very informative and educating. Thanks. For this video I do have something I want to tell you.

Instead of 'max' I would strongly recommend to use 'min' in
.footer-nav {
columns: 2;
gap: min(15vw, 2rem);
}

With 'max' it will lead to very small (read tiny) social icons and a squeezed logo when you'll display the site on a large screen. 'min' does the job perfectly well.

[KelseyThornton]

On the larger screens, the ".footer-logo-social" needs to be changed to "flex-direction: column" from "flex-direction: column-reverse" 🤓

[jonathanjohnson]

Css superhero Kevin. You're an inspiration in so many ways. Keep up the great work. Hope to be half as good as you are. 👍👍👍👍

[imransadik]

You are real hero of CSS. Carry On please

[derekbaldwin]

Huge fan, great content, so many little golden nuggets in this series! Love the realness and humility. 39:53 made me laugh - um, yeah, no, maybe. Sometimes this is how it is, lol.

[complexlity]

Been waiting for this since forever. Thanks Kevin 😁

[mikeeomega]

My first impression of the video, knowing nothing about this series from you:
"53 minutes for a footer???"

[htmhatem]

i don't know why but the icons do not appear when using svg sprite although when inspecting them they have a width and height but there's no content

[stucowley]

That moment of horror, when the bloody copyright notice was forgotten 😂

[NSiJitu]

in this part there are a lot of error i made, most of them are typos or lack of 1 or 2 characters, i fixed it myself and i did it. thanks for all those errors i made i learn display flex and grid more than the other chapter. and i changed flex direction back to column for desktop view :)!

[James-zrlu]

If you can't get svg icons to show, make sure when you created the 'social-icons.svg file' that it actually was created under the images folder.

[naczelnypsycholog]

where do you explain that :is and :where more ?

[CharlesSmall]

Thank you for the videos Kevin. It is very helpful.

[naczelnypsycholog]

the main navbar doesn't actually change color in hover state in the examples given, just lower opacity, but I think changing color to orange looks good

[stanleylafond]

At 3:34 things got a little confusing. I thought you would give an explanation of the :where pseudo-class. As often happens, you went off subject briefly, then you replaced :where with :is. Replacing one class with another gives an explanation of neither class.

[yarbas]

Can someone explain why "flex-direction: column" makes them rows? 37:30