src/index.html

<!DOCTYPE html>
<html lang="EN">
<head>
    <!--This is the start of the head section of the document. The head section contains information about the document such as title, metadata, and links to external files.-->
    <!--This comment provides additional information to the user. In this case, it tells the user to watch a video about character sets and encoding.-->
    <!-- This sets the title of the web page that appears in the address bar in the browser and is used by the search engine for the link you click to go to the page -->
    <title>MyWebClass.org</title>
    <!--characterset UTF-8 Watch this: https://youtu.be/MijmeoH9LT4 -->
    <meta charset="UTF-8">

    <!-- This sets the viewport for the webpage, which is the visible area of the webpage in the browser. This tag ensures that the webpage will display properly on devices with different screen sizes.-->
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--Basic meta info -->
    <meta name="keywords" content="My Webclass Homepage">
    <meta name="author" content="Keith Williams" />
    <meta name="description" content="A project to provide educational resources to web development teachers">

    <!--OpenGraph meta -->
    <meta property="og:title" content="" />
    <meta property="og:description" content=""/>
    <meta property="og:image" content="logo.png"/>
    <meta property="og:url" content="" />

    <!--meta for twitter
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:creator" content="@">
    <meta name="twitter:title" content="">
    <meta name="twitter:image" content="logo.png">
    <meta name="twitter:site" content="@me">
    <meta name="twitter:description" content="">
    -->


</head>

<body>
    <!--website navigation -->

<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
        <a class="navbar-brand" href="/">MyWebClass</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="/">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="articles.html">Articles</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="installation.html">Install Instructions</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<h1>Homepage</h1>
</body>
</html>