Design
Getting Contrast Right in Your Typography
with Meagan Fisher, Web Designer and Developer at Owltastic
Learn how contrast in your typography can improve your content’s structure, readability, and accessibility in this tutorial.
Take 5
Free online video tutorials. Practical skills in 5 minutes.
- Benefits
- Completely free online video tutorials
- Learn new skills in 5 minutes
- Video tutorial with easy-to-follow transcript
- Length
- 5 minutes or less
Looking for our Full Courses or Gym Shorts?
Recent
Design
-
Design
Leveling Up Your Layouts in Web Design
Learn how to use grids, whitespace, and responsive design to make better layouts for your web pages in this tutorial.
-
Design
Creating an Effective Color Palette in Design
Learn how to choose a color palette that strengthens the branding, accessibility, and UX of your design in this tutorial.
-
Design
Getting Contrast Right in Your Typography
Learn how contrast in your typography can improve your content’s structure, readability, and accessibility in this tutorial.
-
Design
Creating A Harmonious Color Scheme with HSL
Learn how to create a pleasing analogous color scheme using the HSL color system with this tutorial.
-
Design
Creating a Pixel Perfect Icon in Sketch
Learn how to create a pixel perfect icon in Sketch whose edges remain sharp in any scenario with this tutorial.
Development
-
Development
Improving Form Usability and Accessibility
Forms are a frequent source of accessibility problems on websites. Learn some tips and tricks on how to make your web forms easier to use and understand in this tutorial.
-
Development
Designing Accessible Forms for Everyone
Learn how to make sure everyone can complete the forms on your website and learn how to properly use the label element in this tutorial.
-
Development
Creating Beautiful and Accessible Drop Caps
Learn how to create visually compelling and accessible drop caps on the web in this tutorial.
-
Development
Responsively Designing with Viewport Units
Learn how to responsively spice up your designs with viewport units in this tutorial.
-
Development
Flexible and Accessible Typesetting
Learn how to set flexible and accessible type sizes for a more user-friendly web in this tutorial.
-
Development
Designing Beautiful Focus States
Learn how to design beautiful and accessible link focus states in this tutorial.
-
Development
Creating an Interactive Chart for the Web
Learn how to make an interactive column chart using Google Charts in this tutorial.
-
Development
Adding a Dark Mode Theme to Your Website
Learn how to create a theme for your dark mode users in this tutorial.
-
Development
Publishing Your First GitHub Pages Website
Learn how to get up and running with your first GitHub Pages Website in this tutorial.
-
Development
Getting Started with CSS Variables
Learn how CSS Variables can help you speed up and simplify your development workflow in this tutorial.
-
Development
Writing CSS Media Queries For Responsive Design
Learn how to add CSS Media Queries in order to get started with responsive web design in this tutorial.
-
Development
Using CSS Generated Content for Links
Learn how to add generated content to the links on a web page using CSS in this tutorial.
-
Development
Prototyping in the Browser with CSS Grid Layout
Learn the benefits of prototyping web page layouts using CSS Grid Layout in this hands-on tutorial.
-
Development
Creating a Duotone with CSS
Learn how to turn a grayscale image into a duotone using CSS blend modes in this hands-on tutorial.
-
Development
Working with CSS Feature Queries
Learn how to use new CSS features for modern browsers without worrying about browser incompatibilities in this hands-on tutorial.
-
Development
Adding a CSS Gradient Overlay to an Image
Learn how to add a gradient overlay to an image more efficiently using only CSS in this hands-on tutorial.
-
Development
Creating a CSS Knockout Text Effect
Learn how to make an image appear inside the outline of plain text using CSS in this hands-on tutorial.
-
Development
Making a CSS Parallax Effect
Learn how to create a scrolling background effect using CSS in this hands-on tutorial.
UX
-
UX
Advanced Auto Layout in Figma
Learn advanced Auto Layout techniques in Figma such as alignment, distribution, resizing, and nesting to create complex interfaces.
-
UX
Working with Auto Layout in Figma
Learn the fundamentals of Auto Layout in Figma to design responsive interfaces, components, and even entire layouts.
-
UX
Creating Variants in Figma
Variants make working with components in Figma easier and more intuitive to use. Learn how to get up and running with the fundamentals of variants in this tutorial.
-
UX
Working with Overlays in Figma
Learn how to effectively use overlays in Figma in this tutorial.
-
UX
Animating Microinteractions with Figma
Build and animate a prototype for a simple microinteraction in Figma in this tutorial.
-
UX
Creating Advanced Animations in Figma
Learn how to use the Smart Animate feature to create advanced animations in Figma in this hands-on tutorial.
-
UX
Using Auto-Animate in Adobe XD
Learn how to use Auto-Animate in Adobe XD in this hands-on tutorial.
-
UX
Working with the Timeline in InVision Studio
Learn how to create animated micro-interactions using InVision Studio’s timeline feature in this hands-on tutorial.
-
UX
Using Smart Layout in Sketch
Learn how to use Smart Layout in Sketch in this hands-on tutorial.
-
UX
Using the KJ Method
Learn how to silently collaborate with a team in order to get group consensus in this tutorial.
-
UX
Leading Your First Usability Test
Learn how to lead a usability test in order to see how people interact with a product in this tutorial.
-
UX
Writing Effective Survey Questions
Learn how to write survey questions to gather high-level information about your market in this tutorial.
-
UX
Conducting Customer Interviews
Learn how to conduct a successful customer interview in this tutorial.
-
UX
Leading a Card Sorting Session
Learn how to run a card sorting session in order to better understand your users’ mental models in this tutorial.
Accessibility
-
Accessibility
Using Motion and Web Animation Responsibly
You don’t have to forgo animation entirely to accommodate users with disabilities. Learn how to ensure that animated elements won’t compromise the accessibility of your website in this tutorial.
-
Accessibility
Creating Accessible Web Animations
A few of the most common animation techniques used on the web can make users affected by motion dizzy or even sick. Learn how to avoid these techniques in this tutorial.
-
Accessibility
Creating Accessible Video and Audio Content
With more video and audio being published online than ever before, it’s critical to make this content as accessible as possible. Learn strategies for improving multimedia accessibility on your websites in this tutorial.
-
Accessibility
Improving Accessibility with Color Contrast
Discover how to identify whether the colors on your website have sufficient contrast between text color and its background in this tutorial.
-
Accessibility
Understanding the Role of Color in Accessibility
Take the guesswork out of designing for color blindness and learn how to improve the accessibility of your websites in this tutorial.
-
Accessibility
Writing Effective and Accessible Alt Text
Learn how to write alt text for more complex image use, such as charts, graphs, and image links in this tutorial.
-
Accessibility
Improving Image Accessibility with Alt Text
Learn best practices for using alt text to improve the accessibility of the images on your website in this tutorial.
-
Accessibility
Designing Accessible Data Tables
Learn how to make the data tables in your HTML documents more accessible for everyone in this tutorial.
-
Accessibility
Making Headings and Lists More Accessible
Learn how to make the headings and lists in your HTML documents more accessible for everyone in this tutorial.
-
Accessibility
Understanding Document Structure Accessibility
Learn how to leverage the inherent accessibility of HTML documents in this tutorial.
-
Accessibility
Introduction to Screen Readers Using VoiceOver
Learn how to get started with VoiceOver, Apple’s built-in screen reader, to read and navigate web pages in this tutorial.
Career Skills
-
Career Skills
Taking Your Portfolio Case Studies to the Next Level
In this tutorial, you’ll learn three tips on how to write compelling case studies for your online portfolio.
-
Career Skills
Crafting a Concise About Page
In this tutorial, you’ll learn three ways to create a compelling and unique About page for your online portfolio.
-
Career Skills
Making a Great First Impression with Your Portfolio
In this tutorial, you’ll learn three ways to make a great first impression with your online portfolio and improve your chances of getting hired.
-
Career Skills
Managing Your Time Like a Pro
Learn 3 ways to manage your work day more efficiently in this tutorial.
-
Career Skills
Knowing Your Audience
Learn how to increase opportunities by understanding the types of audiences you can expect to encounter in this tutorial.
-
Career Skills
Self-Promotion Through Your Online Presence
Learn how to promote yourself via your website and social media in this tutorial.
-
Career Skills
Crafting Your Story
Learn how to create compelling stories for projects you’ve made in this tutorial.
-
Career Skills
How to Tell the Story of a Mid-Career Pivot
Learn how to have confidence in the stories you tell after making a career change in this tutorial.
-
Career Skills
Storytelling for Designers
Learn how to tell your story in a compelling way in order to advance your career in this tutorial.