Front-end Dev: Site Structure

By /

Back to: Web Design for All Ages

Many websites are structured the same way with same elements. Commonly used structural site elements, such as site headers and footers, have become conventions that help to reinforce web standards and best practices. Some of the most commonly used structural components are the site header, site footer, site id (a.k.a. site branding and/or site logo), site navigation, site main content area, and site main content sections (e.g. hero sections).

Commonly Used Structural Site Elements

  • site header
    • site id/logo
    • site navigation
  • site main content
    • hero sections
    • content sections
  • site footer
Low fidelity wireframe of commonly used site structures with content inside displayed as blocks.
Low fidelity wireframe of commonly used site structures with content inside displayed as blocks.

Activity: Add Site Structure Markup and Styling

Pre-requisites

This exercise assumes the following:

  1. You should already have a Github pages repo setup (e.g. https://github.com/yourusername/yourusername.github.io).
  2. You should have already established a local dev environment (e.g. already cloned your Github repo to your local computer).
  3. You should already have a bare-bones, minimal index.html file already created.
  4. You should already have a bare-bones, minimal style.css file already linked to your index.html home page file.

Step

1

Add Initial Structural Markup and Remove Any No-Longer Needed Body CSS

Before we get started, you’ll need to remove any no-longer-needed styling. After that, I suggest adding in the primary structural HTML before you begin adding in the CSS. Once you have all primary HTML in place, then you can gradually begin styling via CSS, line-by-line, starting from the top and working your way down.

First, remove all CSS, except for the following:

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: sans-serif;
}

a {
    text-decoration: none;
    color: darkred;
}

Tip: For those that wish to save their previous CSS, I suggest using Codepen: simply create a new pen, copy-paste your code, then save it as a backup. You can also use Codepen as a place to continue experimenting visually (for fun) as you learn more about HTML and CSS.

Next, add in the following primary structural HTML elements:

Inside of your body, add in header, main, and footer elements.

<body>
    <header>
        [ header goes here ]
    </header>
    <main>
        [ main content goes here ]
    </main>
    <footer>
        [ footer goes here ]
    </footer>
</body>

After this initial step, move your previous content into subsections inside of your main content and then add a h1 inside of your header with a link to the home page (index.html). Inside of the H1, use your initials as the placeholder content for the site id.

<body>
    <header>
        <h1><a href="index.html">JD</a></h1>
    </header>
    <main>
        <section>
            [ 1st block of main content goes here ]
        </section>
        <section>
            [ 2nd block of main content goes here ]
        </section>
    </main>
    <footer>
        [ footer goes here ]
    </footer>
</body>

When you are done, your HTML and CSS should look like this:

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Summer Site 2019</title>
<meta name="description" content="This is my Summer 2019 Web Design Fun website">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1><a href="index.html">JD</a></h1>
</header>
<main>
<section>
<h2>Summer 2019</h2>
<p>I created this site as part of my summer project at Iolani. Within it, you will find lists of my summer
favorites along with resources from my summer web design class.</p>
</section>
<section>
<h3>Movies</h3>
<p>Favorite movies of 2019</p>
<ul>
<li>Lorem ipsum</li>
<li>Et dolorem</li>
<li>Adipiscing Elit</li>
</ul>
</section>
</main>
<footer>
</footer>
</body>
</html>
view raw summersite-structure-part1.html hosted with ❤ by GitHub

CSS

/* GLOBAL */
* { box-sizing: border-box; }
body {
margin: 0;
font-family: sans-serif;
}
a {
text-decoration: none;
color: darkred;
}
view raw summersite-structure-part1.css hosted with ❤ by GitHub

Step

2

Add in commonly used structural content, such as your main header Site ID, main header Site Navigation, and main content area Hero section and any other main content sections, such as your Lists section where you will be displaying your favorites lists.

Add in more structural elements (see the code below for details), such as a site-id div, a site-nav nav, a section class=”hero”, and a section class=”lists” element, along with any other content provided by the instructor.

As you enter the HTML, be sure to add the accompanying CSS for the styling of each structural element. See the HTML and CSS below for full details.

Tip: When coding in class, try your best to follow along with the instructor. If you are coding on your own at your own pace, try to only do one line of code at a time and be sure to test your site locally after each change. There’s lots of code here, so be sure to pace yourself and take it one line of code at a time.

Start from the top, with the Header, then work your way down.

<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>
/* HEADER */
header {
    background: black;
    color: white;
    padding: 1em 2em;
}

header a {
    color: white;
}

header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

Continue adding HTML and CSS, working your way from the top to the bottom

Work your way down the page and repeat this process of 1) adding structural markup (HTML) and 2) adding styles to each element (CSS). For example, after adding in the header HTML and styling it’s background to black and using CSS grid to render the two children in a two-column layout, next move on to styling the site id and site navigation.

Site ID CSS:

/* SITE ID */
.site-id h1 {
    margin: 0;
}

Site Nav CSS:

/* SITE NAV */
nav ul {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding-top: .6em;
}

nav li {
    margin: 0;
    list-style: none;
}

nav a {
    display: block;
    padding: 1em;
}

Next move on to the main and footer areas:

Main HTML:

<main>
    <section>
        ... (hero h2 and p go here)
    </section>
    <section>
        ... (lists will go here)
    </section>
</main>

Main CSS:

/* MAIN */
main {
    padding: 0 0 3em 0;
    min-height: 80vh;
}

/* SECTIONS */

section {
    padding: 3em 1em;
}

Footer HTML:

<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>

Footer CSS:

/* FOOTER */
footer {
    border-top: 1px solid #ddd;
    max-width: 1000px;
    margin: 0 auto;
}
footer nav ul {
    justify-content: center;
}

Main Sub-Sections

Next, move on to style the “hero” sub-section and “lists” sub-sections. To do so, you’ll need to add classes (e.g. section class=”hero”) as identifiers so you can style them as targets via the CSS. In HTML, classes are inside of double quotes (class=”hero) and in CSS, classes can be used as selector identifiers by placing a period immediately before the class name (.hero {}).

<main>
    <section class="hero">
        ... (hero h2 and p go here)
    </section>
    <section class="lists">
        ... (three sets of "category" lists go here)
    </section>
</main>

Hero Section HTML:

<section class="hero">
    <h2>This is my Summer 2019 Web Site</h2>
    <p>I created this site as part of my summer project at Iolani. Within it, you will find lists of my summer favorites along with resources from my summer web design class.</p>
</section>

Hero Section CSS:

/* HERO */
.hero {
    display: grid;
    align-content: center;
    text-align: center;
    background: darkred;
    min-height: 50vh;
    color: white;
}

.hero h2 {
    font-size: 3em;
    text-transform: uppercase;
    margin: 0 auto;
}

.hero p {
    margin: 1em auto;
}

Lists section HTML:

<section class="lists">
    <div class="category">
        <h3>Movies</h3>
        <p>Favorite movies of 2019</p>
        <ul>
            <li>Avengers Endgame</li>
            <li>Detective Pikachu</li>
            <li>Alladin</li>
        </ul>
    </div>
    <div class="category">
        <h3>Beaches</h3>
        <p>Favorite beaches of 2019</p>
        <ul>
            <li>Waimanalo Beach</li>
            <li>Kailua Beach</li>
            <li>Melekehana Beach</li>
        </ul>
    </div>
    <div class="category">
        <h3>Games</h3>
        <p>Favorite games of 2019</p>
        <ul>
            <li>Fortnite</li>
            <li>Super Smash Brothers</li>
            <li>Brawl Stars</li>
        </ul>
    </div>
</section>

Lists section CSS:

/* Lists */
.lists {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 1em;
}

@media (max-width:767px) {
    .lists {
        grid-template-columns: 1fr 1fr;
    }
}

Note the media query—it is used to change the layout from a three-column grid on large screens to a two-column grid on small screens (less than 767px). This is called responsive design.

When you are done with this long step, your HTML and CSS should look like this:

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Summer Site 2019</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>
<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>Summer 2019</h2>
<p>I created this site as part of my summer project at Iolani. Within it, you will find lists of my summer
favorites along with resources from my summer web design class.</p>
</section>
<section class="lists">
<div class="category">
<h3>Movies</h3>
<p>Favorite movies of 2019</p>
<ul>
<li>Lorem ipsum</li>
<li>Et dolorem</li>
<li>Adipiscing Elit</li>
</ul>
</div>
<div class="category">
<h3>Songs</h3>
<p>Favorite songs of 2019</p>
<ul>
<li>Lorem ipsum</li>
<li>Et dolorem</li>
<li>Adipiscing Elit</li>
</ul>
</div>
<div class="category">
<h3>Games</h3>
<p>Favorite games of 2019</p>
<ul>
<li>Lorem ipsum</li>
<li>Et dolorem</li>
<li>Adipiscing Elit</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-structure.html hosted with ❤ by GitHub

CSS

/* GLOBAL */
* { box-sizing: border-box; }
body {
font-family: sans-serif;
margin: 0;
}
a {
text-decoration: none;
color: darkred;
}
/* HEADER */
header {
background: black;
color: white;
padding: 1em 2em;
}
header a {
color: white;
}
header {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
}
/* SITE ID */
.site-id h1 {
margin: 0;
}
/* SITE NAV */
nav ul {
display: flex;
justify-content: flex-end;
margin: 0;
padding-top: .6em;
}
nav li {
margin: 0;
list-style: none;
}
nav a {
display: block;
padding: 1em;
}
/* FOOTER */
footer {
border-top: 1px solid #ddd;
max-width: 1000px;
margin: 0 auto;
}
footer nav ul {
justify-content: center;
}
/* MAIN */
main {
padding: 0 0 3em 0;
min-height: 80vh;
}
/* SECTIONS */
section {
padding: 3em 1em;
}
/* HERO */
.hero {
display: grid;
align-content: center;
text-align: center;
background: darkred;
min-height: 50vh;
color: white;
}
.hero h2 {
font-size: 6em;
text-transform: uppercase;
margin: 0 auto;
}
.hero p {
max-width: 600px;
margin: 1em auto;
}
/* Lists */
.lists {
max-width: 1000px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 1em;
}
@media (max-width:767px) {
.lists {
grid-template-columns: 1fr 1fr;
}
}
view raw summersite-structure.css hosted with ❤ by GitHub

In the browser, your site should render like this:

Screenshot of Home Page

Step

3

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

  1. Commit: add a descriptive comment then hit the checkmark icon (the checkmark will save the changes via a 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! It’s back to looking good (again). 🙂