Building a Modern Website: Part 1

This is the second of a 3-post series on building a modern website. The demo website is a fictional sailing club’s homepage. This post covers the navigation bar and body text. The last part will go over the footer and finishing touches. This is what the site looked like at the end of the last post:

See the Pen eNdaoe by flyingfisch (@flyingfisch) on CodePen.

Navigation

The way we are going to do the navigation bar is putting the links in an unordered list, like so:

<ul>
    <li><a href="">Home</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Join</a></li>
    <li><a href="">Contact</a></li>
</ul>

Now we have to style it. The first thing we’ll do is get rid of the bullets, margin and the padding.

header {
    ul {
        list-style: none;
        margin: 0;
    }
}

Hmm, those list items look kind of weird. Let’s line them up horizontally.

header {
    ul {
        display: inline-block;
        margin-left: 1em; // separate them a little
    }
}

Well, those links are lined up now, but they are hard to read on the blue, so let’s style them up a little.

header {
    a {
        color: $light;
        font-family: $font-header;
        text-decoration: none;
        text-transform: uppercase;
    }
}

And then let’s get them to show up on the same line as the club name.

header {
    h1 {
        float: left;
    }

    ul {
        float: right;
        line-height: 80px; // centers the ul in the header. The trick is if you only need to center a single line of text you can do it by setting line-height to the height of the container
    }
}

Body copy

Now let’s make some HTML for our page. We know we are going to have a header and some text, so let’s add that (greeking was generated by Tolkien Ipsum).

<h1>The Men Escape to the Crack of Doom</h1>

<p>The Man women and children hurried to The Crack of Doom for shelter. In the meantime, Aragorn insisted on attacking The mines of Moria, but the Orcs were waiting. Morgoth felt he did not have the strength to attack. The Hobbits were ravaging the countryside, leaving destruction in their wake. </p>

<p>Gandalf led the Ents to attack Weathertop, but the attack failed. Farmer Maggot felt he did not have the strength to build. 6 axe were smashed. Faramir insisted on attacking Hobbiton, but the Elves were waiting. "Quick!", cried Grima Wormtongue, "Dwarves!" </p>

<p>The Men were ravaging the countryside, leaving destruction in their wake. Eowyn attacked Weathertop, and slaughtered the Orcs in a surprise attack. Sam attacked The mines of Moria, and slaughtered the Hobbits in a surprise attack. The Elves ambushed Boromir at Bree. Meanwhile, The attack failed, forcing the Dwarves to retreat to Bree. </p>

Time to style this stuff! The first thing I am going to do is make h1 and h2 small-caps.

h1, h2 {
    font-varient: small-caps;
    font-weight: normal;
}

That looks nice, except the letters all touch the left hand side of the screen, making them hard to read. I’m going to add some padding to the article element to fix that.

article {
    padding: 1em;
}

You may have noticed in the mockup that the first paragraph and header were set off from the rest of the text. We can do this by sticking that text inside a section with class feature and styling it up like so:

article {
    .feature {
        font-size: 1.2em;
        margin-bottom: 2em;
        padding-left: 20%;
        padding-right: 20%;
        text-align: center;
    }
}

Conclusion

Here is the website so far, with code and everything. Feel free to fork it on CodePen:

See the Pen GJEWMR by flyingfisch (@flyingfisch) on CodePen.

That concludes this part of the series. In the next and final part I will build the footer, do some mobile optimizations, and put on the finishing touches. Stay tuned!