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:
- Newbie
- Junior
- Intermediate
- Advanced
- 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.
Top comments (10)
I was thinking in start to solve challenges in Frontend Mentor too, now I certainly going to it in my free time 😁. In regard of learning a frontend framework I will suggest you React or Vue, Vue is easier to learn and more developer friendly, but React has a larger Community, larger ecosystem of related technologies and far more jobs available. However check some code of each one and see how they both handle things in order to make the best choise 😉
Thank you so much for the suggestion! 🙏
Thank you for posting this as I've looked into Frontend Mentor and their content (especially challenges) to help with improving my front end development skills. I have also found accessibility to be very important to me personally so kudos to that!!😎
As for a framework, I have experience in React only; mind you, I have read that Vue is very popular and easy to learn and its popularity has risen a lot over the past couple years; React was invented by Facebook so it has great documentation and has been around for a while and is still used a lot. I have taken a break from learning React though because my vanilla Javascript skills aren't that good; definitely have a good grasp of basic vanilla JS as well as ES6/7features, arrow functions, promises, and asynchronous operation. If you do, then you should be able to pick up React quickly. React is tricky but I feel if you know those particular areas of JS well, then React will be easy for you and lots of jobs want people who can use React. That is just from my personal experience; I am definitely no authority on these technologies, but I hope that helps some with deciding a library or framework to learn. Thanks again for the insightful post, good luck on everything!! 😁
Thank you so much for the suggestion! My first choice is actually React, since many employers do look for this particular skill. The developer community over at Frontend Mentor's Slack has told me Vue is a good starting point for beginners like me, so I might try that first before eventually trying out React! 🙂
Thanks for introducing frontend mentor. I'm a newbie in the frontend development and I feel this would be helpful in my journey.
You're welcome! I wish you well in your development journey, happy coding! 🎉
This describes me, too. Thanks for sharing.
Learn svelte. You can learn it in half a day. svelte.dev/tutorial/component-events
Create a list of projects like you have, make some coding friends, and apply while training. You will get hire. Talk about the projects, and share your experience. Coding friends get you hire.
Thanks for a very clear explanation of what Frontend Mentor is all about! I will look into it.
Just go with reactjs .....vue is easy after react you will learn it in 2-3 days max