Tic Tac Toe with CSS and SVG

Instructor

Jhey Tompkins

39m

5.0

people completed

Bookmark

Download

RSS

Start Watching

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

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

illustration for Tic Tac Toe with CSS and SVG

Start Watching

Free Community Resource

A Community Resource means that it’s free to access for all. The instructor of this lesson requested it to be open to the public.

Course Content

39m • 21 lessons

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

You might also like these resources:

Introduction to Cloudflare Workers

Kristian Freeman・36m・Course

Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

Create an eCommerce Store with Next.js and Stripe Checkout

Colby Fayock・1h 4m・Course

This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

Practical Git for Everyday Professional Use

Trevor Miller・1h・Course

git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.