Learn Web Design: Educational Resources for Beginners
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 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.
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 and CSS – The VERY Basics (video)
Learn HTML and CSS: An Absolute Beginner’s Guide
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 Tutorials from CSSDog
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
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.
10 Useful Usability Findings and Guidelines
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
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?
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
A Look into Color Theory 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.
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:
“
(Via Vandelay Design Blog.)