For the page design, we will take inspiration from the portlet script on the jQuery UI website. This script is a jQuery UI sortable example from the jQuery UI demo site. The original script can be found at http://jqueryui.com/resources/demos/sortable/portlets.html. It uses a three-column layout but we will modify it to make two columns with two widgets in each column and then create a widget in each of the columns.
Let us begin by writing the markup that we require. Open the index.html file in your favorite editor and write the following markup to create the page skeleton:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dashboard</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
</head>
<body>
<div class="column">
<div...