7 Tips to Transition from a Beginner to an Intermediate Frontend Developer 🤓 👨‍💻
Tags: javascript, webdev, beginners, career
Published: 2022-07-31 05:11:35

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

![vanilla-ice-cream](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qij552a39pd5xsoqy3i.png)

No, we are not talking about ice creams...

![scooby-doo-no](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xovx00aaq3x0gio02w7v.gif)

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)

![towel-dry](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0egy2u2f8hxxn5nkew6.gif)

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

```js
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

```js
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

```js
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

![business](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isjy4e3usly2ov5bubuf.jpg)

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!

![new-framework-meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyxwba9z320j3d1b0jqh.png)

**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**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer** to chop away your development woes? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [Personal Website](https://tapajyoti-bose.vercel.app) and [GitHub](https://github.com/ruppysuppy)

Want to connect? Reach out to me on [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)

I am moving to Bali, Indonesia today as a Digital Nomad. Follow me on [Instagram](https://www.instagram.com/tapajyotib/) to check out what I am up to.

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.