Posts

Showing posts from October, 2020

grid-template-areas

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         .container {             display: grid;             /* call grid area with asign grid area name  */             grid-template-areas:                 ' navbar navbar navbar'                 'section section aside'                 'footer footer footer';         }         nav ul {             display: flex;             justify-content: center;             al...

grid tamplate rows

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>grid tamplate rows </title>     <style>         .grid{             display: grid;             grid-template-rows: 1fr 6fr 2fr;             grid-gap: 1rem;             grid-template-columns: 1fr 4fr 2fr;             grid-template-columns: repeat(5, 1fr);             /* grid-auto-rows: 5fr; */         }         .item{             background-color: #3084e4;             border:2px solid red;         }     </style> <...

Grid Min-Max

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         .container{             display: grid;             grid-template-columns: repeat(4, 4fr);             /* is ka matlab he jab screen chota ho jaye to shirph 1rf show kare aur uska max width: 300px; rahe; */             grid-template-columns: repeat( auto-fit, minmax( 300px ,1fr) );         }         .box{             background-color: rgb(213, 243, 41);             padding: 19px 10px;             margin: 1rem 2rem;         } ...

css grid 2

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>css grid</title>     <style>         .container {             display: grid;             grid-template-columns: repeat(3, 4fr);             /* grid-template-rows: repeat(8, 1fr); */             grid-template-rows: 2fr 4fr 2fr;             /* grid-column-gap: 1rem ;             grid-row-gap: 2rem; */             grid-gap: 1rem;                   }         .box {             background-color: rgb(236, 214, 15);       ...

css grid

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>css grid</title>     <style>         .grid {             display: grid;             /* iska matlab 4 coulumns bnao aur uska size 100px 200px 100px 150px kar do  */             grid-template-columns: 100px 200px 100px 150px;             grid-template-columns: 300px auto 100px;             grid-template-columns: 1fr 4fr 1fr;             /* iska matlab 3bar repeat karo aur size auto  */             grid-template-columns: repeat(3, auto);             /* iska matlab grid ke bis me 2rem ka g...

Conform Alart Prompt in javaScript

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Conform Alart Prompt in javaScript</title> </head> <body>     <h1>Conform Alart Prompt in javaScript</h1>     <p id="demo"></p>     <script>         //alert          // alert("This is an alert")         // //prompt          //      let name=   prompt("What is your Name","Enter Your Name");         //      console.log(name);         //  document.write(name);         //conform         let deletePost = confirm("Do You  realy Went to delete this post");       ...

Loop In javaScript

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Loop In javaScript</title> </head> <body>     <h1>javaScript Loop</h1>     <p id="demo"></p>     <p id="demo1"></p>     <h1>hello </h1>     <script>         // for loop         // let i=0;         // for(i=0; i<10; i++){         //     console.log(i)         // }         // let friends = ["Avengers", "Lost in Space", "Strangers", "Dark", "Chilling Adventure of Sabrina", "Martian", "intastrastailer"]         // for (let index1 = 0; index1 < friends.length; index1++) {        ...

javaScript String Function

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>JavaScript String Function</title> </head> <body>     <h1>javaScript String Function</h1>     <script>         var str = "This is a String"         console.log(str);         // indexof me pehla a ka index batayega          var position = str.indexOf('a');         console.log(position);         // lastIndexOf me last ing ka index batayega         position = str.lastIndexOf('ing');         console.log(position);         // iska matlab he 0 index se 4 index tak print kar do  is nagitive value bhi support karta he      ...

Java Script String

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Java Script String</title> </head> <body>     <h1>Java Script String</h1>     <spna id="content"></spna> <spna>ok ok ok </spna>     <script>         var name = "nazrul";         var string = 'thi"s';         // var name = 'Harry';         var channel = 'CodeWithHarry';         var website = "digitalhindi4u.com"         var message = 'Harry is a good boy';         var tem = ` ${name} is a good boy  and'nice person'  "and" he has a website called ${website}`         console.log(tem);         // var ...

Scope and if ealce condition and switch

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title> Scope and if ealce condition and switch</title> </head> <body>     <h1>Scope and if ealce condition and switch</h1>     <script>         // let variabe is block level veriable         let name = "Nazrul";         console.log(name);         {             let name = "islam"             console.log(name);         }         const constVariable = "This variable can be re Diclare";         // constVariable= "ib"         console.log(constVariable);         // if else condition in javaScr...

java Script Function

<!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>     <h1>java Script Function</h1>     <script>         function greet(name, massage1 = " This is defult value , agar hum koye value pass nahi karta to ye value print hoga") {             // let names1= 23;             console.log(massage1 + " " + name)             console.log(name + " is a Good Boy")         }         let name1 = 23;         let name2 = "Rahul";         let name3 = "Islam";         let massage = "good morning"         // function ko run karne ...

JavaScript -Arrays ANd object in JavaScript

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <meta name="viewport" content="width=device-width, initial-scale=1.0">   <title>Arrays ANd object in JavaScript</title> </head> <body>   <h1>Arrays ANd object in JavaScript</h1>   <script>     let number = 23;     let stringb = "String";     let bulian = true;     let nullVar = null;     let undifine = undefined;     console.log(number)     let objectVar = {       name: "nazrul",       job: "webDevloper",       "salery for me": 250,     }     console.log(objectVar);     console.log(objectVar.name);     console.log(objectVar['salery for me'])     //   console.log(typeof objectVar);     // let arrays1=[12, 12,56,"Nazrul" ,undefined ,null, true,];...