Something Like that:
Nav li auto adjust width if more than one

For that you need to create first html code.

HTML

<h3>1 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
  </ul>
</div>
<h3>2 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
  </ul>
</div>
<h3>3 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>4 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>5 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>6 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>7 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>8 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>9 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<h3>10 nav</h3>
<div class="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Page</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

After that add this CSS code.

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
h3 {
  text-align: center;
}
.nav {
  width: 100%;
  float: left;
  text-align: center;
  background: #ccc;
  margin-bottom: 20px;
}
.nav ul {
  list-style: none;
}
.nav ul li {
  float: left;
  padding: 5px;
}
.nav ul li a {
  display: block;
  padding: 5px 10px;
  color: #000;
  text-decoration: none;
  background: #f5f5f5;
}
.nav ul li:not(:last-child) {
  padding-right: 10px;
}
.nav ul li:nth-last-child(1),
.nav ul li:nth-last-child(1) ~ li {
  width: 100%;
}
.nav ul li:nth-last-child(2),
.nav ul li:nth-last-child(2) ~ li {
  width: 50%;
}
.nav ul li:nth-last-child(3),
.nav ul li:nth-last-child(3) ~ li {
  width: 33.333%;
}
.nav ul li:nth-last-child(4),
.nav ul li:nth-last-child(4) ~ li {
  width: 25%;
}
.nav ul li:nth-last-child(5),
.nav ul li:nth-last-child(5) ~ li {
  width: 20%;
}
.nav ul li:nth-last-child(6),
.nav ul li:nth-last-child(6) ~ li {
  width: 16.666%;
}
.nav ul li:nth-last-child(7),
.nav ul li:nth-last-child(7) ~ li {
  width: 14.285%;
}
.nav ul li:nth-last-child(8),
.nav ul li:nth-last-child(8) ~ li {
  width: 12.5%;
}
.nav ul li:nth-last-child(9),
.nav ul li:nth-last-child(9) ~ li {
  width: 11.111%;
}
.nav ul li:nth-last-child(10),
.nav ul li:nth-last-child(10) ~ li {
  width: 10%;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”wrpKVv” default_tab=”html,result” user=”pradeepanvi”]See the Pen Nav li auto adjust width if more than one by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Something Like that:
Drag and close jQuery

For that you need to create first html code.

HTML

<div id="source">
    <div class="source ui-state-default">
      <h3>Item 1</h3>
      <ul><a class="removeButton">Remove</a> </ul>
    </div>
    <div class="source ui-state-default">
      <h3>Item 2</h3>
      <ul></ul>
    </div>
    ...
</div> 
<div id="destination"> 
    <div class="dest ui-state-highlight">
      <h3>Ìtem 1</h3>
      <ul></ul>
    </div>
    <div class="dest ui-state-highlight">
      <h3>Ìtem 2</h3>
      <ul></ul>
    </div>
    ....
</div>​

After that add this CSS code.

CSS

#source, #destination{
  width:300px;
  height:200px;
  background:#ccc;
  float:left;
  margin-right:10px;
}
#source div, #destination div{
  width:200px;
  height:50px;
  background:red;
}

Use jQuery Library.
Use this one more jQuery Library.

After that add this JQuery code.

JS

 $('.source').draggable({ revert: 'invalid' });
    $('.dest').draggable({ revert: 'invalid' });
    $('#destination').droppable({
        drop:function(ev, ui){
            var widget = $(this);
            if ($(ui.draggable).find(".removeButton").length == 0)
            {
                var removeButton = $("X").click(function(){
                    var parentDiv = $(this).parent();
                    $(this).remove();
                    parentDiv.appendTo($('#source'))
                     $('#source div').appendTo($('#source'));
                });
                $('h3',ui.draggable).append(removeButton);
            }
        }
    });

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”XebavN” default_tab=”js,result” user=”pradeepanvi”]See the Pen Drag and close jQuery by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

.team_outer_sec ul li{
width:25%;
}
.team_outer_sec ul li:nth-last-child(1){
margin-left: 37.5%;
}
.team_outer_sec ul li:nth-last-child(2){
margin-left: 25%;
}
.team_outer_sec ul li:nth-last-child(2) ~ li{
margin-left:0;
}
.team_outer_sec ul li:nth-last-child(3){
margin-left: 12.5%;
}
.team_outer_sec ul li:nth-last-child(3) ~ li{
margin-left:0;
}
.team_outer_sec ul li:nth-last-child(4) ~ li{
margin-left:0;
}

Something Like that:
querySelector()

For that you need to create first html code.

HTML

<p class="img-1">Home2it</p>

After that add this JS code.

JS

var img1 = document.querySelector('.img-1');
console.log(img1);

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”mByXJo” default_tab=”js,result” user=”pradeepanvi”]See the Pen how to select class selector in Javascript by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

You can check console.

There is 3 Options for center div.

For that you need to create HTML first.

HTML

<div class="my_div">Hello</div>

CSS

.my_div{
  width:100px;
  height:100px;
  background:yellow;
  text-align:center;
  line-height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-50px;
  margin-left:-50px;
}

Left Arrow in CSS

For that you need to create HTML first.

HTML

<div class="arrow-left">Home2it</div>
<div class="only-arrow-left"></div>

CSS

.arrow-left{
  position:relative;
  margin-left:10px;
  background:#ccc;
  display:inline-block;
  padding:10px;
}
.arrow-left:before{
  content:'';
  left:-16px;
  position:absolute;
  border:8px solid transparent;
  border-right-color:#000;
}

.only-arrow-left{
  display:inline-block;
  border:8px solid transparent;
  border-right-color:#000;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”XaLZGb” default_tab=”css,result” user=”pradeepanvi”]See the Pen arrow-left in css by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Top Arrow in CSS

For that you need to create HTML first.

HTML

<div class="arrow-top">Home2it</div>
<div class="only-arrow-top"></div>

CSS

.arrow-top{
  position:relative;
  margin-top:10px;
  background:#ccc;
  display:inline-block;
  padding:10px;
}
.arrow-top:before{
  content:'';
  top:-16px;
  position:absolute;
  border:8px solid transparent;
  border-bottom-color:#000;
}

.only-arrow-top{
  display:inline-block;
  border:8px solid transparent;
  border-bottom-color:#000;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”brPLPQ” default_tab=”css,result” user=”pradeepanvi”]See the Pen arrow-top in css by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Right Arrow in CSS

For that you need to create HTML first.

HTML

<div class="arrow-right">Home2it</div>
<div class="only-arrow-right"></div>

CSS

.arrow-right{
  position:relative;
  margin-right:10px;
  background:#ccc;
  display:inline-block;
  padding:10px;
}
.arrow-right:before{
  content:'';
  right:-16px;
  position:absolute;
  border:8px solid transparent;
  border-left-color:#000;
}

.only-arrow-right{
  display:inline-block;
  border:8px solid transparent;
  border-left-color:#000;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”KvjQOj” default_tab=”css,result” user=”pradeepanvi”]See the Pen arrow-right in css by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Bottom Arrow in CSS

For that you need to create HTML first.

HTML

<div class="arrow-bottom">Home2it</div>
<div class="only-arrow-bottom"></div>

CSS

.arrow-bottom{
  position:relative;
  margin-bottom:10px;
  background:#ccc;
  display:inline-block;
  padding:10px;
}
.arrow-bottom:before{
  content:'';
  bottom:-16px;
  position:absolute;
  border:8px solid transparent;
  border-top-color:#000;
}

.only-arrow-bottom{
  display:inline-block;
  border:8px solid transparent;
  border-top-color:#000;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”QMXmLP” default_tab=”css,result” user=”pradeepanvi”]See the Pen arrow-bottom in css by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

There is 3 Options for center div.

For that you need to create HTML first.

HTML

<div class="my_div">Hello</div>

CSS

.my_div{
  width:100px;
  height:100px;
  background:yellow;
  text-align:center;
  line-height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-50px;
  margin-left:-50px;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”QMXQgB” default_tab=”css,result” user=”pradeepanvi”]See the Pen center div horizontally and vertically by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

HTML

<div class="my_div">Hello</div>

CSS

.my_div{
  width:100px;
  height:100px;
  background:yellow;
  text-align:center;
  line-height:100px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”RZzQjV” default_tab=”css,result” user=”pradeepanvi”]See the Pen center div horizontally and vertically 02 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

HTML

<div class="table">
  <div class="table_cell">
    <div class="my_div">Hello</div>
  </div>
</div>

CSS

.table{
  display:table;
  width:100%;
  height:500px;
}
.table .table_cell{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}
.my_div{
  width:100px;
  height:100px;
  background:yellow;
  text-align:center;
  line-height:100px;
  display:inline-block;
}

[codepen_embed height=”265″ theme_id=”0″ slug_hash=”wqLypj” default_tab=”css,result” user=”pradeepanvi”]See the Pen center div horizontally and vertically 03 by Pradeep Kumar (@pradeepanvi) on CodePen.[/codepen_embed]

Something Like that:
@media

In the CSS you can write many more media screen
Media for Tablet Portrait view

CSS

@media (min-width:768px){
/*Your CSS code*/
}

Media for Tablet Landscape view

CSS

@media (min-width:992px){
/*Your CSS code*/
}

Media for Desktop

CSS

@media (min-width:1200px){
/*Your CSS code*/
}

Media for Mobile Landscape view

CSS

@media (max-width:767px){
/*Your CSS code*/
}

Media for Mobile Portrait view

CSS

@media (max-width:479px){
/*Your CSS code*/
}

There is also CSS for Portrait and Landscape view
orientation : portrait
orientation : landscape

CSS

@media (max-width:767px) and (orientation : portrait){
/*Your CSS code*/
}
@media (max-width:767px) and (orientation : landscape){
/*Your CSS code*/
}

Is any one know How CSS read in browers?
Bottom to Top

Yes That’s why always write your css code like this.

CSS

@media (min-width:768px){
/*Your CSS code*/
}
@media (min-width:992px){
/*Your CSS code*/
}
@media (min-width:1200px){
/*Your CSS code*/
}
@media (max-width:767px){
/*Your CSS code*/
}
@media (max-width:479px){
/*Your CSS code*/
}

Create new project
ng new {project}

Install Bootstrap

Install boostrap css in your project with npm.
npm install --save bootstrap

add link to angular-cli.json
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],

Run site
ng serve

How to Setup Angular CLI and what are you need for that.

Step 1
Install Node.JS Latest package from site.

Step 2
Choose any one package.
LTS or Current

Step 3
Restart your PC.

Step 6
Type npm install -g @angular/cli
It will take some time like 15-20 minutes, Kindly wait until not complete.

Now you need to go there you want to create project. For example I want to create my project in D drive specific location and you can see cmd is showing C:\Users\Admin>

Step 5
Open Command Prompt or you can use Run cmd

Step 4
Now you need to install Angular CLI in your pc.

Step 7
Type D:

Step 8
Type CD 'your location'

Step 9
Type ng new my-dream-app for Create project

Step 10
Type ng serve for run project

Step 11
Type URL http://localhost:4200/ in your web browser for see project.