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

Creating an Adaptive, Filterable Portfolio Using jQuery Isotope
Today we'll be taking a PSD Portfolio layout from ThemeForest, replicating it entirely in HTML & CSS whilst making it adaptive. We'll then go further and...
Luke Spoor
11 Jul 2012
Complete Websites
Creating a JavaScript-Free Radio Toggle in CSS3
You'll often find yourself using toggle sliders as a trendy alternative to checkboxes. Today we'll be creating one using plain CSS3 and HTML.
Sebastian Sandqvist
11 Jul 2012
Site Elements
Quick Tip: Design a Countdown Clock in Under 15 Minutes
In this Quick Tip I'll demonstrate how to design a countdown clock interface in Photoshop. We'll go over some simple techniques and, in under fifteen...
Adi Purdila
10 Jul 2012
Site Elements
The Psychology of Content Design
As web designers, we face a difficult task every time we sit down to produce content for the web. There's no doubt that we understand Content is King; this...
Jonathan Cutrell
9 Jul 2012
UX
Quick Tip: Sharpen Your Workflow With Photoshop's Auto-Select
If you're not using Photoshop's auto-select tool, I can only imagine you've never heard of it! Once you make it part of your design workflow, you'll find...
Adi Purdila
6 Jul 2012
Workflow
Community Project: Style a Simple Search Form
The last community project was so successful I reckon we should make them a regular thing. This month, I want to see what you can do with a simple search...
Ian Yates
5 Jul 2012
Workshops
SASS and Compass for Web Designers: The Header
We're going to continue building our Creative Portfolio web page with SASS and Compass. On this occasion, we'll turn our attention to the header area, the...
Norris
3 Jul 2012
Workflow
An Introduction to the CSS Flexbox Module
CSS, despite its relatively low perceived skill ceiling, always seems to have a killer feature up its sleeve. Remember how media queries made responsive...
Umar Hansa
3 Jul 2012
HTML & CSS
Defining And Applying Personas to UX Design
Personas have long been integrated with UX documentation. They help us create fictional users, representative of our real users, which we can reference...
Justin Smith
2 Jul 2012
UX
Twitter Bootstrap 101: Trimming File Size
One of the common criticisms of frameworks such as Twitter Bootstrap is that they include far more code than you actually use in your site, leaving you with...
David Cochran
29 Jun 2012
Workflow
Create a Welcoming "Hero Unit" in Photoshop
Blurred background images are a hot trend in webdesign at the moment and can add depth and interest to any website design. In this tutorial, I'll be walking...
Chris Brown
29 Jun 2012
Complete Websites
HTML5 Canvas Optimization: A Practical Example
If you've been doing JavaScript development long enough, you've most likely crashed your browser a few times. The problem usually turns out to be some...
Patrick Jaoko
28 Jun 2012
Animation