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. CSS Basics: Understanding Collapsing Margins

      CSS Basics: Understanding Collapsing Margins

      Tutorial Beginner

      There is a situation where the margin between one element and that of a neighbor will merge into a unified space. This is a “collapsing margin”, and in this...

    2. Using Bootstrap to Create Material Design Web Apps

      Using Bootstrap to Create Material Design Web Apps

      Tutorial Beginner

      MDBootstrap is a popular UI kit for creating beautiful web apps that conform to the Material Design guidelines. In this tutorial, I help you get started with...

    3. Understanding CSS Inheritance (Inherit, Initial, Unset, and Revert)

      Understanding CSS Inheritance (Inherit, Initial, Unset, and Revert)

      Tutorial Beginner

      In this tutorial I’ll explain how the confusing world of CSS inheritance works. We’ll look at the inherit, initial, unset, and revert CSS keywords.

    4. How to Add Maps to Your WordPress CF7 Contact Form

      How to Add Maps to Your WordPress CF7 Contact Form

      Tutorial Beginner

      Knowing the locations of visitors filling out your WordPress forms can help you identify who is coming to your site and showing interest. In this post, I'll...

    5. How to Use New CSS “:is()” for Easy Element Targeting

      How to Use New CSS “:is()” for Easy Element Targeting

      Tutorial Beginner

      The new CSS :is() pseudo-class is shaping up to become a great way to target elements, saving on lines and lines of code, and keeping CSS as readable as...

    6. Demystifying CSS Pseudo-Classes (:nth-child vs. :nth-of-type)

      Demystifying CSS Pseudo-Classes (:nth-child vs. :nth-of-type)

      Tutorial Beginner

      Selectors used to target elements depending on their “state” are called pseudo-classes. nth-child and nth-of-type are pseudo-classes; let’s learn more about...

    7. How to Build an Accordion Component With the CSS Checkbox Hack

      How to Build an Accordion Component With the CSS Checkbox Hack

      Tutorial Intermediate

      In this short tutorial, we’ll learn how to build a CSS-only flexible accordion component by taking advantage of what’s known as the “CSS checkbox hack...

    8. What is CSS Specificity and How Does it Work?

      What is CSS Specificity and How Does it Work?

      Tutorial Beginner

      When working with CSS conflicting styles can be a thorn in your side, especially when you don’t know where the conflict is originating from. This tutorial...

    9. 7 CSS Units You Might Not Know About

      7 CSS Units You Might Not Know About

      Tutorial Beginner

      Today, I'm going to introduce you to some CSS tools you might not have known about before. These tools are each units of measurement, like pixels or ems, but...

    10. How to Create a Responsive Form Using TailwindCSS

      How to Create a Responsive Form Using TailwindCSS

      Tutorial Beginner

      The default approach to building websites when working with HTML and CSS is to write the structure in the HTML file and implement the styles in a CSS file....

    11. Quick Tip: How to Build a MouseOver Navigation Slide Effect

      Quick Tip: How to Build a MouseOver Navigation Slide Effect

      Tutorial Beginner

      In today’s exercise, we’ll take inspiration from Slider Revolution’s mini toolbar and build a menu that smoothly animates on hover.

    12. How to Create a Form With the Quform WordPress Plugin

      How to Create a Form With the Quform WordPress Plugin

      Tutorial Beginner

      Quform is an incredibly powerful form builder plugin for your WordPress website that features 19 form elements and an unlimited number of forms for each...