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

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

• 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 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 a 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.

#html #css #web-development #programming #developer