Build a Step-by-Step 'How It Works' Section on Your Website

If you've ever bought furniture from IKEA, you know first-hand how important instructions are. Every product on their shelves has a process for assembly – and the more clear and concise, the easier it is.  

In fact, the entire store is one big process... and if you follow the roadmap, you end up with Swedish Meatballs. Pretty smart (and tasty). 

Websites can be a great place for breaking down complex processes and showing visitors how your stuff works. OK... so maybe you're not walking someone through the rigors of assembling a Scandinavian coffee table. But you might want to outline the steps of, say, an online application – so your visitors understand the entire process from end to end. It's a simple way to improve and streamline the customer experience.

In this article, we'll show you how to build a custom "How It Works" section on your website using this visual, step-by-step process (see what we did there?). We'll be using Boostrap, so your design will work seamlessly across devices. We'll even add some handy FontAwesome icons as visual accents.

Before you start processing our process, a few tips to keep in mind:

• Fewer steps = more clarity. There's no magic number, but three to six means minimal scrolling.
• Think high-level. Pick the most important parts of your product to feature in your process. Get granular only if needed.
• Be brief and instructional with your language. Use action verbs such as "find", "submit", and "confirm and pay."
• Add visual elements such as numbers, icons, or colors to highlight each step. Keep it simple and intuitive. 

Ready to see how it works? 

Getting Started

Since we're using Bootstrap, you can copy and paste the links below in the head section of your project's HTML file:

HTML

The HTML structure for our section is built with Bootstrap's layout and grid system. We'll have six steps in our process – so we need six boxes. 

CSS

The CSS code sets the layout, positioning, and style of your elements. Each box has a checkmark icon – and we did that by using the ::before pseudo-class after the .box class.

Each FontAwesome icon has its own unicode. In our example, the checkmark icon has a unicode of f058. In the stylesheet, we place this unicode in the content property such as content: "\f058". You can visit FontAwesome's website to pick the icon you'd like and simply replace the checkmark icon by changing the unicode in the content property. 

Feel free to change the color values and font styles to match your own website's style:

And that's how it works! Check out the JSFiddle below and take it for a spin.