The Journey To My First Freelancing Job

My journey started, unfortunately, the same way as many others.

I had a deep and sudden wish to make a discord bot. This lead me down the rabbit-hole of learning discord.js (without any understanding, of course) and completely skipping the basics of JavaScript. During that time, I also encountered things such as React, Tailwind, Express, Nest.js and so on.

I thought I was learning so much, when in reality I was learning absolutely nothing.

What I did up until two months ago

With the initial excitement of learning gone, I started to code less and less.

Because of this break, one might even say I only have 8-9 months of experience, instead of two years. However, during this period I successfully managed to learn advanced HTML and CSS, as well as some basic front-end related JavaScript and React.

The projects that I did were from YouTube tutorials and were way out of my scope of expertise, meaning that once again I learned basically nothing.

My past couple of months

A few months ago, I finally realized that trying to learn everything at once will lead me nowhere (what a shocker, I know).

I started learning JavaScript and React in a isolated way, and finally understood the concepts that were basic to begin with, such as mapping from JavaScript and prop drilling in React.

I also made many social connections in school at this time, which enabled me to get my name out there and get hired by a teacher to create a website for her business.

Hey, where is the roadmap?

I realize that some of you are probably here for a roadmap of technologies and concepts needed to get your first freelancing job, so here we go:

HTML, CSS and JavaScript

These three languages are the foundation and cannot be skipped or looked over when starting with web development. They are the base of all popular web development frameworks, and make it easier to learn things like React, Tailwind or Bootstrap later on.

You should spend about two weeks to a month learning HTML, a month or two on learning basic to intermediate CSS and a couple of months for learning JavaScript. Together it should take you about 4-7 months to learn all of these, depending on your understanding and commitment. Some people need more time, while others need less.

Tailwind OR Bootstrap

Once you learned the basics, you should start learning a CSS framework like Tailwind or Bootstrap.

Learning two things at the same time will lead you nowhere in the end or make the learning harder than it needs to be. You can always learn the other one after you finish with the first.

To help you decide which one to learn first, you need to understand the advantages and disadvantages of each one:

Bootstrap is more widely used, meaning that there are more jobs which demand knowing this framework. Additionally, there are pre-made components that you can customize for different screen sizes whenever needed.

The downside is that you lack control over the styles, and you will have to override much of the styling if you want your website to look somewhat unique. Also, the bundle size will be huge when using Bootstrap.

Tailwind is less utilized and has you make all the components you want to use. This gives you the granular control over how the website looks, but also requires more CSS knowledge.

As a side note, I have seen many people choose Bootstrap only because they skipped over learning CSS, which is something you should never do.

Now, back to what I was saying.

Tailwind has the disadvantage of being non-descriptive with class names. This means that it may take longer to understand what is going on in a codebase where Tailwind is used. However, it is not that much of a problem in React projects with components.

React, Vue or Angular

Next, you should learn one of the three most used web frameworks. This article is already long, so please read a deeper explanation here: Angular vs React vs Vue article on browserstack

Here is a summary:

React: A JavaScript library developed by Facebook for creating reusable UI components. It focuses on the "view" in the Model-View-Controller (MVC) architecture and allows developers to build dynamic and efficient user interfaces.

Vue: A progressive JavaScript framework for building user interfaces. Vue is designed to be incrementally adoptable, meaning you can use as much or as little of it as you need. It offers a flexible and intuitive way of building reactive web applications.

Angular: A comprehensive front-end framework developed by Google. It provides a complete solution for building large-scale, enterprise-grade web applications. Angular uses a declarative approach and follows the TypeScript language for building robust and maintainable applications.

Optimizing metrics like Performance, Accessibility, Best Practices and SEO

No advices on this yet, but stay tuned for my next article where I go deep into how I got a 100% on every metric on the Google lighthouse score.

Others

Here is a link to an excellent blog post that showcases different helpful tools not covered here: Resources for coding challenges article