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.🤩
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.
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
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
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
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.
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.
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.
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
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.
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 which makes it simple to organize the design elements of your website
- Defined font styles and sizing that varies 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.
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.
- Checkout the Vuexy React Admin Template which is made using the React.
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.
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.
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.
- 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.
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.
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.
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:
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.