Web Design Tutorials

Learn web design with thousands of free tutorials! Maybe you want to know how to build a site using WordPress themes, or maybe you want to master more advanced web design topics like interface design or motion design. Whatever you need, you'll find it here.

Stay up to date with the latest features and developments in CSS, Shopify, WooCommerce, and more. Learn how to design landing pages and email newsletters that stand out from the crowd and get people to take action. For all the web design tips and advice you need, our expert instructors have you covered!

Read less

Setting a Baseline Grid With GuideGuide for Photoshop
Setting out a baseline grid for your Photoshop-based designs is an indispensible first step in any new website project. A baseline grid will establish...
Chris Brown
8 Aug 2012
Workflow
Quick Tip: Point Visitors in the Right Direction With .htaccess
Today we're going to cover a few simple tricks you can perform with your .htaccess file which will make your visitors that bit happier.
Justin Hubbard
7 Aug 2012
Workflow
Skeleton to WordPress: Finishing Off
It's been quite a journey, but our final destination is in sight! Today we're going to wrap up our Skeleton Magazine WordPress theme by looking at a...
Ian Yates
6 Aug 2012
Complete Websites
Web Design Workshop #16: Blue WordPress Theme
Web Design Workshop is our regular community project where we ask readers to submit their work for your friendly, constructive criticism. It's the perfect...
Ian Yates
4 Aug 2012
Workshops
Working With Fluid Images in Dreamweaver CS6
In the previous installment of this series I went over the various stylesheets associated with a fluid grid layout in Dreamweaver CS6. During this tutorial...
Tom Green
2 Aug 2012
Dreamweaver
Skeleton to WordPress: Getting up and Running
During previous parts of this series we've covered a lot. We took a Photoshop layout, built it into an adaptive web page using the Skeleton framework,...
Ian Yates
1 Aug 2012
Complete Websites
Laying Out Fluid Grids in Dreamweaver CS6
In the previous installment of this series I laid out the events leading up to the inclusion of fluid grids in Dreamweaver CS6. In this tutorial we'll open...
Tom Green
31 Jul 2012
Dreamweaver
Adding a jQuery Countdown to Our "Coming Soon" Page
To finish off our Coming Soon page let's now give the countdown timer some functionality. We're going to use a jQuery plugin which will allow the timer to...
Adi Purdila
30 Jul 2012
Complete Websites
Split Testing With Google Analytics Experiments
In today's tutorial, we're going to be looking at one of Google Analytics' most recent additions to its feature set; Experiments. Using this tool, I'll be...
Chris Brown
27 Jul 2012
Google Analytics
Styling Dark Select Dropdown With Dropkick.js
HTML select elements with their option tags cannot be completely customized using CSS, but what if we want to style a dropdown just as easily as <div>,...
Suhail Dawood
26 Jul 2012
Site Elements
Using OpenLayers with GeoNames WebServices
In this tutorial, I'll show you how to use OpenLayers, a simple to use open source JavaScript library to load, display, and render maps, with the...
Jeffrey Sweet
25 Jul 2012
Web Development
Building a "Coming Soon" Page With HTML and LESS
Having designed our Coming Soon page in Photoshop, let's now kick off the build process with some markup and styling. We'll speed up the whole process by...
Adi Purdila
25 Jul 2012
Complete Websites