We'll get started by creating a basic HTML document and the associated files and folders just like we did in Chapter 1, Designer, Meet jQuery. In the body of the HTML document, we'll set up a container with a series of repeating elements inside. We'll use a list (<ul>) as the container and individual list items (<li>) inside for the repeating elements. Inside each list item, we'll place an image and some text that describes that image, as follows:

<div class="content">
  <h1>Cats of the World</h1>
</div>

<ul class="container">

  <li class="cat">
    <figure>
      <img src="images/siamese.jpg">
      <figcaption>
        <h2>Siamese</h2>
      </figcaption>
    </figure>
    <div class="info">
      <div class="traits">
        <dl>
          <dt>Country</dt>
          &lt...