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.
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.
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.
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:
You don't need to get a paid software for now as you are learning so VSCode will best fit your needs.
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 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 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/
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:
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.
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!
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.