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. Start Using Quotation Marks the “Correct” Way

    Start Using Quotation Marks the “Correct” Way

    Tutorial Beginner

    Quotation marks, speech marks, inverted commas; whatever you call these forms of punctuation, you might well be using them incorrectly. Let’s take a quick...

  2. Give Yourself to the Dark Side (of Web Design, on Star Wars Day)

    Give Yourself to the Dark Side (of Web Design, on Star Wars Day)

    Tutorial Beginner

    Feel like joining the dark side right now? You're not alone! Read on to find out why it offers more than just a fashion statement, plus 15+ of the best dark...

  3. How to Use the HTML “base” Tag

    How to Use the HTML “base” Tag

    Tutorial Beginner

    The base tag in HTML is a relatively little known element, but it enables you to do two things: set any URL you choose as the base for all relative URLs, and...

  4. HTML Element: aside

    HTML Element: aside

    Tutorial Beginner

    The aside element represents a page section containing relatable, yet separate content from the page it’s on. You might commonly refer to these as “sidebars“...

  5. HTML Element: footer

    HTML Element: footer

    Tutorial Beginner

    The footer element represents a footer for its nearest ancestor sectioning content element (like an article element) or for the body element if there is no...

  6. HTML Element: base

    HTML Element: base

    Tutorial Beginner

    The HTML base element provides the base URL for all relative URLs within a document. It’s usually placed inside the head section and should appear only once...

  7. Build a Navigation Menu With an Animated Active Indicator (JavaScript)

    Build a Navigation Menu With an Animated Active Indicator (JavaScript)

    Tutorial Beginner

    Today, we’ll learn how to create a fancy menu effect: each time we click on, or hover over an item there will be a magic moving element that will follow...

  8. AI-Driven Aesthetics: How Machine Learning is Influencing Web Design Trends

    AI-Driven Aesthetics: How Machine Learning is Influencing Web Design Trends

    Tutorial Beginner

    Discover the fascinating world of AI-driven aesthetics and how it’s revolutionizing web design trends. Here, we dive into topics like personalization,...

  9. JavaScript DOM Manipulation Cheat Sheet

    JavaScript DOM Manipulation Cheat Sheet

    Tutorial Beginner

    Here is your go-to guide for DOM manipulation. Learn how to create, select, and remove DOM nodes. Also, take a quick glance at event listeners.

  10. 15 Best HTML5 Audio Players for Websites

    15 Best HTML5 Audio Players for Websites

    Tutorial Beginner

    If you need a web audio player, here are a few premium HTML5 audio players for websites and MP3 players for websites that will allow you to share your audio...

  11. How to Start With a Blank Design in WordPress

    How to Start With a Blank Design in WordPress

    Tutorial Beginner

    In this tutorial, I’ll walk you through my workflow on how I get started with a completely blank slate when working with WordPress.

  12. HTML Element: p

    HTML Element: p

    Tutorial Beginner

    The HTML p element represents a paragraph, and is one of the most commonly used block level elements. HTML paragraphs can be used to structure any group of...