If you're a budding programmer like yours truly, part of your learning journey consists of following tutorials on how to code projects. As great as this is for learning how to do certain things, you may be worried that you're simply just following along, not actually learning anything. Or you might as well be picking something up, but not know how much it'll stick.
And for a while, I've felt that way too. What if it comes time for me to show my stuff, and I draw a blank? You could start just coding your own project from scratch, but what if you aren't sure where to start, or need a little inspiration?
That's where Frontend Mentor comes in! (Shoutout to my sister who brought it to my attention!)
What is Frontend Mentor?
In case you don't know what Frontend Mentor is, it's a platform on which you can hone your coding skills working on various projects. There are no tutorials here. How it works is that you choose what projects(called challenges) to work on, with various options of skillset (Newbie to Guru), price(Free Free+ and Premium), and language(HTML CSS JS). Unlike a lot of platforms, though there are certain challenges and features only accessible to Pro users, there are plenty of free ones to get started with.
Once you've chosen a challenge, you'll be provided with a starter pack, which includes an HTML document with pre-written code, and an image of the final project(if you're Pro, you also get Figma designs). The point is to reproduce the challenge and make it as close to the original as possible.
There's no step-by-step on how this is done; you're on your own to figure it out. What's great about this approach is that it gets you thinking of the many ways you could get the challenge done. Once completed, you could use your finished project as a portfolio piece and upload them on places like GitHub pages or Netlify.
The best part? The community of fellow coders who are willing to help out and show where you can improve on your challenge once you publish it for others to review.
And the more you submit challenges and comment on others, you gain what's called "Mentor Points" which could give you access to the job board.
P.S. You need a GitHub account to do the challenges and upload them—if you're new to coding, chances are you know you're going to have to familiarize yourself with GitHub anyway, so this would be a good chance to do so!
FYI I ripped a little bit of the following off the README I attached to the project repo on GitHub. To see everything, here's my repo here.
The Challenge
The challenge I worked on was the QR code component. It was suggested by FM itself as the best place to start, so I went with that. I'm going to describe my process for completing the challenge, so you can use the link to get an idea of what it looks like.
My Process
Following best practice rules, I started with HTML for the structure. Going by how the image looked, I figured I needed an H1 and p and wrote what was on the design.
In terms of styling, I decided to go for a top-down approach, starting with the background. At first, I used the universal selector. This was a bit of a brain fart since I knew deep down it wasn't the right one to use, but couldn't remember. Thankfully my sister reminded me the body selector was what was needed(thanks sis!).
Next was the white box, which I felt was best to structure as a div. The QR code was already in the starter pack, so I inserted the image into the HTML file.
I tried to follow the colors, fonts, and sizes provided style guide as closely as possible.
Throughout the entire process, I didn't use any special tools or frameworks. This whole thing was completed with plain HTML and CSS, with Visual Studio Code as my editor. I also used GitHub for Desktop.
What I Learned
My biggest trouble was trying to center my element(the white box). Though I was able to do so, I realized upon looking at the image it had to be vertically and horizontally centered. I learned there were many ways to go about this (and centering in general). Of all the ones I've found, the position and transform: translate method got me the closest to the look of the original design. I also added some border-box sizing for a neater look.
Since there were rounded corners, I knew there had to be a border-radius.
But I ran into those situations where solving one issue seemingly causes another. The problem was that once the box was centered, the attribution that was already set up and positioned at the bottom center in the project HTML file went in the opposite direction, up top. Tried to fix it, but the best I got was having it positioned to absolute. It didn't look too bad if you ask me. ; )
At first, I gave the box an id, but when looking at the centering examples, most seemed to have a class attached to it, so I went that route instead.
There was a lot of commenting out and experimenting with different sets of code, so I wouldn't have to lose anything and can reuse it later. So I supposed I've learned the value of comments!
Since the recommended font was from Google, this challenge helped me get the hang of importing Google Fonts onto the stylesheet.
The starter pack also provided a favicon. While I noticed it worked fine on Firefox, the same couldn't be said for Chrome—it didn't show up at all. After looking for solutions as to why this was the case, I thought it was a cache issue. Then I found out that Chrome doesn't show locally stored images; they have to be uploaded to the server. Apparently that's not the case with Firefox.
These things aside, I believe more than anything, I've learned a little about letting go of perfectionism. Once I start something, I tend to fixate on getting it right. While that does sound like a positive, the downside is that I might end up spending too much time doing so. It helps to keep in mind that done is better than perfect.
My Experience and Takeaways
I had a really great time striking out on my own. I was a little nervous about taking any of these challenges on because as much as I studied, I still didn't think I had what it took to pull this off. I figured I didn't know enough.
But as I looked at the design, it seem I had at least an inkling of what to do. And besides, I had to remind myself that the goal was to make it look as close as possible to the original, so I had to push my perfectionism aside and just do the work. It wasn't like I couldn't get help once I published anyway.
Which did happen. Two very helpful gentlemen gave me precious feedback on my solution. They congratulated me on completing the challenge and showed me that to center I had to use flexbox. While I did try this earlier, I used flexbox on the div, rather than the body itself, as they showed me.
Also, instead of px, it's best to use rem for font sizes and em or rem for paddings, margins, widths, and heights. They also told me to place my attribution as a footer.
I'm thankful for the positive feedback; they didn't make me feel silly because of my mistakes which I was nervous about.
This experience has made me more comfortable with looking up stuff I don't know or am unsure of. This doesn't necessarily mean I don't know what I'm doing—rather, it's resourcefulness!
It has also shown that I need to practice more with Flexbox and how to better present elements.
Lastly, the challenge has helped me familiarize myself with GitHub. I knew at some point I was going to have to learn it since it's an important tool for developers, so this was a great chance to do that since I had to use it anyway.
Overall, this was a really great learning experience. It was fun and really helped me stretch my knowledge of what I've learned so far and apply it to a real-world project. I look forward to the next one and applying my feedback there!
Tell me, what was your experience using Frontend Mentor if you have any? Did it help reinforce your learning or improve your skills? Let me know in the comments! Thanks for reading!