Web Design

Top 10 Free Web Design Courses and Tutorials

Take your skills to the next level with this handy list of the best online web design courses.

Portrait for Andrew Blackman By Andrew Blackman
Posted 3 Nov 2020
Top 10 Free Web Design Courses and Tutorials

Want to brush up your web design skills? Here's a list of free web design courses and tutorials that will teach you everything you need to know about Adobe XD, Figma, UI design, and much more.

If you want to set up an online store quickly and easily, and without writing a single line of code, then try using Shopify. It's one of the world's most popular eCommerce platforms with over a million customers and several great apps to choose from. This free course will guide you through the whole process of designing your site, adding products, setting up the navigation, and more.

Have you heard about the brand new Adobe XD feature called 3D transforms? They were introduced at Adobe MAX in October 2020, and they offer a very powerful and easy way of creating 3D effects. Either watch the video below or read the free written tutorial to discover exactly how they work and how you can use them in your web design projects.

No matter how much work you put into other aspects of your web design projects, your choice of typeface can make the difference between a successful design and a dud. Watch this free course to learn the difference between various typeface styles, and when and how to use each one.

Typeface styles explained

Figma is a great tool for designing user interfaces. If you want to get up to speed with using it, try this fabulous free course. Adi Purdila walks you through its main features and how to use it as a web designer or a developer.

Here's a quick tip to help you design websites that people with various common types of visual impairment can still clearly read and understand. Chrome DevTools now lets you check your color scheme for visual accessibility with just a few clicks. See how it's done in this free tutorial.

Learning web design isn't just about mastering new technologies and programming languages. Sometimes, working smarter is just as important. Using a design system can make your design work much more efficient and effective, especially if you're working within a larger team or organization. See how it works in this free web design course.

Once you've mastered the concept of design systems in the course above, why not see how to use them when designing a WordPress site? This free web design course shows you how to use a design system to make your own WordPress theme in a more effective way, instead of designing it page by page and button by button.

Finally, here's one more way to use design systems. In this free web design tutorial, you'll discover how to create Design System Packages (DSPs) with Adobe XD and a new extension for Visual Studio Code. This integration was just announced last month at Adobe MAX 2020, so you'll be ahead of the game if you learn how to use it.

In this practical Figma tutorial, Andrei Marius shows you how to create a fashion app the easy way, saving time and effort by working with auto layouts and components in Figma. And what if you have your product data in a spreadsheet? You'll learn how to populate much of the data straight from a Google Sheet.

Work with Auto Layouts, Components, and Dynamic Content in Figma

What better way of learning user interface design than by making a fun dating app to help people find romance? This free Figma tutorial walks you through the whole process step by step. By the end, you'll not only have a stylish interface design, but you'll also have a whole set of new Figma skills that you can use on any project you like.

dating app screens

These 10 new web design courses and tutorials should keep you going for a while, but there's plenty more in the full Envato Tuts+ library of more than 1,250 courses and 28,000 tutorials. There's sure to be something there for you. Have a look at these recommendations of the best online web design courses from previous months to get some more inspiration.

Every web designer knows that a prototype is a great way to show clients your design ideas and get approval before building the full site. But most prototypes are static, whereas many sites these days include animation. Fix that by using Adobe XD's powerful auto-animate feature—explained in full in this free web design course with Dan White.

Animation in Adobe XD

WordPress remains one of the most popular frameworks for creating websites of all kinds, and for the most part it's easy to use. But migrating sites with WordPress can be a little tricky. In this free web design tutorial, Rachel McCollin will show you how to avoid the gotchas and get your site migrated without problems.

Migrate a WordPress Site

Give your web design portfolio the perfect showcase—or get a head start on designing a client's portfolio site. Either way, this simple video course with Adi Purdila will help you get up and running in just one hour. Watch the video and see how it's done!

Why spend time designing the perfect site if nobody ever visits it? Optimizing a site for search engines is a must these days, but the SEO rules are always changing. Get the latest updates for 2020 in this free tutorial.

Google rich snippets demo

Boost your web design skills by mastering Sketch, one of the most popular apps for designing icons and user interfaces. This free web design course starts from scratch, assuming zero knowledge. Master the interface first, and then go through each of the essential tools and features and get some practice creating designs of your own.

Sketch course logo

This is the second of our web design classes focusing on Adobe XD. Earlier we looked at creating animated prototypes, and now this free web design course teaches you how to create responsive prototypes to show clients how your design will look on a range of different devices.

How would you like to add a slick music app to your web design portfolio? This free tutorial will show you how to do that by walking you step by step through this UI design project in Adobe XD. More importantly, it will leave you with some valuable web design skills and techniques that you can use for many app design projects in future.

Music App UI Design

Most of these online web design classes cover large topics, but sometimes you just need help with a simple but annoying problem. For example, how do you embed video in WordPress? This tutorial walks you through the whole process step by step, whether you're using YouTube or self-hosted video.

There are thousands of WordPress plugins out there, covering pretty much every niche you can think of. But while many of them are cool or useful, not many of them are exactly essential. This free course takes you through a series of plugins that web designers should use on any site they run, covering important functions like backup, security, caching, and SEO. Find out how to get your sites running smoothly and safely in this free course.

WordPress plugins

This detailed 2.5-hour course takes you through everything you need to know to master Adobe XD. Join Adi Purdila and learn about artboards, components, responsive design, and much more.

Adobe XD

Keeping your skills current is not just about learning new technologies. It's also about important concepts like accessibility. Making your sites accessible to as many people as possible is not just the right thing to do; it also makes business sense. You work hard to attract visitors, so why turn some of them away because you've failed to make the simple changes that would allow them to view your site? I like this quick web design tutorial because it shows you how to create a style guide for accessibility, while also introducing you to some important accessibility concepts and techniques along the way.

Accessibility style guide example

If you have a website or do any kind of design work for the web, you should be conscious of how to design sites that everyone can view easily—including the millions of people with color blindness, low vision, blindness, or other visual impairments. If you're not, or if you need a refresher, then read this accessibility tutorial to make sure you're not inadvertently excluding potential visitors and customers through simple but common design flaws.

Designing for visual impairment

Accessibility is crucial when designing WordPress themes in 2018. But how do you ensure your theme is fully accessible to everyone? This tutorial guides you through the essential steps, from using semantic HTML to checking for color contrast and avoiding repetitive link text and more. Read the tutorial to get up to speed.

Accessible WordPress theme example

Here's the problem: most web interfaces are designed with mouse cursors and touch interaction in mind, but many users rely on the keyboard to navigate. This tutorial teaches you the important skill of designing for keyboard accessibility. You'll learn some great techniques for assisting keyboard users and making your sites accessible to a broader audience. Read the full tutorial here.

How would you like to make the text on your website more interactive, using just a few snippets of CSS? Learn how to do that in this web design tutorial, in which you'll see how to make your text get circled, underlined, replaced with icons, and more. See the full instructions.

We all know about pixels, and if you use CSS regularly, you probably know about em and rem too. But what about some of the more esoteric units of measurement, like vh, vmax, or ch? Discover seven different CSS units of measurement and find out how they work and when they'd be useful in this excellent free tutorial.

Creating an engaging user experience (UX) is hard enough anyway, and it gets even tougher when you have to consider the different cultural contexts of people around the world. This short tutorial introduces you to some important best practices. It's also worth reading up on what dark UI patterns are and why you should avoid them.

Better UI for global audiences

If you want to be a great web designer, you probably think you need to learn all the latest CSS and JavaScript tricks and master the latest frameworks. While all of that is useful, you'll also need to do something more important and often more difficult: know your own cognitive biases and work to overcome them. This fascinating web design tutorial digs into some of the weird biases lurking in our brains and shows how they can affect your work as a web designer. Read the tutorial to learn about your biases and master them so you can design better websites.

Overcome cognitive bias in web design

We all know about animated GIFs, but did you know that animated SVGs are a great alternative? You can even use them for things other than cute cat memes. Find out how to animate SVGs in this amazing web design tutorial by Adi Purdila.

Figma is taking the web design world by storm. Find out how to use Figma for things like UI design, UX design, app design, and even vector illustration in this newly released learning guide that connects you with a huge range of free tutorials and web design classes to learn more. Start learning Figma today. And you can also check out our new course, Advanced Typography Design in Figma.

Learn More

This post has highlighted the best online web design courses and tutorials that Tuts+ has published recently, but you'll find a lot more in the full archives, which go back over ten years. So if you're still hungry to learn more, you can search the full Tuts+ library of more than 1,250 courses and 28,000 tutorials to find exactly what you need.