Hey, DEV.to community!

I was thinking of how I started my web dev career and suddenly I remembered how frustrated I was when I was looking for the right thing to do or even where to start!

I remember when I was 8 and was interested in programming. Programming was more like a magic for me back then. Something funny that might seem ridiculous but I'm brave enough to tell it to you! For the first time, when I tried to figure out how to program I thought the "new shortcut" in the context menu of Windows was the way to start!

So nothing is wrong until you learn it is wrong! Anyways, now you know my little secret after all!

This was the beginning of my story in the world of programming and slowly I began to realize how things work and I chose to be a web developer. You might have the same problem of getting lost in all these options and how to start or what to learn. Things have changed tremendously since then so you probably won't be able to experience what I experienced in my path like learning HTML 4! Here is a roadmap you can follow to build your career as of late 2020. This roadmap might even be valid for at least 2 years so if you are reading this in the year 2022 you can probably rely on it.

What is programming?

The first thing you need to know is what programming is. Programming is not magic and actually there is huge logic behind it.

Programming is the way you tell the computer what to do in a sequence of statements. There are lots of programming languages out there. Maybe more than all the words I've used in this article so far! It is not needed to learn all of them right now or even forever. What you need to learn is a set of tools which will ease your path in web development if that's the path you chose.

What is web development?

Web development is the art of creating a website (obviously!). Web development consists of several skills you need to learn. A web application is usually divided into two parts, front-end and back-end. The front-end is the part where you see the website just like here where you are reading this article. The back-end is where all the information gets processed so you can see the front-end the way it is needed.

Before getting started you should know that learning a job properly is going to take some time. So just get relaxed and never get tired! You have a long path to survive. Everyone understands that programming sometimes might be hard sometimes but with enough time spent everything will make more sense and you'll get how it works.

Web developers are usually classified into three groups. You can choose to be either of them:

• Front-end developer: People who design the interface of the website. Often called as UI/UX (User Interface/User experience) developer.
• Back-end developer: People who are to design the logic behind the website. Back-end developers usually work with databases and programming languages to process stuff.
• Full-stack developer: People who do both stuff above!

No matter you choose to be a front-end or a back-end developer it is necessary to know at least some basic stuff about the other field since you should understand how things work to be able to cooperate with other programmers.

Where to start?

Text editors and IDE

What you need to start is an IDE. IDE stands for Integrated Development Environment. They will help you write your codes faster and debug them easier. But the most popular ones are the ones below:

• VSCode (free): https://code.visualstudio.com/
• PhpStorm (paid): https://www.jetbrains.com/phpstorm/

You don't need to get a paid software for now as you are learning so VSCode will best fit your needs.

Front-end

A front-end developer needs to know three essential languages which are HTML, CSS and JavaScript. It is crucial to know these languages since all of them work together to build a user interface for a web application and lack of even one of these won't get you anywhere.

Imagine the relation of these languages as in a body, where HTML is your bones, CSS is your skin and JavaScript is your brain.

HTML is a language and not a programming language. So it doesn't involve logic and operations and is fairly easy to pick up. CSS is the beauty of your page, it is what gives your web page a look and you can dress it as you want. JavaScript will perform the operations in the front-end for you such as making your page dynamic or getting your data back and forth. To start a front-end project what you basically need is a browser to run your codes and that's it! And I'm sure you have one because you are reading this post!

After learning all these you'll feel that there is lots of work to be done in order to get a proper result. And you are right! That's why there are other tools you need to learn which will make it easier for you to design web pages. Here is a list of things you should learn. You won't need to learn all of them and what you actually need is learning only one out of each category below as you prefer personally.

CSS frameworks

CSS frameworks provide you with a default look for your website as well as components to design your website in a more standard way and way more performant.

• Zurb foundation: https://get.foundation/
• Bootstrap: https://getbootstrap.com/
• Bulma: https://bulma.io/
• Semantic UI: https://semantic-ui.com/

CSS pre-processors

CSS pre-processors are a set of tools which will enhance your CSS experience. They will eventually be converted to pure CSS but when you are writing your stylesheets you will have more maneuver power.

• SASS: https://sass-lang.com/ (currently the most popular)
• LESS: http://lesscss.org/
• Stylus: https://stylus-lang.com/

JavaScript frameworks

Working with JavaScript can be overwhelming sometimes since you might need lots of code for a small task. Here is when JavaScript frameworks come in handy and will save you a lot of work.

• Vue.js: https://vuejs.org/
• React: https://reactjs.org/
• Angular: https://angular.io/

Vue.js and React are the most popular ones right now as I am writing. They have a quite simple learning curve. Angular is a pretty advanced framework and is really hard to learn. Angular requires you to know a programming language called TypeScript which is a superset of JavaScript. So I don't recommend you learning Angular if you are just getting started but if you like challenging yourself, you are more than welcome!

I am a Vue developer/lover myself! So if you are interested in knowing more about Vue and other tools available for Vue check out my post below:

These frameworks are known to be modern JavaScript frameworks. There are other frameworks out there which might be outdated and won't get you a job offer probably.

Another honourable mention can be Svelte which is a young framework but it seems like a very useful framework but keep in mind newer technologies might be unstable and the job opportunities might not be as the mature ones.

Back-end

If you are wishing to become a back-end developer you should know two main concepts, back-end programming and databases. A database is where you store the application's data and retrieve it when needed or alter the data. back-end programming gives the power to hide your sensitive data as you don't want everyone to know how your data gets processed. So don't perform important tasks like checking the password of a user in front-end! EVERYONE CAN SEE IT!

I've previously written a full article on how to become a back-end developer. So I link you there!

Git

A super cool tool you need to learn is Git. Git is a version controlling software which will help you store different versions of your code and never lose your back-up. There are free git hosts like GitHub and BitBucket which you can use to store your codes online.

---

I hope you enjoyed this. Tell me about your path and how your career took shape.