Front End Development Roadmap. (Things Every Budding FrontEnd Developer Should Know)
Introduction (Who I am)
Hi readers, I am Venkatesh from India. I am a Front End Developer.I am working in Icanio Technologies (https://www.icanio.com/) .But At this time I had only one year of Experience. But now I had a hand’s on experience in Front End Technologies like React, Angular (Currently working), and VueJS (currently Learning). For State Management, I had hands-on Experience in Redux, RxJS, and NgRx (Currently Learning). In BackEnd, I had hand’s on Experience in NodeJS, NestJS(NodeJS Framework — Currently Learning), Loopback(NodeJS Framework), and Django (Python web Framework currently Learning). On the DB side, I had hand’s on Experience in MySQL (SQL- Relational Database), and MongoDB(NoSQL — Non -Relational Database).In DevOps ,I had hands-on experience in configuring Nginx and Apache Server(Reverse Proxy and load balancing),using Pm2 tool to deploy NestJS and NodeJS API’s ,CICD Pipeline using Jenkins(Currently learning).
And This is my first blog.Let’s Learn ……..
Roadmap
I found the above image from https://roadmap.sh/frontend. There we can see all the Roadmaps for FrontEnd, BackEnd, DevOps, Full Stack, etc.
Basic to advanced things every Front End Developer should know are
Level 1:
As a Front End Developer, At a Basic Level (Level 1 )you should know HTML, CSS, and JavaScript. Learn Fetch for basic API integration.
Learn JSON,XML.Learn Developer tools in the browser.
Learn How to use POSTMAN.
Learn the Software Development Lifecycle.
Level 2:
At level 2, You should learn Javascript frameworks and libraries like React, Angular, VueJS, etc. (Not everything, you should learn as much as you can). Understand the Lifecycles in the libraries or Frameworks. Learn Virtual DOM, Real DOM, and Shadow DOM. And also learn HTTP Clients like Axios, for API Integration. In Frameworks like Angular, you don’t have to install a separate library like Axios for API Integration, there we have HTTP Client. Do some CRUD API Integration in any framework for practical experience.
Learn the Package Managers like NPM, and Yarn.
Learn the Module Bundler like WebPack, Babel(JSX Compiler), etc.
Learn Version Control Manager like Git and Github.
Learn the Design Patterns like MVC, MVVM,MVP, etc
Learn One-way data binding (React) and Two-way data binding(Angular and VueJS).
Tips
Don’t stick with one Javascript Framework, Learn one framework fully and then learn one and more Frameworks or libraries in Javascript, compare them and learn. And you can get an idea of how to build a framework like this. And also, from my experience, Every framework has similar concepts and it shows their uniqueness only in syntax, some concepts and algorithms that use but most of the terms are the same like props, state, lazy loading, etc, and also mostly all of them are Component based only (Single Page Application).
The difference between Library and framework
- In Frameworks, For Example Angular, Here you don’t have to install a separate package for API Integration, Form Handling, Routing, etc. It comes with in-built modules like HTTP Client, Reactive Form, Form Modules, Routing, etc. But In Library, For Example React, You have to install separate packages for API Integration, Form Handling, Routing, etc like Axios, React Router, Formik, AvForm, etc.
Level 3:
Learn CSS Framework and Libraries like Bootstrap, Material UI, Tailwind CSS, etc.
Learn SCSS (CSS Preprocessor ) and SaSS.
Learn Typescript for type checking. This is good practice. And you can find an error(bug) in the developing stage.
Learn State Management Libraries like Redux, NgRx, NGXS, Recoil, Vuex etc
Learn the Unit Testing Library like Jest, Jasmine, etc.
Level 4: (Advanced Concepts)
Learn how to build Progressive Web APP(Using Service worker) , Server side rendering using NextJS(React) or NuxtJS (VueJS), etc.
Learn how to build Web Components using stencils and build that in React, Angular, VueJS, etc.
Learn WebSockets, WebHooks, Push Notifications, Web Worker, etc.
Level 5:
Learn BackEnd and Deployment things like what is SQL and NoSQL. How the Database is Handled. How the APIs are working and Understand HTTP methods (GET, POST, PATCH) for effective interaction with back-end services.. These things are not needed, but If you had a good idea in this mean, you can confidently discuss it with API Team(BackEnd ) for the expected Payload format.
Tips
- Remember that UI should primarily focus on displaying information. Complex logic and calculations should be handled by the API Side (Back end). Just call the API, fetch the data and show the data.
Conclusion
I hope this blog is very useful for beginners and fresher who are working or training as Front End developers or Full Stack Developers. Thanks for reading. Have a good day ✌️.
Don’t worry this is just the RoadMap, I will write the blog for all the topics and concepts which are present in the above Image.
My Roadmap Blog Series
- Full Front End Development Roadmap- **
- Javascript Roadmap- Comming Soon
- Angular Developer Roadmap- https://medium.com/@venkateshb-03/angular-developer-roadmap-2025-things-every-budding-angular-developer-should-know-86061c84a0f9
- React Developer Roadmap- https://medium.com/@venkateshb-03/react-developer-roadmap-2022-81750df3d3be
- VueJS Developer Roadmap- https://medium.com/@venkateshb-03/vuejs-developer-roadmap-things-every-budding-vuejs-developer-should-know-fc5a0f9c7d55
Please Share your feedbacks and topics on Command.Based on that I will enhance my Blog.
Thanks for reading….Stay tune Bye…
Conclusion
This blog provides a comprehensive roadmap for budding front-end developers. Remember that your journey will involve continuous learning and growth. Keep exploring and experimenting with these concepts to become a proficient front-end developer. Thanks for reading, and have a fantastic day on your development journey! 🚀
Stay tuned for upcoming blogs in my Roadmap Blog Series, covering JavaScript, Angular, React, and Vue.js development.