HTML, CSS, JS, Atom, Adobe Illustrator, XD
Pickle Maker is a hand coded website where the user can learn how to make pickles.
Background
Pickle Maker is a website where the user clicks the ingredients, which activates the CSS animation, causing them to fly into the jar. The jar is full of vinegar that continuously floats around like a rolling wave. After they click an ingredient, it gets added to the recipe list on the side.
Challenge
I wanted to take on a challenging project that would be able to utilize my illustration skills as well as my ability to teach myself new skills. Before I began this project, I had no idea how I was going to make it happen. I knew I needed to use Java Script in order to trigger the CSS animation, but that was something I needed to learn on the way.
Solution
After extensive research and hours on W3 Schools and YouTube, I chipped away at the project little by little. I was able to make the website exactly how I pictured it. Although some animations were out of my project scope, I compromised and found a way around it. This project has allowed me to solidify my ability to teach myself a skill I felt was unachievable.
Background
Pickle Maker is a website where the user learns how to make pickles. It works by clicking the ingredients, which causes them to fly into the jar using CSS animation. The jar is full of vinegar that continuously floats around like a rolling wave. After they click an ingredient, it gets added to the recipe list on the side.
Challenge
I wanted to take on a challenging project that would be able to utilize my illustration skills as well as my ability to teach myself new skills. Before I began this project, I had no idea how I was going to make it happen. I knew I needed to use Java Script in order to trigger the CSS animation, but that was something I needed to learn on the way.
Solution
After extensive research and hours on W3 Schools and YouTube, I chipped away at the project little by little. I was able to make the website exactly how I pictured it. Although some animations were out of my project scope, I compromised and found a way around it. This project has allowed me to solidify my ability to teach myself a skill I felt was unachievable.
