I kicked off my 50 projects in 50 days challenge, and here’s how the first three projects went.
Day 1 – Expanding Cards
A nice start. The goal was to create image cards that expand when you click them. It was mostly about toggling an active class with JavaScript and using CSS flex and transition for the animation. This project showed me how powerful a simple layout + class toggle can be.
Day 2 – Progress Steps
This one was trickier. The idea is a row of circles connected by progress bars, and each step lights up as you move forward. My first approach placed a bar element between every step (step number → bar → step number → bar). The problem that could arise with this code was obvious. If I want to add more steps, I need to also add a bar between them. The JS was also very messy. The fix was making the line a single bar underneath all the circles, then updating its width with JS instead of trying to draw a new line between every two circles.
JavaScript here was mostly adding/removing classes on the circles, and adjusting the bar’s width based on the step count.
Day 3 – Rotating Navigation
This one looked fun. The whole page rotates to reveal a side navigation when you click the menu button. The key was using a container div with all the content inside it, and then applying a CSS transform: rotate(...) on that container.
This project just needed the HTML to be structured properly. After that, the big deal about the project was just using the position and transform properties to style it correctly and then adding the JS that adds and removes the show-nav class when the button is clicked.
It was so satisfying to see the whole page spin when I clicked the button.
So far, I’m learning:
- If you see something being duplicated unnecessarily and you think there is a better way to do it, there is a better way to do it.
- Most of the “magic” happens with CSS; JS is often just the switch.
On to Day 4! 🚀
Top comments (0)