DEV Community

Cover image for How to level up your frontend skills
Ndeye Fatou Diop
Ndeye Fatou Diop

Posted on • Originally published at frontendjoy.com

How to level up 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.

Section Divider

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:

Section Divider

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:

Section Divider

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.

Section Divider

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.

Section Divider

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:

Section Divider

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:

  1. Choose a focus (Frontend or Backend)

  2. Pick one framework (React, Vue, Svelte, etc.)

  3. Stick with it until you can confidently build projects

Only then, start exploring other tools.

Section Divider

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.

Section Divider

Summary

Becoming an excellent frontend dev doesn't require innate talent or decades of practice.

All you need to do is:

  1. Build strong fundamentals

  2. Practice what you learn

  3. Get code reviews whenever you can

  4. Read and review other people's code

  5. Continuously learn best practices

  6. Master 1-2 technologies first, then diversify

  7. Mentor those more junior than you

That's it.

And if you need any advice, DM me on X.

Section Divider

πŸ’‘ My tip of the week

Section Divider

🐞 Spot the issue in this code

Section Divider

That's a wrap πŸŽ‰.

Leave a comment πŸ“© to share your favourite tip (or add one).

And don't forget to drop a "πŸ’–πŸ¦„πŸ”₯".

If you're learning React, download my 101 React Tips & Tricks book for FREE.

If you like articles like this, join my FREE newsletter, FrontendJoy.

If you want daily tips, find me on X/Twitter.

Top comments (33)

Collapse
 
muskan025 profile image
Muskan Dodmani • Edited

Your blogs are really helpful
I've been waiting to apply these tips from your blog
Tips from senior frontend dev
but I haven't got a job yet, lol

Please drop your email, I've been wanting someone to do a code review from a long time but didn't find anyone.

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

I'm super glad you like it, Muskan!
Can you join here => frontendjoy.com/p/how-to-level-up-... and reply to the welcome email.
I don't want to share email in public πŸ˜… to avoid spams

Collapse
 
muskan025 profile image
Muskan Dodmani

Sure, I get it!

Collapse
 
itsmeseb profile image
sebkolind

Great read!

Also, if you don’t have anyone to review your code, you could always use one of the many AI options. πŸ™ŒπŸ»

Collapse
 
dstri26 profile image
Trideep Barik

AI options like?

Collapse
 
itsmeseb profile image
sebkolind

Github Copilot just released some reviewing functionality, which looks really promising! Also, CodiumAI is a thing, but I haven't tried it.

Thread Thread
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

That is dope πŸ™Œ

I should check that out!

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

Oh nice suggestion πŸ™Œ
I didn’t think about that (too old school πŸ˜…)

Collapse
 
viktorija_na_468e3d99f9f profile image
Viktorija NaΔ‘ • Edited

Read a book and be in trend

  1. "HTML & CSS: Design and Build Web Sites" - Jon Duckett
  2. "Eloquent JavaScript: A Modern Introduction to Programming" - Marijn Haverbeke
  3. "Learning React: A Hands-On Guide to Building Web Applications" - Alex Banks i Eve Porcello
  4. "You Don't Know JS" serija - Kyle Simpson
  5. "JavaScript: The Good Parts" - Douglas Crockford
  6. "CSS: The Definitive Guide" - Eric Meyer, Estelle Weyl, and Shane Spaulding
  7. "The Road to React" - Robin Wieruch
  8. "Designing with Web Standards" - Jeffrey Zeldman
  9. "Front-End Web Development: The Missing Manual" - David Sawyer McFarland
  10. "JavaScript Design Patterns" - Addy Osmani
Collapse
 
mahmoudalaskalany profile image
Mahmoud Alaskalany

These are a very good tips , keep it up

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

Thanks Mahmoud πŸ™Œ

Collapse
 
sadeeqabu90 profile image
sadeeq

Very useful guide which I'll implement.

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

Super glad you like it sadeeq πŸ™Œ

Collapse
 
rverwey profile image
Ryan VerWey

Awesome read! Going to dig deeper into those sites you mentioned.

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

Super glad you like it Ryan πŸ™Œ

Collapse
 
wesborland profile image
Marcos Javier Gomez Hollger

I love this posts that share personal experiences for help others. Thanks! ❀️

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

Super glad you like it Marcos πŸ™Œ

Collapse
 
kelsey-d profile image
kelsey-d

What is the issue with the css?

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

If we assume this is the only style applied to the a, this won’t work since width and height don’t have an effect on inline elements.
The way to fix is to use something like display: inline-block;

Collapse
 
kelsey-d profile image
kelsey-d

Oh right believe it or not I just read about this here: stackoverflow.com/questions/154249... and already forgot πŸ˜…

Thread Thread
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

πŸ˜…πŸ˜…πŸ˜…

Collapse
 
skhmt profile image
Mike

I really want to highlight:

Tip 7: Mentor junior devs

This is so important not only as a benefit to junior devs, but also to your company and to yourself as well.

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

You are perfectly right Mike πŸ™Œ

Mentoring is good for everyone: I didn’t realise it until I started doing it.

Collapse
 
sandesh_adhikari22b1084_ profile image
Sandesh Adhikari 22B1084

Awesome read! Really appreciate your effort

Collapse
 
_ndeyefatoudiop profile image
Ndeye Fatou Diop

Thanks Sandesh πŸ™Œ

Some comments may only be visible to logged-in visitors. Sign in to view all comments.