Let’s Build: A Consultancy Website — Part 28

Coding the Services Page — Part 2

Andy Leverenz
Aug 27, 2017 · 2 min read

Originally published at web-crunch.com on August 27, 2017.

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.

Be sure to subscribe to my YouTube channel or my blog’s newsletter to receive automatic updates!

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 typical html structure required is as follows:

<!-- Two columns at 50% width -->
<div class="row">
<div class="col-md-6 col-xs-12"></div>
<div class="col-md-6 col-xs-12"></div>
</div>

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 for this Project

Source Code

The Series So Far


Originally published at web-crunch.com on August 27, 2017.

The Web-Crunch Column

A publication for design, development, and business related articles published via medium and web-crunch.com

)

Andy Leverenz

Written by

Web-Crunch is a blog that delivers the crunchiest articles on design and development. Follow us or check out the website http://web-crunch.com

The Web-Crunch Column

A publication for design, development, and business related articles published via medium and web-crunch.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade