Learning Web Design: 82 Resources to Get You Started

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.

The 💜 of EU tech

The latest rumblings from the EU tech scene, a story from our wise ol' founder Boris, and some questionable AI art. It's free, every week, in your inbox. Sign up now!

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

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

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

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.