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
Top comments (28)
You may find this chart useful:
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
The author is github.com/kamranahmedse/developer...
Stunning infographic
Thanks!
It can be a huge help for people who would like to know what is what :)
That is not Front End Boss ! That is Enginery !!!!!!
"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.
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 !!
github.com/kkuchta/css-only-chat/b... An example of a live chat without js
how to do that ?
What do you mean a video chat without js ?
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
It depends on what you consider dynamic. With just HTML and CSS you can do things like: css-components.felipefialho.com/
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.
I feel like git should be learned first that way you can practice using it while you are learning everything else.
Totally agree - that's how I learned and you get so much practice that way. Also you don't have to "unlearn" bad habits!
Very helpful and thorough article! Well done, thank you! 👍
You are welcome, we are glad it's useful for you :)
Nicee.. helpfull.
Thank you, we're glad you like it :)
Thanks for this awesome insights. 🙏🙏
+1 for mentioning git - without git (or similar) you're not a developer as you can't work in a team.
For becoming a better developer:
Become expert at Git
Use best practices
Also, learn programming patterns and algorithms, if possible.
Learning PHP, MySQL and JavaScript with jQuery, CSS & HTML5 is best book to learn Front end development.
computingsavvy.com/books/learning-...
jQuery is for noobs, who can't use vanilla JS.
Some comments may only be visible to logged-in visitors. Sign in to view all comments.