Basic Project Structure & Header

Create the files & folders

Create a new folder anywhere on your computer called online-store (or any name of your choice), this will contain all the files and folders for your project. Open this file in your text editor.

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.

Create the index.html and dashboard.html inside your project folder. Your project should be structured like this:

online-store/
├── index.html
├── dashboard.html

Set Up the Basic Project Structure

If you are new to HTML, you can find our more about the structure of a web document here.

Beginning in our index.html page, start with the following code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width">
        <title>Online Store: Home</title>
    </head>
    <body>
        <!-- content the browser will display goes here -->
    </body>
</html>

Breaking it down:

<!DOCTYPE html>: This tells the browser the type of document this is. With html referring to the latest version, HTML5.
<html lang="en">: This tag wraps the entire content of the page. Like most other elements, there is an opening (<html>) and closing tag (</html>), with content placed between them. Often we add attributes inside the opening tag. The lang attribute specifies the language of the content.
<head>: This section contains meta-information about the document, like the title, which appears in the browser tab. This can also contain links to other files.
<meta name="viewport" content="width=device-width">: This tells the browser to set the webpage's width to match the width of the device it's being viewed on. This means phones, tablets, and computers will all adjust their layout to fit the screen properly, making it easier to read and use on smaller devices.
<title>: Sets the title of the web page.
<body>: Everything inside the body tag is what will be displayed in the browser. Here we can add our images, text, and headings etc.

Adding structure

The index.html is structured like this:

The next steps are to add the HTML elements to create this. This content will be displayed in the browser, meaning it goes inside the <body> tags:

<body>
  <header>
    <h1>Online Store</h1>
  </header>
  <main></main>
</body>

The above code further structures our web document by creating two sections, the <header> (green banner along the top) and the main sections (search, products etc).

You can open the index.html in the browser by double clicking the file in the project folder. If using Visual Studio Code, you can also right-click the file in the side bar > copy path > paste into browser.
You will need to refresh the browser after making chages to your code.

The `header` content

The <header> will be a simple section containing the site title, and links to other pages. It will be used in both of our .html pages. Add the site heading and navigation between the <header> section:

<header>
  <h1>Online Store</h1>
  <nav>
    <ul>
      <li>Home</li>
      <li>Dashboard</li>
    </ul>
  </nav>
</header>

Refresh the browser to see the updates.

HTML headings

Our <header> contains the h1 element. HTML headings are available in six levels, h1 to h6. With level 1 being the most important, and encouraged to be only used once on a page. Generally used for describing the pages content.

Headings are displayed by default with h1 as the largest, and h6 the smallest. Although heading selection should be related to the importance of the content, and not the display size. Also, headings should be selected in order, e.g. don't use only a h1 and h4 on a page without the headings between. This is due to screen readers following the headings in order to determine the pages content.

Screen reader software is used to convert a web document to speech or braille. Used by blind or visually impaired users.

You will see our links are contained inside of a <nav> element:

<nav>
  <ul>
    <li>Home</li>
    <li>Dashboard</li>
  </ul>
</nav>

This element itself provides no visual content in the browser, but the purpose is to represent a main navigation section. This can also be useful for screen readers. HTML5 provides various semantic (descriptive) elements which can be used to describe the contents inside them, such as <header>, footer, article, aside, main, and <section>.

Contained inside, the <ul> element declares an unordered list. Unordered lists are used to create lists such as a to-do section. Each item in the list is set using the <li> element, and by default, a disc (bullet point) is used to the left of the text. The ol element can be used in place of ul, this creates an ordered list, placing a number next to each list item.

Lists can be modified using CSS, such as changing or removing the disc, adding spacing, or creating a horizontal or vertical direction. This also makes them very versatile and also commonly used for navigation links.

Links

To make the li values link to other pages, we need to include the <a> (anchor) element:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="dashboard.html">Dashboard</a></li>
</ul>

Breaking it down:

The <a> element creates a link (hyperlink), with the link text placed between the opening and closing tag.
We set the page to link to using the href attribute. Including the file path to the page to link to. This can also contain links to external websites (e.g. https://learn-webdevelopment.com).

Your index.html code should now look like this:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width">
        <title>Online Store: Home</title>
    </head>
    <body>
        <header>
            <h1>Online Store</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="dashboard.html">Dashboard</a></li>
                </ul>
            </nav>
        </header>
        <main></main>
    </body>
</html>

The dashboard page

This page structure will be re-used in the dashboard page. Maintaining a consistent header section, and a way to link between both pages. Copy and paste this completed code into dashboard.html, modifying the title:

<!-- dashboard.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width">
        <title>Online Store: Dashboard</title>
    </head>
    <body>
        <header>
            <h1>Online Store</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="dashboard.html">Dashboard</a></li>
                </ul>
            </nav>
        </header>
        <main></main>
    </body>
</html>

Test this in the browser, you should now be able to switch between the two pages using the links.

We have no page content just yet, but you will see the url and title (browser tab) update.

Introduction and What We Will Be Building Index Page Main Content