Learn HTML/CSS

Learn the fundamentals of web design with our HTML and CSS tutorials. Build landing pages, apps, websites, and more, with animations and other advanced effects.

Getting started with HTML/CSS

  • Design and Code Your First Website in 9 Easy-to-Understand Steps

    Design and Code Your First Website in 9 Easy-to-Understand Steps

    Nathan Umoh
  • HTML & CSS for Beginners (MEGA Free Course!)

    HTML & CSS for Beginners (MEGA Free Course!)

    Adi Purdila
  • All HTML/CSS tutorials:

    1. How to build a filtering component in pure CSS (2 methods)

      How to build a filtering component in pure CSS (2 methods)

      Tutorial Intermediate

      In today’s tutorial, we’ll learn how to build a CSS-only filtering component, something which you’d be forgiven for thinking needs JavaScript.

    2.  How to create a scratch card effect with vanilla JavaScript

      How to create a scratch card effect with vanilla JavaScript

      Tutorial Intermediate

      Learn how to create a scratch card effect using vanilla JavaScript. The tutorial will guide you through creating a realistic scratch-off effect with HTML...

    3. Create a JavaScript tab component with an adaptive stepper UI

      Create a JavaScript tab component with an adaptive stepper UI

      Tutorial Beginner

      In this tutorial, we'll build a simple responsive JavaScript tab component where the clickable tabs will appear as a stepper component.

    4. How to animate CSS Grid layouts (image grid project)

      How to animate CSS Grid layouts (image grid project)

      Tutorial Intermediate

      In this tutorial, we'll learn how to animate the CSS Grid properties by building a responsive image grid with hover effects.

    5. How to create  a memory game with vanilla JavaScript

      How to create a memory game with vanilla JavaScript

      Tutorial Intermediate

      In this tutorial, we will build a memory game with JavaScript. The memory game will require a player to match pairs of cards. Once all the pairs are matched...

    6. What is a modal? And how to build a CSS-only Modal

      What is a modal? And how to build a CSS-only Modal

      Tutorial Beginner

      In this tutorial, we'll use only CSS to build a pop-up or modal element that can be closed with a close button or by clicking outside the modal.

    7. Build an asymmetric JavaScript slideshow with CSS Grid & GSAP

      Build an asymmetric JavaScript slideshow with CSS Grid & GSAP

      Tutorial Beginner

      In this tutorial, you'll learn how to build an asymmetric JavaScript slideshow with the power of CSS Grid and GSAP, the industry-standard JavaScript...

    8. Create horizontal scroll animations with GSAP & ScrollTrigger

      Create horizontal scroll animations with GSAP & ScrollTrigger

      Tutorial Intermediate

      In this tutorial, we'll continue exploring GSAP and its friends. Specifically, we'll cover various methods for creating sliding pinned horizontal sections...

    9. Learn these viewport-relative CSS units (100vh, 100dvh, 100lvh, 100svh)

      Learn these viewport-relative CSS units (100vh, 100dvh, 100lvh, 100svh)

      Tutorial Beginner

      In this tutorial, we’ll cover the challenges when working with the classic 100vh unit for making full-screen sections and discuss some great alternative CSS...

    10. How to build a website search bar with JavaScript

      How to build a website search bar with JavaScript

      Tutorial Beginner

      In this tutorial we’ll use JavaScript to implement a basic search bar and search function to filter a list of articles.

    11. CSS charts: How to create an organizational chart

      CSS charts: How to create an organizational chart

      Tutorial Intermediate

      In previous tutorials we’ve learned how to create different types of charts including bar charts, thermometer charts, and donut charts. Today we’ll continue...

    12. How to create a canvas drawing tool with vanilla JavaScript

      How to create a canvas drawing tool with vanilla JavaScript

      Tutorial Intermediate

      Let’s create a canvas drawing app that allows users to draw freehand and choose shapes, such as rectangles, circles, etc. It will also have an eraser feature...