Creating the Layout and Styling

In this task we will work on the layout and styling of our ToDo app. We need a space to enter todos, a space to display them, and some basic navigation and controls.

Resetting the HTML Structure

Open the index.html file. Notice the basic HTML structure with a head and body section. We also have the title tag and the meta tags for character encoding and viewport settings.

Please remove the <div id="app"></div> from the body section. The HTML should look like the following:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ToDo App</title>
  </head>
  <body>
    <!-- Content will go here -->

    <!-- Scripts here. Don't remove ↓ -->
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Also, remove the code from main.js that we added to display "Hello World!" in the browser. Your main.js file should only contain the following import statement:

import "./style.css";

Adding the Header

Next, we will add the header section. It will include an h1 tag for the title of our app.

<body class="bg-stone-100">
  <header class="max-w-lg py-4 mx-auto mt-5 font-thin text-center">
    <h1 class="font-sans text-7xl text-rose-700">~ todos ~</h1>
  </header>

  <!-- Scripts here. Don't remove ↓ -->
  <script type="module" src="/src/main.js"></script>
</body>

We have the following classes:

  • bg-stone-100 for the body section to set the background color to a light gray.
  • max-w-lg and mx-auto for the header section to center it on the page.
  • py-4 for the header section to add padding on the y-axis.
  • mt-5 for the header section to add margin on the top.
  • font-thin for the header section to set the font weight to thin.
  • text-center for the header section to align the text to the center.
  • font-sans for the h1 tag to set the font family to sans-serif.
  • text-7xl for the h1 tag to set the font size to 7xl.
  • text-rose-700 for the h1 tag to set the text color to rose-700.

These classes are part of the Tailwind CSS utility classes that we will use to style our app.

Aside: The header is a semantic HTML element that is used to define a header for a document or a section. It typically contains a group of introductory or navigational aids. In this case, we are using it to display the title of our app.

Right before the script tag, we will add the footer section. It will include some basic instructions on how to use the app.

<footer
  class="flex flex-col items-center justify-center max-w-lg mx-auto mt-10 text-xs text-gray-500 font-extralight"
>
  <div>Click to complete a todo</div>
  <div>Double-click to edit a todo</div>
</footer>

The footer is a semantic HTML element that is used to define a footer for a document or a section. It typically contains information about the author, copyright data, or links to related documents. In this case, we are using it to provide some basic instructions on how to use the app.

We used the following classes to style the footer section:

  • flex to set the display property to flex.
  • flex-col to set the flex direction to column.
  • items-center to align the items in the center along the cross-axis.
  • justify-center to align the items in the center along the main axis.
  • max-w-lg to set the maximum width to large.
  • mx-auto to center the footer on the page.
  • mt-10 to add margin on the top.
  • text-xs to set the font size to extra small.
  • text-gray-500 to set the text color to gray-500.
  • font-extralight to set the font weight to extra light.

The flex class is part of the Tailwind CSS utility classes that enable us to use flexbox properties easily. Flexbox is a CSS layout model that allows us to design complex layouts more efficiently.

Adding the Navigation

We will add a nav tag between the header and footer sections. It lets us filter the todos: show all of them, or only the active ones, or only the completed ones. Later, we will use JavaScript to hide this nav bar by default and show it only when todos exist.

<nav
  id="todo-nav"
  class="flex items-center justify-center gap-3 py-2 filters"
  role="navigation"
>
  <a
    href="#/"
    class="p-1 underline underline-offset-4 decoration-rose-800 decoration-2"
    role="button"
    >All</a
  >
  <a href="#/active" class="p-1" role="button">Active</a>
  <a href="#/completed" class="p-1" role="button">Completed</a>
</nav>

Notice that the nav element has three child anchor elements, each with a different href value. These anchor elements are used to filter between all, active, and completed todos. The first one is selected by default, so it is the one with the underline. Later we will use JavaScript to move that styling when the user clicks a different anchor element.

Aside: The role attribute is used to define the purpose of an element. In this case, we are using it to indicate that the nav element is a navigation bar. This helps assistive technologies, such as screen readers, to understand the purpose of the element. On the anchor elements, we are using the role attribute to indicate that they are buttons. This is because they behave like buttons when clicked.

The nav is a semantic HTML element that is used to define a navigation bar for a document or a section. It typically contains links to other pages or sections within the document. In this case, we are using it to provide filtering options for our todos.

The classes used to style the nav element are as follows:

  • flex to set the display property to flex.
  • items-center to align the items in the center along the cross-axis.
  • justify-center to align the items in the center along the main axis.
  • gap-3 to add a gap of 3 units between the child elements.
  • py-2 to add padding on the y-axis.
  • filters which is not a Tailwind CSS class but a custom class that lets us select the nav element easily.

The classes used to style the anchor elements are as follows:

  • p-1 to add padding of 1 unit.
  • underline to underline the text.
  • underline-offset-4 to set the underline offset to 4 units.
  • decoration-rose-800 to set the underline color to rose-800.
  • decoration-2 to set the underline thickness to 2 units.

Checkpoint: Commit your progress.

git add .
git commit -m "todos-04: Create header, footer, and navigation"
git push