As a group, we decided to branch outside the given subjects for the CS Educational Technology Category. We found inspiration in CSS learning games like Grid Garden, and wanted to combine digital design with traditional art theory.
Color Cascade has three interactive lessons, each with a introductory summary and instruction set located in the top left of the page. Below is our live CSS editor, which reflects on the generative color wheel created in javascript. Users type CSS code to format the color wheel on the right side to meet the requirement of the level. Pressing the 'check' button in the top right either highlights the user's mistakes or releases a burst of confetti to celebrate success. Clicking on two colors shows a combination of the two in the center circle to represent tertiary colors. On the navigation bar sits a help page full of educational resources and a dropdown to choose between our levels. If at any point the user makes a mistake, the reset button allows for an easy do-over.
We built it with CSS, javascript, and HTML over the course of 24 hours.
Creating the live CSS editor took significantly more time than expected, as well as combining the RGB colors in the center circle.
We are very proud of the interactive CSS editor that shows immediately upon loading, and the clean functionality of our website.
Rachel: learned front-end development skills, as someone who does not specialize in it Evan: sometimes the more complex aspects are easier to implement than the things that seem simple Jon: improved CSS and javescript skills
We would like to add more lessons that expand further into color theory and CSS principles, such as saturation, value, and intensity. We would also like to explore the other six elements of art in interactive design lessons.