Intro

After I finished building the Base Apparel coming soon page from Frontend Mentor (and wrote about it here), I got my mojo back. That small win gave me just enough confidence to try again, to keep learning and keep building.

Advanced JavaScript still felt like a giant wall I couldn’t climb. But instead of going back to endless tutorials, I decided to take on a few more of Frontend Mentor’s beginner projects. I didn’t build every single day. Some projects took longer than I expected. But I kept showing up.

This post is about what happened when I did.

---

Why I Chose Frontend Mentor Projects

There’s something overwhelming about trying to build your own projects from scratch when you’re still figuring out the basics. I had ideas, but turning them into actual code felt like more than I could handle. That’s where Frontend Mentor came in.

The projects are already designed, no need to come up with layouts or color schemes. Each challenge has a clear goal and starter files, so all I had to do was focus on the code. That took a lot of pressure off.

I also liked that the challenges are labeled by difficulty. I stuck with the “newbie” ones, which felt more manageable but still pushed me outside my comfort zone, especially when JavaScript was involved.

---

What I Built (and What Broke My Brain)

The first project I took on was the Article Preview Component. The JavaScript part; toggling the share icon and showing or hiding elements, wasn’t too difficult. What actually gave me trouble was the positioning of the social media icon container on larger screens. I had to rely on one media query to make everything work responsively, and getting it to sit exactly where it should felt way harder than it looked.

Then I moved on to the FAQ Accordion Card. The challenge here was dealing with multiple interactive elements, specifically trying to loop through them with forEach and add event listeners. I ran into issues pretty quickly. Instead of fighting with a method I didn’t fully understand, I decided to try another approach that made more sense to me at the time. It wasn’t the “cleverest” solution, but it worked, and honestly, that felt like a win.

Both of these projects pushed me in different ways. I didn’t always take the most elegant path, but I learned something every time I hit a wall and had to find a way around it.

---

The Frustration Phase

There were moments when I felt extremely frustrated, especially when things weren’t clicking the way I expected. I’d try one approach, fail, then try another, fail again. It wasn’t that the challenges were too hard, they were just kinda tricky.

I often found myself thinking, “Why am I struggling with something AI can easily do?” It was frustrating, especially because the solutions seemed so obvious once I figured them out. But I had to remind myself that it was okay to struggle. It’s part of the process.

Truly taking breaks helped clear my mind. When something wasn’t working after a while, I’d step away, let it sit, and come back the next day with a clearer head. It made a huge difference in how I approached problems.

---

The Wins

What kept me going was the simple fact that I’d already completed a few projects, and I was hell-bent on finishing the rest before the weekend, no matter how busy I was. There was something motivating about crossing the finish line..

In the Article Preview Component, the win came when I finally got the button to be interactive and the CSS properly aligned. It might sound small, but after the frustration of positioning everything correctly, seeing it all come together was a huge relief.

For the FAQ Accordion, my win came when I easily made the buttons and question elements interactive. Adding the smooth animation to the answers felt like the cherry on top. It all worked together like it was supposed to, and that felt like a big achievement.

Both of these projects turned out really well. Each win, no matter how small, proved that I could push through frustration and make things work. And that’s where the real growth happened.

---

Conclusion

Building the Article Preview Component and FAQ Accordion wasn’t just about finishing projects, it was about learning how to push through frustration and celebrate small wins along the way.

I realized I still need to brush up on my CSS, especially when it comes to positioning elements on larger screens. But even with that, I’m proud of how these projects turned out.

The key takeaway? Keep showing up. Progress comes with patience and persistence, even on the tough days.