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 wordpress website.

This video features me styling the footer section of the page to match our design that we designed using affinity designer 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 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 most 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(http://entypo.com/). 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?(http://bit.ly/whaticons) 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!

💻 Originally published at: https://web-crunch.com/design-code-product-landing-page-part-16/

💻 Check out the blog: https://web-crunch.com

💡 👫 Check out my agency: https://coupleofcreatives.com

Links: Twitter: https://twitter.com/webcrunchblog Twitter(Personal Account): https://twitter.com/justalever Facebook: https://facebook.com/webcrunchblog Dribbble: https://dribbble.com/justalever Github: https://github.com/justalever

📘 Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd

📙 Check out my book on Tumblr Theming: "Pro Tumblr Theming" https://web-crunch.com/books/ptt

Recommended Stuff I Use to Shoot Video: Canon EOS Rebel SL1 - http://amzn.to/2m3EZDH Linco Lighting Set - http://amzn.to/2mF8Shs Logitech HD Pro Webcam C920 - http://amzn.to/2mpqzBk Rode NT-USB Condenser Microphone - http://amzn.to/2mFhaG9

Need awesome web hosting? Check out cloudways. They allow me to use a variety of hosting providers and build apps with ease: https://www.cloudways.com/en/?id=74908 ... https://www.youtube.com/watch?v=zIr2K-em7tI