Let's Build: A Consultancy Website - Part 28 - Coding the Services Page - Part 2

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🤘🏻

=======

In part 28 of my Let's Build series, I continue coding the services page. In this video, you'll see me start to fold in styles to match our design I previously created in Affinity Designer.

Working with flexbox

I utilize the display property flexbox to achieve the three column effect in our design. To save some time and keystrokes I like to make use of a CSS grid library called flexboxgrid.css. You can download it yourself here.

By simply applying a few classes to a div the CSS library allows me to create columns and rows of varied widths

The row class is what ultimately makes flexbox work because it contains the property display: flexbox. The contained divs then receive a property such as flex-basis: 50% to set up the grid like layout accordingly.

If you’ve ever utilized Bootstrap in your projects you might see a similar class naming structure going on here. The only real difference is that this CSS library uses flexbox whereas Bootstrap (at the time of this writing) utilizes floats.

Coming up next

The next part of the series will be another session of styling to get a new call to action and inquiry form looking like our design for the services page. Later, I will integrate the form to receive responses.

======

⚙ Download the source code: https://github.com/justalever/endlyssdesigns

💻 Previously published at: https://web-crunch.com/lets-build-consultancy-website-part-27/

💻 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=_9KpiYFPXDk