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.
- Learn HTML and CSS Correctly – iLoveCoding (71 Free video courses, good for learning step by step)
- HTML Tutorial – W3schools and CSS Tutorial – W3schools (More like documentations, good for experiments)
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.
- An Introduction to JQuery – DigitalOcean Community
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 :
- The Fundamental Concepts of Good UX – Usabilla.com
- A Comprehensive Guide To User Experience (UX) Design – Josephineuba.com
5. Practicing & Experiments
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.
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:
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:
- The Complete Git Guide – Flaviocopes.com (Quick practical tutorial)
- Git Book (Git Official Documentation)
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.
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.
11. Understanding The Fundamental Concept of Programming
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:
- Explaining programming concepts by Kevin Lewis
- Computer programming tutorial – Tutorialspoint (Explained with technical things, but you don’t have to practice it)
12. Learn Modern Javascipt (ES6)
You should learn them gradually.
If you don’t know what is best for you to learn, you can read this post first:
13. Learn Vue.js
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.
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:
For documentation, you can go to Vue official documentation here.
14. Learn React
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 :
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? 🙂