This article was published on May 17, 2011

Learning Web Design: 82 Resources to Get You Started

Learning Web Design: 82 Resources to Get You Started
Joel Falconer
Story by

Joel Falconer

Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found g Joel Falconer is the Features Editor at TNW. He lives on the Gold Coast, Australia with his wife and three kids and can sometimes be found gaming or consulting. Follow Joel on Twitter.

Web design is a big industry. Hundreds of millions are made by solo designers and agencies delivering tailored services to their clients and theme foundries selling turn-key solutions for platforms like WordPress.

As with any growing industry, where there are people smelling the money, there are people looking for a way in. This article won’t teach you how to become a great web designer, but we’ll run through the skills you’ll need to pick up and where you can learn each of those.

The Theory of Design

Before you dive straight into the web aspect of web design, you should take the time to get a good overview of design theory. It takes people years to fully adopt these principles, but you’ll gain the most by getting these into your brain as a framework for the technical stuff you’ll learn later, so that you’re never caught up in the hype of a new trend or technology and forget what makes great design great.

  1. Classic Graphic Design Theory
  2. Graphic Design Principles
  3. History of Graphic Design
  4. The Role of Sketching in the Design Process
  5. The Grid in Web Design
  6. Color Theory
  7. Color Theory (multi-page tutorial)
  8. The Basics of Graphic Design
  9. Complete Beginner’s Guide to Information Architecture
  10. The Principles of Beautiful Web Design

Photoshop & Illustrator Design

It all begins with the concept, and the way most web designers finalize the concept before going into production is by creating comps in Photoshop and Illustrator. Usually, Photoshop is where most of the comp is done, with the designer calling on Illustrator when they need better vector tools to create a logo or icons for the site.

There is, of course, a growing movement that encourages designers to design in the browser. I think that’s a good movement, but I also think you’re better off getting some practical experience creating layouts in a more visual environment like Photoshop before you head down that road.

Photoshop Essentials

  1. Getting Started with Photoshop
  2. Photoshop Interface Tutorial
  3. Photoshop’s Toolbox
  4. Photoshop’s Pen Tool: The Comprehensive Guide
  5. Photoshop’s Painting Tools
  6. Saving Images for the Web
  7. Using Palettes in Photoshop
  8. Photoshop For Beginners: The Power of Layers
  9. Layer Styles in Photoshop
  10. Photoshop 101 – Adjustment Layers
  11. A Comprehensive Introduction to the Type Tool
  12. Photoshop 101: How to Use the Free Transform Tool
  13. Master Photoshop Selection Tools in Under 30 Minutes

Illustrator Essentials

  1. Getting Started in Illustrator
  2. Illustrator’s Pen Tool: The Comprehensive Guide
  3. Fun with Illustrator’s Blend Tool
  4. Adobe Illustrator Tips: Live Trace
  5. Illustrator’s Type Tool: A Comprehensive Introduction
  6. The Power of Patterns in Illustrator
  7. Mastering Illustrator Effects
  8. Gradients in Adobe Illustrator
  9. The Stroke Panel
  10. The Pathfinder
  11. The Power of Smart Guides

Photoshop Web Design Tutorials

  1. Design a Photography Portfolio
  2. Design a Cartoon Style Grunge Website Layout
  3. Create a Grungy Web Design
  4. Create a Sleek, High-End Web Design from Scratch
  5. Create a Latest Tweets Box
  6. Create a Creative Studio Web Page
  7. Design a Business Layout
  8. Design a Dark Business Layout
  9. Create a Professional Web 2.0 Layout
  10. Create a Grungy, Translucent Web Portfolio Design
  11. Design a Sleek Textured Blue Portfolio
  12. Deep in Space Portfolio Layout Design in Photoshop
  13. Create a Clean & Classy Web Design in Photoshop
  14. Beautiful Music Streaming Website Design in Photoshop
  15. Simplistic Black & White Portfolio Layout in Photoshop
  16. Clean and Creative WordPress Style Theme in Photoshop
  17. Simple Business Style Portfolio Layout in Photoshop
  18. How to Make a Rockin’ Website Design Layout in Photoshop
  19. Basics: Create a Clean Magazine & Blog Theme (Day 1: Design)


HTML is the foundation on which all websites are built. On its own, HTML doesn’t have much to do with how your design looks, but it describes the structure of your design’s information to the browser, which is then styled by CSS.

HTML is incredibly easy to learn, and if you’ve got a good memory you can probably have everything you need to get started at a bare minimum learned within an hour.

  1. Getting Started with HTML
  2. University of Texas’ HTML: Getting Started
  3. w3schools HTML Tutorial
  4. Learn HTML & CSS: An Absolute Beginner’s Guide
  5. HTML5 Tutorial — Getting Started
  6. Getting Started with HTML Emails


CSS, or cascading stylesheets, are a way of describing the appearance and styling of every element on your web page. This is where the bulk of the web designer’s visual work is done after the Photoshop comps are done.

If there’s one thing to really get to know, that’d be CSS.

  1. w3schools CSS Tutorial
  2. CSS Basics
  3. Eric Meyer on CSS
  4. HTML Dog CSS Beginner Tutorials
  5. Learn CSS Positioning in Ten Steps
  6. CSS Easy: Learn CSS The Modern Way
  7. The Difference Between ID and Class
  8. HTML & CSS – The VERY Basics
  9. All About Floats
  10. The CSS Box Model
  11. The SitePoint CSS Reference
  12. Clearfix: How to Clear Floats Without Structural Markup


JavaScript gives designers a range of super useful tools, the most common of which have to do with making your website do things outside the capabilities of HTML and CSS. Probably the most ubiquitous example of JavaScript usage in web design is the slider, such as ZURB’s Orbit.

  1. w3schools JavaScript Tutorial
  2. JavaScript for Beginners
  3. 24 JavaScript Best Practices for Beginners
  4. A Beginner’s Guide to JavaScript
  5. Tips on Learning JavaScript
  6. JavaScript for the Total Non-Programmer
  7. Official jQuery Tutorials
  8. jQuery for Designers
  9. jQuery for Absolute Beginners Video Series
  10. w3schools jQuery Tutorial
  11. Learning jQuery

Go Get Rich!

You’ve got all the tools you need to get started on your quest for riches! There’s a lot to learn between now and gaining the knowledge and experience that’ll enable you to build a comfortable living as a designer, but if you dive in, stick at it, and don’t hold yourself back, it’s more than achievable. I know really young guys who make tens of thousands of bucks a month selling their themes on online marketplaces or simply servicing clients — if they can do it, with enough determination, so can you.

Get the TNW newsletter

Get the most important tech news in your inbox each week.