Quick Announcement 📣

Before we get started on today’s topic, I wanted to give y’all a quick update.

I have announced this on my LinkedIn, but just in case you weren’t aware, I am happy to announce that I will be working as a web developer at Western for the summer!

Practicing my front-end development skills is a summer goal of mine, and I believe that this opportunity was a perfect way to do just that.

Talking about improving your front-end development skills, that is the subject of this post — Frontend Mentor!

What is Frontend Mentor❓

From their description on LinkedIn, Frontend Mentor “provides designs so that you can practice your front-end skills using a real-life workflow.”

Now, what does that exactly mean?

I would describe Frontend Mentor as a platform that provides aspiring front-end developers with challenges (defined below), resources, help, and feedback.

A challenge is basically a project that tests your ability to apply your front-end development skills.

There are five levels of difficulty — newbie, junior, intermediate, advanced, and guru, so it is perfect for anyone, no matter where you are on your journey.

Although there is an option to subscribe to Frontend Mentor that gives you access to premium challenges and Sketch/Figma design files, most of their challenges are free.

Example challenges from Frontend Mentor

Let’s take a look at one now!

Pre-reqs for Frontend Mentor

Before we dive into an example challenge, just a quick note about what you need to get started: an interest in HTML, CSS, JavaScript, a Github account, and a text editor (I recommend Visual Studio Code).

That’s it!

If you’re looking to begin your journey as a front-end developer, I recommend sticking around until the end, where I‘ll share my go-to resources for learning all about this kind of stuff.

An example challenge 📝

Sunnyside agency landing page challenge

A challenge provides you with the following things:

• Sketch and Figman design files access (w/pro account)

• JPEG design files for mobile and desktop layouts

• Style guide for fonts, colors, etc

• Optimized image assets

• README file to help you get started

• HTML file with pre-written content

Note that a challenge will highlight what skills you’ll be working on, the difficulty, and whether or not it is for premium users.

Why should you use it? 🤔

There are many great things about Frontend Mentor, but I think three features make it stand out for me.

1. Practice with relevant skills found in the industry

I have applied to many front-end developer positions and have seen the same skills being required.

Some of these include:

• Building websites or web applications using HTML, CSS, and JavaScript

• Responsive web development

• Designing and developing applications using modern JavaScript frameworks (e.g., React, Vue or Angular)

• Implementing user interfaces given a Sketch or Figma design file

The challenges provided by Frontend Mentor can give you experience in all of these things, all while building out your portfolio.

Because you are given the flexibility to use whatever you want to complete the challenge, you can choose specific things you want to work on.

It is hard to think of projects on your own, and Frontend Mentor makes it easy for you to start practicing without getting tied down by everything else.

2. Learn from other people’s approaches

Once you complete the challenge, or you’re stuck, you can view other solutions.

This is great because you can see different approaches to the same challenge, which might teach you something new that you didn’t know beforehand.

I normally go back after submitting and review other submissions, and I can tell you I’ve learned a lot from doing this! You can view both their source code as well as their solution on a live site.

Solutions dashboard on Frontend Mentor

3. The Design Comparison tool

This might be my favorite feature of Frontend Mentor. Once you have submitted your solution, this slider lets you see the design files and your solution side-by-side.

Design comparison on Frontend Mentor

This is important because it showcases your attention to detail and your ability to implement user interfaces.

Resources 📑

Over the years, I have found many helpful youtube channels, articles, developers, and online resources that have facilitated my front-end development learning.

I thought I would share some of them with you!

• Kevin Powell: CSS Evangelist. Great CSS resource and is on multiple platforms.

• Kirupa Chinnathambi: Former co-worker while interning at Microsoft — a fantastic resource for all things web development-related.

• Mozilla: Their documentation is clear and concise. I always come here when I find unexpected behavior in my web projects.

• Udemy: specifically Jonas Schmedtmann. Completed his JavaScript and advanced CSS course.

• Udacity’s React Nanodegree Program: For the people that like a little bit more structure to their learning and have the budget, I recommend this program that taught me the intricacies of React.

If you don’t see your go-to resource, let me know! I might be missing something super cool that I wouldn’t have found otherwise.

The Outro ➡️

Hopefully, I have convinced you to use Frontend Mentor — if not, that’s alright. More challenges for me! It is a great resource that has made me better at what I enjoy doing.

Be sure to let me know if you complete a challenge — I would love to talk about the approaches we each took.

Until next time!