Today we continue the series of tutorials on basic HTML5 and CSS3 coding and we jump even deeper into CSS3 with this video on how to design a pricing plan.
If you own a product which you sell only on a subscription basis, then you will probably need pricing tables in order to showcase your product and the purchase options better. This tutorial will teach you how to do that.
The tutorial is based on lots of things we went through in the previous tutorials, but today you will also learn how to:
- Only style some elements of a list without giving a class to each of them.
- You will also learn how to apply different styles only on the first and last element of a parent (which could also be a list as well).
At the end of the video I also make a promise to you regarding what am I going to come with next time. Sneak peek: it’s for mobile.
Until next time, I hope you enjoy the video and, as always, I am looking forward to your feedback and comments.
Comparison Table Preview
By the end of this tutorial you will be able to design a pricing plan like the image below.
Saw the demo? If you’re ready to design a similar pricing plan, free up at least 23 minutes of your time and get ready to design your very first pricing table!
Pricing Plans Using CSS3 Video Tutorial
When You Design a Pricing Plan, Keep in Mind the Following:
- Don’t over design it, people are after the information, not the design.
- Make it visually pleasing and easy to read.
- Don’t over complicate the code, be sure to always keep your CSS in check in case you will need to update it at a future date.
Tell us what you think about this video tutorial in the comments!
Christian Vasile is an enthuziastic Romanian web designer currently living in Denmark. He is passionate for the industry and writes about design, usability, coding and freelancing and is a regular publisher here at 1WD. You can follow him on Twitter at @christianvasile or visit his web portfolio by clicking on the link above.