Front-end Dev: Site Structure

By /

Back to: Create a Static Student Website

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

View Video Lesson

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 “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 index.html home page file with essential HTML 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:

/* GLOBAL RESET */
* { box-sizing: border-box; }
body { margin: 0; }

Note: be sure to add the CSS comment “GLOBAL RESET” at the top and also notice how CSS can also be written on one line. What does this mean? That the browser ignores line breaks and spacing. Line breaks and spacing (e.g. indented code) are important for web developers (humans) to be able to read and make sense of the source code.

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>

Next let’s add back in some “Global” styling to your CSS file, but this time we are going to organize it a little differently.

/* 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;
}

Note: notice how we now have three (3) body selectors. Why three? Why not just one? There is no right or wrong answer because it is OK to have multiple selectors. With that said, one of the goals for web developers is to write DRY code (“Do Not Repeat Yourself”) which would support using only one body selector. However, another goal for web developers is to write well organized code that is easy to understand and manage, therefore it might make more sense to have three different selectors located within different sections of your css, such as one where all colors are defined and another where all typography settings are defined. In other words, there is no right or wrong answer. For now, it is important for you to take notice that there are multiple ways to write good CSS.

When you are done with these initial setup tasks, your HTML and CSS should look like this:

HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>John Doe</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>
<header>
<h1><a href="index.html">JD</a></h1>
</header>
<main>
<section>
<h2>Hi, I'm John</h2>
<p>I am a fictional web design student. This site is under construction. Soon, I will be posting my course assignments and portfolio here.</p>
</section>
<section>
<h2>My Courses:</h2>
<ul>
<li><a href="art128/index.html">ART 128 Interface Programming 1</a></li>
</ul>
</section>
</main>
<footer>
</footer>
</body>
</html>
view raw studentsite-structure-part1.html hosted with ❤ by GitHub

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;
}
view raw studentsite-structure-part1.css hosted with ❤ by GitHub

Web Dev Tip: to help visualize your HTML elements as rectangular blocks in the browser, you can use temporary CSS and the box model to do things like add borders around elements, or add background colors to help see them visually while writing code. Along these lines, below are some simple lines of code that might help you as you work on your student site. Simply place this code at the bottom of your style.css file and, by default, it will do nothing (because the code is commented out), but when you want to use it, simply comment it back in (i.e. remove the CSS comments) and use it temporarily. Just remember to comment it out when you are done and be sure to remove it if you ever use this on a production site (e.g. a live website for a client). 

/* FOR WEB DEV PURPOSES ONLY */
/* body, * {
    background-color: rgba(0,0,0,.05);
    border: 1px solid rgba(0,0,0,.1);
    color: rgba(0,0,0,.5);
} */

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 a Courses section where you will be displaying a list of your courses.

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=”courses” 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 with Site ID and Site Nav HTML:

<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="notes/index.html">Notes</a></li>
            </ul>
        </nav>
</header>

Header CSS:

/* HEADER */
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);
}

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 */
.site-nav ul {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-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>
        ... (course list will go here)
    </section>
</main>

Main CSS:

/* MAIN */
main {
    background: rgba(0,0,0,.05);
}

Footer HTML:

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

Footer CSS:

/* 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;
}

Main Sub-Sections

Next, move on to style the “hero” sub-section and “courses” 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="courses">
        ... (a list of your courses will go here)
    </section>
</main>

Hero Section HTML:

<section class="hero">
    <h2>Hi, I'm John</h2>
    <p>I am a fictional web design student. This site is under construction. Soon, I will be posting my course assignments and portfolio here.</p>
</section>

Hero Section CSS:

/* 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 HTML:

<section class="courses">
        <h3>My Courses</h3>
        <ul>
            <li><a href="art128/index.html">ART 128 Interface Programming 1</a></li>
        </ul>
</section>

Courses section CSS:

/* 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;
}

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>John Doe</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>
<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="notes/index.html">Notes</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero">
<h2>Hi, I'm John</h2>
<p>I am a fictional web design student. This site is under construction. Soon, I will be posting my course
assignments and portfolio here.</p>
</section>
<section class="courses">
<h3>My Courses</h3>
<ul>
<li><a href="art128/index.html">ART 128 Interface Programming 1</a></li>
</ul>
</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-structure-homepage.html hosted with ❤ by GitHub

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;
}
/* 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-structure-homepage.css hosted with ❤ by GitHub

In the browser, your site should render like this:

Student Site screenshot: John Doe Home Page Complete with Structural Elements
Student Site screenshot: John Doe Home Page Complete with Structural Elements

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 the main branch of your GitHub repo, be sure to test your live site hosted on Github pages. Congratulations! It’s back to looking good (again). 🙂