Tic Tac Toe with CSS and SVG

Overview

Learn how to make a fully functioning Tic Tac Toe game that doesn't need any client-side JavaScript!
For this course, we'll be using Pug and Stylus which are preprocessors for HTML and CSS respectively.
Learn how to:
Generate markup with loops and template literals
Leverage native HTML behavior
Create SVG
Use CSS variables and scope
Implement game logic with HTML forms
Animate SVG with CSS
Use CSS Animation to provide motion
Use Pug Mixins
Disable motion when users don't want it
Apply visual effects using CSS filter and backdrop-filter
Generate random animations using Pug and CSS variables

Syllabus

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