Front-end Guides

How to Become a Front-end Developer 2020 (A Complete Practical Guide)

Muhammad Syakirurohman
Frontend Engineer
Published on
How to Become a Front-end Developer 2020 (A Complete Practical Guide)

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.

A decade ago, there is no such term as Front-end developer. When someone develop a website, they just called as Web developer.

As the web technology changes rapidly, terms like UI/UX Design, Back-end development, Front-end development, 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.

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.

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.

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.

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.

All you have to do is stay focused and have patience.

Mastering the Basics, Designing A Website

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.

1. Understanding How the Web Works and Its Terms

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.

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.

2. Learn HTML & CSS

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.

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.

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.

If you’re wondering how HTML and CSS look like, you can press CTRL+Shift+i or F2 right know here. Choose the Element tab and you will see them, HTML on the left side and CSS on the right side.

Now, where you should learn HTML and CSS ?

Here are some resources to learn HTML and CSS.

To complete the course, you will need around 1 - 2 weeks (or faster) by assuming you learn them constantly. Do not jump to the next step if you don’t complete this step yet. Learning needs patience.

3. Learn to Use Javascript & Jquery

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 & CSS on the web.

The main goal of this step is that you can create a website with functionality and dynamic contents by Javascript, specifically by using JQuery.

Javascript is a programming language used to add functionality, interactivity, automation, dynamic contents, and more on the website. Javascript does what HTML & CSS can not do.

JQuery is the most popular Javascript library to make writing common Javascript tasks more concise.

To use Javascript and JQuery, you can read the tutorials below:

Those tutorials are only for introductions. For documentations, you can go to:

For the complete video tutorials, you can watch this video playlist from youtube :

3a. JQuery Alternative

When this post got weekly trending in DEV community, I got some suggestions that we should skip learning Jquery in 2020 as it begins to get abandoned by developers.

Well, JQuery is not as popular as before indeed. Its popularity decreasing, and developers start to use modern JS frameworks and other alternatives.

However, Jquery is still widely used and become a dependency on some frameworks. Bootstrap is one of them.

So, instead of skipping JQuery, I prefer to give you options of what to learn. One of the alternatives for JQuery is Alpine.js. But, Alpine.js is less than a year old when this post was written.

According to a SmashingMagazine article (which i included in resources section):

Alpine.js is a fraction of the size of these frameworks (_jQuery, Bootstrap, Vue.js or React__) _because it involves no build steps and provides all of the tools you need to build a basic user interface.

Since Alpine.js is a newborn library, I still suggest you learn Jquery, before learning Alpine.js.

I know, you will have more learning list. But, don’t stress out by this. You can learn Alpine.js later while waiting at how Alpine.js prospects since it’s still new and has small industry.

Here are the resources to learn Alpine.js.

There is no comprehensive video tutorial yet for Alpine.js.

4. Basic Understanding of UI/UX concept for Web

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.

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.

To understand UX fundamentals, you can start by reading the articles below :

5. Practicing & Experiments

You already learned about HTML, CSS, and Javascript/JQuery, but you don’t master them yet. You can only master them when you have the real websites made. This is your time to create your portfolios.

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.

There is no stop at this step since you should also practice for the upcoming steps.

For starter, I challenge you to create a one-page personal website like this. For other experiments and inspirations, you can go to these websites where front-end developers hangout :

Using Front-end Tools & Frameworks

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.

6. Learn CSS Framework (Bootstrap)

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.

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.

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 classes in your divs which a CSS framework has styled them for you.

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.

To learn Bootstrap, you can go directly to Bootstrap documentation website :

For practical guides, you can watch the youtube video playlist below :

6a. Bootstrap Alternative (Tailwind CSS)

If there is Alpine.js for Jquery alternative, then there is Tailwind CSS for Bootstrap alternative.

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

- tailwindcss official

Unlike the most CSS frameworks, Tailwind CSS does not come with a predesigned components that often should be overriden in your project.

It is highly customizable and has a small bundle size compared to Bootstrap or other CSS frameworks.

To learn Tailwind CSS, you can go to the resources below:

https://www.youtube.com/watch?v=UBOj6rqRUME

7. Using CSS Pre-processor (SASS and LESS)

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.

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.

It has some features such as nesting, variable, and mixin 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.

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.

To get started with SASS or LESS, you can read the articles below :

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.

You can search other videos on youtube if you prefer to use LESS instead. Just search “Getting started with LESS”.

8. Using Versioning Control (Git)

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.

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.

Currently, The most used versioning control for software development is Git. Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.

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.

To get started with Git, you can go to the links below:

If you prefer to learn Git through video, you can watch this video from youtube:

9. Using Package Manager (NPM)

A package manager is a software development tool that helps programmers to easily import or add external libraries or dependencies for a project.

Before using a package manager, you will notice that every time you need an external library like JQuery or a framework like Bootstrap, you will download and include it manually to your project.

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.

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.

The packages for NPM are stored in npmjs.com. To getting started with NPM, you can read the tutorial below:

If you prefer to learn by video, you can watch this video playlist from youtube:

10. Using Task Runner / Build Tools (Gulp)

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.

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.

By using a task runner, you can optimize your code for production so it can boost the performance.

To get started with Gulp task runner, you can read the CSS-tricks article by Zell Liew below:

For the video tutorial, you can watch this video from youtube:

If you need a reference on how to structure Gulp task in a real project, you can have a look at my Gulp-starter repository on Github.

More in Javascript

At this stage, you will learn the fundamental of Javascript programming language as preparation before using a Javascript framework.

11. Understanding The Fundamental Concept of Programming

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.

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.

You can start by reading these articles:

12. Learn Modern Javascipt (ES6)

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.

Without further ado, here is the list of free comprehensive javascript courses from Udacity:

  1. Intro to Javascript
  2. ES6 - Javascript Improved
  3. Javascript and the DOM
  4. Object-oriented Javascript
  5. Javascript Testing
  6. JavaScript Design Patterns
  7. Javascript Promises
  8. Asynchronous Javascript

You should learn them gradually.

This course list is summarized from the article [Roadmap] Learn Modern Javascript With Udacity written by Berkan Cetinkaya in Medium. Thanks to him I can find the complete free course list there.

Dive into Javascript Frameworks for Web application

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.

If you don’t know what is best for you to learn, you can read this post first:

13. Learn Vue.js

Vue.js (commonly referred to as Vue - pronounced like view) is an open-source progressive javascript framework for building User interfaces and Single page applications.

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.

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.

Alibaba, Netflix, Adobe and Gitlab are some big companies that use Vue.js.

To learn Vue.js, you can follow the free comprehensive course from Vuemastery below:

  1. Vue Beginner Path
  2. Vue Intermediate Path
  3. Vue Advanced Path

For documentation, you can go to Vue official documentation here.

14. Learn React

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.

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.

Facebook, Instagram, and Newyork Times are some brands that using React for their web application.

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:

However, if you’re not ready for a paid course, you can always google ‘Getting started with react’ for free tutorials.

15. Learn Angular

Angular is an open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.

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.

Due to rich of features and its architecture, Angular is suitable for a large and complex web application.

Gmail, Youtube TV, Microsoft office, and Xbox are some big brands that use Angular in their web application.

To learn Angular, you can follow the free complete course in Angular University below :

~~

Conclusion

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.

All of the collected resources above will be useless if you just read, and then forget it. You have to be patient to learn it.

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 FREE.

Do you have a second?

It takes me more almost 3 working days to write and collect the resources in this post. But, It only takes a second to share this post.

So, would you mind sharing this post by clicking one of the share buttons on the left side (or bottom in mobile device) to appreciate my work? :)

Thank you.