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.
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 and CSS – The VERY Basics (video)
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.
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 is an important aspect of web design that impacts not only the look of a site, but also the readability and user experience.
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.
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.
Learn Web Design: Layouts
The resources provided here will teach you about the different types of layouts and some keys to creating effective layouts.
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.
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)
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
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.
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: