Front-End Roadmap

Guides lead a user through a specific task they want to accomplish, often with a sequence of steps. Writing a good guide requires thinking about what your users are trying to do.

HTML

💁 Basics

💁 Selectors

💁 Positioning

💁 Box Model

💁 Display

💁 Specificity

CSS

💁 FlexBox

💁 Grid

💁 Media Queries

💁 Pseudo Elements

💁 Pseudo Classes

💁 Animations

JavaScript

💁 Basic Syntax

💁 DOM Manipulation

💁 Fetch API / AJAX

💁 Async Await

💁 Event Listeners

💁 ES6+ Javascript

💁 Promises

💁 Classes

💁 Array Methods

💁 Scoping

💁 Hoisting

💁 Closures

CSS Framework

💁 Talwind

CSS Preprocessor

💁 SASS/SCSS

Version Contro System

💁 Git

💁 GitHub

Package Managers

💁 NPM

💁 Yarn

React

💁 Components

💁 JSX

💁 Props

💁 State

💁 Events

💁 Conditional Renderings

React - Hooks

💁 useState

💁 useEffect

💁 useRef

💁 useContext

💁 useReducer

💁 useMemo

💁 useCallback

React UI Frameworks

💁 Material UI

Popular React Packages

💁 React Query

💁 React Router

💁 Axios

💁 React Hook Form

💁 Styled Components

💁 Storybook

💁 Framer Motion

React State Management Tool

💁 Redux

Learn After React

💁 Next JS

💁 Gatsby

💁 Typescript

💁 React Native

💁 Electron

Next JS Topics

💁 Static Site Generation

💁 Server Side Rendering

💁 Incremental Static Regeneration

💁 Dyanamic Pages

💁 CSS / SASS Modules

💁 Lazy Loading Modules

💁 API Routes

Testing Libraries

💁 Jest

Deployment services

💁 Netlify

💁 Vercel

💁 Firebase

💁 Github Pages

Tools - Lint and Format Code

💁 ES Lint

💁 Standard

💁 Prettier