Learn Web Design: Educational Resources for Beginners
Published April 19th, 2010 in DesignIn 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
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
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 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
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 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
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
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
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
An Idiot’s Guide to Accessible Website Design
Evaluating Website Accessibility
CSS for Accessibility
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?
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 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
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:































































69 Responses
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!
Thanks Kirsti, I’ll check it out.
What a list!
Brilliant roundup here. Found about 14 articles I’ve never seen before that all seem really useful so thanks!
Very good collection. Thanks for it…
Hi,
Thank you very much for sharing this wonderful listing with us. This is useful for beginners & experience web designers also.
Excellent round up of sites to help with html and css.
Must say that its an awesome list. Really usefull. Thanks.
Really Useful Round up. Thanks for sharing…
you should have included http://www.webpagesthatsuck.com . It’s a great resource for bad web design
Yes, really useful this post…and not only for beginners!
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.
Fantastic list of resources in this post, thank you!
Thanks for sharing this excellent collection of websites.
Great collection, brilliant! w3schools, ah, nice memories.
wowwwowowowowow :O !!!!!!!
T H A N K S
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
Glad to hear it Lori. Thanks for the feedback.
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.
Nice work! Really helpful list.
Awesome work, very useful even if your not a beginner! Thanks,
Great library for every web design specialist (beginer or professional). Thanks for sharing.
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.
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
big list
but awesome
thank you
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.
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!
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…
Very useful collection of ressources!!
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.
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.
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.
Wow what a list!… This is a great page to bookmark for reference, thanks for sharing.
Very nice & useful collection guys!!
Thank you for your share. They are nice resource for me.
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.
Really usefull info. Thanks..
Thank you for your share. They are nice resource for me.
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.
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.
I’m a beginner, so i think this will help me, ty Vandelay.
W3Schools is my favourite site.
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..
very very helpful data indeed.. thankx man update my design knowledge….