Let's Build: A Consultancy Website - Part 28

Coding the Services Page - Part 2

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 varying 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

• 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
• Part 16
• Part 17
• Part 18
• Part 19
• Part 20
• Part 21
• Part 22
• Part 23
• Part 24
• Part 25
• Part 26
• Part 27