From Prototype to HTML

by Alex Cowan

HTML

<div class="container">
  <!-- Main container for the entire content -->

  <div id="nav-bar" style="text-align:center;">
    <!-- Navigation bar with links -->
    Home | Parts | Search
  </div>

  <div id="search-select" style="padding: 2px;">
    <!-- Section for search and filtering -->
    SEARCH
    <!-- Input box for searching by keyword -->
    <input type="text" name="parts-search" placeholder="Acme Coolerator Sniggler" size="30">
    <br>
    <!-- Dropdown for filtering by Manufacturer -->
    <select>
      <option value="None">Manufacturer</option>
      <option value="Acme">Acme</option>
      <option value="Bacme">Bacme</option>
      <option value="Cacme">Cacme</option>
      <option value="Dacme">Dacme</option>
    </select>
    <!-- Dropdown for filtering by Model -->
    <select>
      <option value="None">Model</option>
      <option value="TooCool">TooCool</option>
      <option value="TooHot">TooHot</option>
      <option value="JustRight">JustRight</option>
      <option value="Coolerator">Coolerator</option>
    </select>
    <!-- Dropdown for filtering by Type -->
    <select>
      <option value="None">Type</option>
      <option value="Sniggler">Sniggler</option>
      <option value="Wiggler">Wiggler</option>
      <option value="Jiggler">Jiggler</option>
      <option value="Tiggler">Tiggler</option>
    </select>
  </div>

  <div id="sort-results" style="border-style: solid; border-width: 1px; border-color: #808285; padding: 2px;">
    <!-- Section for sorting and result count -->
    <div style="display: inline;">
      <!-- Dropdown for sorting options -->
      Sort By
      <select>
        <option value="None">Popularity</option>
        <option value="Acme">Price</option>
        <option value="Bacme">Manufacturer</option>
      </select>
    </div>
    <div style="display:inline; text-align: right; float: right;">
      <!-- Display of the number of results -->
      12 Results
    </div>

    <div>
      <!-- Catalog grid...