Web Design Tutorials

Learn web design with thousands of free tutorials! Maybe you want to know how to build a site using WordPress themes, or maybe you want to master more advanced web design topics like interface design or responsive design. Whatever you need, you'll find it here.

Stay up to date with the latest features and developments in CSS, Shopify, WooCommerce, and more. Learn how to design landing pages and email templates that stand out from the crowd and get people to take action. For all the web design tips and advice you need, our expert instructors have you covered!

All Web Design tutorials:

  1. HTML Element: span

    HTML Element: span

    Tutorial Beginner

    The span element is an inline element, which doesn’t really describe its content in any specific way. It should only be used when there isn’t a more...

  2. 14 Valentine’s Day Web Templates You Should Use

    14 Valentine’s Day Web Templates You Should Use

    Tutorial Beginner

    Discover the benefits of customizing your website for Valentine’s Day and find the perfect templates to make it happen with our latest handy roundup.

  3. How to Filter Data on a Webpage (with JavaScript)

    How to Filter Data on a Webpage (with JavaScript)

    Tutorial Intermediate

    In this tutorial, we’ll look into using vanilla JavaScript to filter mock data (results on a blog listing page) according to their category.

  4. The Best Responsive Menu Tutorials on Tuts+

    The Best Responsive Menu Tutorials on Tuts+

    Tutorial Beginner

    Interested in building a responsive menu for your next project, but need some inspiration? Today we’ll explore the best CSS and JavaScript header menu...

  5. Create a Reusable Dropdown Component with JavaScript

    Create a Reusable Dropdown Component with JavaScript

    Tutorial Intermediate

    In this tutorial, we’ll create a reusable, custom dropdown component, using vanilla JavaScript.

  6. How to Improve SEO on Your WordPress Website

    How to Improve SEO on Your WordPress Website

    Tutorial Beginner

    Not sure how to improve your WordPress website’s SEO? Need help learning everything you need to know about SEO and WordPress? By the end of this article,...

  7. How to Build a Pure CSS Loading Animation (With Keyframes)

    How to Build a Pure CSS Loading Animation (With Keyframes)

    Tutorial Beginner

    Animations are a great way to make a website more interesting. In this tutorial, we’ll be building a loading animation on a webpage using CSS keyframes.

  8. How to Make a Block Pattern for Easy Layouts in WordPress

    How to Make a Block Pattern for Easy Layouts in WordPress

    Tutorial Beginner

    Making your own block patterns is a great time saver for WordPress development. Here, we talk about what block patterns are, how they work, and how you can...

  9. The Best JavaScript Scroll Header Effects Tutorials on Tuts+

    The Best JavaScript Scroll Header Effects Tutorials on Tuts+

    Tutorial Beginner

    Interested in some inspiration for creative header effects on scroll? I’ve got you covered! Today we’ll explore the best Javascript-driven scroll header...

  10. How to Build a CRUD Web Application with Vanilla JavaScript

    How to Build a CRUD Web Application with Vanilla JavaScript

    Tutorial Intermediate

    In this tutorial, we’ll be building a CRUD application in the form of a note taking app. We’ll also explore how to use local storage to save notes in our...

  11. Best Ways to Preload Images Using JavaScript, CSS, and HTML

    Best Ways to Preload Images Using JavaScript, CSS, and HTML

    Tutorial Beginner

    This tutorial will show you three different methods of preloading images. We will also learn the pros and cons of these methods.

  12. 19 Best HTML5 and JavaScript Game Engines and Templates

    19 Best HTML5 and JavaScript Game Engines and Templates

    Tutorial Beginner

    Do you want to code an online game? You're in luck—this is a great time for any online game developer and those aspiring to be online game developers. HTML5...