7 Tips to Transition from a Beginner to an Intermediate Frontend Developer 🤓 👨‍💻

5 min readJul 31, 2022

So you have learned the basics of HTML, CSS, and JS, created a few sites, and perhaps even landed a junior role too…

Now what?

There is a plethora of information on how to get started, but the path becomes a bit blurry once you nail the basics.

This article will help you transition from a beginner to an intermediate developer, so buckle up your seat belt and get ready to learn!

1. Go Vanilla

No, we are not talking about ice creams…

This will turn out to be excruciatingly difficult at first, but ditching third-party code forces you to learn how every piece of your application works. You will need to focus on creating reusable utilities for things such as selecting elements, manipulating the DOM, and handling requests.

The development will be slow, but the goal isn’t to build things quickly, but rather, to understand the building blocks of your craft.

2. Keep a Single Source of Truth (stay DRY)

Again we are not talking about drying ourselves, but keeping the code DRY (Don’t Repeat Yourself).

Why is it important?

The importance of writing code that adheres to the DRY principle is that you have to refer to only one place when looking up a certain definition inside your code repository. To modify the functionality, you only have to change your code in a single place, and you are done!

3. Learn Regular Expressions

Regular Expressions (also known as RegEx) is an incredibly powerful tool in your arsenal. It is used to find matching patterns in text.

It has a host of applications, ranging from email validation

const emailValidatorRegex =
  /^[^@\s]+@[^@\s]+\.[^@\s\.]{2,}$/;const isValid = (email) =>
  emailValidatorRegex.test(email);isValid("dummyemail@gmail.com");    // valid
isValid("dummyemail@email.co");     // valid
isValid("dummyemail@gmail.co.in");  // valid
isValid("dummyemail@gmail");        // invalid

Text formatting

const normalFunction = `
function add(x, y) {
    return x + y
}
`;const formattedFunctionRegex =
  /function\s*(\w+)\s*\(([^\)]+)\)/g;const arrowFunction = normalFunction.replace(
  formattedFunctionRegex,
  "const $1 = ($2) =>"
);
console.log(arrowFunction);

And even HTML parsing

const markup = `
<html>
  <body>
    <h1>Shopping List</h1>    <h2>Produce</h2>
    <ul>
      <li>Celery</li>
      <li>Apples</li>
    </ul>    <h2>Frozen</h2>
    <ul>
      <li>Ice Cream</li>
      <li>Hot Pockets</li>
    </ul>
  </body>
</html>
`;const listParser = /(?<=<li>)(\w|\s)+(?=<\/li>)/gm;
const shoppingList = markup.match(listParser);
console.log(shoppingList);

4. Don’t Get Stuck in Your Ways

Tech is an ever-changing industry. It’s crucial to accept that even if you believe in a certain way of doing something, there might be something that comes along to solve your problem more effectively. It’s good to listen to the opinions of others, but many developers fall into the trap of believing that their way is the best.

Every method has its pros and cons. Every project has its own needs, and it is essential to take those into account instead of simply following the method you know!

5. Be Business-Aware

At the end of the day, most people have bills to pay. Unless you are a hobbyist, you will probably have clients, deadlines, and budgets looming over your head!

Becoming a mid-level developer is as much about what you know as it is about the responsibility you can take on and your commitment to delivering the best you reasonably can in the time you’re given. If you create the best website the world has ever seen, but it is a month late, it won’t reflect on you well.

Senior developers are paid what they’re paid because they’re reliable. Yes, they can solve problems faster and know a lot, but they will also do what it takes to deliver a project on time. They understand which technologies and approaches will fit the needs of a project without being overkill.

6. Be Patient and Keep Practicing

The tech landscape is ever-changing, but don’t go chasing after every shiny new framework!

You can’t go wrong with simply improving your fundamental skills. Let’s say you want to eventually be a React developer: Yes, learning React now would certainly get you into the ecosystem faster, but ignoring what React is built on — plain old JavaScript — can limit you in the future.

Programming is a long game: it takes years to become a truly competent developer, and the more you know the more you realize you don’t know very much at all.

Be persistent but patient, and you will become a great developer right under your own nose! Build a strong foundation, your future self will thank you!

7. Don’t Forget to Have Fun!

Don’t get so caught up in making a living that you forget to live life.

It is crucial to spare some time to build your dream project regardless of the work pressure. Often people get so engrossed in their day-to-day life that they forget what lit the fire in their hearts to start development in the first place.

It is also essential to take a break from time to time, if you keep coding 24 x 7, you will definitely grow to detest it & quite naturally your productivity will plummet!

That’s all folks!

Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja

Follow me for weekly new tidbits on the domain of tech!

Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork

Want to see what I am working on? Check out my Personal Website and GitHub

Want to connect? Reach out to me on LinkedIn

I am moving to Bali, Indonesia today as a Digital Nomad. Follow me on Instagram to check out what I am up to.