Designing the page
For the basic markup we will split the page in two parts. The left-hand side will have placeholders for album names and some help text for users. The right-hand side will have a placeholder div to display album pictures.
After these two partitions, there will be markup for dialog boxes to edit, delete, and zoom in to an image.
Creating placeholders for albums and pictures
Since the album names and pictures will be displayed in the page using JavaScript, we only need to specify placeholder divs for these. The following HTML markup for the index.html file will be used to divide the page in two parts and create the required elements:
<html>
<head>
<meta charset="utf-8">
<title>Photo Album Manager</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
</head>
<body>
<div class="ui-widget">
<div class="left ui-widget-content">
<div id="albumNames"...
