Front-end Dev: Sub Pages

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:

“About” sub page (about.html)
“Blog” sub page (blog.html)

Site Map:

Activity: Add Sub Pages

Pre-requisites

This exercise assumes the following:

You should already have a Github pages repo setup (e.g. https://github.com/yourusername/yourusername.github.io).
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 lesson(s).
You should already have a bare-bones, minimal index.html file already created.
You should already have a bare-bones, minimal style.css file already linked to your index.html home page file.
You should already have a home page setup with commonly used structural elements (e.g. site header, main site navigation, main content area, etc.)

Step

Do a “Save As” from your Home page (index.html) and create your About page (about.html)

In VS Code, open up your home page index.html, and do a “save as” (File > Save As…”) and name it about.html. Then make the following changes:

Update the Page Title

<title>Summer Site 2019 | About</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 the about page and the main content 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">
        ... (about page hero content goes here)
    </section>
    <section class="lists">
        ... (about page main content "lists" go here)
    </section>
</main>

Modify the About 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.

<section class="hero">
    <h2>About</h2> 
    <p>I created this site as part of my summer project at Iolani.</p>
</section>

Next, scroll up to your body element and add the classes “page-sub” and “page-about” to the body element. This will enable us to target all sub pages (if we want) and/or target the about page specifically.

<body class="page-sub page-about">

Then, add in the following CSS to change the hero sections for all sub pages 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: #888;
    min-height: 30vh;
}

Update the Main Content

Instead of displaying lists of your favorite summer things (as you are doing on your home page), use the about page to display links to some of the resources, technologies, and tools that you are using as part of this web design course. You can later use this page as a future reference and reminder of what you learned this summer.

Final About page HTML:

	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Summer Site 2019 \| About</title>
	<meta name="description" content="My Personal Web Site">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	</head>

	<body class="page-sub page-about">
	<header>
	<div class="site-id">
	<h1><a href="index.html">JD</a></h1>
	</div>
	<nav class="site-nav">
	<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="about.html">About</a></li>
	<li><a href="blog.html">Blog</a></li>
	</ul>
	</nav>
	</header>
	<main>
	<section class="hero">
	<h2>About</h2>
	<p>I created this site as part of my summer project at Iolani.</p>
	</section>
	<section class="lists">
	<div class="category">
	<h3>Course Resources</h3>
	<p>Primary Links used in this class</p>
	<ul>
	<li><a href="https://www.creativemedia.space/course/web-design-fun/">Web Design Fun</a></li>
	<li>My Personal links:
	<ul>
	<li><a href="https://iwebstudent001.github.io">My Web site</a></li>
	<li><a href="https://github.com/iwebstudent001/iwebstudent001.github.io">My Github Repo</a>
	</li>
	<li><a href="https://codepen.io/iwebstudent001/">My Codepen</a></li>
	</ul>
	</li>
	</ul>
	</div>
	<div class="category">
	<h3>Technologies</h3>
	<p>Web technologies I learned and used this summer</p>
	<ul>
	<li><a href="https://www.w3schools.com/html/html_intro.asp">HTML</a></li>
	<li><a href="https://www.w3schools.com/css/css_intro.asp">CSS</a></li>
	</ul>
	</div>
	<div class="category">
	<h3>Tools</h3>
	<p>Web design services and software that I used this summer</p>
	<ul>
	<li><a href="https://github.com/">Github</a>
	<ul>
	<li><a href="https://pages.github.com/">Github Pages</a></li>
	<li><a href="https://www.w3schools.com/whatis/whatis_github.asp">What is Github</a></li>
	</ul>
	</li>
	<li><a href="https://www.w3schools.com/whatis/whatis_cli.asp">CLI</a> (via Mac OS <a
	href="https://support.apple.com/guide/terminal/welcome/mac">Terminal</a>)</li>
	<li><a href="https://code.visualstudio.com/">VS Code</a></li>
	<li><a href="https://www.google.com/chrome/">Chrome</a>
	<ul>
	<li><a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome Dev Tools</a>
	</li>
	</ul>
	</li>
	<li><a href="https://codepen.io">Codepen</a></li>
	<li><a href="https://www.adobe.com/products/xd.html">Adobe XD</a></li>
	<li><a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a></li>
	<li><a href="https://www.adobe.com/products/illustrator.html">Adobe Illustrator</a></li>
	</ul>
	</div>
	</section>
	</main>

	<footer>
	<nav class="site-nav">
	<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="about.html">About</a></li>
	<li><a href="blog.html">Blog</a></li>
	</ul>
	</nav>
	</footer>
	</body>

	</html>

view raw summersite-about.html hosted with ❤ by GitHub

Test your site by viewing it locally in the browser. If it worked, your home page hero should remain large and dark red in color and your about page hero should be smaller and grey in color. Do not move on to the next step until you get this working.

Step

Do a “Save As” from your About page (about.html) and create your Blog page (blog.html)

In VS Code, open up your home page about.html, and do a “save as” (File > Save As…”) and name it blog.html. Then change the content as follows:

Update the Blog Page Title

<title>Summer Site 2019 | Blog</title>

Modify the Blog 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>Blog</h2> 
    <p>Weekly notes of what I learned about web design this summer.</p>
</section>

Update the Blog Page Body Class

Next, scroll up to your body element and change the class “page-about” to “page-blog” within the body element. This will enable us to target the blog page specifically (if we want to).

<body class="page-sub page-blog">

Quick Glance/Overview of the Blog 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 the blog page and the main content 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="blog-archives">
        ... (blog page main content articles/posts/archives will go here)
    </section>
</main>

Update the Main Content

Instead of displaying lists of favorite things or links to resources (as you are doing on your home and about pages), use the blog page to document what you are learning each week, via blog posts. You can later use this page as a future reference and reminder of what you learned this summer.

Start by updating the section class to “blog-archives” and by adding your first blog post as an article with the class “blog-entry” like this:

<section class="blog-archives">

    <article class="blog-entry">
        <h3>Week 1</h3>
        <div class="date">06/14/2019</div>
        <p>Blog entry content will go here. Lorem ipsum et dolorem</p>
    </article>

</section>

When you are done with your first blog entry for Week 1, go ahead and duplicate it (copy-paste) and insert a second blog entry for Week 2.

When you are done entering your first two blog entries, then add the following blog page CSS:

/* BLOG Archives */

.blog-archives {
    max-width: 600px;
    margin: 0 auto;
}

.blog-entry {
    border: 1px solid #ddd;
    padding: 2em;
    margin: 2em 0;
}

.date {
    opacity: .5;
    font-size: .8em;
}

Final Blog page HTML:

	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<title>Summer Site 2019 \| Blog</title>
	<meta name="description" content="My Personal Web Site">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="css/style.css" rel="stylesheet" type="text/css">
	</head>

	<body class="page-sub page-blog">
	<header>
	<div class="site-id">
	<h1><a href="index.html">JD</a></h1>
	</div>
	<nav class="site-nav">
	<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="about.html">About</a></li>
	<li><a href="blog.html">Blog</a></li>
	</ul>
	</nav>
	</header>
	<main>
	<section class="hero">
	<h2>Blog</h2>
	<p>Notes taken as I learned web design this summer</p>
	</section>
	<section class="blog-archives">

	<article class="blog-entry">

	<h3>Week 2</h3>
	<div class="date">06/21/2019</div>
	<p>I deleted all of the the styling (CSS) that I did last week, and started adding in essential HTML and
	CSS, such as common structural markup (e.g. header, nav, footer, etc.). I also created three
	category-based lists as the content of my home page. I then created two sub pages: about.html and
	blog.html. The About page contains links to the primary resources and technologies learned in this
	class. The Blog page contains a brief summary of what I did in class each week. At the end of this
	week, I had a live, working web site with three pages: <a
	href="https://iwebstudent001.github.io/index.html">Home</a>, <a
	href="https://iwebstudent001.github.io/about.html">About</a>, and <a
	href="https://iwebstudent001.github.io/blog.html">Blog</a>.</p>

	</article>

	<article class="blog-entry">

	<h3>Week 1</h3>
	<div class="date">06/14/2019</div>
	<p>I learned how to create a live website hosted on Github. I first logged into Github.com, then I
	created a root username repository named <a
	href="https://github.com/iwebstudent001/iwebstudent001.github.io">iwebstudent001.github.io</a>.
	Next I used the Terminal app to
	clone the repo to my local computer desktop (via CLI: git clone). Then I used a code editor named VS
	Code to edit the readme file (in a language called Markdown). Then I created a index.html file (the
	home page) along with a style.css file. At the end of each day, I save my changes (via git commit)
	and upload them to the server (via git push). At the end of the week, I had a live, working web
	site: <a href="https://iwebstudent001.github.io">https://iwebstudent001.github.io</a></p>

	</article>

	</section>
	</main>

	<footer>
	<nav class="site-nav">
	<ul>
	<li><a href="index.html">Home</a></li>
	<li><a href="about.html">About</a></li>
	<li><a href="blog.html">Blog</a></li>
	</ul>
	</nav>
	</footer>
	</body>

	</html>

view raw summersite-blog.html hosted with ❤ by GitHub

Test your site by viewing it locally in the browser. If it worked, your blog page hero should be smaller and grey in color, just like your about page hero, and your blog post entries should render on top of one another as stacked rectangles.

Step

Save (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 commit (with a comment of your change) followed by a push (sync).

The Git Commit + Push-to-Master Process

Commit: add a descriptive comment then hit the check mark icon (the check mark will save the changes via a git “commit”)
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!