Intermediate HTML & CSS

Jen Kramer

Jen Kramer

AnnieCannons
5 hours, 37 minutes CC
Intermediate HTML & CSS

Course Description

Discover new HTML elements and CSS Selectors that you might not know! Learn the hard parts of CSS, including inheritance, specificity, and the cascade. Plus, get hands-on with modern CSS selectors like :is(), :where(), and :has()! With this knowledge, you'll be able to create web pages with fewer classes and more concise and meaningful HTML.

This course and others like it are available as part of our Frontend Masters video subscription.

Preview
Close

Course Details

Published: September 6, 2022

Learning Paths

Topics

Learn Straight from the Experts Who Shape the Modern Web

Your Path to Senior Developer and Beyond
  • 200+ In-depth courses
  • 18 Learning Paths
  • Industry Leading Experts
  • Live Interactive Workshops
Get Unlimited Access Now

Table of Contents

Introduction

Section Duration: 8 minutes
  • Introduction
    Jen Kramer begins the course by sharing a few misconceptions about HTML and CSS and outlining the benefits of writing clean, semantic code. The course will utilize CodePen for most of the exercises. Links to all examples and resources can be found on the course website.

HTML Overview

Section Duration: 22 minutes

CSS Overview

Section Duration: 45 minutes

Styling Elements

Section Duration: 1 hour, 18 minutes

Semantic HTML

Section Duration: 37 minutes

Pseudo-Classes

Section Duration: 19 minutes

Inheritance

Section Duration: 39 minutes
  • What Inherits in CSS
    Jen outlines the major components of CSS, which include inheritance, specificity, and the cascade. Inheritance allows styling applied to a parent element to be passed down to descendants unless specifically overridden.
  • CSS Inheritance Demo
    Jen demonstrates CSS inheritance and how some properties are inherited while others are not. The :root selector, the difference between display:none; and visibility:hidden:, and the :any-link pseudo-class are also discussed in this segment.
  • Inheritance property & Values Demo
    Jen demonstrates that properties with no inheritance can be forced to inherit using the "inherit" value. For example, setting border: inherit; will cause the element to inherit the border value from its parent. Canceling inheritance with the revert, initial, and unset keywords are also demonstrated in this segment.

Specificity

Section Duration: 31 minutes

Cascade

Section Duration: 26 minutes

Layers

Section Duration: 24 minutes
  • Layer & The Cascade
    Jen explains the @layer CSS rule is used to declare a cascade layer and can also define the order of precedence when multiple cascade layers are present. Layers represent a way to group a set of styles and treat them with a specific level of importance.
  • Working with Layers
    Jen demonstrates how to import an external CSS file as a layer into another style sheet. When working with CSS layers, styling conflicts can occur. A few techniques to override specificity issues are covered in this segment.
  • Managing Multiple Layers
    Jen demonstrates how to manage multiple layers within a CSS file. Regardless of where the layers are declared, layer priority can be established using the @layer rule and ordering the layer names from least important to most important.

Wrapping Up

Section Duration: 3 minutes
I just completed "Intermediate HTML & CSS" by Jen Kramer on Frontend Masters! Great course to go back to your programming roots for a while, for a review and things you may have missed. Thanks Jen!
idmtrs

idmtrs

idmtrs

I just completed "Intermediate HTML & CSS" by Jen Kramer on Frontend Masters! Full of nuggets. Now, I understand why CSS works the way it does and putting CSS style last does not mean it gets picked. Specificity, inheritance and cascade determines it.
Connie Leung ๐Ÿ‡ญ๐Ÿ‡ฐ๐Ÿ‡จ๐Ÿ‡ฆ๐Ÿ‡จ๐Ÿ‡ด|GDE for Angular

Connie Leung ๐Ÿ‡ญ๐Ÿ‡ฐ๐Ÿ‡จ๐Ÿ‡ฆ๐Ÿ‡จ๐Ÿ‡ด|GDE for Angular

connieleung404

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now