Course

Tic Tac Toe with CSS and SVG

1
Use Pug For Loops to Generate Form Markup
1m 59s
2
Use Type Reset to Reset Form State
53s
3
Use Display Grid To Lay Out Elements
1m 20s
4
Use Checkboxes to Optionally Display Elements
3m 33s
5
Use Inline CSS Variables to Position Elements
2m 46s
6
Use the Adjacent Sibling Combinator to Optionally Display Elements
1m 29s
7
Use Selector Combinations to Optionally Display Elements
2m 26s
8
Use SVG to Create Lines
1m 56s
9
Use Chained CSS Transforms to Position Elements
2m 26s
10
Use SVG to Create a Circle
1m 18s
11
Use SVG to Create an Animatable Cross
1m 6s
12
Use CSS Animation to Draw SVG
2m 10s
13
Use CSS Variable Scope to Color SVG Elements
1m 38s
14
Use Scoped CSS Variables to Stagger CSS Animations
1m 36s
15
Use a Backdrop Filter to Shift Focus to the Foreground
1m 5s
16
Use Animation Fill Mode to Retain Keyframe Styling
2m 8s
17
Use Pug Mixins for Reusable Blocks of Markup
3m 12s
18
Use Chained CSS Filter to Apply Visual Effects
52s
19
Use Media Queries to Detect a User Preference for Motion
48s
20
Use the Hover Pseudo Selector to Style Child Elements
56s
21
Use the Combination of Scoped CSS Variables and Pug to Generate Random CSS Animations
4m 19s

Use Pug Mixins for Reusable Blocks of Markup

Name: Use Pug Mixins for Reusable Blocks of Markup
Uploaded: 2021-02-03T08:47:37-06:00
Duration: 3 min 12 s
Description: 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 u...

InstructorJhey Tompkins

Share this video with your friends

Send Tweet

Published 4 years ago

Updated 4 years ago

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.

View code for this lesson

Tic Tac Toe with CSS and SVG

Use Pug Mixins for Reusable Blocks of Markup

Social Share Links