How to become a web developer in 2022 (My Take)
Tags: javascript, beginners, career, codenewbie
Published: 2022-04-12 18:29:46

###  This is my take on becoming a kick-ass web developer in 2022

Hey,
Internet people, I am chetan verma a full stack web developer primarily working on the web side of things.

I started out in 2014 and have been working on the internet ever since and in this blog, I will take you around the internet to become one yourself.

> if you don't want to read this full article you can jump to the last for actionable steps and resources.

**so let's get going**

so before getting into the details we need to understand the types of developers there are:

- Frontend Developer - These web developers focus on the user-facing sides of websites. They create intuitive user interfaces with a keen eye for compelling design.

- Backend Developer - These web developers specialize in websites' nuts and bolts, optimizing the crucial hidden elements most users never see. They often design databases and use languages like PHP, CSS, or Python.

- Fullstack Developer -These web developers combine front-end and back-end development. They consider the creation process from both angles and possess the skills to complete tasks on either end of the spectrum.

now that is out of the way let's talk about the skills that are required for each type of developer.

There are some core skills which is required by each type of developer and there is some certain skill set that is specific to the type of developer and type of work you are trying to accomplish.


So Let's talk about the core skill set which is required by all types of web developers (OGs).

Those Are - 

- HTML
- CSS
- JavaScript

These are the only skillset required to spinoff a website that will work on the web and can get the job done pretty well.
All the other fancy stuff in the web developer space are derived from these core languages only so learning those will definitely make you an awesome web developer.

let's talk about these in detail.

- HTML & CSS

These languages are easy to grasp and are collectively called markup languages which are used to define the part of web structure and styling of those elements.


- JavaScript

This is the language which I love the most. it is just amazing
it is a scripting language used to add dynamic nature to the web and gives all the superpower to the website or web app.


Now we are aware that where to start.

Once you are comfortable with those skills, now it is time to go in more depth and learn modern web development and chose the path to follow.

Now Let's talk about more focused stuff.


### Frontend Web Developer

Now here comes the framework for writing and structuring your website or web apps.

Let's talk about the most used framework in the frontend world and my personal favorite which I use every day.

All of these frameworks do similar work but the way of achieving those results are different in each of the frameworks.

- [React](https://reactjs.org/) (❤️):
This is the most loved frontend framework developed by Facebook and used by gazillions of web apps. this is my personal favorite

- [Vue](https://vuejs.org/):
This framework started out as a side project by an awesome google developer Evan You. and now shares the leaderboard with other big frontend frameworks.

- [Angular](https://angular.io/):
This is the oldest and battle-tested framework by google to create awesome single-page applications.


So now we know what are the best frontend frameworks.
you can choose any one of them to get started and become the full-fledged frontend web developer

> Actionable Step - Learn React / Vue / Angular

### Backend Web Developer

So, if you want to become a backend web developer there are tons of things you can learn to become one you can choose your favorite programming language and each one of them has a framework to create an awesome backend for you.

Some of thems are - 
- [Ruby On Rails](https://rubyonrails.org/)
- [Django](https://www.djangoproject.com/) / [Flask](https://flask.palletsprojects.com/en/2.1.x/) (Python)
- [Go](https://go.dev/)
- [Rust](https://www.rust-lang.org/)
- [Express.js](https://expressjs.com/) / [koa.js](https://koajs.com/) (Node.js)

and many more...
you can choose one of them and start learning those.
personally, I like [Express.js](https://expressjs.com/) because it is based on javascript and we don't have to learn the syntax of a new language.

> Actionable Step - Learn any of the above backend frameworks

### Full Stack Web Developer

Now For the full stack web developer, you have to combine the skill sets of both the frontend web developer and backend developer.

> Actionable Step - Learn any frontend framework and any backend framework


### Some Other Important Stuff To Learn

- CSS Preprocessors ([LESS](https://lesscss.org/) & [SASS](https://sass-lang.com/))

These Are CSS Transpilers and make it very easy to write CSS.CSS Transpilers lets you do things that aren't normally supported, like nesting CSS rules and other awesome stuff.

- Design Patterns

It is the way of writing your code that can be reusable and easy to debug.
Having a foundation in this will make you a far better developer in any programming language.

Resources - [Javascript Design Patterns](https://www.dofactory.com/javascript/design-patterns), [Learning JavaScript Design Patterns](https://www.patterns.dev/posts/classic-design-patterns/).

- Git (Version Control)

This is by far the most important skill set that a web developer could possess.
git is a super powerful tool that can help you keep a track of the changes you make to your code and commit those changes.
if things go wrong you can revert back to those changes or commits.

Resources - https://www.atlassian.com/git/tutorials, https://learngitbranching.js.org/


Now, we are ready to get a job as web developers but there are certain things that we have to do on the web to get that job.

so let's start

### Get a Portfolio :
you can get away without a portfolio but having one will make a huge difference in your job search it will get you more opportunities than you can imagine and if you have a blog as well then it is icing on the cake.

Create a portfolio with past projects which you have built while learning to code, if you don't have any you can create some projects for yourself and host those online.

Some Resources to get started with your portfolio - 

there are a bunch of services that can help you create a portfolio over the web, you can do a google search to see which one you like.

I have a small portfolio template which based on react that you can use instantly to create your website.

here is the link - 
- Github - https://github.com/chetanverma16/react-portfolio-template
- Live - https://react-portfolio-template.netlify.app/

Now that you have a portfolio let's go to the next step.

### Start Applying.

Now it is time to start applying for the web developer role.

I am listing down some of the awesome job boards which I have used and are awesome to find your first job.

Job Boards - 
- [Angel List](https://angel.co/)
- [workatastartup](www.workatastartup.com)
- [Remote Hunt](https://remotehunt.com/)
- [Himalyas App](https://himalayas.app/)
- [WeWorkRemotely](weworkremotely.com)
- [LinkedIn Jobs](https://www.linkedin.com/jobs/)


Thank you for reading out this article.

⚡

Here is a small summary of this article.

### Conclusion

The job market is getting tougher. The more traditional jobs are phased out every day. So, why not learn a skill that will keep you employed (and possibly wealthy) for the foreseeable future?

That’s the big advantage of web development. The great part is- that you don’t need a fancy expensive degree to get into the field. Simply by following the steps we’ve listed out here, you can start out the path of becoming a web developer.


To recap, here are the basic steps to becoming a web developer:

- Learn the Basics of HTML, CSS, and Javascript
- Frontend Developer - Learn [React](https://reactjs.org/) / [Vue](https://vuejs.org/) / [Angular](https://angular.io/)
- Backend Developer - 
 - [Ruby On Rails](https://rubyonrails.org/)
 - [Django](https://www.djangoproject.com/) / [Flask](https://flask.palletsprojects.com/en/2.1.x/) (Python)
 - [Go](https://go.dev/)
 - [Rust](https://www.rust-lang.org/)
 - [Express.js](https://expressjs.com/) / [koa.js](https://koajs.com/) (Node.js)
- Full Stack Web Developer - Do the actionable step of Frontend & Backend Development.

Now after getting ready with all those skill sets we have to get into the market
steps :
- Get a Portfolio 
- Get on Job Boards

_________________


### All Resources - 
- [Free Code Camp](https://www.freecodecamp.org/)
- [Codecademy](https://www.codecademy.com/)
- https://www.khanacademy.org/computing/computer-programming
- https://www.w3schools.com/
- https://www.theodinproject.com/
- Design Patterns - [Javascript Design Patterns](https://www.dofactory.com/javascript/design-patterns), [Learning JavaScript Design Patterns](https://www.patterns.dev/posts/classic-design-patterns/)
- Learn Git - https://www.atlassian.com/git/tutorials, https://learngitbranching.js.org/

### Get Free Portfolio
- Github - https://github.com/chetanverma16/react-portfolio-template
- Live - https://react-portfolio-template.netlify.app/

### Job Boards
- [Angel List](https://angel.co/)
- [workatastartup](www.workatastartup.com)
- [Remote Hunt](https://remotehunt.com/)
- [Himalyas App](https://himalayas.app/)
- [WeWorkRemotely](weworkremotely.com)
- [LinkedIn Jobs](https://www.linkedin.com/jobs/)


Thank you for reading this far.

If you enjoyed this article, give it a ❤️ so others can find it too.

For more frequent tips, [stay in touch on Twitter](https://twitter.com/realchetanverma)

Contact Me:

[Portfolio](https://chetanverma.com/) | [Github](https://github.com/chetanverma16) | [LinkedIn](https://www.linkedin.com/in/chetanverma7/) | [Twitter](https://twitter.com/realchetanverma)