As a frontend developer by trade, it became extremely important for me to learn React, UI Testing and CSS.

There are so many resources out there to learn the above that it can be overwhelming. I tried courses, blog posts and YouTube videos. While I did come across some good resources throughout my journey, I wasted a lot of time.

Many of the resources that you'll come across aren't in-depth. They provide a basic understanding of how to use a specific tool, but don't go any further than that.

In this post, I'd like to talk about which resources were the most effective for me.

React

If you're starting to learn React, the documentation is a great place to start. The documentation is a good reference for React developers at any level. That said, it can be useful to learn from an actual teacher once you've moved past the basics.

The best course I've taken on React is Kent C. Dodds' course: Epic React.

It's a concise, in-depth overview of React from the ground up. It helps provide a solid mental model of how React works. From there, it moves on to more advanced topics like React patterns and performance tuning.

The course ends with you building a feature rich application from the ground up.

It's easily one of the best resources that I've found on the subject.

UI Testing

Testing is one of those things that most people avoid.

I understand the feeling. I used to be the same way. But, one of the primary reasons people don't like testing is because they never learned how to write a good test.

Something like functional testing is easy because there's a clear input and output.

The same isn't true when you're testing complex interactions found in most UIs. UI testing can quickly get out of hand and become a frustrating experience. You're left asking questions like the following:

What do you test?

What do you mock?

It can be confusing. That said, once you get a solid foundation of what and how to test UI code, it starts to become fun. You end up looking forward to writing tests.

Today, I enjoy the testing process.

It's a great feeling to know that my code is working as intended. An even better feeling is using Test Driven Development (TDD) to build new features or fix bugs. It supercharges your workflow.

Once again, the best resource that I've found to learn about UI Testing is Kent C. Dodds' course: Testing JavaScript.

Kent created the testing package @testing-library/dom and its React counterpart. He has a wealth of knowledge when it comes to testing. He also explains things in a clear and concise way.

This is probably the best resource on the topic.

CSS

CSS is one of those things that most developers hate.

Frontend developers are no exception. I spent most of my early career in the same boat. CSS was confusing and I didn't know how to use it effectively. That translated to avoiding CSS for the most part.

In recent years, I've spent time trying to build this skillset.

It's important for every frontend developer to understand the basics. It turns out CSS isn't too hard. It has a consistent and predictable set of rules if you know them.

The best way I've found to master CSS is with Josh W Comeau's course: CSS for JS Developers.

Josh is great at distilling complex topics into bite sized pieces. He has an interesting style of teaching that is a mix of lectures and practical examples. Throughout the course, you'll spend a lot of time writing CSS that will help you build a solid foundation.

After taking that course, I actually enjoy writing CSS now.

Bonus (Vim)

Vim isn't a frontend developer skill, but it's something that has had a major impact on my developer experience.

My love of vim is somewhat irrational. Yes, it makes me a more productive developer, but the real reason I like vim is because it's fun. There's a bit of a learning curve, but once you get the hang of it, it can be really enjoyable.

My first real introduction to vim was when a buddy of mine told me to check out ThePrimeagen on youtube.

He can be a bit goofy at times, but watching his videos are a constant reminder of why I got into programming to begin with. Writing code should be fun and it's clear that he truly enjoys what he's doing. After watching one of his videos, I picked up vim and never looked back.

Vim isn't going to teach you the next best tool or make you a 10x developer, but it makes programming fun. If you're wanting to try it out, check out ThePrimeagen's videos.

There's also this article I wrote about how I learned vim that might be helpful.

Conclusion

React (or any frontend framework), UI Testing and CSS are fundamental to every frontend developer's success.

I hope the above resources can help you as much as they've helped me.