Forem: Augusta Igboama

Day 9 | 50 Projects in 50 Days

Augusta Igboama — Thu, 23 Oct 2025 17:53:01 +0000

Sound Board

This project was to create a simple sound board that plays different sounds when you click the buttons.

This was my first time using the audio tag in HTML. None of the courses or tutorials I’ve watched had any project involving audio, which is understandable since they usually stick to the basics — the things you use most often.

So the first thing I did was read the MDN docs on the audio tag.

As I tried practicing with it, I noticed something strange: the download button under the three-dot menu in the audio controls wasn’t showing for my local audio file, but it appeared when I used an online file for example "https://www.w3schools.com/html/horse.mp3."

I asked ChatGPT why that was happening, and it explained that it’s because of how browsers treat files opened directly from your computer. For security reasons, some features behave differently or don’t work at all — like the download attribute, some JavaScript fetch requests, and even certain media options.

The fix was simple though: run the project from a live server.
Once I did that, everything worked perfectly because the browser now saw my files as coming from a web server, not directly from my system.

Anyway, that was a side story.

For the actual project, I added the audio files to the HTML and wrote the JavaScript that plays a sound when each button is clicked.

This was a really easy project. It was also fun finally getting to use audio in an actual project.

Live Demo: View on GitHub Pages

Source Code: GitHub Repository

On to Day 10 🎉

Day 8 | 50 Projects in 50 Days

Augusta Igboama — Tue, 21 Oct 2025 11:29:41 +0000

Form Wave Animation

I don’t even know what to say about this one. I did it, and it worked, but I didn't fully get it.

When I first watched the video explaining what the project is, I couldn’t picture how we were going to make the label move like that — the wave effect that follows when you focus on an input. So I started with the basic HTML and CSS, without the actual core of the project, which was the movement of the label. Then early on in the solution video, the guy explained what we were going to do: wrap each letter of the label in a <span> and use transform and transition-delay to make it move one after the other. That was when I got it, at least a bit.

My code worked, but it didn’t feel right. His code looked so clean. Mine just… worked. And I guess that’s fine for now, but it made me realize how much difference there is between writing code and writing clean code.

So I don’t have much to explain for this one. It’s probably my least favorite project so far because it made me see how much I still don’t know.

You can see the live demo here

and the code on GitHub here

Day 7 | 50 Projects in 50 Days

Augusta Igboama — Mon, 20 Oct 2025 13:58:32 +0000

Split Landing Page

This project shows two sections side by side — one for PlayStation 5 and one for Xbox Series X. When you hover over a section, it expands while the other one shrinks.

Each side has a background image, but I added a linear gradient overlay to make the text and buttons stand out more. I didn’t even know before that you can make a gradient go from one color to the same color — it just creates a soft, semi-transparent overlay. That felt like a small win.

For the interactivity, I used mouseenter and mouseleave in JavaScript to toggle an active class. When a section becomes active, its flex value increases, making it grow wider while the other side shrinks back.

My layout was quite different from the instructor’s. He used absolute positioning, but I used Flexbox. The funny thing is, both methods gave almost the same result, just with different behaviors underneath.

Absolute positioning made the hover animations more independent and easier to control, while Flexbox made things resize smoothly but also pushed elements around a bit. For this project, absolute positioning was probably the better fit, but I like that I’m learning these differences by trying things my own way. That’s really the point of this whole process for me.

Here is what it looks like normally

And when one side is hovered (the XBox Side)

For a live demo of the project, click here

To view the code on GitHub, click here

Day 6 | 50 Projects in 50 Days

Augusta Igboama — Sun, 19 Oct 2025 21:16:19 +0000

Scroll Animation

This project was about adding simple animations that trigger as you scroll down the page. Each box slides in from the side when it reaches a certain point on the screen.

The idea is to check how far each element is from the top of the viewport and then add a class to trigger a CSS animation when it crosses the “trigger point.”

Here’s the logic in simple terms:

Detect the user’s scroll position.
For each element, compare its position to the viewport height.
If it’s visible enough (past the trigger point), add a class to animate it in; if not, remove the class.

In CSS, I used the transform property to shift the elements off-screen initially (for example, translateX(400px)), and then bring them back to their normal position (translateX(0)) when the active class is added.

Also, a fun little CSS discovery: you can use even as a value in nth-of-type() selectors (for example, :nth-of-type(even)), which makes alternating styles cleaner.

For a live demo of the project, click here

To view the code on GitHub, click here

On to Day 7 ⚡

Day 5 | 50 Projects in 50 Days

Augusta Igboama — Sat, 18 Oct 2025 06:12:17 +0000

Blurry Loading

This one was short and simple but it looked really good at the end. The idea is that when the page loads, a blurred background image gradually becomes clear as the percentage count displayed increases from 0% to 100%.

I used the setInterval() method in JavaScript to increase the percentage count every few milliseconds and update the percentage on screen. At the same time, I reduced the blur using the CSS filter property with the blur() function so it looked like the image was slowly coming into focus.

This project didn’t take long to be honest.

For a live demo of the project, click here

To view the code on GitHub, click here

On to Day 6 🚀

Day 4 | 50 Projects in 50 Days

Augusta Igboama — Fri, 26 Sep 2025 16:54:31 +0000

Hidden Search Widget

I've been busy lately, so I haven't focused on this, but I'm back now. This was my 4th project - A Hidden Search Widget.

This project was actually easy, and I really enjoyed it. It’s the hidden search widget - when you click the search button, the bar expands, and clicking it again collapses it back.

This was my HTML structure

<div class="search">
  <input class="search-bar" type="text" placeholder="Search..." />
  <button id="search-button"><i class="fa-solid fa-search"></i></button>
</div>

I did mine by setting the div to flex so the input and button sit side by side. At first, the input’s width is zero, so it’s invisible. When the button is clicked, the input grows to 180px.

I also used the JavaScript method focus() (searchBar.focus();) so that the cursor jumps right into the input when it expands.

The instructor’s approach was different. He didn’t shrink the input all the way down. He kept it at 50px (same size as the button), then used position: absolute to place the button on top of it. On click, the input expands to 200px and the button shifts to its right using the transform property.

This project reminded me that there’s rarely only one way to do something. Both methods worked, but I liked seeing how the different techniques achieved the same effect.

After the last project felt a bit more complicated, this one was like a breather.

For a live demo of the project, click here
To view the code on GitHub, click here

On to Day 5 🛩️

Days 1–3 | 50 Projects in 50 Days

Augusta Igboama — Sat, 20 Sep 2025 22:31:20 +0000

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! 🚀

My 50 Projects in 50 Days Challenge

Augusta Igboama — Thu, 18 Sep 2025 15:11:39 +0000

Hi! My name is Augusta👋

I’m new here on dev.to. I’m a student of Electronics and Computer Engineering.

Right now, I’m learning web development — the usual HTML, CSS, and JavaScript. I’ve taken some courses, but I noticed that after each tutorial I would just move on to the next one. So I’ve decided to switch things up and focus on building projects. After all, what better way to learn than by actually creating something?

I’ve realized that I understand concepts more deeply when I have a reason to use them in a real project. That’s why I started a Udemy course: 50 Projects in 50 Days.

I’ll be posting about some of these projects here:

what I practiced
what I learned
and the mistakes I made along the way

I may not write about all 50 projects, but I plan to share at least one project a week until I finish the challenge.

You can follow along as I share my journey. I’d love to connect with others who are also learning or doing similar challenges!