Frontend Developer Roadmap

Learn the basics of HTML

Things to learn in HTML are :

-> Basics

-> Emmet

-> Forms Semantic

> Tags List's

-> Tables

-> SEO Basics

Learn the basics of CSS

->Basics

->Selectors

-> Positioning

-> FlexBox⭐

-> Grid

-> Box-Model

-> Display

-> Media Queries

-> Pseudo Elements & Classes

-> Animations

Learn the basics of Javascript

-> Basic syntax

-> DOM Manipulation

-> Fetch API

-> Async Await

-> Promises

-> Event Listener

-> ES6 syntax (Array methods, Arrow Functions, Classes, Ternary Condition, Import)

-> Scoping

-> Hosting

-> Closure

You are done with the core of front-end development, but in today's world of front-end, you have to be one step further so.....

Starting with some styling.

Learn Any CSS Framework

-> Bootstrap (*) ⭐

-> Tailwind (*) ⭐

-> Materialize

-> Bulma

-> Semantic UI

Learn Any CSS Preprocessor

-> SCSS/SASS (*) ⭐

-> Posts

-> Less

Learn Version Control

-> Git/Github ⭐

Learn Basics of Package Managers

-> Npm ⭐

-> Yarn

After so much hard work and learning when a javascript developer comes to know about some of his framework and libraries, it's like you got some anime superpower

Pick Any Javascript Framework/Library

-> React ⭐

-> Vue

-> Angular

-> Remix

Basic Things To Learn In React

-> Component

-> JSX

-> Props

-> State

-> Events

-> Conditional Rendering

Must Learn Hooks In React

-> useState

-> useEffect

-> useRef

-> useContext

-> useReducer

-> useMemo

-> useCallback

When a javascript developer discovers react, he said to himself/herself,

"I finally found my turu love"

To make your app more beautiful, learn these react UI frameworks.

Must Learn React UI Frameworks

-> Material UI ⭐

-> Chakra UI⭐

-> Ant Design⭐

-> React Bootstrap⭐

All are my favorite, but you can make beautiful UI by having Command over one.

Must Learn React Packages

-> React Router

-> Axios

-> React Icons

-> Framer Motion

-> React Hook Form

Learn React State Management Tools

-> Redux ⭐

-> Context API ⭐

-> Redux Toolkit ⭐

-> zustand

Once you know react you got that superpower, now it will become a piece of cake for you to learn the technologies related to react

Learn This After React

-> NextJS ⭐

-> React Native ⭐

-> TypeScript ⭐

-> Electron

-> Learning Nextjs is like You have become an ultimate upgraded version of pokemon

Things to learn in NEXTJS

-> Static Site Generation

-> Server Side Rendering

-> Incremental Static Regeneration

-> Dynamic Pages

-> CSS/ SASS Module

-> Lazy Loading Modules

-> API Routers

-> How good if you can test your app after creating it

Learn This Testing Framework/Libraries

-> JEST ⭐

-> Testing Library ⭐

-> Cypress

-> Enzyme

Ok congratulation on creating and testing your app, but we are doing this to show solve others' problems & for that, you have to share this with the world, thanks to some services which help us to put our work on the World Wide Web for FREE FREE FREE.....

Learn To Deploy Your Website

-> Netlify ⭐

-> Vercel ⭐

-> Firebase

-> Github

-> Replete

-> Heroku ⭐

-> Render

Important Topic To Know as a Developer

-> PWA

-> Web Socket

-> JSON

-> CORS

-> RESTful API's

-> GraphQl

-> Basic Security (Authentication)

-> Web Accessibility

Learn Some Styling Guide (Format Code)

-> ES Lint

-> Prettier

-> Standard

Options

-> WebPack

-> Parcel

-> Snow Pack

-> Rollup.js

So this is the complete roadmap for anyone who becomes a frontend developer.

I hope it helped you.

You can sign in for our newsletter so you will receive notification whenever we upload any blog.