In recent weeks we have published a few posts that focused on graphic design basics: Learn Photoshop and Learn Illustrator. Both of those posts generated a lot of interest from readers, so today we’ll continue with a third post in the series, this one focusing on the basics of web design. Here you will find categorized resources and links for learning HTML, CSS, typography, the design process, and more. If you’re just getting started or looking to brush up on your skills, you may want to bookmark many of these resources.

Introductory Information and General Learning Resources

General resources for learning web design

The sites listed below are excellent places to find loads of content aimed at people who are looking to learn more about web design and front end development. Much of the content is free but some of it is available for a membership fee, which may be worth the cost to save yourself some time in tracking down the right resources.

W3Schools

Tuts+ Network

HTML Dog

Lynda.com

Articles for web design beginners

While are of the links and resources provided in this post will teach some aspect of web design, these four articles take a broad look at the subject and provide valuable information for beginners.

The Four Key Components of a Great Web Design 10 Short ‘n’ Sweet Tips on How to Design for the Web 10 Things Every Web Designer Just Starting Out Should Know Website Basics: Stuff Beginners Need to Know

Resources to Learn HTML

HTML is of course one of the fundamental aspects of web design. There are a number of resources and tutorials out there that are aimed at beginners.

HTML Beginner Tutorial Series

HTML Tutorials from HTML.net

HTML Tutorial

HTML Reference at SitePoint

HTML and CSS – The VERY Basics (video)

Learn HTML and CSS: An Absolute Beginner’s Guide

HTML Tags

The Most Common HTML and CSS Mistakes to Avoid

10 HTML Tag Crimes You Really Shouldn’t Commit

12 Principles for Keeping Your Code Clean

More resources for learning HTML:

Top 15+ Best Practices for Writing Super Readable Code HTML or XHTML: Does it Really Matter? Zen Coding: A Speedy Way to Write HTML/CSS Code 20+ HTML Forms Best Practices for Beginners

Resources to Learn CSS

CSS (Cascading Style Sheet) coding will control the presentation of the website and should also be a major area of focus for beginners.

CSS Beginner Tutorial Series

CSS Tutorials from HTML.net

CSS Beginner Tutorials from CSSDog

CSS Tutorial from W3Schools

CSS Reference at SitePoint

CSS Properties

An In-Depth Coverage on CSS Layers, Z-Index, Relative and Absolute Positioning

30 CSS Best Practices for Beginners

20 Useful CSS Tips for Beginners

Resetting Your Styles with CSS Reset

CSS In Depth: Margins, Padding & The Box Model

CSS Do’s and Don’ts Part 1: CSS Selecting

CSS Do’s and Don’ts Part 2: Markup

Learn CSS Positioning in 10 Steps

Using CSS 3 (video)

More resources for learning CSS:

CSS Techniques I Wish I Knew When I Started Designing Websites Mastering CSS Coding: Getting Started Mastering CSS, Part 1: Styling Design Elements Mastering CSS, Part 2: Advanced Techniques and Tools Getting Started with CSS: A Practical Exercise CSS Fundamentals: Containing Children CSS Fundamentals: CSS 3 Transitions CSS Shorthand CSS Formatting Strong, Better, Faster Design with CSS 3 11 Classic CSS Techniques Made Simple with CSS 3 CSS Transitions 101 Specifics on CSS Specificity CSS Specificity: Things You Should Know Conditional Stylesheets The Z-Index Property: A Comprehensive Look Backgrounds in CSS: Everything You Need to Know CSS Sprites: What They Are, Why They’re Cool, and How to Use Them The Mystery of the CSS Float Property 5 Ways to Instantly Write Better CSS 7 Principles of Clean and Optimized CSS Code Optimized CSS Files 10 Best CSS Practices to Improve Your Code 10 Principles of the CSS Masters 10 Tips for Writing Better CSS How to Organize CSS Files How to Create a Simple Print CSS for Your Site Essential CSS/HTML Lists Styling Techniques

Typography

Typography is an important aspect of web design that impacts not only the look of a site, but also the readability and user experience.

6 Ways to Improve Your Web Typography

8 Simple Ways to Improve Typography in Your Designs

On Web Typography

How to Size Text in CSS

20 Do’s and Don’ts of Effective Web Typography

More resources for learning about typography:

5 Principles and Ideas of Setting Type on the Web Complete Guide to CSS Font Stacks: Techniques and Resources 8 Definitive Web Font Stacks 10 Principles for Readable Web Typography Setting Type on the Web to a Baseline Grid Top Ten Web Typography Sins

Usability

Even an attractive website won’t be very effective if it is not usable. Creating user-friendly website should be a priority throughout the design process.

Useit.com

Top 10 Mistakes in Web Design

Quick Usability Checklist

10 Useful Usability Findings and Guidelines

Factors that Affect Usability

8 Characteristics of Successful User Interfaces

More usability resources:

Does Your Website Suffer from These 7 Usability Mistakes 10 Usability Crimes You Really Shouldn’t Commit 5 Damn Easy Ways to Improve User Experience How to Minimize Load Times for Fast User Experiences 10 Tips to Create a More Usable Web Usability Testing Toolkit: Resources Articles and Techniques 35+ Usability Resources for Web Designers

Accessibility

Like usability, accessibility is critical for the success of a website. If visitors cannot access the site and it’s content, it will be useless to them.

Introduction to Web Accessibility

An Idiot’s Guide to Accessible Website Design

Evaluating Website Accessibility

CSS for Accessibility

11 Accessibility Tips

Layouts

The resources provided here will teach you about the different types of layouts and some keys to creating effective layouts.

Fixed vs. Fluid vs. Elastic Layout: What’s the Right One for You?

Whitespace

Make Your Mockup in Markup

Ultimate Guide to Grid-Based Web Design: Techniques and Tools

More resources for learning about layouts:

Design and Code Your First Website in Easy-to-Understand Steps 9 Timeless 3 Column Layout Techniques Modern CSS Layouts: The Essential Characteristics 35 Tutorials for Creating Website Layouts in Photoshop Best Photoshop Website Layout Tutorials of 2009

Colors

Color choices have a huge impact in web design. In this section you’ll find resources for learning the basics of color theory and color psychology, as well as some tips for using available resources to help with picking a color scheme.

A Guide to Choosing Colors for Your Brand

Color Theory

A Look into Color Theory in Web Design

Using Color in Web Design

How to Use Color to Enhance Your Designs

More resources about colors in web design:

How to Get a Professional Look with Color 10 Super Useful Tools for Choosing the Right Color Palette Find the Perfect Colors for Your Website Color Theory, the Color Wheel, and Color Schemes

The Design Process

Part of being an effective web designer is establishing a process for your design projects. In this section you’ll find some resources that teach various aspects of the design process.

Creating an Effective Mood Board (video)

The Value of Paper Prototyping

Using Wireframes to Streamline Your Development Process

More resources for learning about the design process:

Developing Your Design Process Simple Ways to Save Time with a Default Code Library Why Mood Boards Matter The Importance of Wireframes in Web Design and 9 Tools to Create Wireframes Wire Frame Your Site Coding a Web Design for Speed and Quality

Browsers

One of the biggest frustrations for new web designers is dealing with browser inconsistencies. In this section you’ll find some information that will help you to understand browsers, as well as some resources for testing your websites.

Cross Browser Web Development

IE CSS Bugs That’ll Get You Every Time

9 Most Common IE Bugs and How to Fix Them

More resources related to browsers:

15 Highly Useful Resources for Cross Browser Testing Useful Tools for Testing Cross Browser Compatability

What Are Your Favorite Resources?

If you have any other resources that you would like to share please leave a comment.

For more educational resources please see:

Learn Photoshop Learn Illustrator