Learn-WebDevelopment.com home page Learn-WebDevelopment.com

Creating The UI With HTML

Section Overview

This project is a running tracker built with HTML, CSS, and JavaScript. It will track running distances, calculate stats, and display progress towards your goals.

In this lesson, you'll learn how to build a clean, interactive UI for our running tracker project. This will include a form for adding running entries, a display area for recent runs, statistics section, and a progress area.

We begin by creating the UI using only HTML. Breaking down the process into clear, manageable steps. By the end you will have a solid understanding of how to structure a real-world user interface for a data-tracking app.

Project setup

Create a project folder, running-tracker is used for this project. Add a single file called index.html:

running-tracker/
├── index.html

Text editor help

Although each text editor is different, here are some general steps to help you navigate.

Open project folder: You can usually open a project by going to File > Open Folder and selecting your project folder. Alternatively, you can often drag and drop the folder into the editor.
The keyboard shortcut for opening a folder is often command + O on Mac, or control + O on Windows.

Creating a new file: You can usually go to File > New File. You will need to give the file a name, followed by the file extension such as .html or .js before saving.
The keyboard shortcut for creating a file is often command + N on Mac, or control + N on Windows.

Setting up the HTML boilerplate

Every HTML page starts with a basic structure to ensure your page is valid and works across browsers. Update your index.html with the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Running tracker</title>
  </head>
  <body>
    <!-- Content will go here -->
  </body>
</html>
  • <!DOCTYPE html> tells the browser to use the latest HTML standard.
  • <html lang="en"> sets the page language for accessibility and SEO.
  • The <head> contains page metadata, links to other files, and the document title.
  • The <body> is where the content to show in the browser will go (text, images etc).

Creating the logo section

We'll start by adding a logo area at the top of the page. This will contain an SVG icon of a runner:

<body>
  <div class="logo">
    <svg viewBox="0 0 383 367" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M288.603 64.462C306.387 64.462 320.81 49.991 320.81 32.207C320.81 14.423 306.388 0 288.603 0C270.77 0 256.348 14.422 256.348 32.207C256.348 49.991 270.77 64.462 288.603 64.462Z"
        fill="gray"
      />
      <path
        d="M177.603 88.382L127.466 146.315C124.494 149.969 120.011 152.211 114.944 152.211C105.979 152.211 98.7194 144.951 98.7194 136.034C98.7194 131.162 100.814 126.825 104.176 123.853L158.26 61.584C161.232 58.027 165.715 55.737 170.782 55.737L249.033 55.688C254.783 55.688 259.947 58.027 263.748 61.681L313.641 111.575L355.008 70.305C357.932 67.82 361.684 66.358 365.776 66.358C375.034 66.358 382.489 73.862 382.489 83.12C382.489 87.164 381.124 90.818 378.737 93.742L328.892 143.976C313.739 159.081 301.558 146.266 301.558 146.266L270.959 115.521L223.161 170.823L266.964 214.626C266.964 214.626 276.221 223.202 270.91 240.255L246.353 349.735C244.404 359.237 236.024 366.399 225.987 366.399C214.439 366.399 205.133 357.044 205.133 345.545C205.133 343.694 205.328 341.94 205.766 340.283L225.987 250.484L176.19 202.101L133.362 249.851C133.362 249.851 126.443 258.378 108.074 257.744L21.1994 257.89C11.5034 258.037 2.68437 251.41 0.540366 241.568C-2.04263 230.361 4.87637 219.349 16.1314 216.865C17.8864 216.475 19.6404 216.329 21.3454 216.377L96.0394 216.572L206.499 88.522L177.605 88.376L177.603 88.382Z"
        fill="gray"
      />
    </svg>
  </div>
  <!-- More content will go here -->
</body>
  • <div class="logo"> creates a container for the logo with a class name for styling.
  • The <svg> element contains vector graphics that scale without any loss of quality.
  • viewBox defines the coordinate system and aspect ratio for the SVG.
  • The fill="gray" attributes set the color of the SVG paths.

Don't worry about the image size for now, we will fix this with CSS soon.

Creating the form for adding entries

Next, add a form where users can input their running distance. Add the following in place of <!-- More content will go here -->:

  <form>
    <label for="entry">Number of miles today:</label>
    <br />
    <input type="number" id="entry" step="0.1" />
    <br />
    <button type="submit">Add</button>
  </form>
  <hr />
  • <form> creates a form container for user input.
  • <label for="entry"> provides accessible text for the input, linked via the for attribute.
  • <input type="number"> creates a number input field.
  • step="0.1" this attribute determines the the value numbers should increase & decrease by (e.g. 1.7, 1.8, 1.9 etc).
  • id="entry" gives the input a unique identifier for JavaScript access.
  • <button type="submit"> creates a clickable submit button that will trigger form submission.
  • <hr /> adds a horizontal rule/line to visually separate sections.

Displaying recent entries

Next, add a section to display the last 7 days of running entries. Add this just above the closing </body> tag:

  <section class="entriesWrapper">
    <h3>Last 7 days:</h3>
    <ul id="entries">
      <li>-</li>
      <li>-</li>
      <li>-</li>
      <li>-</li>
      <li>-</li>
      <li>-</li>
      <li>-</li>
    </ul>
  </section>
  • <section> is a semantic element for grouping related content.
  • class="entriesWrapper" provides a class for CSS styling.
  • <h3> creates a heading for this section.
  • <ul id="entries"> creates an unordered list with an ID for JavaScript manipulation.
  • The 7 <li> elements represent placeholders for the last 7 days of entries. This element represents a list-item and will be dynamically updated in later lessons.

Statistics section

Now let's add a section to display running statistics. Add this just above the closing </body> tag:

  <section class="data">
    <div>
      <p>Total:</p>
      <span id="total">0</span>
    </div>
    <div>
      <p>Average distance:</p>
      <span id="average">0</span>
    </div>
    <div>
      <p>This weeks high:</p>
      <span id="high">0</span>
    </div>
  </section>
  • class="data" groups the statistics together for styling.
  • Each <div> is a container with holds a statistic label and value.
  • <p> displays the label text.
  • <span id="total"> creates an inline element with an ID for updating the value dynamically using JavaScript.
  • The initial values are set to 0 and will be calculated and updated with JavaScript.

Progress section

Finally, let's add a section for weekly goal tracking, add this just above the closing </body> tag:

  <section class="progress">
    <h3>
      Weekly target: <span id="progressTotal">0</span> /
      <span id="target"></span> miles
    </h3>
    <div class="progressCircleWrapper"></div>
  </section>
  • class="progress" groups the progress tracking elements.
  • The <h3> heading displays the current progress and target goal inside.
  • id="progressTotal" will show the current week's total distance.
  • id="target" will display the weekly goal (set in JavaScript).
  • class="progressCircleWrapper" is a container where we'll add a visual progress circle in a later lesson.

The HTML elements we have added are intended only to add content. The styling and layout will be applied in the next lessons.

Complete HTML structure

Here's the complete HTML structure for this lesson:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Running tracker</title>
  </head>

  <body>
    <div class="logo">
      <svg viewBox="0 0 383 367" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M288.603 64.462C306.387 64.462 320.81 49.991 320.81 32.207C320.81 14.423 306.388 0 288.603 0C270.77 0 256.348 14.422 256.348 32.207C256.348 49.991 270.77 64.462 288.603 64.462Z"
          fill="gray"
        />
        <path
          d="M177.603 88.382L127.466 146.315C124.494 149.969 120.011 152.211 114.944 152.211C105.979 152.211 98.7194 144.951 98.7194 136.034C98.7194 131.162 100.814 126.825 104.176 123.853L158.26 61.584C161.232 58.027 165.715 55.737 170.782 55.737L249.033 55.688C254.783 55.688 259.947 58.027 263.748 61.681L313.641 111.575L355.008 70.305C357.932 67.82 361.684 66.358 365.776 66.358C375.034 66.358 382.489 73.862 382.489 83.12C382.489 87.164 381.124 90.818 378.737 93.742L328.892 143.976C313.739 159.081 301.558 146.266 301.558 146.266L270.959 115.521L223.161 170.823L266.964 214.626C266.964 214.626 276.221 223.202 270.91 240.255L246.353 349.735C244.404 359.237 236.024 366.399 225.987 366.399C214.439 366.399 205.133 357.044 205.133 345.545C205.133 343.694 205.328 341.94 205.766 340.283L225.987 250.484L176.19 202.101L133.362 249.851C133.362 249.851 126.443 258.378 108.074 257.744L21.1994 257.89C11.5034 258.037 2.68437 251.41 0.540366 241.568C-2.04263 230.361 4.87637 219.349 16.1314 216.865C17.8864 216.475 19.6404 216.329 21.3454 216.377L96.0394 216.572L206.499 88.522L177.605 88.376L177.603 88.382Z"
          fill="gray"
        />
      </svg>
    </div>

    <form>
      <label for="entry">Number of miles today:</label>
      <br />
      <input type="number" id="entry" step="0.1" />
      <br />
      <button type="submit">Add</button>
    </form>
    <hr />

    <section class="entriesWrapper">
      <h3>Last 7 days:</h3>
      <ul id="entries">
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
        <li>-</li>
      </ul>
    </section>

    <section class="data">
      <div>
        <p>Total:</p>
        <span id="total">0</span>
      </div>
      <div>
        <p>Average distance:</p>
        <span id="average">0</span>
      </div>
      <div>
        <p>This weeks high:</p>
        <span id="high">0</span>
      </div>
    </section>

    <section class="progress">
      <h3>
        Weekly target: <span id="progressTotal">0</span> /
        <span id="target"></span> miles
      </h3>
      <div class="progressCircleWrapper"></div>
    </section>
  </body>
</html>

Summary

In this lesson, you've created the HTML structure for the running tracker app:

  • Logo section: SVG icon for visual branding
  • Input form: Form for users to enter their daily running distance
  • Entries display: List area for showing the last 7 days of runs
  • Stats section: Areas for total, average, and weekly high
  • Progress section: Container for goal tracking and progress visualization

In the next lesson, we'll add CSS styling to make this interface visually appealing and user-friendly.