Desserts! Dessserts! Desserts!



team.

  • kaitlyn huynh
technology.

  • html
  • css
  • javascript
  • AOS library
  • Animate.css
description.

I wanted to create a website that utilized different libraries to educate and entertain users when learning about desserts from different cultures. I specifically chose Asian desserts since I have such a personal connection with them and wanted to spread my love and knowledge of it to others. As users scroll down the page, desserts fade in and out of the page in a descending fashion. Each card that pops up is clickable and will bring the user to a page of information about the dessert.

implementation.

I created mockups in Figma before proceeding to code the project. I wanted a fun and interactive way for people to learn about desserts from Asian cultures, so I decided to use animation-based libriaries for the interactivity element and implemented GIFs to add more dynamic animation instead of just static images. I used jQuery for the animation throughout the page and attached different classes to different elements to have the animation take place. I used JavaScript for adding event listeners to different interactions in the page and used HTML and CSS for marking up and decorating the page.

achievements.

  • learned the basics of animation in jQuery
  • learned to use JavaScript for mainpulating DOM
  • practiced intergrating different libraries and how syntax may change between them
  • created a project from design to implementation
demo.