Description
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.
Slides
Exercise
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.
Tools
- CSS Reference
- CSS animation documentation
- CSS clip path generator
- HTML color names
- Gradient generator
- Color palettes
- List of Prime Numbers