Front-end Dev: Sub Pages

By /

Back to: Create a Static Student Website

Create sub pages for a multi-page website.

Once your home page (index.html) page is fully set up with the appropriate structural elements, such as a structured header with a site id/logo area and a main navigation, the next step is to create your sub pages. The sub pages that we will be creating are:

  • “ART 128” sub page (art128/index.html)
  • “Notes” sub page (notes/index.html)

Optional sub pages to consider (not required):

  • an “About” sub page
  • a “Blog” sub page
View Video Lesson

Site Map:

Student Site Site Map
Student Site Site Map: In addition to the Home page, there are two required sub pages (ART 128 & Notes) and two optional sub pages (About & Blog)

Activity: Add Sub Pages

Pre-requisites

This exercise assumes the following:

  1. You should already have a Github “studentsite” repo (e.g. https://github.com/yourusername/studentsite/) with Github pages already setup.
  2. You should have already established a local dev environment (e.g. already cloned your Github repo to your local computer. If not, please refer to the previous lessons).
  3. You should already have a student site home page index.html + style.css setup with commonly used structural elements (e.g. site header, main site navigation, main content area, content sections, footer, etc.)

Step

1

Do a “Save As” from your Home page (index.html) and save it inside of a “art128” folder (art128/index.html)

In VS Code, open up your home page index.html, and do a “save as” (File > Save As…”) and save it inside of a new sub folder/directory named “art128” (no spaces, all lowercase) and keep the name the HTML file as index.html. Then make the following changes:

Update the Page Title

<title>Your Name | ART 128</title>

Quick Glance/Overview of the About Page Structure

Before you start changing the main content, take a quick look at the code below for a snapshot of the overall structure of this course sub page and the main content sections that you will be modifying. Warning: you do not code this right now (you will be doing this in a later step with content).

<main>
    <section class="hero">
        ... (ART 128 sub page hero content goes here)
    </section>
    <section class="coursework">
        ... (ART 128 sub page main content "coursework" go here)
    </section>
</main>

Note: be sure to change the class name of the 2nd section from class=”courses” to class=”coursework”

Modify the ART 128 Sub Page Hero Section

Since the about page is very similar to the home page (almost identical, except for the hero section), you’ll need to add some HTML classes and CSS to target the about page hero section and modify the styling (via CSS) in a smart way. Before we adjust the styling, let’s first change the content (e.g. the h2) of the About page hero section.

Start by updating the hero section content:

<section class="hero">
    <h2>ART 128</h2>
    <p>Interface Programming 1</p>
</section>

Next, scroll up to your body element and add the class “page-sub” to the body element. This will enable us to target all subpages (all sub pages with class="page-sub") if we want to visually style the sub pages slightly differently than the home page (this is a common practice).

<body class="page-sub">

Then, add in the following CSS to change the hero sections for all subpages to be smaller and grey in color. In your CSS file, place this code near the styling for your Hero section.

/* SUB PAGES */
.page-sub .hero {
    background-color:rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.8);
}

Test your site by viewing it locally in the browser. If it worked, your home page hero should still have the same background color as before (e.g. blue) and your ART 128 sub page hero should now have a grey background color. Do not move on to the next step until you get this working.

Student Site screenshot: ART 128 sub page Hero with a grey background color
Student Site screenshot: ART 128 sub page Hero with a grey background color

Update the Main Content

Instead of displaying one list (as you are doing on your home page), let’s design the layout of the ART 128 sub page to display three lists (one list for each project). You can later use this page as a template for your other courses.

New ART 128 course sub page HTML:

<section class="coursework">

    <div class="project">
        <h3>Site #1: Student Site</h3>
        <ul>
            <li><a href="../index.html">Student Site Home Page</a></li>
            <li><a href="index.html">Student Site ART 128 Page</a></li>
        </ul>
    </div>

    <div class="project">
        <h3>Site #2: Site Base</h3>
        <ul>
            <li>[ Assignments coming soon ]</li>
            <li>[ ... ]</li>
            <li>[ ... ]</li>
        </ul>
    </div>

    <div class="project">
        <h3>Site #3: ________</h3>
        <ul>
            <li>[ Assignments coming soon ]</li>
            <li>[ ... ]</li>
            <li>[ ... ]</li>
        </ul>
    </div>

</section>

Additional course sub page CSS:

/* COURSE PAGES WITH MULTIPLE PROJECT LISTS */
.coursework {
    padding: 3em 1em;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.project {
    margin: 2em;
}

Final ART 128 page HTML:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>John Doe | ART 128</title>
<meta name="description"
content="This is an example student website for John Doe, a fictional web design student.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="page-sub">
<header>
<div class="site-id">
<h1><a href="../index.html">JD</a></h1>
</div>
<nav class="site-nav">
<ul>
<li><a href="index.html">ART 128</a></li>
<li><a href="../notes/index.html">Notes</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h2>ART 128</h2>
<p>Interface Programming 1</p>
</section>
<section class="coursework">
<div class="project">
<h3>Site #1: Student Site</h3>
<ul>
<li><a href="../index.html">Student Site Home Page</a></li>
<li><a href="index.html">Student Site ART 128 Page</a></li>
</ul>
</div>
<div class="project">
<h3>Site #2: Site Base</h3>
<ul>
<li>[ Assignments coming soon ]</li>
<li>[ ... ]</li>
<li>[ ... ]</li>
</ul>
</div>
<div class="project">
<h3>Site #3: ________</h3>
<ul>
<li>[ Assignments coming soon ]</li>
<li>[ ... ]</li>
<li>[ ... ]</li>
</ul>
</div>
</section>
</main>
<footer>
<nav class="social-nav">
<ul>
<li><a href="https://github.com/johndoenma">My Github</a></li>
<li><a href="https://codepen.io/johndoenma">My Codepen</a></li>
</ul>
</nav>
</footer>
</body>
</html>
view raw studentsite-johndoe-subpage-art128.html hosted with ❤ by GitHub

Test your site by viewing it locally in the browser. If it worked, your coursework content should render as three columns, all of which should be centered horizontally on your course sub page. Do not move on to the next step until you get this working.

Student site screenshot: ART 128 sub page
Student site screenshot: ART 128 sub page

Step

2

Do a “Save As” of your art128/index.html page and save it inside of a new “notes” subfolder (notes/index.html)

In VS Code, open up your ART 128 sub page (art128/index.html) and do a “save as” (File > Save As…”) and save it inside of a new sub folder/directory named “notes” (all lowercase, no spaces) and keep the filename as index.html. Then change the content as follows:

Update the Notes Page Title

<title>Your Name | Notes</title>

Quick Glance/Overview of the Notes Page Structure and Layout

Before you start changing the main content, take a quick look at the code below for a snapshot of the overall structure of the notes page and the main content sub-sections that you will be modifying. Warning: do not code this (you will be doing this in a later step with real content).

<main>
    <section class="hero">
        ... (blog page hero content goes here)
    </section>
    <section class="notes">
        ... (notes page main content will go here)
    </section>
</main>

Modify the Notes Page Hero Section

Since the blog page hero section is very similar to the about page hero section, you’ll need to update the HTML body class and change the hero section content (e.g. the h2). Start with the hero section h2:

<section class="hero">
    <h2>Notes</h2> 
    <p>Web Design and Frontend Dev-related Resources</p>
</section>

Update the Main Content

Instead of displaying three equal-sized lists of your notes and resources (as you are doing on your ART 128 course sub page), use the notes page to document important things that you are learning each week, such as re-usable code snippets. You can later use this page as a future reference and reminder of what you learned as a student.

Start by removing the section class and by adding three new structural HTML elements that will help to organize your notes:

<section>
    <div class="container two-col-sidebar">

        <aside>
            ... (Table of Contents for all notes will go here)
        </aside>

        <div class="primary">
            ... (Notes main content will go here)
        </div>

    </div>
</section>

Note: there are three important structural elements to pay attention to:

  1. The Container <div class="container"> parent div that “wraps” around nested child elements.
  2. The Aside <aside> element that is a semantic indicator that this is not the main content.
  3. The Primary <div class="primary"> element that, while not semantic (it’s just a div with a custom class name) it is going to contain all of the primary notes content.

Next, add the provided aside content first. 

<aside>
    <h3>Contents</h3>
    <ol>
        <li>
            <a href="#intro">Introduction</a>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#links">Links</a></li>
                <li><a href="#tech">Technologies</a></li>
            </ul>
        </li>
        <li>
            <a href="#setup">Getting Setup</a>
            <ul>
                <li><a href="#folders">Folder Structure</a></li>
                <li><a href="#html">Blank HTML Doc</a></li>
                <li><a href="#css">Blank CSS Doc</a></li>
            </ul>
        </li>
        <li>
            <a href="#base-styles">Base Styles</a>
            <ul>
                <li><a href="#global-resets">Global Resets</a></li>
                <li><a href="#global-colors">Global Colors</a></li>
                <li><a href="#global-typography">Global Typography</a></li>
            </ul>
        </li>
        <li>
            <a href="#glossary">Glossary</a>
            <ul>
                <li><a href="#definitions">Common Terms</a></li>
                <li><a href="#cli-commands">Global Colors</a></li>
            </ul>
        </li>
</aside>

Next, add the provided notes (“primary”) content. 

<div class="primary">

    <h2 id="intro">Introduction</h2>
    <p id="about">
        This page contains my notes taken while studying web design and front-end web
        development.
    </p>

    <h3 id="links">My Personal Links:</h3>
    <ul>
        <li>
            My Github:
            <a href="https://github.com/johndoenma">https://github.com/johndoenma</a>
        </li>
        <li>
            My Codepen:
            <a href="https://codepen.io/johndoenma">https://codepen.io/johndoenma</a>
        </li>
    </ul>

    <h3 id="tech">Technologies &amp; Applications:</h3>
    <ul>
        <li><a href="#">Git</a> (Version Control System)</li>
        <li><a href="#">Github</a> (Free Cloud Source Code Storage and Git-based Version Control System)
        </li>
        <li><a href="#">Github Pages</a> (Free Static Site Hosting)</li>
        <li><a href="#">VS Code</a> (Code Editor)</li>
    </ul>

    <hr />

    <h2 id="setup">Getting Setup</h2>

    <h3 id="folders">Basic Website Folder Structure</h3>
    <pre><code>
sitename/
├── <a href="https://gist.github.com/johndoenma/696e1b3bc6e5b9d001e1129cd5c8b118">index.html</a>
├── css/
│   ├── <a href="https://gist.github.com/kccnma/3cce7281cfe835b687fedfe80c099c12">style.css</a>
          
    </code></pre>

    <hr />

    <h3 id="html">Blank HTML Document</h3>
    <p>Example index.html file:</p>
    <script src="https://gist.github.com/johndoenma/696e1b3bc6e5b9d001e1129cd5c8b118.js"></script>

    <hr />

    <h3 id="css">Blank CSS Document</h3>
    <p>Example style.css file with a CSS Table of Contents:</p>
    <script src="https://gist.github.com/johndoenma/5abb1b0fb4eb4a8a0f864266ebaa1fe4.js"></script>

    <hr />

    <h2 id="base-styles">Base Styles</h2>

    <h3 id="global-reset">CSS Global Reset</h3>
    <script src="https://gist.github.com/johndoenma/5ef7eb0b89ca05fe451f3fa2950da32e.js"></script>

    <hr />

    <h3 id="global-colors">CSS Global Colors</h3>

    <script src="https://gist.github.com/johndoenma/363ad9d4af5e678b9776cafa8a16d643.js"></script>

    <hr />

    <h3 id="global-typography">CSS Global Typography</h3>

    <div class="markup-box">

        <h1>This is a Heading 1</h1>
        <h2>This is a Heading 2</h2>
        <h3>This is a Heading 3</h3>

        <p>This is a paragraph. This is <strong>bold text</strong>. This is <em>italic text</em>. This
            is an <a href="#">inline text link</a>. Lorem ipsum dolor sit amet, consectetur adipiscing
            elit.</p>

        <ul>
            <li>This is an Unordered List Item</li>
            <li>This is an Unordered List Item</li>
            <li>This is an Unordered List Item</li>
        </ul>

        <ol>
            <li>This is an Ordered List Item</li>
            <li>This is an Ordered List Item</li>
            <li>This is an Ordered List Item</li>
        </ol>

        <p>This is a <a href="#">link</a>.</p>

    </div>

    <script src="https://gist.github.com/johndoenma/5b875c1db2658e181587e8be6394fbea.js"></script>

    <script src="https://gist.github.com/johndoenma/5045d389a3c941a2f31edb66c116a1a7.js"></script>

    <hr />

    <h2 id="glossary">Glossary:</h2>

    <h3 id="glossary">Common Terms &amp; Definitions:</h3>

    <dl>
        <dt>HTML</dt>
        <dd>Hypertext Markup Language</dd>
        <dt>CSS</dt>
        <dd>Cascading Style Sheets</dd>
        <dt>JS</dt>
        <dd>JavaScript</dd>
        <dt>CLI</dt>
        <dd>Command Line Interface</dd>
        <dt>GUI</dt>
        <dd>Graphical User Interface</dd>
    </dl>

    <hr />

    <h3 id="cli-commands">Helpful CLI Commands:</h3>


    <pre><code>
$ pwd (or simply "cd" on a PC) // returns path to current directory

$ ls (or "dir" on a PC) // returns list of contents inside the current directory

$ cd Desktop // move down one level into a sub directory

$ cd .. // move up one level into the parent directory

$ git clone https://github.com/username/reponame // copies a remote repo to your local computer
    </code></pre>

</div>

Finally, add the Notes sub page CSS styles into your style.css file on the bottom. 

/* LAYOUT */
.container {
    max-width: 1000px;
    margin: 0 auto;
}

section {
    padding: 3em 1em;
}

/* SIDEBAR/ASIDE */
aside {
    padding: 2em 0;
  }
  
@media (min-width: 768px) {
    .two-col-sidebar {
        display: grid;
        grid-template-columns: 20em auto;
    }
    .two-col-sidebar aside {
        border-right: 1px solid rgba(0, 0, 0, 0.1);
        margin: 0 3em 2em 0;
        padding: .3em 2em 0 0;
    }
}

Final Notes page HTML:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>John Doe | Notes</title>
<meta name="description"
content="This is an example student website for John Doe, a fictional web design student.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../css/style.css" rel="stylesheet" type="text/css">
</head>
<body class="page-sub">
<header>
<div class="site-id">
<h1><a href="../index.html">JD</a></h1>
</div>
<nav class="site-nav">
<ul>
<li><a href="../art128/index.html">ART 128</a></li>
<li><a href="index.html">Notes</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h2>Notes</h2>
<p>Web Design and Frontend Dev-related Resources</p>
</section>
<section>
<div class="container two-col-sidebar">
<aside>
<h3>Contents</h3>
<ol>
<li>
<a href="#intro">Introduction</a>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#links">Links</a></li>
<li><a href="#tech">Technologies</a></li>
</ul>
</li>
<li>
<a href="#setup">Getting Setup</a>
<ul>
<li><a href="#folders">Folder Structure</a></li>
<li><a href="#html">Blank HTML Doc</a></li>
<li><a href="#css">Blank CSS Doc</a></li>
</ul>
</li>
<li>
<a href="#base-styles">Base Styles</a>
<ul>
<li><a href="#global-resets">Global Resets</a></li>
<li><a href="#global-colors">Global Colors</a></li>
<li><a href="#global-typography">Global Typography</a></li>
</ul>
</li>
<li>
<a href="#glossary">Glossary</a>
<ul>
<li><a href="#definitions">Common Terms</a></li>
<li><a href="#cli-commands">Global Colors</a></li>
</ul>
</li>
</aside>
<div class="primary">
<h2 id="intro">Introduction</h2>
<p id="about">
This page contains my notes taken while studying web design and front-end web
development.
</p>
<h3 id="links">My Personal Links:</h3>
<ul>
<li>
My Github:
<a href="https://github.com/johndoenma">https://github.com/johndoenma</a>
</li>
<li>
My Codepen:
<a href="https://codepen.io/johndoenma">https://codepen.io/johndoenma</a>
</li>
</ul>
<h3 id="tech">Technologies &amp; Applications:</h3>
<ul>
<li><a href="#">Git</a> (Version Control System)</li>
<li><a href="#">Github</a> (Free Cloud Source Code Storage and Git-based Version Control System)
</li>
<li><a href="#">Github Pages</a> (Free Static Site Hosting)</li>
<li><a href="#">VS Code</a> (Code Editor)</li>
</ul>
<hr />
<h2 id="setup">Getting Setup</h2>
<h3 id="folders">Basic Website Folder Structure</h3>
<pre><code>
sitename/
├── <a href="https://gist.github.com/johndoenma/696e1b3bc6e5b9d001e1129cd5c8b118">index.html</a>
├── css/
│ ├── <a href="https://gist.github.com/kccnma/3cce7281cfe835b687fedfe80c099c12">style.css</a>
</code></pre>
<hr />
<h3 id="html">Blank HTML Document</h3>
<p>Example index.html file:</p>
<script src="https://gist.github.com/johndoenma/696e1b3bc6e5b9d001e1129cd5c8b118.js"></script>
<hr />
<h3 id="css">Blank CSS Document</h3>
<p>Example style.css file with a CSS Table of Contents:</p>
<script src="https://gist.github.com/johndoenma/5abb1b0fb4eb4a8a0f864266ebaa1fe4.js"></script>
<hr />
<h2 id="base-styles">Base Styles</h2>
<h3 id="global-reset">CSS Global Reset</h3>
<script src="https://gist.github.com/johndoenma/5ef7eb0b89ca05fe451f3fa2950da32e.js"></script>
<hr />
<h3 id="global-colors">CSS Global Colors</h3>
<script src="https://gist.github.com/johndoenma/363ad9d4af5e678b9776cafa8a16d643.js"></script>
<hr />
<h3 id="global-typography">CSS Global Typography</h3>
<div class="markup-box">
<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<p>This is a paragraph. This is <strong>bold text</strong>. This is <em>italic text</em>. This
is an <a href="#">inline text link</a>. Lorem ipsum dolor sit amet, consectetur adipiscing
elit.</p>
<ul>
<li>This is an Unordered List Item</li>
<li>This is an Unordered List Item</li>
<li>This is an Unordered List Item</li>
</ul>
<ol>
<li>This is an Ordered List Item</li>
<li>This is an Ordered List Item</li>
<li>This is an Ordered List Item</li>
</ol>
<p>This is a <a href="#">link</a>.</p>
</div>
<script src="https://gist.github.com/johndoenma/5b875c1db2658e181587e8be6394fbea.js"></script>
<script src="https://gist.github.com/johndoenma/5045d389a3c941a2f31edb66c116a1a7.js"></script>
<hr />
<h2 id="glossary">Glossary:</h2>
<h3 id="glossary">Common Terms &amp; Definitions:</h3>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JS</dt>
<dd>JavaScript</dd>
<dt>CLI</dt>
<dd>Command Line Interface</dd>
<dt>GUI</dt>
<dd>Graphical User Interface</dd>
</dl>
<hr />
<h3 id="cli-commands">Helpful CLI Commands:</h3>
<pre><code>
$ pwd (or simply "cd" on a PC) // returns path to current directory
$ ls (or "dir" on a PC) // returns list of contents inside the current directory
$ cd Desktop // move down one level into a sub directory
$ cd .. // move up one level into the parent directory
$ git clone https://github.com/username/reponame // copies a remote repo to your local computer
</code></pre>
</div>
</div>
</section>
</main>
<footer>
<nav class="social-nav">
<ul>
<li><a href="https://github.com/johndoenma">My Github</a></li>
<li><a href="https://codepen.io/johndoenma">My Codepen</a></li>
</ul>
</nav>
</footer>
</body>
</html>
view raw studentsite-johndoe-subpage-notes.html hosted with ❤ by GitHub

Final ART 128 + Notes sub pages CSS:

/* GLOBAL RESET */
* { box-sizing: border-box; }
body { margin: 0; }
/* GLOBAL COLORS */
body { color: rgba(0, 0, 0, 0.8); }
a { color: rgba(0, 102, 204, 1); }
a:hover { color: rgba(0, 51, 153, 1); }
/* GLOBAL TYPOGRAPHY */
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 88.75%; /* 14px */
line-height: 1.4;
}
/* SITE STRUCTURE */
header {
background-color: rgba(0, 102, 204, 1);
color: rgba(0, 0, 0, 0.8);
padding: 1em;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
header a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
header a:hover {
color: rgba(255, 255, 255, 1);
}
/* SITE ID */
.site-id h1 {
margin: 0;
}
/* SITE NAV */
.site-nav ul {
display: flex;
justify-content: flex-end;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav a {
display: block;
padding: 1em;
}
/* MAIN */
main {
background: rgba(0,0,0,.05);
}
/* HERO SECTION */
.hero {
background-color: rgba(0, 102, 204, 1);
text-align: center;
color: white;
padding: 6em 1em;
}
.hero h2 {
font-size: 6em;
line-height: 1;
text-transform: uppercase;
margin: 0 auto;
}
.hero p {
max-width: 30em;
margin: 1em auto;
}
/* COURSES SECTION */
.courses {
padding: 6em 1em;
display: grid;
justify-content: center;
}
.courses ul {
margin: 0;
padding: 0;
list-style: none;
}
.courses h3{
text-align: center;
}
/* FOOTER */
footer {
border-top: 1px solid rgba(0,0,0,.05);
padding: 1em;
}
/* SOCIAL NAV */
.social-nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
list-style: none;
}
.social-nav a {
display: block;
padding: 1em;
}
/* LAYOUT */
.container {
max-width: 1000px;
margin: 0 auto;
}
section {
padding: 3em 1em;
}
/* SIDEBAR/ASIDE */
aside {
padding: 2em 0;
}
@media (min-width: 768px) {
.two-col-sidebar {
display: grid;
grid-template-columns: 20em auto;
}
.two-col-sidebar aside {
border-right: 1px solid rgba(0, 0, 0, 0.1);
margin: 0 3em 2em 0;
padding: .3em 2em 0 0;
}
}
/* SUB PAGES */
.page-sub .hero {
background-color:rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.8);
}
/* COURSE PAGES WITH MULTIPLE PROJECT LISTS */
.coursework {
padding: 3em 1em;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.project {
margin: 2em;
}
/* CODE BLOCKS */
pre code {
width: 100%;
display: block;
border: 1px solid #ddd;
background-color: #fff;
padding: 1em 3em;
margin-bottom: 1em;
line-height: 1.5;
}
.markup-box {
border: 1px solid #ddd;
border-radius: 5px;
background-color: #fff;
padding: 1em 3em;
margin-bottom: 1em;
}
/* DEFINITION LISTS */
dt {
font-weight: bold;
margin-top: 1em;
}
dd {
margin: 0;
}
/* FOR DEV PURPOSES */
/* body * {
background-color: rgba(0,0,0,.05) !important;
border: 1px solid rgba(0,0,0,.1) !important;
color: rgba(0,0,0,.5) !important;
} */
view raw studentsite-johndoe-subpages.css hosted with ❤ by GitHub

Test your site by viewing it locally in the browser. If it worked, your notes page hero should be grey in color, just like your ART 128 page hero, and your notes main content area should render as two columns side-by-side and centered in the middle of the web page.

Student site screenshot: Notes sub page
Student site screenshot: Notes sub page

Step

3

Save (stage + commit) your local changes to the server (Github)

By now you should know the drill: in VS Code, navigate to the “Source Control” (a.k.a. “Git”) tab on the left, then do a stage (add) + commit (with a comment of your change) followed by a push (sync).

The Git Stage + Commit > Push-to-Main Process

  1. Stage + Commit: add a descriptive comment then hit the checkmark icon (the checkmark will save the changes via a git “add” + git “commit”)
  2. Push: at the bottom of the interface, hit the sync icon (this sync icon will upload the changes via a git “push”)
    • Enter your username and password if/when prompted

Test your live site

Whenever you push changes to your master GitHub repo, be sure to test your live site hosted on Github pages. Congratulations! You just completed a multi-page website!