Front-end Project: Pricing Table [HTML/CSS]

In this tutorial, we’ll build a simple pricing table based on a pricing table design I found online.

See the completed code here: codepen.io/codebubb/pen/xxOejMy

Front-end Project: Pricing Table

00:00 Introduction

00:29 Design

01:40 Setup and Backgrounds

03:57 Basic markup structure & styling for pricing table

07:21 Gradients and applying to products

12:54 Markup for the ‘individual’ product

25:56 Markup for other products

28:39 Lift shared product

30:32 Moving the continue button underneath ‘Shared’ product

31:16 Shapes to add interest

35:12 Conclusion

So this tutorial is an exercise in how to take a design for something, in this case, it’s a pricing table design, and transforming it to an HTML / CSS representation of that design.

We’ll start off by setting up some resets and a background for our pricing table and then we’ll setup a bit of markup for the pricing table and start working on some basics CSS pricing styles to start to make it look like the design.

We’ll then start focusing on the ‘Individual’ product styles, in particular, we’ll setup the title heading, the progress bars and also the ‘Continue’ button that appears on each product.

There are also some extra components to add to the pricing table products, in particular the large number indicating the price that appears in the background and we’ll see how this potentially could be done by using some HTML elements that are pushed to the background.

Once the ‘Individual’ product is complete, we’ll move on to updating the other two products. These will be pretty much done with the CSS styles we’ve already created but there is just a bit of tweaking to do in order for them to match the pricing table design.

At the end of the tutorial, you’ll see that we’ll have some simple pricing table HTML and CSS that matches the pricing table design image.