Creating the layout
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.
Creating the markup for the puzzle
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"> ...
Get Mastering jQuery UI now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
