This article was originally published at https://www.devaradise.com/how-to-become-front-end-developer
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.
- 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.
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:
- How to Add Javascript to HTML - DigitalOcean Community
- 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 :
https://www.youtube.com/embed/videoseries?list=PLr6-GrHUlVf_RNxQQkQnEwUiHELmB0fW1
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 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 :
https://www.youtube.com/embed/videoseries?list=PLylMDDjFIp1A3sMkpWwbIsQ8l8bZcIBmC
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.
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:
https://www.youtube.com/embed/videoseries?list=PLC3y8-rFHvwhgWwm5J3KqzX47n7dwWNrq
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:
- 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 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:
- Intro to Javascript
- ES6 - Javascript Improved
- Javascript and the DOM
- Object-oriented Javascript
- Javascript Testing
- JavaScript Design Patterns
- Javascript Promises
- 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:
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.
Good luck!
Top comments (46)
Skip Jquery. Go straight to JS and then VueJs or Alpine
Not like you need to "learn" jQuery, it's just a library of nice functions that help out. If you have to use it, you can always look into the documentation and find the functions you need. From personal experience, there are a few gotchas for edge cases, but that is valid for anything really
I agree. I don't use jQuery anymore. Sure, it's still important to be familiar with it as many projects will be using it for legacy reasons or for quick scripts but I practically get everything else done in Vue now. Since Vue has certain patterns to adhere to, it makes it easier to pick up existing projects that are using vue.
On one hand, I agree, modern JS makes Jquery pretty obsolete. On the other hand, lots of job requirements have it still on for legacy sites.
The point i include JQuery there, is because i believe there is a stage when junior developer need to know how the interactivity in the web works. Some UIs like slider, popup, carousel, etc are easier to create with JQuery. Event bootstrap js is still dependent on JQuery.
Not all developers going straight to develop a web app with modern js frameworks like VueJS, React or Angular. Most of them will create a common website for portfolio, blog or landing page which is more suitable to use jquery than modern frameworks because it's easier to learn and use.
Also stop using Bootstrap, and start using TailwindCSS
Ok. Will update it as alternative
smashingmagazine.com/2020/03/intro...
"....In this article, we’re going to take a closer look at Alpine.js and how it can replace JQuery or larger JavaScript libraries to build interactive websites. If you regularly build sites that require a sprinkling on Javascript to alter the UI based on some user interaction, then this article is for you."
If you're going to do WordPress development jQuery is sort of needed.
good resourse provided by you ! thank man
You're welcome bro..
Bro i have a problem .. I learned html and css. Currently i'm trying to learn flexbox and css grid and its totally mess me and stuck ! Can you please tell me how can I learn css grid effectively or maybe some guide or hint to learn these concept ....
This post from medium might help you.
medium.com/youstart-labs/beginners...
@Hafizur To master Flexbox, I will also recommend this resource:
geddski.teachable.com/p/flexbox-zo...
I helped me understand it by playing a game
This video course is helpful for learning CSS Grid: youtu.be/T-slCsOrLcc
I say have a quick overview of Bootstrap but at this point that framework is really bloated with too many styles and components. Try Bulma instead. It has only the the most common components and styles, uses flexbox, and is modular for those who use SASS. I haven't used Tailwind CSS but I heard some pretty good things; definitely look for small css libraries that get you going quickly with less bloat.
Also, thanks for mentioning Alpine. This sounds interesting. There's also Svelte, as I heard that this is the next framework on the rise.
Lastly, any well rounded front end dev should also consider getting familiar with templating engines (Jinja, Thyme, Blade, Twig, Pug, Handlebars) used in monolithic and micro frameworks as you will likely be working with them in teams that use these frameworks.
Great Post! I would also recommend the self-taught web developers to use this website -> journeytodev.org/, since it has a nice way to capture and track your progress through various stages.
Thanks for recommending it. I already checked it. That's a good resource to help us track our learning progress.
Tysm, it's really worth it.
Great post. In my opinion, i have to keep it real, Vue is simply more easier than react and angular. I am on the come up. I think i will pickup Vue first. Then i will pickup react.
Yes. Vue has the lowest learning curve compared to Angular and React. Good luck with your learning!
Vue is the easiest to use but react in my opinion is more simplified in terms of syntax, assuming you focus on just functional components and only use class components at the top level.
Very insightful. I'm still learning and this is a must reference material. I believe when followed to the letter, a dream to be a software developer can be realised. I have so many newbies who want to start learning web development and my first recommendation has been the freecodecamp.org website. I think you could include it to updated version of this post. Thanks.
Thanks for the recommendation. I will update it later along with the other suggestions in the original post first.
When you just start you career in front-end development you should have skills in CSS + HTML (including CSS libraries like Bootstrap), CSS preprocessors (SASS and LESS), JavaScript and JQuery. But if you want to become middle or senior level specialist you should have stronger technical skills, make your knowledge deeper and you should grow ability to deal with complicated tasks independently.
I agree, good post. But ... you could add some tips about SECURITY , this is so much important. Applications has a lot of security problems becasuse developers don't know nothing about the topic
Thanks for your comment. Yeah, security is important for application. But, i think front end developer has nothing to do with that because it focus on user interface / experience and client side. Security will be a concern if we are going to be a full stack dev. or backend dev. CMIIW
Hi. I disagree. If frontend doesn’t know how to manage cookies. Or use unsanitized content. Etc etc. It is frontend responsability and a security hole.
I love your post, very positive and direct, but I am looking for a front-end developer to help complete a project.
Project: Video streaming web application for interactive features and paid event.
DM if interested.
Love the details!