Creating the Taskbar

First, make a new div called taskbar and put the taskbariconscenter div inside of it

<div class="taskbar">
  <div class="taskbariconscenter">
    
  </div>
</div>

Now add the css

.taskbar{
  -webkit-backdrop-filter: saturate(3) blur(20px);
  backdrop-filter: saturate(3) blur(20px);
  background-color: rgba(255,255,255,.80);
  width: 100%;
  min-width: 100%;
  position: absolute;
  bottom: 0;
  margin:0;
  padding:0;
  height: 48px;
  display:flex;
  align-items: center;
  justify-content: center;
  z-index: 11000; /* puts it on top of everything */
}

.taskbariconscenter{
  display: flex;
}

It should now look like this, and when you use the inspect element you can see the taskbariconscenter div centered:

Next, add the icons to the taskbar

<div class="taskbaricons startbutton">
  <img class="taskbariconsimg" src="img/startbutton.png">
</div>

<div class="taskbaricons searchbutton">
  <img class="taskbariconsimg" src="img/search.png">
</div>

<div class="taskbaricons">
  <img class="taskbariconsimg" src="img/taskview.png">
</div>

<div class="taskbaricons">
  <img class="taskbariconsimg" src="img/chat.png">
</div>

<div class="taskbaricons">
  <img class="taskbariconsimg" src="img/explorer.png">
  <div class="center"><div class="taskbariconhighlight"></div></div>
</div>

<div class="taskbaricons edgetaskbaricon">
  <img class="taskbariconsimg" src="img/edge.png">
  <div class="center"><div class="taskbariconhighlight"></div></div>
</div>

<div class="taskbaricons">
  <img class="taskbariconsimg" src="img/store.ico">
  <div class="center"><div class="taskbariconhighlight"></div></div>
</div>

Now add the css

.taskbariconsimg {
  width: 25px;
  transition: all .1s;
}

.taskbaricons{
  margin: 0px 2.5px;
  padding: 7px;
  width: 25px;
  height: 25px;
  text-align: center;
}

Now, move on to create the script that brings everything together.