Web Design

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!

Web Design Courses

  • Web Design for Beginners (Epic Free Course!)

    Web Design for Beginners (Epic Free Course!)

    Adi Purdila
  • HTML & CSS for Beginners (MEGA Free Course!)

    HTML & CSS for Beginners (MEGA Free Course!)

    Adi Purdila
  • Promo Banner

    Put your new skills to work. Create with unlimited downloads of UX/UI kits, photos, fonts and more. Plus access our full AI stack.

    Start creating

    Featured Web Design Tutorials

  • How To Build a Simple Carousel With Vanilla JavaScript (14 Lines of Code!)

    How To Build a Simple Carousel With Vanilla JavaScript (14 Lines of Code!)

    Jemima Abu
  • CSS Grid vs. Flexbox: Which should you use and when?

    CSS Grid vs. Flexbox: Which should you use and when?

    Anna Monus
  • All Web Design Content:

    1. Easy CSS slider (carousel with pure CSS)

      Easy CSS slider (carousel with pure CSS)

      Tutorial Beginner

      A carousel is a great example of a possible CSS-only interactive feature. In this tutorial, we’ll build a carousel with a few extra features using only CSS.

    2. How to create a “blob generator” tool in JavaScript (Canvas tutorial)

      How to create a “blob generator” tool in JavaScript (Canvas tutorial)

      Tutorial Intermediate

      A slightly weird one, but in this tutorial, we’ll learn how to create a blob generator tool using HTML, CSS, and JavaScript. There’s a lot to learn!

    3. Build a Bootstrap light/dark toggle switch component

      Build a Bootstrap light/dark toggle switch component

      Tutorial Beginner

      In this tutorial, we’ll extend Bootstrap by building a custom color mode switcher that takes advantage of Bootstrap’s built-in dark mode styles.

    4. How to create an image compressor tool in JavaScript

      How to create an image compressor tool in JavaScript

      Tutorial Intermediate

      In this tutorial, I will guide you through creating an image compression tool that provides a simple yet powerful way to reduce image sizes without...

    5. 12+ dashboard UI concepts to inspire your designs

      12+ dashboard UI concepts to inspire your designs

      Tutorial Beginner

      Let's explore dashboard UI concepts for crafting stunning interfaces, and learn how to effectively choose, customize, and implement these dashboard design...

    6. Build a light/dark mode toggle switch component with CSS & JavaScript

      Build a light/dark mode toggle switch component with CSS & JavaScript

      Tutorial Intermediate

      In this new tutorial, we'll learn how to build a light/dark mode toggle switch component, a handy feature available in many sites and apps.

    7. WordPress vs. WP Engine: What’s going on and what can you do about it?

      WordPress vs. WP Engine: What’s going on and what can you do about it?

      Tutorial Beginner

      In September 2024, Matt Mullenweg of WordPress and Automattic declared war against WP Engine. While the legal and very public battle between these two...

    8. How to build a JavaScript page loading animation

      How to build a JavaScript page loading animation

      Tutorial Intermediate

      Previously, we learned how to create a JavaScript page loading animation with GSAP. Today, let’s make another beautiful loading animation—this time without...

    9. How to create a color gradient tool in JavaScript

      How to create a color gradient tool in JavaScript

      Tutorial Beginner

      Time to make things pop! By the end of this tutorial, you'll have your own gradient tool to generate CSS and create stunning gradients that bring a striking...

    10. Create a currency converter with HTML, CSS, and vanilla JavaScript

      Create a currency converter with HTML, CSS, and vanilla JavaScript

      Tutorial Intermediate

      Let’s create a currency converter using HTML, CSS, and vanilla JavaScript, with data from the Exchange Rate API.

    11. 20 reasons why people still love WordPress

      20 reasons why people still love WordPress

      Tutorial Beginner

      Want to know why WordPress continues to be the #1 content management system after all these years? We’ll give you 20 reasons why.

    12. What to do when one of your WordPress plugins gets compromised

      What to do when one of your WordPress plugins gets compromised

      Tutorial Beginner

      A recent study from Patchstack found that 97% of detected WordPress security vulnerabilities came from WordPress plugins. Here’s what you need to know to...