codblog

/* Data Types: undefined, null, boolean, string, symbol, number, and object */   <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < body >     < script >         console . log ( 'hello world!' )         var myName = "Beau"         myName = 8         let ourName = "freeCodeCamp"         const pi = 3.14     </ script > </ body > </ html >

  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title > </ head > < body >     < p id = "d1" ></ p >     < script >         function fn ( x , y ){             return x * y         }         document . getElementById ( 'd1' ). innerHTML = fn ( 2 , 3 )     </ script > </ body > </ html >

/* text-shadow box-shadow */   INDEX.HTML: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > CSS Tutorial </ title >             < link rel = "stylesheet" href = "styles.css" >     </ head > < body >     < h1 > main heading </ h1 >     < div class = "box" >     </ div > </ body > </ html > CSS: /* text-shadow box-shadow */ h1 {     text-shadow : 3px 3px 3px red ;     /* https: //css3gen.com/text-shadow/ */     text-shadow : 3px 4px 2px rgba ( 255 , 11 , 179 , 1 ); } .box {     width : 300px ;     height : 150px ;     background : yellow ;     /* https: //cssgenerator.org/box-shadow-css-generato

  /* ICONS Font-Awesome Icons Free,Easy to get up running, simple syntax */ INDEX.HTML: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > CSS Tutorial </ title >         <!-- icons -->     < script src = "https://kit.fontawesome.com/87ed342652.js" crossorigin = "anonymous" ></ script >         < link rel = "stylesheet" href = "styles.css" >     </ head > < body >     < i class = "fas fa-home fa-10x" ></ i >     < span class = "social-icon" >         < i class = "fab fa-facebook fa-3x" ></ i >     </ span >     < i class = "fa fa-pho

/* CSS VARIBLES AKA Custom Properties hold a value and reuse it --varName:var(--varName) scope :root{} === global element === local any property */   INDEX.HTML: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > CSS Tutorial </ title >         < link rel = "stylesheet" href = "styles.css" >     </ head > < body >     < h1 class = "heading" > main heading </ h1 >     < p class = "text" > Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo culpa optio voluptatum ea at consequatur. </ p >     < div class = "main" >         < p class = "main-text" >             L

  /* animation-fill-mode:what values are applied by the animation outside the time it is executing */ INDEX.HTML: <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta http-equiv = "X-UA-Compatible" content = "IE=edge" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > CSS Tutorial </ title >         < link rel = "stylesheet" href = "styles.css" >     </ head > < body >     < div class = "animation" > animation </ div > </ body > </ html > CSS: /* animation-fill-mode:what values are applied by the animation outside the time it is executing */ div {     width : 200px ;     height : 100px ;     color : white ;     margin : 10px ; } .animation {     background : green ;     animation : move 5s 2 ;     animation-fill