Interview
https://www.youtube.com/watch?v=oDNmGfAIpQY
https://www.youtube.com/watch?v=wTmZ-jEkfgc

NAUKRI RESUME SAMPLE
https://www.naukri.com/career-advice/react-developer-resume-sample-ffid

YAHOO BABA
https://www.youtube.com/watch?v=kp8bbu4IgEY

====================================================
MDN
https://developer.mozilla.org/en-US/



====================================================
REACT EXTENTON

autocomplet jsx code like img, h1
https://www.youtube.com/watch?v=k_Z5j-mxSmY

Best React JS Extension for Visual Studio Code
https://www.youtube.com/watch?v=p3gvddo-7kM
es7 extention == <img, rafce


These 5 VsCode Extensions Will Skyrocket Your React Productivity
https://www.youtube.com/watch?v=UolaGb7tR38
====================================================


HTML, CSS, JAVASCRIPT, REACT


JS			BS-3
jquery			BS-4
react js		BS-5
SCSS			MENU
figma			MODAL
advance css		DROPDOWN
D-Flex
flex-row







========================================================================================
1) tell me your self
========================================================================================

Skill:- React.js, NPM, Redux, Component, ES6, HTML5, CSS, CSS3, SASS, Bootstrap, JavaScript, JQuery






========================================================================================
2) what is html
========================================================================================
HTML is HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. 
HTML is HyperText Markup Language it is manage to content how to display the web browser

hyper text markup language.
HYPER=> link
text=> containt
markup language.=> tags





========================================================================================
3) sementic and non sementic element
========================================================================================
Semantic elements in HTML are elements that provide meaning to the content they contain. like <header> header code in it </header>

	header, footer, nav, section, article, aside, figure SEMENTIC 
	div, sapn, => non sementic 

it is clarify to browser/developer which type content we use it in tag





========================================================================================
4) what is atteribute how many type of atteribute
========================================================================================
HTML attributes are special words used inside the opening tag to control the element's behaviour. HTML attributes are a modifier of a HTML element type.
alt, src, type, href





========================================================================================
5) !doctype use
========================================================================================
DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in

The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.

In HTML 5, the declaration is simple:




========================================================================================
5a) What are Meta Tags? What are the 5 type of meta tags?
========================================================================================
https://www.youtube.com/watch?v=sA2SrNvoDMU


Meta tags in HTML are elements used to provide metadata or additional information about a web page

meta tags - provide additonal information about the web page

5 type of meta Tags
1) charset		=> The charset ="UTF-8" attribute ensures that characters from different languages will be dispalayed correctly in the browser
2) viewport		=> for Responsive design
3) description		=> Description for SEO
4) Keywords 		=> Keywords for SEO
5) author		=> This  meta tag can be used to specify the author of the document

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Prtainment Media & Communications | Branding | Communications | Marketing | PR">
<meta name="keywords" content="best PR Company in Delhi, ">
<meta name="author" content="Shobhit">





========================================================================================
5b) what are the diffeernce between block-level element and inline element
========================================================================================
Block-level Element
<div>
<p>
<h1>
<ul>
<li>
<tabel>
<form>


Inline Elements 
<span>
<a>
<strong>
<em>
<img>
<input>
<br>




========================================================================================
5c) difference between Absolute and Relative URLs?
========================================================================================
Absolute urls
1) Absolute URLs provide the complete web adress of a resource
2) Absolute URLs are typically used to link to resources on different websites

<a href="http://www.abc.com">HTTM URL</a>
<a href="mailto:info@abc.ocm">email</a>

Relative URLs
Relative URLs specify the location of a resource in relation to the current document. Full url is not required

<a href="page.html">same Directory</a>
<img src="images/image.jpg" alt="image"/>
<link rel="stylesheet" href="css/home.css" />
<script src="js/bootstrap.js"></scrit>






========================================================================================
5d) what is SEO? whate are 5 HTML Best Practices for SEO
========================================================================================
SEO is the practice of optimizing a website to improve its visibility and ranking in serch engine result.

5 HTML best practices for SEO
1) Use Samantic HTML element
2) Optimize page Titles
3) Use Meta Description Tags
4) Use proper Heading Tags, H1, h2, h3
5) Optidmize Image Alt Attributes






========================================================================================
6) what is use head tag
========================================================================================
The head tag is an HTML element used to define the head section of an HTML document




========================================================================================
7) what is display flex
========================================================================================
display: flex, which allows you to create flexible layouts with elements that you can align and distribute vertically or horizontally.

display: flex ==== allows to create flexible layouts




========================================================================================
8) block, inline, inline-block deffrence
========================================================================================
block, double line 
inline => single line no margin
inline-block => single line with margin





========================================================================================
9) what is css
========================================================================================
CSS stands for Cascading Style Sheets
There are three types of CSS: 
i) external, 
ii) internal, and 
iii) inline. CSS





========================================================================================
9A) The CSS Box Model
========================================================================================
The CSS box model is essentially a box that wraps around every HTML element. It consists of: content, padding, borders and margins. The image below illustrates the box model:

Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent

-------------------------------------------------------------------
box-sizing: border-box;





========================================================================================
10) how many type of position
========================================================================================
So, there are several types of positioning: 
static, 
relative, 
absolute, 
fixed, 
sticky, 
initial and inherit.

initial => defaule property like a = color blue
inherit=> parent property




========================================================================================
11) psudo element, psudo selector 
========================================================================================
https://www.w3schools.com/css/css_pseudo_elements.asp

All CSS Pseudo Elements
p::after
p::before
p::first-letter
p::first-line
::marker
p::selection

All CSS Pseudo Classes
a:active
input:checked
input:disabled
p:empty
input:enabled
p:first-child
p:last-child
p:first-of-type
input:focus
a:hover
input:in-range
input:invalid
:not(p)
p:nth-child(2)
p:nth-last-child(2)





========================================================================================
12) media qurey
========================================================================================
Used for all media type devices

@media screen and (min-width:320px) and (max-width:767px) {
}








========================================================================================
13) new features in html5
========================================================================================
1) Intro of audio tag, video tag
<audio controls autoplay></audio>
<video  width = "300" height = "200" controls autoplay> </video> 


2) Vector Graphics: svg tag
<svg></svg>

3) Header and Footer:
<Header></Header>
<footer></footer>  

4) Figure and Figcaption: tag
<figure></figure>  

5) Nav tag:








========================================================================================
14) what is css preprocessor
========================================================================================
A CSS Preprocessor is a tool used to extend the basic functionality of default vanilla CSS. 
It helps us to use complex logical syntax like - mixins, variables, functions, code nesting, and inheritance.

CSS Preprocessor ek tool hota hi jo hame allow karta hai. vanilla CSS ki basic functinality ko use karne ki
Operators, 	=== & .text1{font-size: 1.4rem + 1.4rem;}
variables,  	=== $blue:#3333ff; --|-- & .text2{color: $blue;}
Nesting,	=== & .text1
mixins, 
Parameter,
Partials,





========================================================================================
15) What is Tailwind css
========================================================================================
FULL COURSE
FULL TUTORIAL LINK (code step by step)
https://www.youtube.com/watch?v=AGbrsuWcwiE&list=PL8p2I9GklV471sLqkGuf0eKAu9sVNmKFV

it is css framwork like bootstrap, matarialUI

ek class me multiple property NAHI hoti like bootstrap ki tarah like (btn btn-primary)
tailwind css me alag alag property ki alag class hoi hai, jaise

backgrond		bg-class
border			border-class
color			color-class




====================================================================================================================
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
====================================================================================================================

YAHOO BABA
https://www.youtube.com/watch?v=kp8bbu4IgEY

Number()
parseInt()
parseFloat()
isFinite()
isInteger()
toFixed(x)
toPrecision(x)


========================================================================================
15 a) modulus operator vs Modules
========================================================================================
Operand
https://www.youtube.com/watch?v=tdLq9mzx4mI

https://www.youtube.com/watch?v=iszJ98ZwGXU

modulus operator === % 
reminder return karta hai division karne ke bad = 7%2 == 1

Modules === file, funciton, variable, class ko import ya export karne ke liye modules ka use kia jata hai




========================================================================================
15 a) fat arrow function in js? what is it use?
========================================================================================
https://www.youtube.com/watch?v=4oDcgaIJOZ0

https://www.youtube.com/watch?v=bJKjtC9MnZ8


1) Arrow functions allow us to write shorter function syntax:
2) Simpler and shorter way for defining fuction in JavaScript
let myFunction = (a, b) => a * b;

arrow function => iska apna this nahi hota







========================================================================================
15 b) what is Scope in js
========================================================================================
Scope determines where variables are defined and where they can be accessed
3 Type of Scope

1) Global Scope		=> outside the function
2) Function Scope	=> var
3) Block Scope		=> let const





========================================================================================
15 c) what is Hoisting in js
========================================================================================
https://www.youtube.com/watch?v=_FmHfOqJ4SY&t=313s
by anil sidhu

Hoisting is a JavaScript behavior where functions and variable DECLARATIONS ARE MOVED TO THE TOP. of  their respective scopes during the compilation phase.

function hoisting
-----------
hoisting_fun();
function hoisting_fun() {
    console.log(`Hoisting Function run`)
}

jitni bhi FUNCTION DECLATION  or VARIABLE hi wo uper aa jati hai agar hum  JavaScript use karte hai to


variable hoisting
------------------
x = 10;
console.log(x);

var x;



========================================================================================
15 d) Defference between PRIMITIVE and NON-PRIMITIVE Data types?
========================================================================================

------------------------
PRIMITIVE DATA TYPE
------------------------
Strigns
Number
Booleans
Undefined
Null

Primitive data types can hold only SINGLE value.
Primitive data type are IMMUTABLE meaning their values once assigned, cannot be changed.


------------------------
NON-PRIMITIVE DATA TYPE
------------------------
Object
Array
Function
Date
RegExp

Non primitive data types can hold MULTIPLE value.
They are MUTABLE and their values can be changed





========================================================================================
15 e) when to use which type of CONDITIONS STATEMENTS in real applications
========================================================================================
1) if, else condition
2) turnery operator
3) switch case statement

--------
IF ELSE
--------
if, else: for complex, different & multiline execution
BENEFIT: Cover all scenarios.


----------------
TERNARY OPERATORS
----------------
Ternary operators: for simple conditions & single value evaluations
BENEFIT: Short one line syntax


----------------
SWITCH CASE
----------------
// SWITCH STATEMENT
let count1 = 2;
switch (count1) {
    case 1:
        document.getElementById("text1a").innerHTML = ` the case match with 1 `
        break;
    case 2:
        document.getElementById("text1a").innerHTML = ` the case match with 2 `
        break;
    case 3:
        document.getElementById("text1a").innerHTML = ` the case match with 3 `
        break;
    case 4:
        document.getElementById("text1a").innerHTML = ` the case match with 4 `
        break;

    default:
        document.getElementById("text1a").innerHTML = ` the case not  match with (1,2,3,4)  `
        break;

}









========================================================================================
15 f) What is the difference between == and === 
========================================================================================

console.log(1 == '1') 	=> true		only value compare
console.log(1 === '1')	=> false	value and datatype compare





========================================================================================
15 g) synchronous and asynchronous programming
========================================================================================
-------------
SYNCHRONOUS 
-------------

function synchronous_fun1() {
    //loading data from API
    //uploading file 
    //animation
}

function synchronous_fun2() {
    console.log(fun2)
}

fun2 block when fun1 will execute



-------------
ASYNCHRONOUS 
-------------

function asynchronous_fun3() {
    setTimeout(() => {
        console.log(`asyncrios method 3`)
    }, 3000)

}
asynchronous_fun3()


function asynchronous_fun4() {
        console.log(`asyncrios method 4`)
}
asynchronous_fun4()

//fun 4 execute frist then after 2sec will be fun 3 execute 
Asynchronous oprations DO NOT BLOCK the execution of the code



========================================================================================
15 h) fat 
========================================================================================





========================================================================================
15 i) fat 
========================================================================================





========================================================================================
15 j) fat 
========================================================================================






========================================================================================
15) js variable type => let, var, const, nothing
========================================================================================
var  function Scoped

let & const  block Scoped






========================================================================================
16) data type
========================================================================================
"undefined"
"boolean"
"number"
"string"
"bigint"
"symbol"








========================================================================================
17) array, object
========================================================================================

// ARRAY Destructiuring assignment
**********************************************

const cars_name1 = ["TATA", "MARUTI", "HUNDUI", "HONDA", "BMW", "MAHINDRA", "KIA"]

let [name1, name2, name3, name4, name5, name6, name7] = cars_name1

document.getElementById("array_value_p1").innerHTML = `My Favorite car is &nbsp; <b>${name1}</b>`;



// Object Destructiuring in ES 6
**********************************************
const biodata1 = {
    name: "jitender",
    age: "40",
    deg: "b.com",
}

let { name, age, deg} = biodata1;

document.getElementById("od_value_p1").innerHTML = `
&nbsp; name &nbsp; <b>${name}</b> 
&nbsp; age &nbsp; <b>${age}</b> 
&nbsp; deg &nbsp; <b>${deg}</b> `;




========================================================================================
18) call back funtion
========================================================================================



Any function that is passed as an argument is called a callback function.
A callback is a function that is to be executed after another function has finished executing -- hennce the name 'CALL BACK'













========================================================================================
19) difference between null and undefined
========================================================================================
https://www.youtube.com/watch?v=e7y7zvnVZfE


UNDEFINED
----------
In javascript, undefined means a variable has been decleard but has not yet been assigned a value
==> variable declared kia hai but value assigned nahi ki

let b ;
datatype = undefined

==> UNDEFINED can be used when you don't have the value right now,
but you will get it after some logic or operation.



NULL
----------
null is an assignment value.
It can be assigned to a variable as representation of no value
==> variable declared kia hai or value assigned ki hai null

typeof null is an object.

let a = null;
datatype = object


==> NULL can be used, when you are sure do not have any value for the particular variable






========================================================================================
20) Difference between Virtual DOM and Real DOM
========================================================================================
DOM 		== 	Document Object Model (DOM)

Document	==	ALL CODE
Object		==	object element == head, meta, link, body, header, footer
Model 		==	object ko rakhe ka tarika == html> head> title, html>body>header/footer

hamare HTML code ko browser engine ek structure me convert kar deta hai jise kehte hi domtree/ DOM


Virtual DOM == real DOM ke copy bana leta hai copy1 copy2 
copy1 = p change hota hai
copy2 = p change hoga
real DOM = p change hoga








========================================================================================
21) what is event loop in javascript
========================================================================================
https://www.youtube.com/watch?v=fuTWE0Mupzk


Synchronous vs Asynchronous Programming in JavaScript 
https://www.youtube.com/watch?v=tBmeblr67U0&list=PLwGdqUZWnOp0hSGwasCjbrWSPrEKqB_kz&index=51

Synchronous --- A synchronous request blocks the client until operation completes, javascript engine of the browser is blocked
Synchronous --- jab tak ek kaam khatm nahi hota aap dusre kam ko start nahi kar sakte

Asynchronous --- AJAX Web-Application Model
Asynchronous --- In such case, javascript engine of the browser is not blocked
Asynchronous --- aap ek kaam ke sath 2 kam bhi kar sakte ho or uske sath 3 kam bhi kar sakte ho isme koi boundation nahi hoti
Asynchronous --- setTimeout(() =>{}


Execution Context and Execution Stack
https://www.youtube.com/watch?v=_QXn0tW2gSY&list=PLwGdqUZWnOp0hSGwasCjbrWSPrEKqB_kz&index=3


************************************
https://www.youtube.com/watch?v=vFJbKR6zfCE
code ko read karta hai uper se niche ki or
agar code dely hai setTimeout(()=>) laga hua hai to wo jump kar jayega next code ki or (kioki javascript wait nhi karta)


event loop == background me jo kam complete ho gaya hai use browser me execute karta hai
setTimeout(() =>{5s}

1) web apis		hold kar lega 5s ke liye, 5s pura hone par usee queue me dal dega
2) Calback Queue	Queue se call stack me 
3) Call Stack == 	code execuite

************************************







========================================================================================
22) How to Use map(), filter(), and reduce() in JavaScript
========================================================================================
https://www.youtube.com/watch?v=bAUMuuRH99o


map()
--------------
array retrun karta hai
get normal array
return new array
3 argument pass in this --- element, index, array like foreach loop



filter()
--------------
array retrun karta hai

array1 = [2, 10, 17, 5, 3, 50]
item>5 === 5 ke uper ki sari value retrun karega == 10,17,50



reduce()
--------------
reduce ek value return karta hai








========================================================================================
23) This keyword in JavaScript
========================================================================================
https://www.youtube.com/watch?v=RwLVyats1qY
thapa techical

this = this refer our parent object name

this = this javascript this keyword refers to the object it belongs to
this = It has deiifferent values depending on where it is used

in use function/outside
this = window object
consol.log(this) == it retrun global object == window



https://www.youtube.com/watch?v=clXyXw_-ESY
anil sidhu
2) THIS => lexical scope for this

lexical scope = range
this kia hota hai
jab ham koi object declare karte hai
jab ham usi object ke under usi boject ki koi dusri property use karni hoti hai to hum use karte hai THIS
this khud ki property denot karta hai, khud ko batata hai ki meri properti yaha per use karlo





========================================================================================
24) difference between call bind and apply
========================================================================================
CALL	 ==> https://www.youtube.com/watch?v=ZZbPmnTEr1E
BIND	 ==> https://www.youtube.com/watch?v=SsLlT7Mv8ZY
APPLY	 ==> https://www.youtube.com/watch?v=4OQfonZbTF8


CALL
--------
call == the call() method is a predefined javascript method
ek boject dusre object ke method ko use kar sakta hai by using call() method



BIND	 
--------
by this method, we can bind an object to a common function, so that the function gives different result when its need.
bind == kisi object ko common function ke sath banth/bind sakete ho

==> the bind() method teakes an object as an first argument and creates a new funciton


APPLY	 
--------
the apply() method is similar to the call() method

the call() method takes arguments separately
the apply() method takes arguments as an array










====================================================================================================================
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
********************************************************************************************************************
====================================================================================================================




========================================================================================
25) jest testing
========================================================================================

https://www.youtube.com/watch?v=lgVKUMTLBm0&list=PL8p2I9GklV47ZpFC9sNHTXwJRgwwzdkNG&index=3

testing by developers
3 type testing

1) unit Testing		= Testing individual units or components
2) intgegrated Testing	= Testing between two unit or components/ multipule components
3) E-2-E Testing	= Test start to end complete project


npm run test

iske 3 parameter hote hai
1) defination
2) call back funtion
3) setTimeout

--------------------
file sume.test.js
--------------------

import sum from './Asetts/component/sum';

test('testing for sum funtion', () => {
  expect(sum(10,15)).toBe(25);
},2000);




--------------------
file app.test.js
--------------------
import Content3 from './Asetts/component/Content3';

test('renders  contene 3', () => {
  render(<Content3 />);
  const text1 = screen.getByText(/this is contene/i);
  expect(text1).toBeInTheDocument();
});



test("content 2 testing 2", ()=>{
    render(<Content2/>)
    const attribute = screen.getByAltText("picture")
    expect(attribute).toBeInTheDocument()

})









========================================================================================
25) what is redux
========================================================================================
thapa technical
https://www.youtube.com/watch?v=1oU_YGhT7ck

code with harry
https://www.youtube.com/watch?v=JZQWKYjfZlQ

-------------------------------------------------------
Redux is a way to manage the “state”

REDUX STORE
-----------
why redux?

=> when a javascript application grows big, it becomes difficult for the user to manage its state.
=> Redux solves this problem by managing applications's state with a single global object called store


-- ==> jab application ka size bada ho jata hai to defecult hota hai state ko manage karna, 
tabi Redux ka use kia jata hai, ye sare data ko REDUX STORE me dal dete hai or use SINGLE GLOBAL OBJECT bana deta hai. 
kisi bhi commponent ki state ko use karne k liye REDUX STORE se data liya jata hai.

==> redux is javaScript Library. It help to manage state of application
redux store me application ke sare component ke state store hote hai. 
waha single blobal object ban jata hai sare state ka. kisko change karna asan ho jata hai


// install redux 
npm i redux react-redux redux-thunk

// create folder in src
state
state/action/index.js
state/reducer/amountreducer.js
state/index.js
state/store.js

HOW TO WORK

1) action create => action dispatch
2) reducer action ko samajhta hai kon sa case run karna hai. fir wo us state ko updat kar deta hai






========================================================================================
25 a) props drilling in react
========================================================================================
https://www.youtube.com/watch?v=SlPuuRtuKI4

Props drilling is a pattern in React whre you pass data from a parent component to deeply
 nested child components throught multiple layers of components, 






========================================================================================
25 b) what is the role of JSX in react
========================================================================================
jsx = js+xml
Babel library convert jsx code TO js code, then browser understant the code
browser understan code only HTML css js, not jsx



========================================================================================
25 c) Arrow Function Experssion in JSX?
========================================================================================
when we assign whole function to a variable this call fuction expression



========================================================================================
25 d) Differnce between react and angular
========================================================================================
React and Angular both are used to create single page UI application using components

===REACT===
1) React is javaScript library
2) React using a virtual DOM which makes it faster.
3) React is smaller in size and lightweight and therfore faster sometime
4) React depends on external libraries for many completx features, so developer has
to write many lines of code for complex functionalities.

===ANGULAR===
1) Angular is complete framework
2) Angular use a dreal DOM
3) Angular is bigger becase it is a complete Framework
4) Since Angular is a complete framework, threfore it provide built-in support
for featuers like routing, forms, validation, and HTTP requests



========================================================================================
25 e) what are state, stateless, statefull, and state management terms
========================================================================================
https://www.youtube.com/watch?v=qyUUxJhYp5Y
1) jo component state ko carry karte hai or state ko update karta hai wo = STATEFULL component hote hai
2) jo component state ko carry nahi karte hai wo = STATELESS component hote hai




========================================================================================
25 f) what is the role of index.js file and ReactDOM in React
========================================================================================
1) The index.js file is the javaScrip file that replaces the root element of the index.html file with the newly rendered components
2) ReactDOM is a javaScript library that renders components to the DOM or browser



========================================================================================
25 g) what is Babel?
========================================================================================
Babel in React is used to transpile JSX syntax into regular JavaScript wthich browser can understand









========================================================================================
26) what is ajax
========================================================================================
ajax is a web development technique which help to create responsive web Application







========================================================================================
27) what is GIT
========================================================================================
https://www.youtube.com/watch?v=Ez8F0nW6S-w

GIT ==> Version Control System 
version control system is a tools that helps to track changes in code
---------
why git
---------
popular
free & Open Source
fast & scalable

---------
git help
---------
track the history
collaborat


---------
Github
---------
Website that allows developers to store and manage their code using Git.



***********************************************

git -v	 	==> vor sersion check
git clone https://github.com/jitendersharma704772/project3.git

--git status--
untracked	new file
modified	if changed in file
staged		if add new file but not commit
unmodified	existing file no change

git remote add origin <-- some link -->
git remote -v
git branch
git branch -M main (to rename branch)
git checkout <-branch name->		==> (move 1 branch to 2 branch)
git checkout -b <-new branch name->	==> for create new branch
git branch -d <-branch name->		==> fro delte the branch
git diff <-branch name->		==> if we in feature1 ==> git diff feature2
git marge <-branch name->		==> if we in feature1 ==> git diff feature2
git pull origin main			==> git hub se system me import karne k liye 
git reset <-file name->			==> for one file
git reset				==> for all files
git reset HEAD~1			==> for commit undo 1 step
git reset <-commit hash->
git reset --hard <-commit hash->
Fork					==> fork is a rough copy

------------
frist time
------------

git init
git status
git add .
git commit -m "first commit"
git branch -M main (newname)
git remote add origin https://github.com/jitendersharma704772/project3.git
git push -u origin main
git push --force origin master


--FOR CONFIGURE--
git config --global user.name "jitendersharma704772"
git config --global user.email "jitendersharma704772@gmail.com"
git config --list




------------
changes
------------

git add .
git commit -m "css changes"
git push -u origin master
git push


git push --force origin master
***********************************************







========================================================================================
28) what is JSON
========================================================================================
https://www.youtube.com/watch?v=hP-gzzorYz4&pp=ygUVd2hhdCBpcyBqc29uIGluIGhpbmRp
https://www.youtube.com/watch?v=whNFPBEI-wM

JSON => JavaScript object Notation
1) ek lightweight data intechange format hai
2) Ye human-readable format hai jise data exchange karne ke liye use kiya jaata hai. 
3) JSON ke structure mein key-value pairs hote hai, jise curly braces '{}' main raka jaata hai
4) Har key ek unique identifier hot hai jo uske corresponding value se associate hoti hai. Isme arrays, object, strings, numbers booleans, aur null values store kiye ja sakte hai
5) Ye ek common format hai web applications mein data exchange karne ke liye, kyunki ye readable aur easy to understand hota hai. iski flexibility aur simplicity ki wajah se, ye programming languages ke across use hota hai, na ki sirf javaScript mein

----------------
EXAMPLE
----------------
toDoList ==> key
{task} ==> todo task, property

 {
        "toDoList":[
            {
                "task": "Complete homework",
                "priority":"High",
                "dueDate": "2023-11-30"
            },
            {
                "task": "Buy proceries",
                "priority":"Medium",
                "dueDate": "2023-12-02"
            },
            {
                "task": "Call friend",
                "priority":"Low",
                "dueDate": "2023-11-29"
            }
        ]
    }



========================================================================================
29) what is Middleware
========================================================================================

Middleware  ==> ye kuch funciton hote hai, inki help ye hum request or response ko ACCESS kar sakte hai 
or unko modify bhi kar sakte hai







========================================================================================
30) index.js
========================================================================================
in terminal 
node index.js





========================================================================================
31) Bootstrap 5
========================================================================================
https://getbootstrap.com/docs/5.0/utilities/display/

hidden = d-none
only hidden xs		=>	(d-none d-sm-block) , all device block geater then sm
only Visible xs 	=>	(d-block d-sm-none)
only Visible md 	=>	(d-none d-md-block d-lg-none)






=============================================
Rest APIs
dom
hooks all
simple form validation js

advance css
javascript
sass
git


Jest is a Unit Testing framework

lacsical scope	==>  how to work	Range
Middleware	==>  how to work
API inbuild 	==>  how to work
redux		==>  how to work
reduce		==>  how to work	sum
map loop	==>  how to work	React in return not work of (for loop), so we use map loop
tailwind css
context api	==> 			done 63
switch statement==>			done index_js_new
this method	==>
	


Web Development Tutorials For
https://www.youtube.com/playlist?list=PLu0W_9lII9agiCUZYRsvtGTXdxkzPyItg



=============================================
TASK interviw question

1)
js title case = let myName = "hello i am John"
simple js form validation



2)
Rishabh Rawat
1:09 PM
let obj1 = { name: 'Alice', address: { city: 'Paris' } };

let obj2 = { ...obj1 };

obj2.name = 'Bob';           
obj2.address.city = 'London'; 

console.log(obj1.name);       
console.log(obj1.address.city);
															





https://www.pexels.com/api/key/
Your API Key
cbgKwEAKA60TTU75jCavYh4oGXAjvetk5C4WJYa6oEIb63TNOFYNGCkg


npm i pexels
import { createClient } from 'pexels';

const client = createClient('YOUR_API_KEY');


https://www.youtube.com/watch?v=nUUp3nI93UI