Learn Web Design: Educational Resources for Beginners

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 to learn 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

W3Schools

Tuts+ Network

Tuts+ Network

HTML Dog

HTML Dog

Lynda.com

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.

Learn Web Design: 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 Beginner Tutorial Series

HTML Tutorials from HTML.net

HTML Tutorials from HTML.net

HTML Tutorial

HTML Tutorial

HTML Reference at SitePoint

HTML Reference at SitePoint

HTML and CSS – The VERY Basics (video)

HTML and CSS - The VERY Basics

Learn HTML and CSS: An Absolute Beginner’s Guide

Learn HTML and CSS: An Absolute Beginner's Guide

HTML Tags

HTML Tags

The Most Common HTML and CSS Mistakes to Avoid

The Most Common HTML and CSS Mistakes to Avoid

10 HTML Tag Crimes You Really Shouldn’t Commit

10 HTML Tag Crimes You Really Shouldn't Commit

12 Principles for Keeping Your Code Clean

12 Principles for Keeping Your Code Clean

More resources for learning HTML:

Learn Web Design: 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 Beginner Tutorial Series

CSS Tutorials from HTML.net

CSS Tutorials from HTML.net

CSS Beginner Tutorials from CSSDog

CSS Beginner Tutorials from CSSDog

CSS Tutorial from W3Schools

CSS Tutorial from W3Schools

CSS Reference at SitePoint

CSS Reference at SitePoint

CSS Properties

CSS Properties

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

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

30 CSS Best Practices for Beginners

30 CSS Best Practices for Beginners

20 Useful CSS Tips for Beginners

20 Useful CSS Tips for Beginners

Resetting Your Styles with CSS Reset

Resetting Your Styles with CSS Reset

CSS In Depth: Margins, Padding & The Box Model

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 1: CSS Selecting

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

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

Learn CSS Positioning in 10 Steps

Learn CSS Positioning in 10 Steps

Using CSS 3 (video)

Using CSS 3

More resources for learning CSS:

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

http://net.tutsplus.com/tutorials/html-css-techniques/six-ways-to-improve-your-web-typography/

8 Simple Ways to Improve Typography in Your Designs

8 Simple Ways to Improve Typography in Your Designs

On Web Typography

On Web Typography

How to Size Text in CSS

How to Size Text in CSS

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

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

More resources for learning about typography:

Learn Web Design: 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

Useit.com

Top 10 Mistakes in Web Design

Top 10 Mistakes in Web Design

Quick Usability Checklist

Quick Usability Checklist

10 Useful Usability Findings and Guidelines

10 Useful Usability Findings and Guidelines

Factors that Affect Usability

Factors that Affect Usability

8 Characteristics of Successful User Interfaces

8 Characteristics of Successful User Interfaces

More usability resources:

Learn Web Design: 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

Introduction to Web Accessibility

An Idiot’s Guide to Accessible Website Design

An Idiot's Guide to Accessible Website Design

Evaluating Website Accessibility

Evaluating Website Accessibility

CSS for Accessibility

CSS for Accessibility

11 Accessibility Tips

11 Accessibility Tips

Learn Web Design: 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?

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

Whitespace

Whitespace

Make Your Mockup in Markup

Make Your Mockup in Markup

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

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

More resources for learning about layouts:

Colors in Web Design

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

A Guide to Choosing Colors for Your Brand

Color Theory

Color Theory

A Look into Color Theory in Web Design

A Look into Color Theory in Web Design

Using Color in Web Design

Using Color in Web Design

How to Use Color to Enhance Your Designs

How to Use Color to Enhance Your Designs

More resources about colors in web design:

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)

Creating an Effective Mood Board

The Value of Paper Prototyping

The Value of Paper Prototyping

Using Wireframes to Streamline Your Development Process

Using Wireframes to Streamline Your Development Process

More resources for learning about the design process:

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

Cross Browser Web Development

IE CSS Bugs That’ll Get You Every Time

IE CSS Bugs That'll Get You Every Time

9 Most Common IE Bugs and How to Fix Them

9 Most Common IE Bugs and How to Fix Them

More resources related to browsers:

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:

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.

73 Responses

Comments are now closed on this post.

  • Kirsti, April 20, 2010

    Bill Merikallio’s “Why tables for layout is stupid: problems defined, solutions offered” is still a classic on web standards and CSS, and has been translated into 25 languages by its fans: http://www.hotdesign.com/seybold/

    Pretty fun to read and great illustrations!

  • Moz, April 20, 2010

    What a list!

  • Rachel, April 20, 2010

    Brilliant roundup here. Found about 14 articles I’ve never seen before that all seem really useful so thanks!

  • PSDhome, April 20, 2010

    Very good collection. Thanks for it…

  • Pooja, April 20, 2010

    Hi,

    Thank you very much for sharing this wonderful listing with us. This is useful for beginners & experience web designers also.

  • Jordan Walker, April 20, 2010

    Excellent round up of sites to help with html and css.

  • Asif Ahmed, April 20, 2010

    Must say that its an awesome list. Really usefull. Thanks.

  • Lena Tailor, April 20, 2010

    Really Useful Round up. Thanks for sharing…

  • Codephase, April 20, 2010

    you should have included http://www.webpagesthatsuck.com . It’s a great resource for bad web design

  • aledesign.it, April 20, 2010

    Yes, really useful this post…and not only for beginners!

  • That Guy, April 20, 2010

    If you can swing the Sub. lynda.com is great for pretty much any subject. I also used w3schools a ton when I was learning.

  • Alex, April 21, 2010

    Fantastic list of resources in this post, thank you!

  • Tony, April 21, 2010

    Thanks for sharing this excellent collection of websites.

  • Web Design, April 21, 2010

    Great collection, brilliant! w3schools, ah, nice memories. :)

  • Michele, April 21, 2010

    wowwwowowowowow :O !!!!!!!

    T H A N K S

  • Lori Hamilton, April 22, 2010

    What an amazing post, it is exactly what I was looking for. I’ve put a post on my own blog about it. Keep up the good work, you now have a new, loyal follower:)

    Lori

  • Joel Kidd, April 27, 2010

    Wonderful post! I have been a web designer for about 5 years now, so I’m not quite a beginner, but there are TONS of wonderful things that I will be learning from these resources. Thanks for pulling all of them together in one place.

  • Boghy, April 27, 2010

    Nice work! Really helpful list.

  • SeoBlog, April 30, 2010

    Awesome work, very useful even if your not a beginner! Thanks,

  • уеб дизайн, April 30, 2010

    Great library for every web design specialist (beginer or professional). Thanks for sharing.

  • Bournemouth Web Design, May 3, 2010

    It’s always nice to a have reminder about some of those reference sites, and its also brilliant to see some new ones.

    Thanks for sharing.

  • Meryl van der Merwe, May 3, 2010

    This is really useful. I am forwarding the link to my teenage son who has taught himself – mainly using w3schools.com. I am sure he will get benefit from some of these other websites too.
    Thanks

  • krike, May 3, 2010

    big list :D but awesome :) thank you

  • PSD Cutups, May 4, 2010

    One thing I can recommend is focusing on one thing at a time….a lot of people try to take on more than they can chew in the beginning.

    First focus on honing your design skills, and outsource the rest. Get a good development team that can help you convert your PSDs into a website and it will make the dreams feel a little closer.

    Whenever you are trying to learn a new skill you need reinforcement. If you try to learn design / development at the same time, it will be a while before you see something that makes you say WOW i can do this!

    it’s important to feed the ego…..

  • Great collection. Through your collection I get HTML related site it is very much useful for me. Before many time I find HTML related site but I think now I get best sites from your collections.

    Thanks a Lot.

  • Scott Corgan, May 20, 2010

    Wish these sites existed when i was learning. Then I wouldn’t have had to spend my minimum wage pay to buy over-priced books. Thanks or the postings. I’m bookmarking this page for the newbies I might run into!

  • Alex, June 6, 2010

    Another great source for those who wants to be webmasters is:
    Webmaster Video School
    http://www.webmastervideoschool.com

    Hope that will be useful for you…

  • Åsel, June 19, 2010

    Very useful collection of ressources!!

  • Tim, July 1, 2010

    Another great resource is DevCheatSheet.com.

    Free cheat sheets for developers and designers including cheat sheets for HTML, CSS, Fonts, Color, and many more.

  • Awesome stuff and very useful. Thanks for sharing

  • I have to say these tutorials are awesome. It’s amazing some really great people share these resources here. Thanks.

  • Buffalo Graphic Designer, November 24, 2010

    This is a really impressive list of tutorials. I was actually a member at tuts+ for a while, and their material is really top notch. They don’t take any shortcuts with their stuff. I highly recommend them. Let me know if anyone has any questions about their program.

  • Megha, December 13, 2010

    I personally think that this post is not only useful for the beginners but the professionals should also keep track of these resources. Hope all of them will like it. All the best.

  • web design hull, December 19, 2010

    Wow what a list!… This is a great page to bookmark for reference, thanks for sharing.

  • nico, December 20, 2010

    Very nice & useful collection guys!!

  • meekey, December 25, 2010

    Thank you for your share. They are nice resource for me.

  • Advicegraphics, January 6, 2011

    Thanks for sharing. Very useful collection of links. Nice post. But I think now the web design is more complex “science”. You miss here the resources about consumer online behavior.

  • andy, January 6, 2011

    Really usefull info. Thanks.. :)

  • Lomas, April 27, 2011

    Thank you for your share. They are nice resource for me.

  • Web Design Bournemouth, June 6, 2011

    I’m not a web designer, not even a beginner. I have negative zero knowledge on web designing. I went to the basic HTML tutorial of W3Schools and tried the tutorial exercises and indeed I was able to create my first web page. You may be laughing but this really is my first time and I did it. This is just the first in the list. I’m sure there are much more to see and learn down the list. I’m bookmarking this, try them when I have the time and who knows you may stumble on my own website someday. This is a very useful list especially for those without any background on HTML like me. Thanks.

  • Sascha Fuchs, August 17, 2011

    Good collection of beginner in web design. But I think whoever starts today so that only a hard road ahead of him. Web design has become very complex, I myself have grown into first started in the 90′s it.

    But now no one should rob the joy of learning, but so has everyone who starts today and runs through even my respect.

  • Ivan, September 7, 2011

    I’m a beginner, so i think this will help me, ty Vandelay.

  • Swamykant, November 11, 2011

    W3Schools is my favourite site.

  • Sam, December 27, 2011

    Thanks.. i think this would be very helpful and wonderful tutorial for all the beginners as well as for those who are having no knowledge at all..could start within no time..

  • deepak, January 6, 2012

    very very helpful data indeed.. thankx man update my design knowledge….

  • James Jacobson, March 29, 2012

    Nice data in here… Start learning wed design then eventually apply SEO into it… And all will be set.

  • Janna Hagan, May 19, 2012

    Another great place to learn is http://www.studentguidewebdesign.com :)

  • Bogdan, January 4, 2013

    Thanks for sharing. I’m learning every day.

  • leon, February 7, 2013

    Thanks a lot. I don’t have a clue about CSS, and I really needed some resources to stick my nose into.
    Great resource.