Tic Tac Toe with CSS and SVG
|
Learn how to make a fully functioning Tic Tac Toe game using Pug and Stylus preprocessors. Generate form markup, lay out elements with display grid, create SVG lines and animations, apply visual effects, and more. Master the art of creating random CSS animations with scoped CSS variables and Pug mixins.
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:
Course Content
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
User Reviews
Be the first to review “Tic Tac Toe with CSS and SVG”
You must be logged in to post a review.
There are no reviews yet.