Hannah Coley’s
Code Portfolio
My Personal Coding Projects
I created these projects for my personal learning of HTML, CSS, and Javascipt. The are fun little web applications that demonstrate my knowledge and grow abilities. If you click on the snapshots of the applications displayed below, it will take you to their corresponding Code Pens when you can view the code written and see the working versions! Enjoy!
Pixel Art Maker
I created this project during my scholarship course awarded by Google. I had very little experience with design or programming at this point, but I think it demonstrates my ability to learn very quickly. This web application allows you to:
- Create fun pixel art that is nostalgic of the past
- Pick an appropriate canvas size for your art project
- Pick different colors to paint with
- Double click a cell to have the erase functionality for mistakes
Matching Game
I created this game to better my programming skills. It was fun and challenging at the same time. It helped me work on my algorithm logic and I feel that you can see design skills have been improved in comparison to the Pixel Art Maker. This web application includes the following features:
- It’s a fun game that makes most people nostalgic
- It tracks the number of moves taken to win
- It keeps track of the time taken to win the game
- It has really cool animations created with CSS
- Has the logic to know which cards are matches
- Has the logic to know which cards are unmatched
- Ability to start a new game
- Gives you a star score based on the number of moves taken to win the game
Princess Frogger
I created this game as a part of the scholarship curriculum. It is a tribute to the classic game called Frogger, but instead has a very cute princess that only wants to get across the road full of bugs to go for a swim. HAHA! This web application includes the following features:
- It’s a fun game that most people are nostalgic about
- It utilizes sprites
- Game logic for sprite behavior
- Event listeners for keystrokes that control the sprite
- Game logic to restart the position if collision occurs
- Animates the motions of the sprites
- Restarts the game when the sprite successfully reaches the other side
Neighborhood Map
I created this map-based application to better my programming skills & to demonstrate my ability to work with various API’s and their documentation. This applications utilizes Google Map’s and Four Square’s API’s. I was able to add my own stylized buttons, markers, etc. This project demonstrates my ability to work with more complexity. This web application includes the following features:
- Customized map utilizing Google’s API
- Customized markers and buttons
- Custom components
- Restaurant information from Four Square’s API