Use Pug For Loops to Generate Form Markup

Use Type Reset to Reset Form State

Use Display Grid To Lay Out Elements

Use Checkboxes to Optionally Display Elements

Use Inline CSS Variables to Position Elements

Use the Adjacent Sibling Combinator to Optionally Display Elements

Use Selector Combinations to Optionally Display Elements

Use SVG to Create Lines

Use Chained CSS Transforms to Position Elements

Use SVG to Create a Circle

Use SVG to Create an Animatable Cross

Use CSS Animation to Draw SVG

Use CSS Variable Scope to Color SVG Elements

Use Scoped CSS Variables to Stagger CSS Animations

Use a Backdrop Filter to Shift Focus to the Foreground

Use Animation Fill Mode to Retain Keyframe Styling

Use Pug Mixins for Reusable Blocks of Markup

Use Chained CSS Filter to Apply Visual Effects

Use Media Queries to Detect a User Preference for Motion

Use the Hover Pseudo Selector to Style Child Elements

Use the Combination of Scoped CSS Variables and Pug to Generate Random CSS Animations

Tic Tac Toe with CSS and SVG

If you're repeating blocks of markup or code in Pug, you can use a mixin to reduce the maintenance overhead. Here, we look at some of the ways you can use Pug mixins.

html

https://app.egghead.io/api/v1/lessons/html-5-use-pug-mixins-for-reusable-blocks-of-markup/transcript

Tic Tac Toe with CSS and SVG

Use Pug Mixins for Reusable Blocks of Markup

Social Share Links