How to Become A Front-end Developer (A Complete Practical Guide)
Tags: javascript, webdev, css, html
Published: 2020-06-05 06:47:48

![How to become a front-end dev](https://dev-to-uploads.s3.amazonaws.com/i/xhfz9u3hpyazibopmvej.jpg)

This article was originally published at <a href="https://www.devaradise.com/how-to-become-front-end-developer" target="_blank">https://www.devaradise.com/how-to-become-front-end-developer</a>
<!-- wp:paragraph --> 
<p>Front-end Developer, also known as Front-end Engineer is a person who converts designs into working website pages through HTML, CSS, and Javascript so that users can access and interact with that website pages through the browser.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A decade ago, there is no such term as Front-end developer. When someone develop a website, they just called as Web developer.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As the web technology changes rapidly, terms like UI/UX Design, Back-end development, <a href="https://www.devaradise.com/category/front-end-development">Front-end development</a>, DevOps, and so on come up. They classify the roles in web development because being a Full-stack developer (who does everything in a project) getting more difficult.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Being a front-end developer means that you become a bridge between designer and back-end developer. You should understand design and at the same time, you should able to code as well.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>With such huge resources available on the internet, it is quite easy to learn front-end development on your own. But, deciding where do you start to learn or what you should next can be confusing.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>That's why in this post I will show you the track to follow when you decided to become a front-end developer. I also included the best resources I can recommend in almost every step, so you don't have to search for them on your own.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Before going further, keep in mind that to complete all the steps below may take months learning. There are so many resources to learn to become a good front-end developer.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>All you have to do is stay focused and have patience.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Mastering the Basics, Designing A Website</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>At this stage, you should be able to design a simple working website. You will learn the basic things to build a website, from the concept to technical things.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>1. Understanding How the Web Works and Its Terms</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>First thing first, you should understand how the web works. Well, it may sound trivial but before you go to the technical things, you should understand what is the concept behind it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Wrong understanding of how the web works and its terms may slowing you when you learn the technical things. So, here are some resources that you can read to broaden your understanding of the web.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer noopener" href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works" target="_blank">How web works (MDN Web Docs)</a></li><li><a href="https://www.tutorialspoint.com/web_developers_guide/web_basic_concepts.htm" rel="nofollow noopener noreferrer" target="_blank">Web - Basic concepts (Tutorial Points)</a></li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>2. Learn HTML &amp; CSS</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>HTML stands for Hypertext Markup Language. It is a Markup Language to create and arrange contents of the web such as headings, paragraphs, images and other contents.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>CSS stands for Cascading Style Sheets. It is a Presentation Language to style the appearance and layout of contents that are made by HTML. You can set font style, color, position, padding, margin, and much more by CSS.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>These two languages are independent but interrelated to one another in building a website. 99% (if not 100%) of websites on the internet built on these languages.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you're wondering how HTML and CSS look like, you can press <strong>CTRL+Shift+i</strong> or <strong>F2</strong> right know here. Choose the <strong>Element </strong>tab and you will see them, HTML on the left side and CSS on the right side.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, where you should learn HTML and CSS ?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here are some resources to learn HTML and CSS.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer noopener" href="https://ilovecoding.org/courses/htmlcss2" target="_blank">Learn HTML and CSS Correctly - iLoveCoding</a> (71 Free video courses, good for learning step by step)</li><li><a href="https://www.w3schools.com/html/">HTML Tutorial - W3schools</a> and <a rel="noreferrer noopener" href="https://www.w3schools.com/css/" target="_blank">CSS Tutorial - W3schools</a> (More like documentations, good for experiments)</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>To complete the course, you will need around 1 - 2 weeks (or faster) by assuming you learn them constantly.<strong> Do not jump</strong> to the next step if you don't complete this step yet. Learning needs patience.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>3. Learn to Use Javascript &amp; Jquery</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In this step, I don't expect you to master Javascript at once because you will learn more about it later in step 10. You just have to understand what it is and how to use it along with HTML &amp; CSS on the web.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The main goal of this step is that you can create a website with functionality and dynamic contents by Javascript, specifically by using JQuery.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Javascript is a programming language used to add functionality, interactivity, automation, dynamic contents, and more on the website. Javascript does what HTML &amp; CSS can not do.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>JQuery is the most popular Javascript library to make writing common Javascript tasks more concise.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To use Javascript and JQuery, you can read the tutorials below:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer nofollow noopener" href="https://www.digitalocean.com/community/tutorials/how-to-add-javascript-to-html" target="_blank">How to Add Javascript to HTML - DigitalOcean Community</a></li><li><a href="https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery" rel="nofollow">An Introduction to JQuery - DigitalOcean Community</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Those tutorials are only for introductions. For documentations, you can go to:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://www.w3schools.com/js/default.asp">Javascript Tutorials - W3Schools</a></li><li><a href="https://www.w3schools.com/jquery/default.asp">Jquery Tutorials - W3schools</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>For the complete video tutorials, you can watch this video playlist from youtube :</p>
<!-- /wp:paragraph -->

https://www.youtube.com/embed/videoseries?list=PLr6-GrHUlVf_RNxQQkQnEwUiHELmB0fW1

<!-- wp:heading {"level":3} -->
<h3>4. Basic Understanding of UI/UX concept for Web</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I have mentioned before that front-end developers are the bridge between designer and back-end developer. So, you aren't only expected to be able to code, but you should understand the UI/UX (User Interface / User Experience) Concept as well.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This is not technical skill, but by understanding it you will have the value added to your website, especially when there is no designer in your team.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To understand UX fundamentals, you can start by reading the articles below :</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer nofollow noopener" href="https://usabilla.com/blog/fundamental-concepts-ux/" target="_blank">The Fundamental Concepts of Good UX - Usabilla.com</a></li><li><a href="https://josephineuba.com/a-comprehensive-guide-to-user-experience-ux-design/" target="_blank" rel="noreferrer nofollow noopener">A Comprehensive Guide To User Experience (UX) Design - Josephineuba.com</a></li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>5. Practicing &amp; Experiments</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You already learned about HTML, CSS, and Javascript/JQuery, but <strong>you don't master them yet</strong>. You can only master them when you have the real websites made. This is your time to create your portfolios.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You may have completed the courses and tutorials in a month, but practicing in HTML, CSS, and JQuery will take you at least 2 months constantly to make you a front-end developer.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There is no stop at this step since you should also practice for the upcoming steps.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For starter, I challenge you to create a one-page personal website <a rel="noreferrer noopener" href="https://www.devaradise.com/about-syakir" target="_blank">like this</a>. For other experiments and inspirations, you can go to these websites where front-end developers hangout :</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer nofollow noopener" href="https://codepen.io/" target="_blank">Codepen.io</a></li><li><a rel="noreferrer nofollow noopener" href="https://tympanus.net/codrops/" target="_blank">Codrops</a></li></ul>
<!-- /wp:list -->

<!-- wp:heading -->
<h2>Using Front-end Tools &amp; Frameworks</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>At this stage, you will use some front-end frameworks and tools to help you build your website. Using them in your project will speed up your web development process because they can automate common tasks in web development for you.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>6. Learn CSS Framework (Bootstrap)</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you get here after completed steps 1 - 5, you should have built some website portfolios for sure. You may start to get used to coding a website.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Since you already mastered the basics, now you will level up to the point when you can code more effective and efficient. By using CSS framework on your project, you will increase your productivity on building websites.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Simply put, a CSS Framework is a bunch of CSS codes that you can use them in your project. By including a CSS framework in your project, you can make your website looks nice and proper even if you don't write your own CSS code. Just put some <em>classes </em>in your <em>divs </em>which a CSS framework has styled them for you.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this step, you will learn to use Bootstrap since it is the most popular CSS framework on the web. Well, actually Bootstrap is not just a CSS framework as it also has its own javascript code used in its components.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To learn Bootstrap, you can go directly to Bootstrap documentation website :</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer noopener" href="https://getbootstrap.com" target="_blank">Bootstrap Official Documentation</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>For practical guides, you can watch the youtube video playlist below :</p>
<!-- /wp:paragraph -->
https://www.youtube.com/embed/videoseries?list=PLylMDDjFIp1A3sMkpWwbIsQ8l8bZcIBmC

<!-- wp:html -->
<iframe width="100%" height="315" src="https://www.youtube.com/embed/videoseries?list=PLylMDDjFIp1A3sMkpWwbIsQ8l8bZcIBmC" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<!-- /wp:html -->

<!-- wp:heading {"level":3} -->
<h3>7. Using CSS Pre-processor (SASS and LESS)</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Your website project is getting bigger, complex, and has a lot of pages. You have to write more CSS codes. You may often reuse some CSS styles on different pages by copy-pasting it. In the end, your CSS codes will be messy. You also want to write less code because too many pages stressed you out.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Well, if that is what happened to you, then it is time for you to use CSS Pre-processor. Simply put, CSS Pre-processor is a tool that lets you generate CSS codes with its own syntax.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It has some features such as <em>nesting</em>, <em>variable</em>, and <em>mixin</em> that lets you create reusable CSS codes. Most of CSS Pre-processors syntax is very similar to CSS. You will have no difficulty learning it since it more like a concise version of CSS.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>There are many CSS Pre-processor to choose from. SASS and LESS are the most popular of them. Their syntax is also very similar to each other.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To get started with SASS or LESS, you can read the articles below :</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer nofollow noopener" href="https://scotch.io/tutorials/getting-started-with-sass" target="_blank">Getting started with SASS - Scotch.io</a></li><li><a href="https://www.hongkiat.com/blog/less-basic/" target="_blank" rel="noreferrer nofollow noopener">LESS CSS - Beginner's Guide - Hongkiat</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>And, for a practical example of using SASS, you can watch the youtube video below. In this video, the author uses VSCode extension to compile SASS to CSS.</p>
<!-- /wp:paragraph -->

{% youtube Zz6eOVaaelI %}

<!-- wp:paragraph -->
<p>You can search other videos on youtube if you prefer to use LESS instead. Just search "Getting started with LESS".</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>8. Using Versioning Control (Git)</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Versioning control is another useful tool to help you manage files and changes in any kind of software development project. So, it's not just for web development.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The benefit of versioning control will be realized when you are collaborating with other programmers in a project or when you have to split your project into different versions.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Currently, The most used versioning control for software development is Git. Git is&nbsp;a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Git is different from Github. While Git is a software, Github is a popular website where you can showcase or upload your Git repository there.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To get started with Git, you can go to the links below:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer nofollow noopener" href="https://flaviocopes.com/git/" target="_blank">The Complete Git Guide - Flaviocopes.com</a> (Quick practical tutorial)</li><li><a rel="noreferrer nofollow noopener" href="https://git-scm.com/book/en/v2" target="_blank">Git Book</a> (Git Official Documentation)</li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>If you prefer to learn Git through video, you can watch this video from youtube:</p>
<!-- /wp:paragraph -->

{% youtube SWYqp7iY_Tc %}

<!-- wp:heading {"level":3} -->
<h3>9. Using Package Manager (NPM)</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A package manager is a software development tool that helps programmers to easily import or add external libraries or dependencies for a project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Before using a package manager, you will notice that every time you need an external library like <em>JQuery</em> or a framework like <em>Bootstrap</em>, you will download and include it manually to your project.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>That is okay until you work on a project that needs a huge collection of libraries. You can't download and include it manually anymore because it is not efficient. That's why you need a package manager to automate this for you.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In front-end development, the most popular package manager is NPM (Node Package Manager). NPM is the default package manager for the JavaScript runtime environment Node.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The packages for NPM are stored in <a href="https://www.npmjs.com/" target="_blank" rel="nofollow noopener noreferrer">npmjs.com</a>. To getting started with NPM, you can read the tutorial below:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer nofollow noopener" href="https://www.impressivewebs.com/npm-for-beginners-a-guide-for-front-end-developers/" target="_blank">NPM for Beginners: A Guide for Front-end Developers</a></li><li><a rel="noreferrer nofollow noopener" href="https://css-irl.info/a-modern-front-end-workflow-part-1/" target="_blank">Building a Project Starter with NPM Script</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>If you prefer to learn by video, you can watch this video playlist from youtube:</p>
<!-- /wp:paragraph -->

https://www.youtube.com/embed/videoseries?list=PLC3y8-rFHvwhgWwm5J3KqzX47n7dwWNrq


<!-- wp:heading {"level":3} -->
<h3>10. Using Task Runner / Build Tools (Gulp)</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before going further, you have to make sure that your web development project was initialized by NPM (step 9). A task runner will be included in your NPM project as a dev dependency.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A task runner is an automation tool that helps you run the common task in web development like compile SASS or LESS to CSS, minify HTML / CSS / JS, optimizing assets, and running a web server.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>By using a task runner, you can optimize your code for production so it can boost the performance.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To get started with Gulp task runner, you can read the CSS-tricks article by Zell Liew below:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer nofollow noopener" href="https://css-tricks.com/gulp-for-beginners/" target="_blank">Gulp for Beginners - CSS-Tricks</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>For the video tutorial, you can watch this video from youtube:</p>
<!-- /wp:paragraph -->

{% youtube 1rw9MfIleEg %}

<!-- wp:paragraph -->
<p>If you need a reference on how to structure Gulp task in a real project, you can have a look at my <a rel="noreferrer noopener" href="https://github.com/syakirurahman/gulp-starterkit" target="_blank">Gulp-starter repository on Github</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>More in Javascript</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>At this stage, you will learn the fundamental of Javascript programming language as preparation before using a Javascript framework.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>11. Understanding The Fundamental Concept of Programming</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>After going through steps 1 to 10, you may feel that you already become a real programmer. Well, you don't really do because what you learned before are mostly Markup language (HTML) and Presentation Language (CSS). You just know a little about javascript.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>That's why you will learn about that now. But, before you learn the technical things, as usual, I would recommend you to read the concept first about the programming languages.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can start by reading these articles:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer nofollow noopener" href="https://medium.com/@_phzn/explaining-programming-concepts-46cc7c995059" target="_blank">Explaining programming concepts</a> by Kevin Lewis</li><li><a rel="noreferrer nofollow noopener" href="https://www.tutorialspoint.com/computer_programming/index.htm" target="_blank">Computer programming tutorial - Tutorialspoint</a> (Explained with technical things, but you don't have to practice it)</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>12. Learn Modern Javascipt (ES6)</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>You have learned a little bit about javascript before. Now, it is time for you to learn it as a whole. This time, you won't just learn through articles or some youtube videos because there are so many lessons to learn.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Without further ado, here is the list of free comprehensive javascript courses from Udacity:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li><a rel="noreferrer nofollow noopener" href="https://www.udacity.com/course/intro-to-javascript--ud803" target="_blank">Intro to Javascript</a></li><li><a rel="noreferrer nofollow noopener" href="https://www.udacity.com/course/es6-javascript-improved--ud356" target="_blank">ES6 - Javascript Improved</a></li><li><a rel="noreferrer nofollow noopener" href="https://www.udacity.com/course/javascript-and-the-dom--ud117" target="_blank">Javascript and the DOM</a></li><li><a rel="noreferrer nofollow noopener" href="https://www.udacity.com/course/object-oriented-javascript--ud711" target="_blank">Object-oriented Javascript</a></li><li><a rel="noreferrer nofollow noopener" href="https://www.udacity.com/course/javascript-testing--ud549" target="_blank">Javascript Testing</a></li><li><a rel="noreferrer nofollow noopener" href="https://www.udacity.com/course/javascript-design-patterns--ud989" target="_blank">JavaScript Design Patterns</a></li><li><a rel="noreferrer nofollow noopener" href="https://www.udacity.com/course/javascript-promises--ud898" target="_blank">Javascript Promises</a></li><li><a rel="noreferrer nofollow noopener" href="https://www.udacity.com/course/asynchronous-javascript-requests--ud109" target="_blank">Asynchronous Javascript</a></li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>You should learn them gradually.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This course list is summarized from the article <a rel="noreferrer nofollow noopener" href="https://medium.com/@berkancetinkaya/roadmap-learn-modern-javascript-with-udacity-297b99033b0c" target="_blank">[Roadmap] Learn Modern Javascript With Udacity</a> written by Berkan Cetinkaya in Medium. Thanks to him I can find the complete free course list there.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Dive into Javascript Frameworks for Web application</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>At this stage, you will learn a Javascript framework. You don't have to learn all of the frameworks listed. Just pick one of them, and focus on it until you master it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you don't know what is best for you to learn, you can read this post first:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://levelup.gitconnected.com/angular-vs-react-vs-vue-which-is-the-best-choice-for-2020-81f577697c7e" target="_blank" rel="noreferrer nofollow noopener">Angular vs React vs Vue: Which Is the Best Choice for 2020?</a></li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>13. Learn Vue.js</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Vue.js (commonly referred to as Vue - pronounced like <em>view</em>) is an open-source progressive javascript framework for building User interfaces and Single page applications.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Compared to React and Angular, Vue is the youngest yet most potent member of the Javascript Framework community which was released by the ex-engineer of Google — Evan You.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Alibaba, Netflix, Adobe and Gitlab are some big companies that use Vue.js.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To learn Vue.js, you can follow the free comprehensive course from Vuemastery below:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><li><a href="https://www.vuemastery.com/courses-path/beginner" target="_blank" rel="noreferrer nofollow noopener">Vue Beginner Path</a></li><li><a href="https://www.vuemastery.com/courses-path/intermediate" target="_blank" rel="noreferrer nofollow noopener">Vue Intermediate Path</a></li><li><a href="https://www.vuemastery.com/courses-path/advanced" target="_blank" rel="noreferrer nofollow noopener">Vue Advanced Path</a></li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>For documentation, you can go to <a rel="noreferrer nofollow noopener" href="https://vuejs.org/v2/guide/" target="_blank">Vue official documentation here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>14. Learn React</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>React is one of the most popular Javascript libraries for building User Interfaces. It is launched and maintained by Facebook and the community since 2013. React is used to build a single page application by implementing virtual DOM.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Facebook, Instagram, and Newyork Times are some brands that using React for their web application.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For React resources, I don't find any complete free course like Vue. So, what I can recommend is a paid course from Udacity below:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://imp.i115008.net/Avq01" target="_blank" rel="noreferrer nofollow noopener">Become a React Developer</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>However, if you're not ready for a paid course, you can always google 'Getting started with react' for free tutorials.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>15. Learn Angular</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Angular is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Compared to React and Vue, Angular has the steep learning curve for beginners because it built based on Typescript (so you have to learn it first), and many features to learn.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Due to rich of features and its architecture, Angular is suitable for a large and complex web application.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Gmail, Youtube TV, Microsoft office, and Xbox are some big brands that use Angular in their web application.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To learn Angular, you can follow the free complete course in Angular University below :</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a rel="noreferrer nofollow noopener" href="https://angular-university.io/course/getting-started-with-angular2" target="_blank">Angular for Beginners</a></li><li><a rel="noreferrer nofollow noopener" href="https://angular-university.io/course/typescript-2-tutorial" target="_blank">The Complete Typescript Course</a></li></ul>
<!-- /wp:list -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">~~</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now, you already know where you can learn to become a front-end developer. It won't take days or weeks to become a front-end developer, but months or maybe years.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>All of the collected resources above will be <strong>useless </strong>if you just read, and then forget it. You have to be patient to learn it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So, from now on, I hope you don't have any excuses anymore to learn front-end development because I have shown you the learning path. Most of the resources above are even <strong>FREE</strong>.</p>
<!-- /wp:paragraph -->

Good luck!