Learn HTML Templates

Discover the best HTML templates to speed up your web design work. Get professional designs to give you a head start on your projects.
  1. 15 Best WordPress Themes for Financial Sites (Free & Premium)

    15 Best WordPress Themes for Financial Sites (Free & Premium)

    Tutorial Beginner

    If you’re running a financial business then one of the most important qualities you need to convey to your visitors is professionalism; the best way to show...

  2. Performance Tip: Use the Media Attribute for Faster Page Load Times

    Performance Tip: Use the Media Attribute for Faster Page Load Times

    Tutorial Beginner

    One-liner performance optimization tip. Add the media attribute when you link to conditional CSS files to shorten the critical rendering path and improve...

  3. How to Enhance Your Website Layouts With SVG Shapes

    How to Enhance Your Website Layouts With SVG Shapes

    Tutorial Intermediate

    In this new tutorial, we’ll get rid of the usual boring rectangular boxes and learn to build a landing page full of complex SVG shapes. We’ll even enhance it...

  4. 6 Best Practices for Building Responsive Dropdown Menus

    6 Best Practices for Building Responsive Dropdown Menus

    Tutorial Beginner

    In this guide, we’ll have a look at some best practices you can follow and a couple of code examples you can use when building a responsive dropdown menu.

  5. How to Build a Simple Toggle Switch Component With the CSS Checkbox Hack

    How to Build a Simple Toggle Switch Component With the CSS Checkbox Hack

    Tutorial Beginner

    In this short tutorial, we’ll learn how to build a CSS-only switch component by taking advantage of the “CSS checkbox hack technique”. Along the way, we'll...

  6. Quick Tip: How to Build a Simple Stack Hover Effect With CSS

    Quick Tip: How to Build a Simple Stack Hover Effect With CSS

    Tutorial Beginner

    A commonly seen design pattern is to have a card container with other cards underneath it, resulting in a multi-layer stacking effect. In this short...

  7. How to Prevent Automatic Favicon Requests (Web Performance Quick Tip)

    How to Prevent Automatic Favicon Requests (Web Performance Quick Tip)

    Tutorial Beginner

    Believe it or not, preventing automatic favicon requests is a quick way to improve the performance of your site. It takes just a single line of code added to...

  8. CSS Tips for Better Color and Contrast Accessibility

    CSS Tips for Better Color and Contrast Accessibility

    Tutorial Beginner

    For people with visual impairments, colors can’t convey the same amount of information as for others and lose many aspects of their meaning. In this article,...

  9. How to Use Pa11y: Web Accessibility Testing Via the Command Line

    How to Use Pa11y: Web Accessibility Testing Via the Command Line

    Tutorial Beginner

    Pa11y provide a set of free and open-sourced tools to help developers and designers build accessible web pages. The main Pa11y tool is a command line...

  10. How to Lint CSS Using Stylelint

    How to Lint CSS Using Stylelint

    Tutorial Beginner

    Linters have been around for a good while; but if you’re new to CSS this might be the first you’ve heard about them. A CSS linter will keep your stylesheets...

  11. How to Build a Responsive Handmade SVG Form

    How to Build a Responsive Handmade SVG Form

    Tutorial Intermediate

    In this tutorial, we’ll continue the journey into the “forms” world and learn to create a responsive handmade SVG form from scratch.

  12. How to Build a Simple Slideshow With the CSS Checkbox Hack

    How to Build a Simple Slideshow With the CSS Checkbox Hack

    Tutorial Intermediate

    In this new tutorial, we’ll learn how to create a fully functional, responsive image slideshow with thumbnails, without JavaScript.