Intro

"Every chance at coding is a chance at learning."

I wrote in my blogpost Learn to Code by Building Messy Little Things about the benefit of building mini projects. I learn and enjoy coding so much more when building small projects. I thought it would be important to showcase some of these and share with you what I've learned and continue to learn.

Mini Projects

These mini projects span across my time learning to become a web developer and definitely show my growth. Some remain the same as they were when I first created them, while some are updated. I hope to definitely revisit a few of these and maybe even expand them into full websites/apps/interactive pieces.

A CSS illustration of a smiling sun.

TwentySHINEteen

CodePen
Let this be your year to shine! A practice exercise in CSS art and animation.

I was interested in both CSS art and animation so in early January I spent a little time making this little sun. I needed a little inspiration for the new year, especially as I embarked on this new journey in tech. A few days later I landed my first role with MotherCoders!

A screenshot of a website featuring Sailor Moon characters.

Sailor Moon Color Themes

CodePen
Choose your favorite Sailor Guardian and transform the website's theme! A practice in color theming with CSS variables plus JavaScript.

I had always wanted to create a Sailor Moon mini project but struggled to find the right project. When I wanted to experiment with color theming using CSS variables, I thought this was the perfect opportunity to use a Sailor Moon theme- choosing different color palettes based on each guardian's signature colors! This was not only an opportunity to practice CSS variables but also a chance to practice with JavaScript event listeners. Also I made sure that the buttons were keyboard accessible and that the colors met WCAG 2.0 Level AA recommendations.

A CSS illustration of stacked Disney tsum tsums.

Disney Tsum Tsums

CodePen
What is your stack? A practice in CSS illustration with Pug.js for HTML.

I'm always inspired by the CSS art found on CodePen, so for fun I decided to give it a try creating Disney tsum tsums stacked on top of one another. I mostly used the before and after pseudo-elements. This was not only inspired by the CodePen community but also the Twitter community, which I had just joined at that time.

A screenshot of a website featuring the Holstee Manifesto.

Holstee Manifesto

CodePen
Inspiration can pop out of nowhere. A Skillcrush exercise in HTML & CSS with a parallax effect.

This was one of my first mini projects when learning to code with Skillcrush. Our original project required us to code a page based off of the Holstee Manifesto to look like this design provided by Skillcrush. But as they encouraged us to use our creative freedoms, I decided to take on the challenge of learning how to execute the parallax effect. This willingness to challenge myself and be free to learn new techniques was an attitude I carried and continue to carry throughout my learning journey.

A screenshot of a website with a dark-mode button and text that reads 'Goodnight Moon.'

Dark-Mode Button

LiveCode
"Goodnight Moon." A practice in creating a dark-mode feature using CSS and JavaScript.

When dark-mode came to the MacOS, I became obsessed with updating all my websites and apps to dark-mode. I wanted to learn how to code the feature so I worked on coding the button toggle feature first. When I first created the button, I struggled a lot with JavaScript. I learn better, however, by applying JavaScript fundamentals to real life web development examples. I went to Codebar to work with a coach on refactoring my original code and got it down to only a few lines. My coach taught me that most of what I was trying to do could easily be down with more CSS than JavaScript! This helped me in refining my thinking with approaching JavaScript and coding algorithms - sometimes the solution is a lot simpler than we thought it would be.

A screenshot of a website for a restaurant called Rogue Pickings.

Rogue Pickings

LiveCode
Order to go! A Skillcrush exercise in HTML & CSS from a Photoshop design comp, plus responsive design and JavaScript.

This is a Skillcrush exercise that appeared in two courses - Intro to HTML & CSS and Coding Responsive Websites. The first task was to create this website based on a Photoshop design comp. The second task in the second course was to make the site responsive using flexbox. As I often look to challenge myself, I decided to create a responsive menu that code toggle while in mobile. At first I used jQuery, but since I only wrote a single function, I decided to refactor and remove jQuery and wrote my code in vanilla JavaScript.

Connect

Check out full-sized projects, source code, experiments, writing, and more!