1. Java Script

Cloud workspace - Code Pen:

gng github - Forked Level up JS  >>> that js dude slides

CodePEN:

techsith code pen my collection,  

Online:

JS Int QA - my collection - ----- empty

stack Blitz

Psychical workspace - E:/JavaScript:

Resources

YT - TksSharma  -------  gng github -   local copy guidence list is ready

 YT - techsith, 

YT- Traversy Media - JS cardio, d3, JS Es6

YT - Net Ninja, 

YT- Dipesh Malvia

YT- Java Brains

YT-Telusko

YT - ARC Tutorial - HTML ,CSS Q&A

YT- Code Nanban

E:drive/JS/JS-Video - 

JS Tut - Developer .mozilla

Sudeerj -content ECMA, JS Q&A https://github.com/sudheerj/

LeetCocde,

Hacker Rank,

Geeks for Geek

JavaScript has 8 Datatypes

1. String
2. Number
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object - array, function, date , null

TypeScript has 6 Datatypes

Number	number	It is used to represent both Integer as well as Floating-Point numbers
Boolean	boolean	Represents true and false
String	string	It is used to represent a sequence of characters
Void	void	Generally used on function return-types
Null	null	It is used when an object does not have any value
Undefined	undefined	Denotes value given to uninitialized variable
Any	any	If variable is declared with any data-type then any type of value can be assigned to that variable

feature	typescript	javascript
Language paradigm	Object oriented programming language	Scripting language
Typing support	Supports static typing	It has dynamic typing
Modules	Supported	Not supported
Interface	It has interfaces concept	Doesn't support interfaces
Optional parameters	Functions support optional parameters	No support of optional parameters for functions

#1) How to horizontally and vertically centre that div ?

only for horizontal center:
-------------------------------
 <div style="width:800px; margin:0 auto;">
        centered content
 </div>

#2) This is for horizontal and vertical center;
---------------------------------------------------------
<div class="wrap">
    <div class="element"></div>
</div>
1. Using Flexbox
------------------
Here is how you can center elements using flexbox:
.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}
2. Using Position
------------------
.wrap { /* nothing here */}
.element {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 156px;
}

/* using calc() with 50% minus half the element's defined width and height */
.calc div {
  width: 12em;
  height: 3.5em;
  top: calc(50% - 3.5em/2);
  left: calc(50% - 12em/2);
}

/* using a negative margin equal to half the element's defined width and height */
.margin div {
  width: 12em;
  height: 3.5em;
  top: 50%;
  left: 50%;
  margin-top: -1.75em;
  margin-left: -6em;
}

/* using translate() to shift by 50% of the element's defined width and height */
.translate div {
  top: 50%;
  left: 50%;
  transform: translateX(-50%)
             translateY(-50%);
}

/* using flexbox */
.flexbox {
  display: flex;
  flex-flow: row wrap;
}
.flexbox p {
  position: absolute;
}
.flexbox div {
  position: static;
  margin: auto;
}

/* using EQCSS & scoped styles to center the element by its rendered width */
@element '.eqcss div' {
  $this {
    top: calc(50% - eval('offsetHeight/2')px);
    left: calc(50% - eval('offsetWidth/2')px);
  }
}
/* using JavaScript to center the element by its rendered width */
window.addEventListener('resize',center)
center()

function center() {
  var tag = document.querySelectorAll('.js div')
  for (var i=0; i<tag.length; i++) {
    var div = tag[i]
    div.style.top = 'calc(50% - '+(div.offsetHeight/2)+'px)'
    div.style.left = 'calc(50% - '+(div.offsetWidth/2)+'px)'
  }
}
And for horizontal centering? Nothing beats:

div {
  text-align: center;
}

CSS - list view move to next column
----------------------------------------------
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
    <li>Item 9</li>
    <li>Item 10</li>
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
    <li>Item 16</li>
    <li>Item 17</li>
    <li>Item 18</li>
    <li>Item 19</li>
    <li>Item 20</li>
    <li>Item 21</li>
    <li>Item 22</li>
    <li>Item 23</li>
</ul>

ul {
    -moz-column-count: 4;
    -moz-column-gap: 20px;
    -webkit-column-count: 4;
    -webkit-column-gap: 20px;
    column-count: 4;
    column-gap: 20px;
}


3. Column - Grid based : css div design
-------------------------------------------------

doc.html
-----------
<div>
  <span>1,1</span>
  <span>1,2</span>
</div><div>
  <span>1,1</span>
  <span>1,2</span>
</div>

style.css
---------
span{
   float: left;
    width: 50%;
    padding: 10px;
   box-sizing: border-box;
   height:50vh;
   border:1px solid #ccc;
}
div{
  width:100%;
}