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?
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, 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.
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 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:
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.
- Internet and how it works?
- Basic: HTML,CSS & JS
- General Development Skil
- Styling: CSS Preprocessor & Architecture
- Get familiar with the tools
- CSS Frameworks
- Front-end Framework
- Testing your app
- Server-Side Rendering
- Static Site Generator
- Mobile Application
- Desktop Application
- Web Assembly
- Keep Learning
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.
- HTTP in depth
- HTTP/3: the past, the present, and the future
- What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol
ii. Browsers: A software application for accessing the information on the World Wide Web.
Browsers are a very important part of the current era. And why not? It literally brings the whole world to your fingertips. So, it'll be great to know a bit about them as you are using them on a daily basis..!! Right?
Here is an amazingly detailed article How Browsers Work: Behind the scenes of modern web browsers By Tali Garsiel and Paul Irish. You'll surely find this article excellent and helpful.
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
- Here is an useful guide for DNS: DNS in one picture
Have a look at the Sneat MUI React NextJS Admin Template
The React Admin Dashboard based on Next js with TypeScript support.
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:
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
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.
ii. CSS Architecture
The following are some good articles on CSS Architecture, that you might find helpful.
-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.
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
ii. Task Runners
iii. Modular Builder
v. Linter & Formatter
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.
-Materialize, Material Design Lite
For more amazing Frameworks you can check this comprehensive guide on Best CSS Frameworks In 2020 for detailed info.
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
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.
- Have a look at the Vuexy Vuejs Admin Template which is made using the Vuejs.
Also, check the Materio – Vuetify Vuejs 3 Admin Template
Also, available in Laravel Admin Version:
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.
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.
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.
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:
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.
For detailed info check the article on Frontend Testing.
9. Server-Side Rendering
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.
- 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.
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.
-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.
The following are some excellent courses for front end developers:
React — The Complete Guide (incl. Hooks, React Router, Redux)
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.
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 (32)
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
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.
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.
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.
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! 👍
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.
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 :)
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.
I guess you are entitled to you own opinion :)
Each time I see images like this it feels in the end like:
You Deserve a medal for this, bravo for the dedication and tremendous work!
Thank you very much for your appreciation.
It means a lot.
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:
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.
Ho Ho, the frontend is scarier than the backend. But I like it.
😃Thank you very much for your appreciation🙂
WebGL? JSON? XML? developer.mozilla.org/en-US/docs/W... ?
15 . Practice!
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:
Iam Vue Js Vue Js Club hehehehehe
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 :)
Thank you so much for this article! It’s exciting how you can always learn new things ... sometimes seems like the list never ends😅
Thank you very much for your appreciation 👍. We are glad that you find this article useful.🙂
This is a good selection of items to know if you are thinking to be a Front End developer. Thanks. I will share it.
Thank you very much for your appreciation 👍. We are glad that you find this article useful.🙂
Thank you for sharing this with us!
Thank you for your appreciation.🙂
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