What you should learn to become a good front-end developer?

This article was originally published at: How to be a front-end developer?

Recently, a lot of people ask what they should learn to become a front-end developer. How to learn front-end while there are so many things to learn, everything changes so fast, new technologies, new popular libraries almost once a year. When you start reading articles and news about it, you can feel lost. All these technologies React, Angular, Vue.js, jQuery, Javascript, even Bootstrap are popping up everywhere. And at this point, you probably wonder how and where to start and finally become good at it.
In this article, I’ll try to answer this question, explain to you what front-end developers do on a daily basis and what steps you should take to achieve your goal, what is essential and what not so much.

What is front-end and what front-end developer does?

Front-end is the part of the application which we as users can see and interact with. From a more technical point of view, it’s responsible for collecting data from the user and passing it to back-end and for displaying back-end data to the user. But front-end developer has one more task, he or she needs to implement designers ideas.

So, what skills does the person need to have to be a good front-end developer?

Start with HTML

The first skill (the essential one, really) which you need to have is HTML (HyperText Markup Language), it’s fundamental in front-end development. HTML creates the skeleton of our website or application. It creates blocks, elements like menu, image, text, video, table, inputs, etc. But the good news is that it won’t take a long time to get familiar with it. After about one week of learning and practicing, you will be able to create the first project in HTML. Remember that HTML doesn’t apply colors and all the beauty to your elements. Here comes the next skill you need to have.

Continue with CSS

The next thing which you definitely have to know is CSS(Cascading Style Sheets), it’s going to be with you during all your front-end career, so better get very familiar with it. You are going to use CSS to add your page to some style. With CSS, you can create all the positioning of elements, give them colors, alignment, fonts, sizes, margins, and even some animations. From one point of view, CSS is very easy in the beginning, but when you try to master it, then you will see how many things are hiding behind which you had no idea about. Your approach for CSS should set up that you will learn new tricks during all your life.
Now it’s the time to practice, having HTML and CSS you can create beautiful websites, dashboards, UI or UI elements. The more you will create, the better your knowledge will become.
At this point, it would be nice to take a closer look at UI libraries like Bootstrap or UI Semantic or Foundation. Don’t be afraid; it’s enough to learn one of them to know how to use them all. I would recommend starting from Bootstrap because it is the most popular one and lots of companies use it.
Also at this point is one more thing to mention. You need to find out what is responsive design and media queries because, in 2019, your projects have to be mobile-friendly. Now we can go to the next step.

Go deeper with Javascript

Now let’s start with more serious things. You have to learn Javascript to add more functionality to your website or application. With JS you can add image sliders, forms validation, popups, tooltips and lots of other interactive elements. You can also create a connection to back-end and send data through API calls. Of course, you have to practice a lot when you got the Javascript knowledge. If you face any problems during development, you can always look at the documentation or ask other Javascript community members on any Facebook group, Stackoverflow, or any programming forum.

It seems like that’s it? Unfortunately not, now it would be good to learn some of the modern frameworks for front-end development. Let’s go to the next step.

Use JS frameworks

Lots of steps are already done, co now we can go deeper into modern Javascript frameworks and libraries which may be useful. You may ask why you have to learn frameworks, but the answer it’s pretty easy, it will help you a lot with development. The framework will give you the basic structure, some guidelines, and even some pre-build elements. Besides, almost every company uses any framework so it will be much easier to get your dream job.

There are three most popular front-end frameworks on the market right now: React, Angular and Vue. Let’s take a closer look at them:

ReactJS — it’s a component-based library created by Facebook, it’s an excellent tool for building UI. ReactJS is not very complicated, shouldn’t be if you know Javascript right now, and there is a vast community of developers and tones of sources that you may use to clarify everything you need to know.
If you would like to get familiar with ReactJS take a look at the tutorials we’ve prepared:

• How to create React app in 5 minutes?
• Youtube Tutorial

Angular — it’s a very popular front-end framework from Google and here is one tricky thing, to use Angular you need to update your knowledge and add Typescript (it’s very similar to Javascript, but it’s typed and has some more additional features). Angular also has excellent documentation, lots of resources, and a big community.
If you would like to get familiar with Angular take a look at the tutorials we’ve prepared:

• Build an Angular application
• Youtube Tutorial

Vue.js — it’s a new framework which gained huge popularity, it’s a component-based framework. Creators of Vue.js tried to make it as simple as possible so that it may be the right choice for the beginner. On the other hand, resources to learn are not very big, and the community is small but growing.
Now it’s time for you to select. If you are not sure, maybe it’s a good idea to build a test project with each of them and check which one you feel comfortable with. It might seem like it’s everything you need to know, but there is still one more necessary thing. Let’s go to the last step.

If you would like to get familiar with Vue.js take a look at the tutorials we’ve prepared:

• Build a Vue.js application
• Youtube Tutorial

Finish with Git

The last thing you should learn is git (Version Control System), junior developers often skip it, but almost every company use it, and it’s incredibly useful to know how it works. It’s primarily used for the collaboration of developers on one code. You should start learning git by installing it on your machine. It would be right for you to create your repo on Github or Bitbucket and store there your code. Take a look at the documentation to learn basic commands and find out what is a branch, commit, or code review. It seems like that’s it.

Conclusion

Now you need to create your new resume and start looking for a front-end developer work or start freelancing; the decision is yours.
You have to remember to read programming news and articles to be up-to-date with all the new things in the front-end world, try new technologies, and master your knowledge all the time. Create new projects and try to improve them, avoiding bad coding practices.
I hope this article answered all the most important questions and will help you to achieve your goal.

Good luck with your career!

Thank you for reading,
Anna from Duomly