Top 5 Free (and Premium) Resources for Learning Web Design

person working on a graphics computer

“I’m interested in learning web design, where do I begin?”

If you’re reading this article, chances are, you’ve either asked that question yourself or you’ve been asked that question. Or maybe your question looked something like one of these:

“I just finished college with a degree in [insert computer-related field], but I want to make websites, where do I start?”

“I’m thinking of changing careers to web design, can you help?”

“What are the best resources for learning HTML/CSS?”

“How do I become a better web designer?”

Regardless of how you word it, these questions are the top ones asked on many of the web design and web-related forums and groups that I frequent. In answer, I decided I would come up with a list of the five top recommended online resources for learning web design.

It’s important to note that while some of these resources focus mainly on writing code, it is equally important for web designers to have at least a basic understanding of both code AND design theory. Ideally, a good web designer will have a solid understanding of design principles AND be able to write HTML, CSS, and some Javascript (with and without libraries such as jQuery).

So, when deciding what to learn next, don’t just search for “web design” keywords within these listed resources. Look also for keywords such as graphic design, color theory, typography, HTML, CSS, and Javascript. If you’re interested in learning WordPress as well, I would also suggest learning PHP in addition to WordPress itself, though some of those skills overlap a bit into the development realm (and there is nothing wrong with that).

Whether you’re new to the web business entirely, or an experienced developer, marketer, or SEO expert looking to expand your knowledge base into learning web design, this list is for you.

Presenting, in no particular order, my list of the Top 5 Free and Premium Resources for Learning Web Design:

CSS-Tricks

CSS-Tricks, founded by Chris Coyier, is probably my favorite on the list both for quality and cost. They do not offer classes, per se, but rather a large collection of videos, articles, tutorials, and reference code snippets.

CSS tricks home page screenshot
I fondly remember some of the many designs of CSS Tricks, but here’s how it looks as of right now.

CSS-Tricks was originally started in 2007 and I’ve probably been following them since pretty close to their inception. The bulk of what I’ve learned about both CSS and WordPress has been through Chris’s excellent screen casts. He and the other writers present things in a way that is very easy to understand and apply to real-world website designs and builds.

Contrary to the name, these days CSS-Tricks offers much, much more than just CSS. Today, you can find videos on WordPress theming, using Git, setting up Grunt, building forms, getting more use out of Google Analytics, and more. I highly recommend bookmarking the “Code Snippets” section as a handy reference.

Speaking of code reference, Chris is also one of the founders at CodePen, which is a super handy resource for learning code, experimenting with snippets, and sharing what you’ve built.

Though much of the content is based on the coding end of things, you will also find some articles on User Experience and design, specifically.

Types of content: Videos, Articles, Code Reference

Cost: FREE

Treehouse

Treehouse is an online educational program geared mostly for web design. They offer classes on everything from your standard HTML and CSS, through web typography, prototyping, the Adobe suite, and even into more in-depth subjects on development, business, and video game or app creation.

Treehouse home page screen shot

It takes a little bit of digging to find the Treehouse class list, but you can take a look at it here. All of the classes appear to offer a free intro, which is a great way of seeing what you would be getting into.

The classes are organized into Tracks. There are tracks in everything from Web Design, to Starting a Business, to iOS Native Development, to Python. There are also recorded workshops and conferences.

In addition to the classes, Treehouse also has a community forum for members to ask specific coding questions. You do not have to be a subscriber to view these posts, so they can come in handy if you have a similar coding problem. (You do have to be a subscriber to post or comment, though).

It’s been a few years since I tried out Treehouse, and my criticism back then was it seemed that they didn’t have a large variety of content outside of that for beginners. Even today, just glancing through the list, there doesn’t seem to be much, if anything, beyond the “intermediate” level.

That being said, I still enjoyed the classes I took and found them formatted in a way that was easy to follow. The subscription-style service is also really great for individuals brand new to the industry as well as businesses or organizations using it to train new employees or team members. You can consume a lot of content for one flat rate as opposed to paying for each individual class.

However, if you’re already an experienced web professional just hoping to learn more about web design in detail, it may not be the right solution for you. But, since they offer a free 7 day trial, it could be worth taking a look!

Types of content: Videos, interactive quizzes

Cost: Free 7 day trial, $25.00 per month or $250 per year after that

Codecademy

Codecademy is a online learning resource with classes on everything from the basics of building a website with HTML and CSS, through more advanced development subjects like learning APIs, Python, and Ruby. The classes are all more code than design-focused, but as a web designer those skills are just as important as learning color and typography.

The best part… it’s FREE.

Codecademy homepage screen shot
This simple sign up form really says it all.

Codecademy is an online educational program that I’ve really come to enjoy using. It’s near the top of my list of “Things I need to get back to.” Though it is strictly for learning code, I’ve found it to be an invaluable resource both for brushing up on my already-learned skills as well as for learning new ones.

The classes are short, easy to consume, and very interactive. The only better way to “learn by doing” than these classes is to actually work on sites. The added benefit of the class, of course, is that you get immediate feedback if you’ve done something wrong.

In addition, there are also many articles on coding subjects that don’t fit as well into a class-like structure. These are great for bookmarking to refer back to at later times.

If you’re looking for basic, clear-cut, classes that really get into “how to code,” and do it well, Codecademy is for you.

Types of content: Interactive classes, articles

Cost: FREE

Udemy

The final two on the list, Udemy and Lynda (below) are probably among the heaviest hitters of online educational resources. Both are more expensive than the previous resources, but both also offer much more comprehensive classes.

The first, Udemy, has online classes on many of the subjects mentioned previously; including design, Adobe suite, and front-end development; but also on more specific subjects such as C++ programming, WordPress, and databases. They also offer classes outside the normal purview of the web industry, including language, photography, marketing, business, health and fitness, and more.

Udemy course catalog screen shot
So. Many. Classes.

As you can see, though they are a premium education resource, they do offer a number of free classes as well.

Unlike Treehouse and Lynda, with Udemy you pay per class. This is great for professionals like myself, who may not have the time all at once to get worthwhile value out of a monthly subscription. With Udemy, I can come back and take individual classes as time permits.

The classes are organized in series of video lectures and may be also combined with articles, e-books, and interactive quizzes. Different instructors may have different ways of doing things, so it is quite easy to find an instructor whose teaching style meshes well with your learning style.

Udemy also offers special “Udemy for Businesses” services so that organizations can use Udemy content to train and offering continuing education to employees.

Types of content: Videos, articles, interactive quizzes (content of each class dependent on instructor)

Cost: Flat fee per class, free classes offered. Paid classes range from $20 – $50 each.

Lynda

Lynda is probably the number 1 online education resource that I see recommended whenever someone asks in an online forum about learning web design.

And for good reason. Lynda boasts thousands of classes in Business, Creative, and Technology tracks, with subjects including marketing, communication, 3D and animation, programming, desktop and native mobile apps, web languages, IT, photography, and video. Basically, if it’s a technological subject and you want to learn it, Lynda will have a course for you.

Lynda homepage screenshot
Lynda is the Queen of online educational resources.

As mentioned above, Lynda’s courses are contained in 3 major categories: Business, Creative, and Technology. Within those categories are subcategories such as design, CAD, photography, and audio + music. For each subcategory, the classes are further broken down by topics, software, and a cool feature called “learning paths” which essentially has an entire education path outlined for you. This level of organization allows you to easily find related classes and topics so that you know what to take next.

Like Treehouse and Udemy, each class is a series of video lectures. Classes typically also contain downloadable course material as set up by the instructor which may include things like practice files and write ups.

While the depth and number of classes are similar to Udemy, Lynda is different in that is a subscription-based resource. Lynda also offers solutions for businesses (small through Fortune 500-sized), educational institutions, and government organizations.

Types of content: Videos, articles, various course materials as provided by instructor

Cost: Free 10 day trial, $35.99 per month if billed monthly or $29.99 per month if billed annually after that

Conclusion

overhead view of hand with smart phone highlighting written notes

A quick Google search would reveal to you that there are many, many other avenues for online education than these resources. But these five are, hands down, the top ones that I see recommended on various web design groups and forums. They have proven track records for quality and the prices are fair and competitive. I either use a few of them currently or have in the past, or plan to in the future. (I’ve got my eye on some Udemy Business classes!)

The most important takeaway from this article, especially if you’re new to the web industry, is that you should not just focus on learning just one thing. If you want to be a successful web designer, don’t just learn HTML and CSS. Learn typography. Learn color. If you’re freelancing, learn business and marketing. If you want to be a WordPress developer as well, don’t just learn WordPress itself. Learn PHP. Learn graphic design. All of these skills are important to understanding how the different elements of web design work together. Learning web design is all about learning how the coding technologies interact with, create, and direct the principles of design.

Have you used any of the resources above? Do you have any other resources you’d like to share? Tell us about them in the comments below! 

 

 

Author: Sarah DaSilva

Sarah DaSilva is the founder and creative guru behind SuperPowered Web. SuperPowered Web provides online marketing and website design to fitness studios and fitness professionals. As a military spouse, Sarah has lived all over the country but currently resides in Honolulu with her family. She is an avid fitness enthusiast and foodie and can often be found lifting weights... or lifting a fork.

3 Comments

  • Awesome article!

    I can only speak to Codecademy – I originally learned web design (and web development) there, however I also just bought a Udemy course. It was pretty cheat (Black Friday sale) on JavaScript – going to give that a crack 🙂

  • Sarah, I like how you suggested Lynda – I really like their tutorials and gladly recommend it to people who are willing to take a shot and learn new things in their lives. 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *