I did Frontend Mentor challenges for three weeks, here's what I learned

Hello! It's been a while since my last post. I've been busy doing Frontend Mentor challenges for the past three weeks in the hopes of improving my frontend developing skills.

If this is your first time hearing about Frontend Mentor, then let me introduce you. Frontend Mentor is a platform where developers can learn and improve their frontend developing skills alongside other developers by implementing solutions to challenges. Anybody can be a mentor, a student, or both. There are five difficulty levels to the challenges that they offer:

1. Newbie
2. Junior
3. Intermediate
4. Advanced
5. Guru

A lot of these challenges are free, but there are premium challenges you can access if you pay a monthly or yearly fee. I did not avail the PRO membership (yet 👀), so everything I've done up to this point are all free challenges.

Now, I've worked as a web developer in the past (only a year and a half, I'm nowhere near senior-level or even mid), and if I weren't querying and retrieving data I was constantly fixing and tweaking the frontend, so I have to say I'm not completely new to this. Despite that, I still did start from the very beginning: the newbie challenges. Here's what I learned:

1. Layout

The newbie challenges composed mostly of HTML and CSS challenges that will test your layout skills. These are fairly small projects, a few card components containing a couple sections or so. It may sound pretty easy, but the first couple challenges that I solved really tested my layout skills with Flexbox and Grid, especially when taking into account the responsive layout.

There was one in particular that really stumped me until I asked for help from the community. The FAQ accordion challenge consisted of stacking three different images one over each other, and they all have to somehow "stick" together or be linked together (i.e. when one moves, all others move alongside it). This was a really interesting challenge, and I'm glad I did it.

2. Mobile-first approach

Yes, that's right. Before I started doing Frontend Mentor challenges, I hadn't really cared about designing for mobile (I know, I should be ashamed) mainly because in my previous job we didn't really have a designer, we just kind of winged it, and the problem with that approach is that winging it just really doesn't work.

So when I was presented with my first Frontend Mentor challenge and I saw the desktop design and the mobile design I thought "Wow, neat. I don't have to think about what it's gonna look like for mobile." Immediately after that I thought, "Wait, I can finally do mobile-first now." So that's what I did.

I have to admit, at first I thought there was some special magic way to the mobile-first approach but it's really just designing for a smaller screen first before moving on to a bigger screen. Still pretty neat though.

3. Sass

Ah, yes. The famous CSS pre-processor Sass. I was planning to learn this even before I decided to join Frontend Mentor, but I wanted to clean up my CSS first because even though I think I'm doing okay with CSS I still didn't feel confident enough with it to say I'm ready to move on. So after completing 4 newbie challenges and helping other developers with their challenges, I thought maybe I'm ready to learn Sass.

And boy am I glad I decided to learn Sass. Everything is much easier. I've got to say though, I don't think I would like Sass as much as I like it right now if I hadn't tried to master or at least be good at CSS first.

4. Accessibility

Unlike the mobile-first approach, accessibility actually was one of the things I had cared a lot about while I was developing for my previous job. But, admittedly, accessibility is one of those things that I can never get right the first or second or third time. It's also quite hard to look for a one true solution to some accessibility problems, sometimes you've got to test it out on your own with various screen reader and browser pairs.

Luckily, there are other like-minded developers in Frontend Mentor that cares about accessibility as much as I do. Actually, if you look through my profile you'll see that a lot of the feedback on my solutions has to do with accessibility, and I'm glad for it. It's nice that I get to learn all these things about accessibility that I otherwise would probably never learn about.

Conclusion

Overall, I think I'd say I'm a better developer now than I was three weeks ago. There's definitely at least a couple things that changed (for the better) with how I approach or implement frontend. I got to polish some of my JavaScript skills too with client-side form validation on the more recent challenges that I solved.

There were other things I learned as well, such as how to give useful feedback to other developers, how to help other developers solve problems that they encounter, and also git submodules which is a pretty neat thing I used to group my Frontend Mentor-related repositories on GitHub. Speaking of which, you can find all my live site solutions so far here.

Moving forward

I plan to continue solving Frontend Mentor challenges, and this time I will be using them to learn one or two JavaScript UI libraries or frameworks (Angular? React? Vue? 🤔). I'm still deciding which framework or library to start with, so if you have any suggestions please comment them down below and convince me why I should learn this framework among other frameworks!

If you liked this post, consider buying me a coffee.