Web Design Tutorials

Free tutorials, learning guides, and online courses to help you learn web design. Whether it’s interface design, UX, front-end development, motion design, accessibility, business, or something you’ve not yet discovered, our team of expert instructors have you covered!

Figma General and Miscellaneous Tips
To wrap up our series of Figma tips and tricks, here are three quick tips which fall into the “miscellaneous” category.
Kezz Bracey
10 Dec 2018
Figma
How to Make a Great (Coming Soon) Website Product Launch Page
Announce your next product in style by creating a visually stunning coming soon page. This guide walks you through creating a coming soon website for a...
Brenda Barron
7 Dec 2018
Web Design
Best Practices for Transforming User Feedback to Insights
Designers and UX researchers realize the value of getting customer feedback, but that’s just one step in the overall process. Here are four tips for not only...
Joanna Ngai
6 Dec 2018
UX
New Short Course: Interactive JavaScript Maps With Leaflet
Leaflet is a robust JavaScript framework for creating interactive maps on the web. Learn how to use it in our quick half-hour course, Interactive JavaScript...
Andrew Blackman
5 Dec 2018
JavaScript
20+ Great Product Landing Page Templates (2018 Design Examples)
If you're trying to sell a new product, you need to have a stunning product landing page. This collection of landing page templates for products will inspire...
Brenda Barron
4 Dec 2018
Landing Pages
Using Audio to Enhance Your Web Sites and Web Apps
Sound is more versatile than you think! Let’s take a look at some creative ways it can be implemented to create a better user experience on the web.
Eric Karkovack
4 Dec 2018
Audio
A Guide to Creating Accessible Animations
Creating accessible animations is an important part of user experience. Motion on the screen can make people dizzy, nauseous, or worse. In this guide, I’ll...
Anna Monus
3 Dec 2018
Accessibility
Accessible SVG: Methods for Adding Alternative Content
While there are many things to consider when making SVGs fully accessible, this article will focus on the ways you can add alternative content to an SVG.
Carie Fisher
3 Dec 2018
Accessibility
Create a CSS Grid Image Gallery (With Blur Effect and Interaction Media Queries)
In this tutorial we’re going to take a bunch of ordinary thumbnail links and turn them into a responsive CSS grid gallery with a blurred hover effect. We’ll...
Ian Yates
30 Nov 2018
CSS Grid Layout
Figma Handoff and Testing Tips
Smooth collaboration with developers is a huge part of what Figma offers designers, so in this collection of tips and tricks we’ll be looking at handoff and...
Kezz Bracey
29 Nov 2018
Figma
Learn to Prototype With Framer X in Our New Course
In our new short course, Learn to Prototype With Framer X, you’ll learn how to work with Framer, a popular new design tool that focuses heavily on prototyping.
Andrew Blackman
29 Nov 2018
Prototyping
Figma Layout Tips
When working with layouts in Figma (which will be often) you’ll need to be comfortable with resizing, measurements, spacing, alignment, and masking. Here are...
Kezz Bracey
28 Nov 2018
Figma