Let's Build: A Consultancy Website - Part 18 - Completing the Home Page Header Styles
Web-Crunch
Hi, My name is Andy Leverenz. I design, code, and am an author of things. Check out my agency called Couple of Creatives https://coupleofcreatives.com and my blog Web-Crunch https://web-crunch.com🤘🏻
=====================
Completing the Home Page Header Styles
Part 18 continues where we left on with styling the remaining content inside the header portion of the home page. I utilized a lot of positioning with CSS
for full effect. I was able to reproduce our design accurately on the desktop view of the site. In a future part of the series, I will revisit the responsive portions of the site to ultimately make the site function across a wide array of devices.
Keeping things modular
From this point forward I plan to style the home page and future pages in their own respective sub sections. Doing this allows me to keep my file structure a little more modular and easier to navigate. This also makes future updates easier as time goes on.
In my sass
directory each page would live inside a master pages
directory and within that directory, each page would get its own directory like so:
pages / -- home / ---- _home.scss -- about / ---- _about.scss ...
Rather than using a master style sheet with traditional CSS I can easily concatenate Sass
files to create a similar master style sheet all of which is easier to write and still remain D.R.Y. (Don't Repeat Yourself).
Download the Source Code for this Project
https://github.com/justalever/endlyssdesigns
💻 Previously published at: https://web-crunch.com/lets-build-consultancy-website-part-18/
💻 Check out the blog: https://web-crunch.com
💡 👫 Check out my agency: https://coupleofcreatives.com
🚀 Links: Weekly Newsletter: https://web-crunch.com/subscribe 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 Medium: https://medium.com/the-web-crunch-publication
📘Check out my book on UX Design: "LUXD: Learn User Experience Design" https://web-crunch.com/books/luxd
📙 Check out my FREE 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: http://bit.ly/webcrunchhosting ... https://www.youtube.com/watch?v=ns00Brhu2wQ
193403149 Bytes