Site Elements

Build a Modern Pricing Table With HTML and CSS


In the previous screencast we designed a modern pricing table in Photoshop. Now it's time to make our design web-ready and code it using HTML and CSS.

Watch Screencast

Don't like ads? Download the video in HD, or subscribe to Webdesigntuts+ screencasts via iTunes!
Related Posts
  • Computer Skills
    Setting Up an SSH KeySshpreview
    Entering secure passwords each time you log in to a server can be slow and painful but there is a better way. It's time to jump in and set up an SSH handshake.Read More…
  • Web Design
    Wanted: Talented Staff Instructor for Tuts+ PremiumInstructor thumb
    As you all know, Tuts+ Premium has been growing massively over the last twelve months! Each month, we’re releasing upwards of a dozen new courses on the topics that you most want. While we’re always open to working with new guest instructors, right now, I’m specifically in need of a talented staff instructor to serve as the go-to guy for Web Design courses on the site. The job pays well, so read on if you’re intrigued!Read More…
  • Computer Skills
    Taking Control of Your Browsing Experience With StylebotStylebotimageret
    Now, the best thing about the internet is that anyone can publish to it no matter what their skill level. The worst thing is that anyone can publish to the internet no matter what their skill level. In this short screencast, I take an irreverent look at a serious issue: that of badly designed websites. I examine the style inspectors in Safari, Firefox and Chrome, to demonstrate how you can improve your browsing experience. An in-depth look at the Stylebot extension, for Chrome, shows how you can make ugly websites look beautiful. Almost. Does anyone (apart from me) really visit websites this ugly? If so, this screencast if for you! Let's make ugly websites beautiful.Read More…
  • Web Design
    Applications and Tools
    A First Look at Google Web DesignerGoogle web designer logo retina
    Unless you've been hiding under a stone recently, you'll have no doubt seen Google's latest application release: Google Web Designer. Currently in Beta, GWD is a tool for building interactive websites and, perhaps more significantly, ad banners, through modern web standards. Let's take a first look at the interface, then build ourselves an animated banner using the tools on offer.Read More…
  • Music & Audio
    Sound Design
    Quick Tip: An Introduction to Transient DesignTransientdesignpreview400
    In this quick tip, we continue looking at essential workhorse effects and processors. Today we cover a processor you really should have: a transient designer/shaper. These allow you to manipulate the attack, decay and sustain portions of a sound. In this screencast we show you how to use SPL Transient Designer.Read More…
  • Computer Skills
    Create Awesome Invoices in NumbersIcon numbers 2x
    More people than ever before are breaking free of the corporate shackles and trying to make it as a freelancer, from web designers to Mac consultants. Perhaps the most important, yet overlooked, part of the process is invoicing clients and getting paid. A poorly written and designed invoice can be the difference between getting paid on time and chasing clients for money. In this screencast, I'll show you how to create an awesome invoice template in Numbers that can be customised to your needs, making sure your invoices look just as professional as the services you provide.Read More…