How to Design and Code a Product Landing Page - Part 16

In Part 16 of the "How to Design and Code a Product Landing Page" screencast series, I finalize our styles for the footer area of the single-page website.

This video features me styling the footer section of the page to match our design as best as possible. In it, I talk about adding globalized custom fields and icons for the social media links as well as give you a crash course on SVG.

Wrapping up the design

With the design of the single-page website looking complete on our desktop view there is still work to be done for our responsive layouts. I want the design to look good on almost any device out there so in the next video I'll begin to tackle making this site behave the way we want it on mobile and tablet screens.

If you're looking for similar icons used in this video/design check out Entypo. This library is one of my favorites and the original designer recently drifted away from the font-icon route and now is only SVG. I think SVG is a great alternative to icon fonts simply because fonts to me should be actual letters and characters rather than symbols. There are plenty of exceptions to this rule but when it comes to accessibility things can get tricky.

I wrote an article on this subject called Should I use SVG, Icon Fonts, or Images? Hopefully, it can shed some light on the subject if you're not sure what path to take. I plan to do some future screencasts on SVG as well as how to create SVG sprites so look for that in the future!

The Series So Far

• Part 1
• Part 2
• Part 3
• Part 4
• Part 5
• Part 6
• Part 7
• Part 8
• Part 9
• Part 10
• Part 11
• Part 12
• Part 13
• Part 14
• Part 15

​