This guide contains the details about tech that anyone
from fresher to senior can learn to become a fullstack
🧱 javascript developer 👨💻 alongwith the learning
resources 📚 from where you can learn those tech
I have created this guide from my 6 years of experience
as a web developer 🕸️ Also, this guide is for web
developers who want to specialize in frontend 🖼️ as I
explain frontend technology in detail
Except for some, all the learning resources provided in
this guide are free 🆓. And the paid 💰 ones are NOT
sponsored but provide a great value for its price
If this roadmap 🛣️ helps you in anyway, kindly share it
with others too and let me know your feedback on
LinkedIn
HTML
HTML (HyperText Markup Language) is the most basic building block of the Web
It defines the structure of your web page
Learn the concepts of semantic tags, attributes, meta tags, etc
Javascript is the only programming language (except for web assembly) that the browser natively understands
You might have heard of languages and frameworks like GWT, Dart, etc which can be used for frontend development. But all these compile and translate their code into javascript and then the javascript code is executed on the browser
So, as a Frontend Developer you must have a great command over Javascript
Javascript important concepts
Javascript program execution - Execution context, variable environment, call stack
Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web
There are three main metrics
LCP: largest contentful paint
FID: first input delay
CLS: cumulative layout shift
We can measure these metrics locally by generating lighthouse report from chrome devtools and use pagespeed insights to measure these metrics for a deployed website
Now by learning all the important frontend concepts and HTML, CSS and JS build at least three projects keeping the user experience and performance in mind
Build apps like
email client UI eg: outlook, gmail
data tables
registration forms
Play with some the web APIs provided by browser and use them to build your web apps
Frontend Framworks
Now it's time to choose a framwork for developing bigger applications
But first know why do you even need a framework? If you have already built 3-4 web apps with plain Javascript, then you should be able to answer this yourself
Now choose a framework/library among the following
EpicReact, paid and expensive resource but the best course to learn React
You can now build a basic React App by following any youtube tutorial, there are plenty
React state management
Although React's built in hooks do help manage the state of your apps very well but there are many battle tested state management libraries available to manage your server state
Learn about averting these security risks while building the React Apps
React design patterns
While building complex apps or libraries with React you would come across some problems and there are already well-tested solutions for the most repeated problems
Follwing slide lists such advanced design patterns
Context Module functions
Compound components
Flexible Compound components
Prop collections and getters
State Reducer
Control Props
You can learn about these and any other such advanced design patterns from Kent's Blog and here
testing javascript
Testing your code is a skill that is expected by almost all companies
Unit tests are part of DoD(definition of done)
First understand what unit test means
Then test some of the plain javascript apps that you made using Jest
Build some projects using NextJs from youtube tutorials and then on your own
PWA
Progressive Web Apps (PWAs) are web apps built and enhanced with modern APIs to deliver enhanced capabilities, reliability, and installability while reaching anyone, anywhere, on any device, all with a single codebase
Learn PWA fundamentals like the Web App Manifest, Service Workers
Make any of the React app that you have built, a progressive web app
Typescript
Typescript is a super-set of javascript
TypeScript adds additional syntax to JavaScript to support static typing and catch potential runtime errors at compile time itself
TypeScript code converts to JavaScript, which runs anywhere JavaScript runs: In a browser, on Node.js
TypeScript is going to be must know language soon based on how its catching up in javascript developer community
Watch this video to understand why you should learn TypeScript
Learn Typescript free from its creators and maintainers itself - Microsoft
React TypeScript cheatsheet for quick reference while developing React app with typescript
E2E testing
End to End testing is a software testing method that validates entire software from starting to the end along with its integration with external interfaces
It simulates actual user workflows and should include as many functional areas and parts of the technology stack used in the application as possible
There are many frameworks for E2E testing but I would recommend cypress
Containerizing your apps will help you deploy and scale application easily
Containerization is the packaging together of software code with all it’s necessary components like libraries, frameworks, and other dependencies so that they are isolated in their own container
You can even learn Kubernetes, also known as K8s, an open-source system for automating deployment, scaling, and management of containerized applications
CI/CD
Continuous integration (CI) is the practice of automating the integration of code changes from multiple contributors into a single software project
Automated tools are used to assert the new code’s correctness before integration
Continuous Deployment (CD) is a software release process that uses automated testing to validate if changes to a codebase are correct and stable for immediate autonomous deployment to a production environment
Learn cloud computing with any of the following cloud providers
AWS
Azure
GCP
Deploying your app on cloud gives you plenty of features like telemetry logs, realtime performance metrics, deployment at different availability zones, disaster recovery, etc
The End
... for now at least 😅
Now, I plan to teach Javascript, React and Node from basics to intermediate level on youtube starting from 13th February, every Sunday.
And the I plan to teach the rest of everything mentioned in this guide as part of a cohort.
The knowledge that I share on youtube itself will help you clear any Javascript interview rounds at any company and also help you develop robust web apps
And then if interested you can decide to join the cohort for becoming javascript web developer expert. More details about the cohort will be shared on my LinkedIn later.