HTML markup and CSS are very important when it comes to designing a feature like timeline using a slider, because precision will be required to position the elements. Most of the data will be filled using JavaScript. Because of this, we will need minimal markup, but it must be accurate. Write this HTML code in your index.html file to create a basic structure:
<html>
<head>
<meta charset="utf-8">
<title>Event Timeline</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
</head>
<body>
<div class="container">
<div id="timeline"></div>
<div id="leftOverlay"class="overlay" ></div>
<div id="rightOverlay" class="overlay" ></div>
<div id="window">
<div class="ui-state-default ui-corner-all close"><span class="ui-icon ui-icon-closethick"></span></div>
<div id="yearEvents...