- FrontendJoy
- Posts
- How to level up your frontend skills
How to level up your frontend skills
7 simple tips to grow your frontend skills
In 2017, I was struggling to build any frontend project.
I'd follow tutorials feeling confident, only to hit a wall when trying to build something independently.
Fast forward to today: I'm a Senior Frontend Engineer at Palantir.
In this post, I share the 7 best tips for junior frontend developers who want to level up.
Table of Contents
Tip 1: Build strong fundamentals
You'll never become a senior frontend developer without a solid understanding of HTML, CSS, and JavaScript.
Every frontend technology builds on these basics.
Without them, it's harder to:
Understand the problems that frameworks and libraries solve
Debug your code effectively
Building these fundamentals isn't as hard as it sounds. Here are some resources to get started:
MDN Curriculum: Strong foundation in web basics
FrontendMasters Free Bootcamp: Great starting point with hands-on practice
JavaScript Info: Essential to build strong JavaScript skills required for learning libraries like React
Tip 2: Practice extensively
You can watch all the tutorials and buy all the programming books in the world, but you won't build mastery until you start practicing with real projects.
Building projects has several benefits:
You remember things better after working through struggles
You test your skills in real-world scenarios
You start seeing common patterns and solutions
You confirm your understanding by actually solving problems
I recommend these resources for practice:
Frontend Mentor: Project practice at all levels
Frontend Practice: Recreate real websites from real companies
Frontend Projects: Project practice at all levels
JavaScript Mastery: YouTube channel to master web development with a project-based approach
Tip 3: Get code reviews
It's easy to write code that "works".
But, writing maintainable code is the real challenge.
So try to get code reviews as soon as possible (i.e., have someone look at your code and point out mistakes).
Here's how to get code reviews depending on your situation:
Situation 1: You have teammates
Keep your code concise, then ask for a review. Avoid massive pull requests, which can overwhelm reviewers.
Situation 2: You donβt have teammates
Reviewing your own code can be surprisingly effective. Leave it for a few weeks, then return to it with fresh eyes.
Situation 3: You're unemployed
Ask for feedback on Reddit or similar communities, or feel free to contact me for a free review.
π‘ Reply to this email for a free code review.
Tip 4: Read and review other people's code
Reviewing others' code has been one of the best ways I've improved.
When you review someone else's code, you:
Learn new tricks and tips
Realize how some patterns can be complex to read
Develop empathy towards those reading your code
Is it weird to give code reviews as a junior dev?
Not at all!
Even as a beginner, you can ask yourself, "Is this code clear?" If not, the author might need to add comments or simplify.
How to find code to review:
Situation 1: You are employed
Review code when possible. If formal reviews aren't part of your team, look at the code anyway and make mental notes.
Situation 2: You are unemployed
Reddit and GitHub are great places to find code to review.
π‘ Check out these examples of large, production-grade React apps.
Tip 5: Learn about best practices
Never stop learning.
Understanding best practices helps you write code that is easier to maintain and scale.
Here are my top recommendations:
Websites:
CSS: Josh Comeau (CSS & React), Ahmad Shadeed (CSS), Kevin Powell (CSS)
React: Epic React
TypeScript: Total TypeScript
Design Patterns: Refactoring Guru, Patterns.dev
Books:
Programming: The Pragmatic Programmer, Clean Code (check the JS version here β Clean Code JavaScript)
React: Advanced React
TypeScript: Effective TypeScript, Programming TypeScript
Tip 6: Master 1-2 tools before diversifying
Don't bounce from React one week to Vue the next and then Node.js after that.
This path leads to failure and a lack of mastery.
Without deep knowledge, you're at risk of being replaced by AI tools.
Here's what I recommend:
Choose a focus (Frontend or Backend)
Pick one framework (React, Vue, Svelte, etc.)
Stick with it until you can confidently build projects
Only then, start exploring other tools.
Tip 7: Mentor junior devs
Mentoring junior devs can take your skills to the next level.
In fact, mentorship helped me:
Solidify my understanding by explaining it
Build confidence as I realized I knew more than I thought
How to find junior frontend devs to mentor
Look for someone who's where you were six months ago and help them out.
Reddit communities like r/FreeCodeCamp, r/learnjavascript, and r/learnreact are great places to start.
Summary
Becoming an excellent frontend dev doesn't require innate talent or decades of practice.
All you need to do is:
Build strong fundamentals
Practice what you learn
Get code reviews whenever you can
Read and review other people's code
Continuously learn best practices
Master 1-2 technologies first, then diversify
Mentor those more junior than you
That's it.
And if you need any advice, reply to this email.
π‘TIP OF THE WEEK
JavaScript Tip π‘
Use URLSearchParams to manage query parameters easily.
β Ndeye Fatou Diop π’ π» | DEV | πΈπ³π«π· (@_ndeyefatoudiop)
4:01 PM β’ Nov 5, 2024
π‘SPOT THE ISSUE
What is wrong with this #css code?
β Ndeye Fatou Diop π’ π» | DEV | πΈπ³π«π· (@_ndeyefatoudiop)
12:03 PM β’ Nov 4, 2024
What'd you think of this issue? |
Reply