Create a file named index.html inside the Chapter2 folder. It will contain the entire HTML. For the JavaScript code, create another file named puzzle.js inside the js folder of Chapter2. Now the Chapter2 folder will have four items: the index.html file, the image file for the puzzle (kitty.jpg), the js folder, and the css folder.
Our first step towards creating the puzzle will be to prepare the required HTML markup. This HTML markup will then be styled using CSS. The following HTML markup will prepare the bare-bones structure of the page required to make the puzzle:
<html>
<head>
<meta charset="utf-8">
<title>Designing a Jigsaw Puzzle</title>
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
</head>
<body>
<div class="container">
<div id="pieceBox"></div>
<div id="puzzleContainer"></div>
...