loading...
Cover image for What you should learn to become a good front-end developer?

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

duomly profile image Duomly Originally published at blog.duomly.com Updated on ・6 min read

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?

Duomly - Programming Online Courses

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:

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:

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:

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!


Duomly - Programming Online Courses

Thank you for reading,
Anna from Duomly

Discussion

pic
Editor guide
Collapse
brownio profile image
Antonio Djigo

You may find this chart useful:
Front-end chart

Collapse
avasconcelos114 profile image
Andre Vasconcelos

This chart alone is worth 100 of these articles

Learning some HTML + CSS + Javascript and a JS framework won't make you a good front-end developer.

Knowing the ecosystem and all the tools available to you (be it for working with version control, making API calls to a backend server, unit testing, static site generators, enhancing performance with server-side rendering or lazy loading assets) are what would make you stand out from the rest.

Doing what the article above tells you just gets you a seat on the table

Collapse
brownio profile image
Collapse
uptoeleven profile image
Simon Brown

Stunning infographic

Collapse
duomly profile image
Duomly Author

Thanks!
It can be a huge help for people who would like to know what is what :)

Collapse
sorindezzy profile image
Raita Dezideriu

That is not Front End Boss ! That is Enginery !!!!!!

Collapse
merri profile image
Vesa Piittinen

"Now let’s start with more serious things."

I have to throw critique on this. The above statement causes the misconception that HTML or CSS would be somehow inferior to JavaScript. This is not true: you can do entire sites perfectly fine without JavaScript.

You only need JavaScript to enhance user experience, to provide dynamic changes that are not possible via HTML or CSS alone. Before going all-in with JavaScript you should make sure you know what can be done with HTML and CSS. Otherwise you may end up reinventing the wheel in JavaScript, but do it worse.

I would also point out the need to learn about accessibility (A11Y): what you make is not limited to only touch mobile phones or mouse controlled computers! Some people can't physically use a mouse, some other have issues with vision, some can't see at all. This means things like keyboard usability and making sites that don't break with increased default font size is also important.

Collapse
sorindezzy profile image
Raita Dezideriu

What you just said is = 0 because html and CSS is just for Statics websites or else JS is for Dynamic website end exactly what we looking for ! You not gone tell me that html and css does Dynamic to !!

Collapse
chico1992 profile image
chico1992

github.com/kkuchta/css-only-chat/b... An example of a live chat without js

Thread Thread
sorindezzy profile image
Raita Dezideriu

how to do that ?

Thread Thread
sorindezzy profile image
Raita Dezideriu

What do you mean a video chat without js ?

Thread Thread
chico1992 profile image
chico1992

It’s not a video chat and how it works you should reed the readme of the repo then the author does a better job of explaining as I ever could

Collapse
ericgruby01 profile image
Eric Gruby

It depends on what you consider dynamic. With just HTML and CSS you can do things like: css-components.felipefialho.com/

Collapse
nickyoung profile image
Nick Young

I feel like git should be learned first that way you can practice using it while you are learning everything else.

Collapse
s_aitchison profile image
Suzanne Aitchison (she/her)

Totally agree - that's how I learned and you get so much practice that way. Also you don't have to "unlearn" bad habits!

Collapse
nachtfunke profile image
Thomas Semmler

The first thing you need to learn is that organisations and individuals will pry on your believing that you don't know enough / are not good enough. Any article that tries to tell you need to become better will probably try to get money from you, promising to make you improve upon exactly that. And you need to understand that even a free course is most probably not free, because your e-mail address is worth something, your attention is worth something. You are still paying.

Just keep making websites, that is all you truly need to do to become a better frontend developer. Keep wanting to try out new things, keep breaking technology and keep asking questions to start conversations.

Collapse
peacefullatom profile image
Yuriy Markov

Very helpful and thorough article! Well done, thank you! 👍

Collapse
duomly profile image
Duomly Author

You are welcome, we are glad it's useful for you :)

Collapse
geeayallah profile image
Gee Daniel Ayallah Yallah II

Thanks for this awesome insights. 🙏🙏

Collapse
ajaymarathe profile image
Ajay Marathe

Nicee.. helpfull.

Collapse
duomly profile image
Duomly Author

Thank you, we're glad you like it :)

Collapse
uptoeleven profile image
Simon Brown

+1 for mentioning git - without git (or similar) you're not a developer as you can't work in a team.

Collapse
muhammadwasif profile image
Muhammad Wasif

For becoming a better developer:
Become expert at Git
Use best practices
Also, learn programming patterns and algorithms, if possible.

Collapse
jorgecc profile image
Jorge Castro

How to kill SEO: Build a site generated by javascript.

Google's bot could read a site generated by javascript but only at the "second wave" (if any).

Collapse
duomly profile image
Duomly Author

Thanks for your input, but it’s not really true, you can use pre-render or SSR, and google will see normal HTML source :)

Collapse
jorgecc profile image
Jorge Castro

While it is possible to do SSR but it is exactly the same as to use another language, with the difference is Javascript is horrible at it and it is not as popular.

Collapse
computingsavvy profile image
Computing Savvy

Learning PHP, MySQL and JavaScript with jQuery, CSS & HTML5 is best book to learn Front end development.
computingsavvy.com/books/learning-...

Collapse
webcoderkz profile image
Alexander Kim

jQuery is for noobs, who can't use vanilla JS.

Collapse
andreipavel0 profile image
Andrei Pavel

Anyone dissapointed Flutter isn't even mentioned?

Collapse
duomly profile image
Duomly Author

It’s a good point, thanks!