HTML :

Hindi ( prafred ) > https://youtu.be/HcOc7P5BMi4?si=tCzAWQJZZ833zKlz (2hr)

english > https://youtu.be/HD13eq_Pmp8?si=ebuMkbqNc-l4fGZ6 (1hr)

In this playlist, you find all the topics but in case you want to go fast and only learn the necessary things to start then you can watch the bellow topics in the playlist

1. basic structure of HTML tags and attributes

2. some basic tags (a, ul ol li, p, span, b, I, etc)

3. container div tag

4. form and input

5. audio, video, and iframe

6. semantic elements

CSS:

Hindi > https://youtu.be/ESnrn1kAD4E?si=Mf-X3vcLj7pbfYly (5.5hr of content and rest is project)

englist > https://youtu.be/myxfC2vfuGc?si=I_dNKycc7imLkWPw (1hr)

preferred is Hindi but if you lack time then English you can take

1. Basic of CSS and type of CSS (internal, external, inline)

2. Basic CSS properties (color, background, text-size, text-align, font-waight, hight, width, etc )

3. CSS selectors (class, id, multielement, inside and element, etc)

4. Units

5. Box model

6. flex

7. grid

8. position

9. hover focus

These 9 topics are enough to start with CSS and there are also some topics that are good to know

1. Transition

2. Transform

JavaScript:

Hindi > https://youtu.be/VlPiVmYuoqw?si=T0GAd4aM-Gsi0I_6

Hindi > https://youtu.be/sscX432bMZo?si=8bamLqa2frm3ADD1

English > https://youtu.be/Zi-Q0t4gMC8?si=-4ov7-CaDpZDxMhv

must know topics before starting ReactJS

1. Variables - (let, const, var)

2. Datatypes

3. Operators - (Arithmetic, Assignment, Comparison, Logical)

4. String - (calcination, interpulation)

5. Array and Array Methods

6. Objects and Objects methods

7. Array and Object destructuring

8. Functions - (function, fat Arrow function)

9. Conditional statements - (if-else, switch case, ternary)

10. Loops - (while, for, for-of, for-in, do-while, map, forEach)

11. Promises

12. Exception handling

13. DOM Manipulation

14. API handling - (fetch)

15. Classes (optional)

TailWindCSS:

Hindi > https://youtu.be/_9mTJ84uL1Q?si=JivFBIBWHx5_6mzc

Hindi > https://youtube.com/playlist?list=PLu0W_9lII9ahwFDuExCpPFHAK829Wto2O&si=jZllSC6truK0dxN-

1. What is TailWindCSS and how it was useful

2. Install Tailwind (CDN, tailwind cli)

3. How to use and find all TailWind classes

4. use custom values

5. Tailwind config - use custom properties in Tailwind, like CSS variables

6. Hover focus in Tailwind

7. Media Queries (mobile-first approach)

8. TailWind directive

ReactJS:

English > https://youtu.be/CgkZ7MvWUAA?si=Gud0BbpdOoijPO7L

Minimum topics to know in ReactJS

1. What is React and what problem it solve

2. Create a React app

3. Understand file structure and flow

4. Virtual DOM

5. Components and JSX

6. How to use CSS, and Images

7. What are Hooks in react, and state and props

8. Configure TailwindCSS

9. Conditional rendering

10. React Router

11. ContextAPI

12. API handling (fetch, axios)

13. State management liberty (RTK or Zustand)

NextJS Front-end:

NextJS a Fleamwork that builds on top of React means 60% of the nextJS is React. NextJS is a full-stack framework, which means in Next you can make Front-end as well as backend also.

Hare, we only see the front-end roadmap of NextJS

HIndi > https://youtube.com/playlist?list=PLu71SKxNbfoDWGIwaEwhTUR40AbH8qsTo&si=sxAhjYunY20vkimr

Minimum topics to know in NextJS

1. Create a Next app

2. Understand file structure

3. Understand client-side and server-side rendering > https://youtu.be/YkxrbxoqHDw?si=OPsRvud5L0Kidivp

4. Next Router

5. components in next - page.jsx and layout.jsx

6. Client component and server components

7. And rest is React only