illustration for Tic Tac Toe with CSS and SVG

Tic Tac Toe with CSS and SVG


Jhey Tompkins
39m closed-captioning
21 lessons
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
people completed
Published 3 years ago
Updated 3 years ago

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.

Course Content

39m • 21 lessons

    You might also like these resources:

    illustration for 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.

    illustration for 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

    illustration for 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.