Anurag-Frontend-Development
Learn The Complete Frontend Development Course | 150 Hours | Zero to Advanced by Anurag Singh ProCodrr with comprehensive video tutorials and hands-on projects.
Meet Your Instructor: Anurag-Singh-ProCodrr
Anurag Singh, widely known as ProCodrr, is a seasoned front-end engineer and educator specializing in building production-grade web interfaces with modern JavaScript frameworks and tools. With extensive industry experience, Anurag helps developers master React, JavaScript, and advanced front-end development techniques. His teaching approach combines design principles with robust engineering practices, preparing students to build scalable, maintainable, and user-friendly web applications. ProCodrr's courses emphasize real-world project development, modern tooling, and best practices used by top tech companies.
Front-End DevelopmentReact.js & Next.jsJavaScript & TypeScript
Experience: 7+ years
Students Helped: 18,000+
Specialization: Front-End Engineering & Modern Web Development
Course Overview
This comprehensive course is designed to take you from foundational concepts to advanced implementation in front-end engineering & modern web development. You'll learn through design-led development with hands-on projects, focus on production-ready code, and industry best practices, building real-world projects that demonstrate your skills and enhance your portfolio.
Whether you're looking to start a new career in technology or advance your current skills, this course provides the structured learning path and practical experience you need to succeed in today's competitive tech industry.
Course Curriculum
Master the fundamentals and core concepts
Build real-world projects and applications
Understand best practices and industry standards
Develop problem-solving skills
Learn debugging and testing techniques
Course Content
1
Web Development Course for Absolute Beginners | Hindi
2
Frontend Roadmap to get Job Ready in 2024 | How to follow the course? | Free Resources
3
What Is Internet? | Frontend Bootcamp Hindi | Ep.00
4
Watch this before learning HTML | HTTP request and response | Frontend Bootcamp Hindi | Ep.01
5
Learn Basic HTML by Making Project | Frontend Bootcamp Hindi | Ep.02
6
Inline Vs Block Elements | Div & Span Tags Explained | Frontend Bootcamp Hindi | Ep.03
7
Semantic Tags Explained | Frontend Bootcamp Hindi | Ep.04
8
What is the difference between Tags and Elements in HTML? | Frontend Bootcamp Hindi | Ep.05
9
Global and Custom Attributes | Frontend Bootcamp Hindi | Ep.06
10
HTML Forms can do more than you might think | Frontend Bootcamp Hindi | Ep.07
11
HTML: The Missing Pieces | Frontend Bootcamp Hindi | Ep.08
12
Story of a PDF That Changed My Life
13
Getting Started with CSS | Frontend Bootcamp Hindi | Ep.09
14
CSS Selectors: Element, Class, Id, and Pseudo Selectors | Frontend Bootcamp Hindi | Ep.10
15
Cascade, Specificity & Inheritance Explained in Depth | Ep.11
16
How to Practice HTML & CSS | Frontend Bootcamp Hindi | Practice Chapter 0
17
Important Keyword in CSS Explained | Frontend Bootcamp Hindi | Ep.12
18
CSS Box Model Explained in Depth | Part 1 | Frontend Bootcamp Hindi | Ep.13
19
CSS Box Model Explained in Depth | Part 2 | Frontend Bootcamp Hindi | Ep.14
20
CSS Box Model with Inline Elements | Scam of Span | Part 3 | Frontend Bootcamp Hindi | Ep.15
21
Percentage: The Underestimated CSS Unit | Frontend Bootcamp Hindi | Ep.16
22
You'll NEVER Get Confused Again | rem and em Explained in Depth | Frontend Bootcamp Hindi | Ep.17
23
CSS Positions: Static, Relative, Absolute, Fixed, Sticky Explained | Frontend Bootcamp Hindi | Ep.18
24
Transform, Translate, Transition, Shadows, Opacity, Alpha Channel | Frontend Bootcamp Hindi | Ep.19
25
Build Your First CSS Project | Frontend Mentor HTML & CSS Project | Frontend Bootcamp Hindi | Ep.20
26
HTML & CSS Only Project | Frontend Bootcamp Hindi | Ep. 21
27
Flexbox: The Inside Story | Flexbox Explained in Depth | Frontend Bootcamp Hindi | Ep.22
28
Flexbox: The Missing Pieces | Advance Flexbox Properties Explained | Frontend Bootcamp Hindi | Ep.23
29
HTML and CSS Only Project | Best for Beginners | Frontend Mentor | Frontend Bootcamp Hindi | Ep.24
30
Watch this before learning @media queries | Frontend Bootcamp Hindi | Ep.25
31
Media Queries in CSS | Most Important for Responsive Websites | Frontend Bootcamp Hindi | Ep.26
32
Send Diwali Wishes with Custom Names | HTML & CSS Only Project | Frontend Bootcamp Hindi | Ep.27
33
Why Overflow is Good? | CSS is Actually Awesome | Frontend Bootcamp Hindi | Ep.28
34
Bring Div to Front Without z-index | Stacking Elements and z-index | Frontend Bootcamp Hindi | Ep.29
35
Don't use Floats this Way | Floats & Clears Explained in Depth | Frontend Bootcamp Hindi | Ep. 30
36
CSS Grid is Much Easier Than You Might Think | CSS Grid in Depth | Frontend Bootcamp Hindi | Ep.31
37
CSS Grid Project | Best for Begineers | Frontend Bootcamp Hindi | Ep.32
38
Unlock Superpowers of CSS Grid | Frontend Bootcamp Hindi | Ep.33
39
Grid Areas Explained in Depth | Frontend Bootcamp Hindi | Ep.34
40
CSS Variables Explained in Depth | Last CSS Video | Frontend Bootcamp Hindi | Ep.35
41
The Complete JavaScript Course | Trailer | Zero to Advanced
42
Story of JavaScript | JavaScript History | The Complete JavaScript Course | Ep.01
43
Introduction to JavaScript | The Complete JavaScript Course | Ep.02
44
Data Types in JavaScript | Primitive Data Types Explained | The Complete JavaScript Course | Ep.03
45
JavaScript Variables Explained in Depth | let, const, var | The Complete JavaScript Course | Ep.04
46
Watch Your Code Running Line by Line in Dev Tools | The Complete JavaScript Course | Ep.05
47
Dialog Boxes in JavaScript | Alert, Confirm, & Prompt | The Complete JavaScript Course | Ep.06
48
Template Literals | String Methods & Properties | The Complete JavaScript Course | Ep.07
49
Math Object in JavaScript | The Complete JavaScript Course | Ep.08
50
Most Used Concept in JavaScript | Truthy and Falsy Values | The Complete JavaScript Course | Ep.09
51
Comparison Operators in JavaScript Explained in Hindi | The Complete JavaScript Course | Ep.10
52
Logical Operators in JavaScript | And, Or, Not, Operators | The Complete JavaScript Course | Ep.11
53
Decision Making in JavaScript Using IF Statement | The Complete JavaScript Course | Ep.12
54
Optimize Decision Making Using Else If and Else | The Complete JavaScript Course | Ep.13
55
Nested IF ELSE Statement in JavaScript | The Complete JavaScript Course | Ep.14
56
Switch Statement in JavaScript | Switch Case | The Complete JavaScript Course | Ep.15
57
Ternary Operator Explained in Hindi | The Complete JavaScript Course | Ep.16
58
How to See Variable Address in Dev Tools? | Memory Location | The Complete JavaScript Course | Ep.17
59
Objects in JavaScript Explained in Depth | The Complete JavaScript Course | Ep.18
60
Object.freeze( ) vs Object.seal( ) in JavaScript | The Complete JavaScript Course | Ep.19
61
Arrays Explained in Depth | The Complete JavaScript Course | Ep.20
62
Most Common Array Methods in JavaScript | The Complete JavaScript Course | Ep.21
63
Multidimensional Arrays are Easier Than You Might Think | The Complete JavaScript Course | Ep.22
64
Right Way to Copy Objects and Arrays | Deep Vs Shallow Copy | The Complete JavaScript Course | Ep.23
65
Combined Assignment Operators in JS | Increment and Decrement Operator | Ep.24
66
While Loop in JavaScript | Explained in Depth | The Complete JavaScript Course | Ep.25
67
For Loop in JavaScript | The Complete JavaScript Course | Ep.26
68
Do While Loop in JavaScript | The Complete JavaScript Course | Ep.27
69
Introduction to Functions | The Complete JavaScript Course | Ep.28
70
Return Keyword in JavaScript Explained in Depth | The Complete JavaScript Course | Ep.29
71
Execution Context in JavaScript Explained in Depth | The Complete JavaScript Course | Ep.30
72
Call Stack in JavaScript | The Complete JavaScript Course | Ep.31
73
What is Hoisting? | Most Asked JS Interview Question | The Complete JavaScript Course | Ep.32
74
Global Scope vs Local Scope in Javascript | The Complete JavaScript Course | Ep.33
75
Lexical and Block Scope Explained in Depth | The Complete JavaScript Course | Ep.34
76
Higher Order Functions and Callbacks in JavaScript | The Complete JavaScript Course | Ep.35
77
setTimeout and setInterval in JavaScript | The Complete JavaScript Course | Ep. 36
78
Event Loop and Callback Queue in JavaScript | The Complete JavaScript Course | Ep.37
79
Returning Functions with Closures in JavaScript | The Complete JavaScript Course | Ep.38
80
Difference between Methods and Functions in JavaScript | The Complete JavaScript Course | Ep.39
81
Arrow Functions in JavaScript | ES6 | The Complete JavaScript Course | Ep.40
82
for of vs for in Loop in JavaScript | ES6 | The Complete JavaScript Course | Ep.41
83
forEach Array Method in JavaScript | The Complete JavaScript Course | Ep.42
84
Map, Filter, Reduce in JavaScript | The Complete JavaScript Course | Ep.43
85
Some and Every Array Method in JavaScript | The Complete JavaScript Course | Ep.44
86
Arguments Keyword in JavaScript | The Complete JavaScript Course | Ep.45
87
Default Parameters in JavaScript | ES6 | The Complete JavaScript Course | Ep.46
88
Spread Operator | The Complete JavaScript Course | Ep.47
89
Rest Parameters in JavaScript | The Complete JavaScript Course | Ep.48
90
Destructuring in JavaScript | The Complete JavaScript Course | Ep.49
91
What is BOM in JavaScript? | Window Object | The Complete JavaScript Course | Ep.50
92
Introduction to DOM | Document Object Model | The Complete JavaScript Course | Ep.51
93
Selecting Elements in JavaScript | DOM Manipulation | The Complete JavaScript Course | Ep.52
94
Difference between innerText and textContent in JavaScript | The Complete JavaScript Course | Ep.53
95
getAttribute and setAttribute in JavaScript | The Complete JavaScript Course | Ep.54
96
How to apply styles in JavaScript | The Complete JavaScript Course | Ep.55
97
Access Parent Sibling & Children Elements using JavaScript | The Complete JavaScript Course | Ep.56
98
What is the Difference Between Element and Node? | The Complete JavaScript Course | Ep.57
99
What is the difference between append and appendChild? | The Complete JavaScript Course | Ep.58
100
Creating Elements in JavaScript | The Complete JavaScript Course | Ep.59
101
How to remove element using Javascript ? | The Complete JavaScript Course | Ep.60
102
Event Listeners Explained in Depth | The Complete JavaScript Course | Ep.61
103
Form Event and Event Object in JavaScript | The Complete JavaScript Course | Ep.62
104
Keyboard events in JavaScript | The Complete JavaScript Course | Ep.63
105
Mouse Events in JavaScript | The Complete JavaScript Course | Ep.64
106
Event Bubbling and Event Capturing in JavaScript | The Complete JavaScript Course | Ep.65
107
Event Simulation in JavaScript | The Complete JavaScript Course | Ep.66
108
Event Delegation in JavaScript | The Complete JavaScript Course | Ep.67
109
Your First JavaScript Project | Focus on Today | Part 1 | JavaScript Projects | Ep.01
110
Local Storage Explained in Depth | The Complete JavaScript Course | Ep.68
111
Your First JavaScript Project Completed | Part 2 | JavaScript Projects | Ep.02
112
Foodie Hamburger Project | How to make Hamburger Menu? | JavaScript Projects | Ep.03
113
How to Create Popup Using JavaScript in Hindi | JavaScript Projects | Ep.04
114
FREE Figma Design | Quiz App Challenge | JavaScript Projects | Ep.05
115
What is API? Talking to the Outside World Using JSON | The Complete JavaScript Course | Ep.69
116
What is XMLHttpRequest? | The Complete JavaScript Course | Ep.70
117
Synchronous vs Asynchronous Javascript | The Complete JavaScript Course | Ep.71
118
Callback Hell in JavaScript | The Complete JavaScript Course | Ep.72
119
Promises Explained in Depth | The Complete JavaScript Course | Ep.73
120
Let's Fix the Callback Hell using Promises | The Complete JavaScript Course | Ep.74
121
Introducing Fetch API | Better than XHR | The Complete JavaScript Course | Ep.75
122
Async Await Explained Like Never Before | The Complete JavaScript Course | Ep.76
123
Try and Catch Block in JavaScript | The Complete JavaScript Course | Ep.77
124
Optional Chaining in JavaScript | The Complete JavaScript Course | Ep.78
125
Import and Export in JavaScript | ES6 Modules | The Complete JavaScript Course | Ep.79
126
Frontend Mentor REST Countries API Project | Part - 1 | JavaScript Projects | Ep.06
127
[COMPLETED] Frontend Mentor REST Countries API Project | Part - 2 | JavaScript Projects | Ep.07
128
OOPs (Encapsulation & Abstraction) and Factory Functions | The Complete JavaScript Course | Ep.80
129
Constructor Function and new Keyword | The Complete JavaScript Course | Ep.81
130
Classes in JavaScript Explained in Depth | The Complete JavaScript Course | Ep.82
131
Private and Public Fields in Class | The Complete JavaScript Course | Ep.83
132
Static Properties And Methods on Classes | The Complete JavaScript Course | Ep.84
133
Getters and Setters in JavaScript | The Complete JavaScript Course | Ep.85
134
Prototypal Inheritance | Extends and Super Keyword in JS | The Complete JavaScript Course | Ep.86
135
Demystifying THIS Keyword in JavaScript | The Complete JavaScript Course | Ep.87
136
Mastering JavaScript Dates: Part 1 - Understanding Time Zones, UTC, GMT, ISO, Unix Time, and Epoch
137
Mastering JavaScript Dates: Part 2 - Understanding Set Methods with Project
138
Congratulations🎉 We have Successfully Completed JavaScript | The Complete JavaScript Course
139
An Introduction to Terminal and CLI | Git and GitHub Fundamentals | Ep.01
140
Git and Version Control | Git and GitHub Fundamentals | Hindi | Ep.02
141
Best VS Code Extensions to Supercharge Your Git Workflow | Git and GitHub Fundamentals | Ep.03
142
How to Create & Merge Branches? | Git and GitHub Fundamentals | Ep.04
143
Complete GitHub Tutorial in One Video | Git and GitHub Fundamentals | Ep.05
144
Revert and Reset Commits Like a Pro | Git and GitHub Fundamentals | Ep.06
145
How to Resolve Conflict in Git? | Git and GitHub Fundamentals | Ep.07
146
What is Stashing in Git? | Git and GitHub Fundamentals | Ep.08
147
How to Cherry Pick a Commit in Git? | Git and GitHub Fundamentals | Ep.09
148
What is .gitignore file? | Git and GitHub Fundamentals | Ep.10
149
Pull Requests in Git | Git and GitHub Fundamentals | Ep.11
150
What is Open Source? How to Contribute to Open Source? | Git and GitHub Fundamentals | Ep.12
151
Some Useful Tips for Git | Git and GitHub Fundamentals | Ep.13
152
NPM Crash Course | Zero to Advanced | Hindi
153
Getting Started with Tailwind CSS | Tailwind CSS Complete Course in Hindi | Ep.01
154
The Shoe Company l Tailwind CSS Responsive Project | Tailwind CSS Complete Course | Hindi | Ep.02
155
Dynamic Styling using Tailwind | Tailwind CSS Complete Course | Hindi | Ep.03
156
Automatically Sort Tailwind Class with Prettier | Tailwind CSS Complete Course | Hindi | Ep.04
157
Carousel Using SwiperJS and Tailwind | Tailwind CSS Complete Course | Hindi | Ep.05
158
The Complete React Course | Trailer | Zero to Advanced
159
Why do we need React? | The Complete React Course | Ep.01
160
How Much JavaScript do We Need for React? | The Complete React Course | Ep.02
161
What is React Element? | The Complete React Course | Ep.03
162
What is JSX? | Transform JSX with Babel | The Complete React Course | Ep.04
163
How Source Maps Can Save You Time in React Development | The Complete React Course | Ep.05
164
ReactJS vs NextJS: Which One Should You Learn First? | The Complete React Course | Ep.06
165
Why Should You Learn React With Parcel? | The Complete React Course | Ep.07
166
Render Multiple Elements in React | The Complete React Course | Ep.08
167
Introduction to React Component | The Complete React Course | Ep.09
168
How to Use Images in React? | The Complete React Course | Ep.10
169
Event Handling in ReactJS | The Complete React Course | Ep.11
170
How State Works in React – Explained in Depth | The Complete React Course | Ep.12
171
How useState Works Behind the Scenes in React | The Complete React Course | Ep.13
172
State Vs Props in React | When to use what? | The Complete React Course | Ep.14
173
What are React Fragments? | Hindi | The Complete React Course | Ep.15
174
What is Children Prop in React? | The Complete React Course | Ep.16
175
Conditional Rendering in React | Explained with Examples | The Complete React Course | Ep.17
176
How to Scope CSS to a Component in React? | CSS Modules in React | The Complete React Course | Ep.18
177
Hands-On React Using Real World Projects | Frontend Mentor | The Complete React Course | Ep.19
178
Implement Search Functionality in React | The Complete React Course | Ep.20
179
useEffect Hook in React | Hindi | The Complete React Course | Ep.21
180
React Router v6 in Hindi | Routing in React | The Complete React Course | Ep.22
181
Dynamic Routing in React | The Complete React Course | Ep.23
182
Handle Multiple Fetch Requests | Promise.all( ) in React | The Complete React Course | Ep.24
183
Shimmer Effect in React | Skeleton Loading | The Complete React Course | Ep.25
184
Pass Data from One Page to Another in React | The Complete React Course | Ep.26
185
Dark Mode in React | The Complete React Course | Ep.27
186
How to Work with the React Context API? | The Complete React Course | Ep.28
187
How to Create Custom Hooks in React ? | The Complete React Course | Ep.29
188
REST Countries API Project Completed | Frontend Mentor | The Complete React Course | Ep.30
189
How to Deploy a React JS App? | Hindi | The Complete React Course | Ep.31
190
How To Work With Forms in React | Basics of Form Handling | The Complete React Course | Ep.32
191
Unidirectional Data Flow in React | Controlled Components | The Complete React Course | Ep.33
192
useRef Hook Explained in Hindi | The Complete React Course | Ep.34
193
Form Validation in React | Explained in Hindi | The Complete React Course | Ep.35
194
Create Custom Form Fields in React | Advanced Form Validation | The Complete React Course | Ep.36
195
Filter Data Using Custom Hooks | The Complete React Course | Ep.37
196
Create Custom Context Menu in React | The Complete React Course | Ep.38
197
Edit Functionality in React | The Complete React Course | Ep.39
198
Sorting in React | Ascending/Descending and Alphabetically | The Complete React Course | Ep.40
199
LocalStorage in React Using Custom Hook | The Complete React Course | Ep.41
200
React Developer Tools | Components & Profiler | The Complete React Course | Ep.42
201
How to Use TailwindCSS with React | The Complete React Course | Ep.43
202
NavLink in React | The Complete React Course | Ep.44
203
Create Pop-up Using React Portal | The Complete React Course | Ep.45
204
Code Splitting and Lazy Loading in React | React.lazy & Suspense | The Complete React Course | Ep.46
205
Class Components in React | The Complete React Course | Ep.47
206
Lifecycle Methods in React | The Complete React Course | Ep.48
207
Binding of "this" Keyword in Event Handlers | The Complete React Course | Ep.49
208
Higher-Order Components In React | The Complete React Course | Ep.50
209
Build your own React.js Library | The Complete React Course | Ep.51
210
Recreating useState Hook | The Complete React Course | Ep.52
211
Virtual DOM, Reconciliation and Diffing Algorithm in React | The Complete React Course | Ep.53
212
Congratulations🎉 We have Successfully Completed React | The Complete React Course
213
Redux Fundamentals in Hindi | The Complete Redux Course | Ep.01
214
Redux Developer Tools | The Complete Redux Course | Ep.02
215
Make Your Own Redux | The Complete Redux Course | Ep.03
216
Manage Complex State using Redux | The Complete Redux Course | Ep.04
217
Creating Multiple Reducers | combineReducers in Redux | The Complete Redux Course | Ep.05
218
Create Your Own combineReducers Function | The Complete Redux Course | Ep.06
219
Action Creators in Redux | The Complete Redux Course | Ep.07
220
Connect Redux with React | The Complete Redux Course | Ep.08
221
Make Shopping Cart using React and Redux | The Complete Redux Course | Ep.09
222
Create Your Own React Redux Library | The Complete Redux Course | Ep.10
223
What are Slices in Redux? | The Complete Redux Course | Ep.11
224
Immer in Redux | The Complete Redux Course | Ep.12
225
Redux Toolkit in Hindi | The Complete Redux Course | Ep.13
226
Make Your Own Redux Toolkit | The Complete Redux Course | Ep.14
227
Middleware in Redux | The Complete Redux Course | Ep.15
228
Making API Call in Redux | The Complete Redux Course | Ep.16
229
Selectors in Redux | The Complete Redux Course | Ep.17
230
Custom API Middleware in Redux | The Complete Redux Course | Ep.18
231
Fetch Data using Redux Thunk | The Complete Redux Course | Ep.19
232
createAsyncThunk in Redux Toolkit | The Complete Redux Course | Ep.20
233
RTK Query Complete Guide in Hindi | CRUD Operations, Caching & Optimistic Updates | Ep.21
234
Guru Dakshina
Requirements
- Basic computer knowledge
- Internet connection for video streaming
- Code editor (VS Code recommended)
- Motivation to learn and practice
Course Features
Lifetime Access
Certificate of Completion
Mobile and Desktop Access
Downloadable Resources
Community Support
₹0
View Course4.8 (234 reviews)
Course Details
Duration10h 12m
LevelAdvanced
LanguageEnglish
Students1,035
Updated2025-10-20
Similar Courses in this Category
harkirat-Cohort-3
Learn Advanced Web Development by harkirat Singh with comprehensive video tutorials and hands-on projects.
Harkirat Singh5.0
Namaste Node.js
Learn Backend from Scratch to Advanced with Node.js, Express.js & MongoDB, covering internal architecture, real-world projects, deployment and more. :contentReference[oaicite:2]{index=2}
Akshay Saini4.8
Namaste React
A comprehensive React course taking you from zero to hero. Build real-world apps, understand how React really works under the hood, and become a frontend expert. :contentReference[oaicite:2]{index=2}
Akshay Saini4.8
harkirat-Cohort-2
Learn Live 0 100 Complete by harkirat Singh with comprehensive video tutorials and hands-on projects.
Harkirat Singh4.7
Ready to Start Learning?
Join thousands of students who have already enrolled in this course.
Start Learning Now