DEV Community

Cover image for How to Become a Pro 😎 Front End Developer💻
ThemeSelection for ThemeSelection

Posted on • Updated on

How to Become a Pro 😎 Front End Developer💻

Are you a starting frontend developer's journey? Then this guide is for you. You'll get to know all the essential aspects and steps.🤩

What Is a Front-End Developer?

Generally, a front-end web developer executes web designs through coding languages like HTML, CSS, and JavaScript, which run on the Open Web Platform or act as compilation input for non-web platform environments (i.e., React Native). In a way, a front-end web developer is responsible for implementing visual elements that users see and interact with within a web application.

But that's not the scene anymore. Nowadays front-end developers are not limited to specific. You can see their work everywhere—in the navigation, layouts, and even the way that a site looks different from your phone (thanks to mobile-first or responsive design).

Now, let's head to the roadmap first.

Alt Text

Below is the chart demonstrating the paths that you can take to become a pro frontend developer. This chart is made by Kamran Ahmed. Kamran’s work is excellent so be sure to star the repo and subscribe to his newsletter to support his efforts.

Note: This roadmap will give you an idea about the landscape and guide you if you are confused about where to begin or what to learn next. In the end, it depends on your experience as you will grow some understanding of why one tool is better suited for some cases than the other one. It is not necessary that handy and trendy one is always perfect. So, go through the map and start developing.


Sneat Bootstrap 5 HTML Admin Template
Sneat is an impressive Bootstrap Admin that provides you with 7 useful applications which enable you to get started and build your applications faster.


Roadmap to become a front end developer:


Roadmap to become a pro frontend developerRoadmap to become a pro frontend developerRoadmap to become a pro frontend developer

If you think the roadmap can be improved, please do open a PR with any updates and submit any issues on Kamran's GitHub repo.

Now, here we go in detail.

  1. Internet and how it works?
  2. Basic: HTML,CSS & JS
  3. General Development Skil
  4. Styling: CSS Preprocessor & Architecture
  5. Get familiar with the tools
  6. CSS Frameworks
  7. Front-end Framework
  8. Testing your app
  9. Server-Side Rendering
  10. Static Site Generator
  11. Mobile Application
  12. Desktop Application
  13. Web Assembly
  14. Keep Learning

Resources

1. Internet and how it works?

As we all know, the Internet is ruling the world. So, it is important to know the basics of the internet and how it works as it is the key knowledge that every developer should have.

Internet is a global network of computers connected to each other which communicates through a standardized set of protocols.

i. HTTP: Standard protocol using which the webpages are transferred over the internet.

You can check some detailed blogs here.

ii. Browsers: A software application for accessing the information on the World Wide Web.

iii. Domain name

  • A domain name is an identification string that defines a realm of administrative autonomy, authority, or control within the Internet. They are used to identify one or more IP addresses

  • For further details check this article on How to register a domain name for your website.

iv. Web Hosting

  • Web hosting is a service provided by companies (the web host) that sell or lease space on a server where you store the files that make your website accessible on the internet.

  • For detailed information on web hosting you can check this article on What is Web Hosting

v. DNS (Domain Name System): One of the fundamental blocks of the internet


Have a look at the Materio Bootstrap 5 HTML Admin Template

Materio Bootstrap HTML Admin template

This is the best Bootstrap Admin Dashboard for developing responsive web apps.

2. Basics: HTML, CSS & JS

Front end web developers use three primary coding languages to code the website and web app designs created by web designers:

  • HTML
  • CSS
  • JavaScript

i. HTML: First pillar & the most important skill for web developers as it provides the structure for a web page.

  • Learn the basics of HTML
  • Make a few pages as an exercise

You can check Tutorial For HTML.

ii. CSS: Second pillar of web development and used to style web pages so that they look good.

  • Learn the basics of CSS Style pages from the previous step
  • Build a page with grid and flexbox

You can check Tutorial For CSS.

iii. JS Basics: Third pillar of web development and used to make your web pages interactive.

  • Get familiar with the syntax Learn basic operations on DOM
  • Learn mechanisms typical for JS (Hoisting, Event Bubbling, Prototyping)
  • Make some AJAX (XHR) calls Learn new features (ECMA Script 6+)
  • Additionally, get familiar with the jQuery library

You can check tutorials for JavaScript

3. General Development Skills

Following are some skills you will require as by learning these skills you'll be able to start your journey of a front-end developer with ease.

  • Learn GIT, create a few repositories on GitHub, share your code with other people
  • Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS)
  • Don't be afraid of using Google, Power Searching with Google
  • Get familiar with the terminal, configure your shell (bash, zsh, fish)
  • Read a few books about algorithms and data structures
  • Read a few books about design patterns.
  • Git and Version Control

Git is the tool used to save code and create different versions, allowing you to collaborate with other developers. The top place to store code and collaborate on open source software is GitHub.

Here is an awesome article for Skiils to become a Front End Developer.

4. Styling: CSS Preprocessor & Architecture

i. CSS Preprocessor

A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. preprocessors can make CSS code more organized.

-Sass/CSS
-PostCSS
-Less
-Stylus

ii. CSS Architecture

-BEM
-CSS Modules
-Atomic
-OOCSS
-SMACSS
-SUITCSS

The following are some good articles on CSS Architecture, that you might find helpful.

-CSS Architecture
-CSS Modular Architecture
-Styling Modern Web Apps

iii. CSS in JS

CSS-in-JS is a collection of ideas to solve complex problems with CSS. It is NOT a particular library, but different libs might solve a different subset of problems and use different approaches, depending on their implementation details.

-Styled Components
-Radium
-Emotion
-JSS
-Aphrodite

You should go through the article What actually is CSS inJS. It'll help you to understand it in a better way.

5. Get familiar with the tools that you will be using.

To become a frontend developer, you should spend some time on learning tools that you will use as a web developer like built tools, unit testing tools, debugging tools, etc.

Well, users are going to interact with your websites through a web browser. The way your site is rendered by these browsers is going to be a big part of whether your work is successful or not. So, it'll be great to know about the tools that can help you to develop a satisfying app/website/product.

All modern web browsers come equipped with developer tools. These tools allow you to test and fine-tune your pages in the browser itself, in ways specific to how the browser is interpreting your code.

Here are some of the useful tools:

i. Package Managers

-npm
-yarn
-pnpm

ii. Task Runners

-npm scripts
-gulp
-Webpack
-Rollup
-Parcel

iii. Modular Builder

-Webpack
-Parcel
-Rollup

v. Linter & Formatter

-Prettier
-JSlint
-ESlint
-JSHint
-JSCS

For more amazing Formatter and Linter check out Best VS Codes Extensions Every Developers Should Use in 2020

6. CSS Frameworks

The CSS framework is a code library that abstracts common web designs and makes the designs easier for a developer to implement in their web apps. In simple terms, a CSS framework is a collection of CSS style-sheets that are prepped and ready to use.

-Bootstrap
-Materialize, Material Design Lite
-Bulma
-Semantic UI

For more amazing Frameworks you can check this comprehensive guide on Best CSS Frameworks In 2020 for detailed info.

7. Frameworks

These are packages containing pre-written, standardized code in files and folders. They give you a base to build on while still allowing flexibility with the final design. Typically, front-end frameworks contain the following components:

  • A grid that makes it simple to organize the design elements of your website
  • Defined font styles and sizes that vary based on its function (different typography for headings versus paragraphs, etc.)
  • Pre-built website components like side panels, buttons, and navigation bars

Following are some of the most used front-end frameworks

i. Vue.js:The Progressive JavaScript Framework

  • Vue.js is an open-source model–view–ViewModel front-end JavaScript framework for building user interfaces and single-page applications.

You can check the guide on the official site of VueJS.

Also, there is a detailed article on Trending VueJS UI Components Library and frameworks that you'll find useful.

Vuexy VueJS Admin Template

Also, check the Materio – Vuetify Vuejs 3 Admin Template

Materio – Vuetify Vuejs 3 Admin Template

Also, available in Laravel Admin Version:

Materio – Free Vuetify Vuejs Laravel Admin Template

ii. React: A JavaScript library for building user interfaces.

React is an open-source, front-end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies.

You can check the tutorial on the official site of React.js. You can also check ReactJS Roadmap For Developers for a detailed overview of how to start with reactjs. Apart from this, there is an article on the best ReactJS UI Frameworks and component libraries which will be helpful.

Check out the Materio MUI React Next js Admin Template which is made using the React and Next js.

Materio MUI React Next js Admin Template

Have a look at the Sneat MUI React NextJS Admin Template as well.

Sneat MUI React NextJS Admin Template

The best React Admin Dashboard based on Next js with TypeScript support.


iii. Angular

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

You can check the tutorial on the official site of Angular

Check out the Modern Admin - Angular 10+ Bootstrap 4 Admin Dashboard Template and Apex Angular Admi Template which are made using Angular.

Modern angular

8. Testing Your App

Front End Testing is a testing technique in which Graphical User Interface (GUI), functionality, and usability of web applications or software are tested. The goal of Front end testing is testing overall functionalities to ensure the presentation layer of web applications or software is defect-free with successive updates. It is a vital skill for any Developer.

i. Unit Testing

Unit testing generally refers to the process of performing, either manually or in an automated way, a set of tests on a single “unit” of code.

It mainly consists of testing isolated parts of the code, as units. These units usually take the form of methods, properties, UI element actions, etc. It is the fastest and cheapest to apply.

-Jest
-Enzyme
-Sinon
-Mocha
-Chai
-AVA
-Tape

ii. End to End Testing

In E2E testing, the developer tests the whole application together and test it as a user would do.

Basically, here developer tests the application’s workflow from beginning to end. The aim is to replicate real user scenarios so that the system can be validated for integration and data integrity.

The following are some helpful tools:

-Selenium
-Webdriver
-Cypress
-Puppeteer
-Cucumber.js
-Nightwatch.js

You can check this detailed guide on End to End Testing.

iii. Integration Testing

Integration tests make sure that various parts of the app work together. It is one of the crucial and most important tests.

-Karma
-Cypress
-Nightwatch
-WebDriver.io

For detailed info check the article on Frontend Testing.

9. Server-Side Rendering

Server-side rendering (SSR), is the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser. The Server-side sends a fully rendered page to the client; the client’s JavaScript bundle takes over and allows the SPA framework to operate.

10. Static Site Generator

A static site generator is a publishing tool, which is essentially a set of tools for building static websites based on a set of input files. They apply data and content to templates and generate a view of a page that can be served to the visitors of a site.

The following are some best static site generators:

Here is a detailed article on What is a static site generator and 3 ways to find the best one.

11. Mobile Application

  • Front-end development for mobile application

Well, here the front end interacts directly with the user including design elements such as wireframes, mockups, caching, and database synchronization. It gives a smooth user experience across various screen sizes and orientations.

  • Below are some helpful frameworks for mobile app development.

-Flutter
-React Native
-Nativescript
-Ionic

  • Technical Aspects of Front-End Development

i. Native App Development
ii. Cross-Platform Mobile Application Development

Both Native and Cross-platform mobile apps come with their own pros and cons. Where native leads in terms of interface, performance, reliability, and speed. Whereas Cross-platform holds an edge in terms of the marketplace, cost, and reusability. However, it's your choice and your business concern to choose the platform.

For more detail check this amazing article on Ultimate guide to mobile app development.

12. Desktop Application

  • Even though mobile and tablets have the perks of being handy, you simply can't ignore PC and desktop apps. Because there are still many users who prefer PC a better option to explore the apps and websites. It's just desktop apps that have their own perks..!! Isn't it..!?

  • So, the following are the Useful frameworks for desktop app development which you can use.

-Electron
-NW.js
-Proton
-Neutralino.js
-DeskGap

You can check this helpful article on Desktop apps for front end development.

13. Web Assembly

  • WebAssembly is an open standard that defines a portable binary-code format for executable programs, and a corresponding textual assembly language, as well as interfaces for facilitating interactions between such programs and their host environment.

  • It has huge implications for the web platform. It provides a way to run code written in multiple languages on the web at near-native speed, with client apps running on the web that previously couldn’t have done so.

  • You can visit the following articles for further details.

-Webassembly
-What is webassebly- The next generation web platform

14. Keep Learning

So, after going through this guide, you can kickstart your journey as a frontend web developer for sure. Although, learning is the only key to success. For that, you have to practice and learn consistently.

We have mentioned some relevant articles above which you can refer to for details and some basics. We highly recommend you to go through them.

Here is a complete guide that you can go through Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice!

The following are some excellent courses for front end developers:


Conclusion:

So, that's the guide on How to Become a Pro 😎 Front End Developer💻. It's very detailed for sure, but there is a good chance that many of you may already know most of the stuff. Even if you don't know, no need to be confused or overwhelmed by this roadmap; you can start small and then follow along.

There are many ways to becoming a Frontend Developer and by the experience, you can achieve excellence. So, begin with this roadmap and see how you become a pro frontend developer.


About us:

We, at ThemeSelection, provide selected high quality, modern design, professional and easy-to-use premium and free bootstrap admin template, and UI Kits.

Also, don’t forget to follow us on Facebook and Twitter for more cutting edge web design and development related articles and content.

Top comments (29)

Collapse
 
axiol profile image
Arnaud Delante

That's a very technical path. Absolutely not saying it's a bad one, but I think it's missing something important a frontend dev needs : Empathy. I mean, when you get a client request / a design to work with, you need some kind of sensitivity on how people will use what you're doing. Is the timing of this animation right? Does it even need that animation? Is it ok to have to click there? ... You can learn all the technical info on accessibility and UX, but at some point, it has to feel right

Collapse
 
theme_selection profile image
ThemeSelection

Hello Arnaud,

Thanks for providing your inputs, yes this post does not cover UI/UX and animation related points/topics for a front-end developer and those are very essentials too.

We will improve or create a new post on this subject :)

BTW refer to our article Awesome Design Resources for Every Developers Series' Articles series for more UI/UX related information.

Stay Safe🙏

Collapse
 
perpetual_education profile image
perpetual . education

If you won't say it, then we will! "It's a bad path!"

Unfortunately - it's the path that many take. This is bad for the world.

Collapse
 
rajeshroyal profile image
Rajesh Royal

Its an agency which is trying to gain attention, please ignore such posts. I'm afraid dev will be like medium or any other platform soon.

Collapse
 
rkyoku profile image
Renaud Kyoku

I don't mean to undermine the work that was done here, but I cannot support this opinionated list. Sure, you claim "personal recommendation", but you still limit the options to the only ones you deem worthy, still claiming that "this is the one path to follow to become a front dev" (and no other one).

But guess what? I'm not using any of this (well, except for the common basics of course) and I'm still pretty damn good at my job (full stack for that matter), that I have been doing with passion for 15 years.

Plus, you "forgot" plenty of viable options (like: Svelte, Qt, you name it), and plenty of other paths (like: not using a monolithic framework in the first place, template engines, canvas based options, etc.).

People absolutely, positively, do NOT need to learn everything in this huge (but still incomplete, as it has already been said in the comments) list of yours.

I decided to leave this comment because I think it is NOT okay to scare (or impress?) newcomers in web dev with a huge list of useless technologies (in the sense that you don't need half of them to be proficient as a web dev).

Learn HTML5, CSS, ES6, and then add some technologies into the mix: a preprocessor (LESS is easy and powerful enough), a task runner (Gulp is pretty good), EITHER a template engine (pick your choice... Handlebars for example) + a router, OR a framework (Svelte >> all)... and you can do pretty much anything. That's it.

Yeah sure you could learn what PWAs are, or how to compile to native (mobile/desktop), or dabble with WebAssembly or the Canvas and everything, but in 95% of cases that's not required.

IMHO you'd better split your stack into several levels of progression... Real levels, that is, not a linear progression implying that "you need to know everything".

Well anyway, just my 2 cents, and I did not even dig deep.

Looking forward to see an improved (or at least alternative, because I do not speak the one and only truth) version! 👍

Best,

Collapse
 
johnharding profile image
John Harding • Edited

To be fair the basics you listed out are what a junior dev should learn. This is "how to become a pro" which covers every aspect of front end.

And if you want to target newbies I wouldn't recommend svelte.. that has a long ways to go. And even for advanced devs, svelte is not going to be used in most production sites for the foreseeable future. It's something you'll dabble in on the side for now. It is much less required to be a "pro" than everything else in this list.

Collapse
 
rkyoku profile image
Renaud Kyoku

Well, again, I consider myself a "pro" (unless you assert that I cannot be, just because I do not use the technologies you listed).

I fully agree with you that Svelte will never make you as employable as React or Vue, but it still is an easy to learn and slick framework, where React is a mess and has a steep learning curve that I (personally) do not deem justified.

I think you are mistaking "being employable" and "being a pro". Yeah sure, if your goal is to follow the mass/hype (they tend to go in the same direction), learn yourself some React and you'll be employable. Worse than that: learn yourself some WordPress theming or whatever, and you will be employable.

But you can clearly be a pro and still not follow the HDD that tends to blind people nowadays. I tried React, Vue, Angular... Did not like that. I use a template engine with a compilation feature, and a tiny router, and I am ready to roll in a jifi. No need to learn a framework. No need for the user to download 2MB of framework or whatever. I have a fast, easy to learn, and easily switchable stack. Go and try to switch from React to Angular. With my techs, I do not need to.

That's the power of going framework-less: speed, agility, no need for extra learning, even more devs able to work on the project... Almost only positive sides.

And you still are a pro even if you go framework-less or whatever.

This reminds me of this guy on YouTube that does woodwork with old-timer manual tools (zero power tool, zero screws). (He is a bad ass and his videos are really relaxing). Of course it takes a bit longer and this is not 100% comparable to going framework-less, but my point is: this guy is still a pro. He CAN use power tools if he wanted to. But he ALSO can work without these tools. That makes him better than the average wood worker (or carpenter or whatever) who would be lost and helpless without his precious modern tools :)

Well, that is my humble POV anyway :)

Thread Thread
 
johnharding profile image
John Harding

Yeah I disagree completely. It isn't about following the hype. In fact it sounds like you are going against the hype simply because it is popular. I developed with vanilla JS from about 2008-2014. I then moved to Angular, and then Vue, and now React for the last 4 years. If you are making anything remotely complex and aren't using a framework, then you're doing it wrong.

Thread Thread
 
rkyoku profile image
Renaud Kyoku

I guess you are entitled to you own opinion :)

Collapse
 
damian_cyrus profile image
Damian Cyrus

Each time I see images like this it feels in the end like:

  • Internet
  • HTML
  • CSS
  • JavaScript
  • more JavaScript
  • JavaScript not in browser
  • lot more JavaScript
  • some things missed on the way (mentioned by others each time in comments)
  • keep learning (JavaScript)
Collapse
 
kiril6 profile image
Kiril Delovski

You Deserve a medal for this, bravo for the dedication and tremendous work!

Collapse
 
theme_selection profile image
ThemeSelection

Thank you very much for your appreciation.
It means a lot.

Collapse
 
sativ01 profile image
sativ01

This guide although has an impressive list of tech, but I'm missing here the reason behind learning all of that.

IMO the list of tech you worked with doesn't make you a Pro.
What makes you a Pro is knowledge:

  • why to use this or that tech
  • general app architecture
  • why when and how to manage app state
  • what patterns to use for doing various stuff
  • being able to quickly grasp the app structure to see the best way to implement a particular feature so that your colleagues don't WTF on reviews.

this only comes with experience and continuous learning.
Lurking in the code, participate in open source projects that you use, etc.

By the way, if I find someone who would claim this stack in their CV and 3 years of experience I'd question the proficiency. It's most likely to be a very shallow knowledge of all that stuff.

Collapse
 
louislow profile image
Louis Low

Ho Ho, the frontend is scarier than the backend. But I like it.

Collapse
 
theme_selection profile image
ThemeSelection

😃Thank you very much for your appreciation🙂

Collapse
 
theoarmour profile image
Theo Armour
Collapse
 
neneji profile image
Haozhe • Edited

15 . Practice!

Collapse
 
theme_selection profile image
ThemeSelection

True..!!

Collapse
 
piyushkmr profile image
Piyush Kumar Baliyan

A nicely written article, and though I have to agree with some of the comments, that the list/path is very exhaustive and technical, I also have to say it covers a broad range of technologies.
So, here is what I have to say, there are multiple paths here, and multiple options/alternatives and someone doesn't need to go down all the paths.

However, I'll say that if you want to grow then have a basic knowledge of all the terms listed here, there are popular terms thrown around, and it will help if you know the pro-cons of these technologies.

And what goes into becoming a frontend-developer:

  • performance optimizations
  • good UX/UI (not talking about good visual design here)
  • Scalable and maintainable code
  • and the list goes on...
Collapse
 
ramdoni007 profile image
Anak Esemka Software Engginering 4ever

Iam Vue Js Vue Js Club hehehehehe

Collapse
 
darkeye123 profile image
Matej Leško

I like the list and there are some good resources. But imho it is too wide. Master all of this will take years and when you will be done, it will be in most cases the "old" technology. I mean just look at the JS. To master it to deeply understand what is happening takes some time. And we are talking here even about mobile development which I personally perceive as an extra bonus :)

For general knowledge and basic hands on it is very good. But this list can make an impression that you are not a pro or even employable when you don't know all of this. Which is not true :)

But I like the outline, where you can pick if something took your interest. Big kudos you for that :)

Collapse
 
lucascumsille profile image
Lucas Cumsille M.

Thank you so much for this article! It’s exciting how you can always learn new things ... sometimes seems like the list never ends😅

Collapse
 
theme_selection profile image
ThemeSelection

Thank you very much for your appreciation 👍. We are glad that you find this article useful.🙂

Collapse
 
douglasfugazi profile image
Douglas Fugazi

This is a good selection of items to know if you are thinking to be a Front End developer. Thanks. I will share it.

Collapse
 
theme_selection profile image
ThemeSelection

Thank you very much for your appreciation 👍. We are glad that you find this article useful.🙂

Collapse
 
warengonzaga profile image
Waren Gonzaga

Thank you for sharing this with us!

Collapse
 
theme_selection profile image
ThemeSelection

Thank you for your appreciation.🙂

Collapse
 
piyushkmr profile image
Info Comment hidden by post author - thread only accessible via permalink
Piyush Kumar Baliyan

One more thing I observed.
Just put these 3 images in a comic strip and although it is totally legit, people will easily believe that this is a JOKE...

Some comments have been hidden by the post's author - find out more