LEARN WHAT MATTERS:

HTML:

HTML TOPICS:

make html file ✅✅

make boilerplate code ✅✅

understanding tags ✅✅

understanding live-preview ✅✅

understanding h1-h6 ✅✅

understanding p ✅✅

understanding br ✅✅

understanding img ✅✅

understanding a ✅✅

understanding div ✅✅

understanding id ✅✅

understanding class ✅✅ 🎉

PRACTICE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> // opening tag
    // h1 to h6 ...
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <h4>h4</h4>
    <h5>h5</h5>
    <h6>h6</h6>

    // paragraphs ..
    <p>Lorem ipsum, dolor sit amet <br> // for line brake
        consectetur adipisicing.</p>

    // image tag ..
    <img src="https://th.bing.com/th/id/R.829843c130c948d4fbb835dae965a5da?rik=LCpFbdcAeWDZ8w&riu=http%3a%2f%2fwallpapercave.com%2fwp%2ffAwVCh3.jpg&ehk=lGN4CaEuFMjMiZTZ2nF9id7MRRJ3e1tiWELDbLGorPE%3d&risl=&pid=ImgRaw&r=0" alt="">

    // a tag ..
    <a href="https://google.com"></a>

    // div ..
    <div> I am div </div>

    // id ..
    <div id="box" // i am (#)id
    ></div>

    // class ..
    <div class="box // i am (.)class
    "></div>

</body> // closing tag
</html>

CSS:

CSS TOPICS:

understanding css - styling ✅✅

making css file ✅✅

understanding linking ✅✅

css boilerplate ✅✅

understanding css writing way ✅✅

understanding width and height ✅✅

understanding units , px & % ✅✅

understanding margins padding ✅

understanding background image and things related to it ✅✅

understanding position absloute ✅

understanding flexbox ✅ 🎉💯

-- width pe #justify

-- height pe #align

CSS PRACTICE:

{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
width: 100%;
height: 100%;
}
/ above is css boilerplate code /

h1{
background-color: red;
width: 100px;
height: 100px;
margin: 100%;
padding: 100%;
}
/ above is css writing way /

/ margin - space bet two element
padding - space inside element /

#img{
background: url(https://wallpaperset.com/w/full/c/9/0/522708.jpg);
background-size: cover;
background-position: center;
}
/ above is example of background related things /
/ position absolute means - lifting element above and it able to move in any direction
position relative means - absolute element can move in the element in relative element not outside it /

#div{
display: flex;
justify-content:center ;
align-items:center ;
}
/ Display flex can be given only to parent
justify-content is for - width
align-item for - height*/

HTML PRACTICE:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="one.css">
</head>

<body>
    <div id="car"></div>
    <div id="car"></div>
    <div id="car"></div>
</body>

</html>

JS-BASICS TOPICS:

* Basics topics :

js ✅

-word vs keyword ✅

-var const let ✅

-hoisting ✅

-types in js ✅

-primitive and reference ✅

-conditionals ✅

-if else if else if else ✅

-loops ✅

-for while ✅

-functions ✅

-params ,arguments ✅

-arrays ✅

-push pop shift unshift ✅

-objects ✅

-props vs methods

JS-BASICS LIVE NOTES:

var a; // and this moved to the top of the code
// word vs keyword ✅

// chacha = word
// for = keyword
// bhaiya = word
// harsh = word
// is = word
// good = word
// men = word

// variables and constants ✅
score = 2;
lives = 1;

// variable = to store variable data in code 
// constants = to store constant data in data
// hoisting - variable and function are hoisting which means their decleration is moved on the top of code ...
// hosting and hoisting both are different
var a = 12; // this line converted into 
a = 12; // into this 
// lets take an example ..
console.log(b); // output - b is undefined 
// In other language if you want variable before declaration it gives error (variable is not-defined) but in javascript it is possible and it gives (undefined) instead of (not-defined)
var b = 11;
// undefined and not-defined difference
// Undefined - exist but value not defined
// Not-defined - dosen't exist 


// Types in js..
// primitive and refrence 
// primitive - number , string , null , undefined,boolean
// reference - [] () {} - aisi koi bhi value jisko copy karne par real copy nahi hoti ,balki us mein value ka reference pass ho jata hai use hum reference value kaheta hai ,aur jiska copy karnepar real copy ho jaye vo value 

// Aam jindagi ..
var a = 12;
var b = a;
b = b + 2; // output a = 12 , b = 14   

// Mentos zindagi ..
var p = [12,13]; // array ek se jyaada value store karne ke liye use hota hai 
var q = p; // q ke pass khud ki koi value nahi p se reference liya hai 
q.pop(); // output - q = [12] , p = [12,13]

// conditionals ..

// if else if else - Agar-magar | aisa-vaisa
/* 
 if(-1){
    code... // INTERVIEW Question
 }
 */


 // Loops - Loop ka matlab repeat 

 // 1 1 1 1 1 1 1 1 1
 // 1 2 3 4 5 6 7 8 9
 /*
 for(Stat;end;change){
    code
 }
*/

// lets print from 25 - 50 
// for (let i = 25; i < 51; i++) {
//     console.log(i);
    
// }

// while (a<20) {
//     a++;
// }

// Functions - Code ko naam dena
// Mainly tin kaam ke liye hote hai 
// 1) jab aap ka code aap turant nahi chalana chahate ,future me chalana chahate ho 
// 2) jab aapka code aap resue karna chahate ho
// 3) jab code chalana chatate ho with different data 

// function abcd(a){
//    console.log(a);
// }
// abcd(12)
// arguments - real value jo hum dete hai function chalate waqt 
// parameter - variables jinme value stre hoti hai arguments waali

// Arrays - ek variable me ek se jyaada value store karne ke liye freedom deta hai 

// Array - Group of values

var arr = [1,2,3,4];

arr[0]
var arr = [1,2,3,4];
// arr.push(8); //add value in last of array
// console.log(arr);
// arr.pop(8); //remove last value in array
// console.log(arr);
// arr.unshift(8); //add value in start of array
// console.log(arr);
// arr.shift(8); //remove value in start of array
arr.splice(2,1)
console.log(arr);

// ek se jyaada bande ki baat ki to hua array ,ek bande ke bare me saari baat ki to hua Object

// Objects hai ek bande ki details ko hold karna ,in a key value pair 
// 1) blank object 
var a = {};

// 2) filled object
var ghadi = {
   brand: "kenneth",
   price: "16k",
   color : "silver",
   type : "automatic",
   digital:false,
   kuchbolo:function(){}
 }
 ghadi.brand = "Titan kenneth cole"
 console.log(ghadi);

//  object ke andar aisi property jiski value function ho use hum "method" bolte hai

JS-ADVANCED TOPICS:

* Advanced topics :

--the difference ✅

--window object ✅

--browser context api ✅

--stack ✅

--heap memory ✅

--what is first class function

--execution context ✅

--lexical environment ✅

--how to copy refrance values ✅

--truthy vs falsy ✅

--for each forin forof do-while

--callback functions

--how arrays are made behing the scenes

--why we can negatib=ve indexes arrays in js

--practice questions and scenarios

-updating object props

--how to delete object prop

--practice questions ,scenarios

JS-ADVANCED LIVE NOTES :

// var let const 
             JS
            _____
            |   |
           ES5  ES6
        (old)   (new)
        (var)    (let,const)

                var             |    Let , Const
      var old js mein  hai      |    Let const new js mein hai 
var function scoped hota hai    |    let braces scoped hota hai
var itself to the window object |    let and const not add itself to window object
                                |
                                |
                                |

// var apne pure parent function mein kahi bhi use ho sakta hai *
// var apne pure braces mein kahi bhi use ho sakta hai *
function abcd(){
   for(var i = a; i<12; i++){
      console.log(i);
   }
   console.log(i);
} // output = 1-12 print hoga agar var use kiye to varna let use kiye to you will get the error 

// JS language mein kuch chije nahi hai jo hum use kar sakte hai aur vo chije hame js se nahi brower se milti hai , aise saare features jo js ka part nahi hai par hum unnhe dhoond sakte hai ek particular object me jiska naam hai Window*

// js mein kai saare features hai par kuch features jo hum use karte hai wo features wo nahi hai par phir bhi use kar pate hai kyoki wo features js language use kar leti hai window se, aur window hai ek box of features given by browser to use with js*
var a = 12; //ye window pe dikhega // It exposes the data 
let b = 11; // ye window pe nahi dikhega

// Heap memory - Jitnebhi Data banate(Intermediate Data*) hai use kahi to store karna padta hai useke liye hota hai heap memory

// BROWSER CONTEXT API include - 1) Window 2) Stack 3)Heap memory

// execution Context matlab jab bhi hum function chalayenge function apna khud ka ek imaginary container bana lega jisme uski teen chije hogi :
// 1) Variables
// 2) Functions inside that parents function 
// 3) lexical environment of the function 
// ye jo container hai imaginary ise hi hum excuation context kahete hai 
// lexical environment - ye bata hai ki aap kya eccess kar sakte ho aur kya nahi 
// Excuation context is a container where functions's code is executed and it's created whenever a function is called , it contains 3 things , variables ,function & lexical environment 
// Lexical environment - ek chart jisme ye likha hota hai ke aapka partucular function kin chijo ko access kar sakta hai aur kinko nahi , matlab ki it holds it's scope and scope chain 


// var a = [1,2,3,4,5];
// var b = a; ye copy nahi huva ye reference huva 
// b.pop(); hame ye lagta hai ki ye b se value hat gai but ye a se bhi at gai

// To ise copy kaise karte hai let check..
var a = [1,2,3,4,5];
var b = [...a]; // aise copy karte hai bhai copy karne ko bhi dimakh lagta hai 

// Copying object ..
var obj = {name : "shivam"}
var copyobj = {...obj}

/* if(-1){
   code...
 }       */

// Truthy and Falsy ...
// js mein kuchh bhi likho wo mainly do prakar me se ek prakaar ko belong karti hai 

// Falsy values ye hai = 0 false undefined null NaN document.all
// and Others are Truthy Values
// EX:
if(NaN){
   console.log("Hey");
}
else{
   console.log("Hello");
}


// forEach loop - sirf arraay pe chalta hai 
var a = [1,22,3,43,55,66,78,85,78,58,7]
a.forEach(function(val){
   console.log(val+2);
})

Search This Blog

SRGWEBSQUARE