How to level up your frontend skills
Ndeye Fatou Diop

Ndeye Fatou Diop @_ndeyefatoudiop

About: Hi 👋🏽, I am a self-taught Senior Front-End Engineer. I share tips to help overwhelmed junior frontend developers here => frontendjoy.com/ 😻🥳.

Location:
Asnieres-Sur-Seine, France
Joined:
Jul 26, 2020

How to level up your frontend skills

Publish Date: Nov 12 '24
162 33

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.


👉 Learn how to become a Senior Frontend Engineer without a CS Degree or natural talent ✨


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.

Comments 33 total

  • Muskan Dodmani
    Muskan DodmaniNov 13, 2024

    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.

  • Ghais
    GhaisNov 13, 2024

    Great post, Ndeye Fatou!

    These tips are incredibly valuable for anyone in the field, especially for those of us in a web development company looking to build strong fundamentals for website development and management services. The emphasis on code reviews and mentorship resonates well — it's so crucial to stay grounded in best practices, whether you're working on web application development or WordPress website projects. As a website building service, practicing with real projects is a great way to gain mastery, and your resource recommendations are spot on. Thanks for sharing these insights!

    • Ndeye Fatou Diop
      Ndeye Fatou DiopNov 13, 2024

      Super glad you like them 😀

      Indeed, these are simple things which help a lot when done consistently!

  • kontactmaneesh
    kontactmaneeshNov 13, 2024

    Nice

  • Viktorija Nađ
    Viktorija NađNov 13, 2024

    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
  • Fazly Fathhy
    Fazly FathhyNov 13, 2024

    Thankyou for sharing this

  • Ryan VerWey
    Ryan VerWeyNov 13, 2024

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

  • kelsey-d
    kelsey-dNov 13, 2024

    What is the issue with the css?

    • Ndeye Fatou Diop
      Ndeye Fatou DiopNov 13, 2024

      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;

  • Anatoly
    AnatolyNov 13, 2024

    All that tips are applied not to frontend only, but to everything else :)

  • sebkolind
    sebkolindNov 14, 2024

    Great read!

    Also, if you don’t have anyone to review your code, you could always use one of the many AI options. 🙌🏻

    • Ndeye Fatou Diop
      Ndeye Fatou DiopNov 14, 2024

      Oh nice suggestion 🙌
      I didn’t think about that (too old school 😅)

    • Trideep Barik
      Trideep BarikNov 14, 2024

      AI options like?

      • sebkolind
        sebkolindNov 14, 2024

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

  • Mike 🐈‍⬛
    Mike 🐈‍⬛Nov 14, 2024

    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.

    • Ndeye Fatou Diop
      Ndeye Fatou DiopNov 14, 2024

      You are perfectly right Mike 🙌

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

  • Sandesh Adhikari 22B1084
    Sandesh Adhikari 22B1084Nov 14, 2024

    Awesome read! Really appreciate your effort

  • Marcos Javier Gomez Hollger
    Marcos Javier Gomez HollgerNov 15, 2024

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

  • Mahmoud Alaskalany
    Mahmoud AlaskalanyNov 18, 2024

    These are a very good tips , keep it up

  • sadeeq
    sadeeqNov 18, 2024

    Very useful guide which I'll implement.

Add comment