Workshop: Generative Art with FizzBuzz in CSS

Workshop Coding Time

Make sure to create an account to SAVE your CodePen! If you don’t create an account, your changes will be lost – if that’s okay with you, then no big deal!

Things you can do in your CodePen – or you can freestyle:

  • Add a different background color to every 7th item
  • Change the width of every 12th item
  • Rotate every 5th item
  • Add a gradient to every 21st item
  • Change the pattern to follow the Fibonacci sequence

Make sure to create an account to SAVE your CodePen! Click Fork on the bottom right of the screen:

If you are done early, read more about me or order a monster sticker! Use the code NODOI for a free one.



FizzBuzz is a programming problem used to teach for loops and if/else statements to beginners. CSS, the programming language for styling web pages, doesn’t have for loops or if/else statements…can we program FizzBuzz in CSS? Absolutely! In this workshop, students will learn about declarative programming languages by creating beautiful, generative art with FizzBuzz in CSS.

Workshop Links