Author: Mark Fischer, Jr.
Posted: May 25, 2015
Categories: frontend, design, tutorial, modern-website-series

Building a Modern Website: Part 0

This is the first of a 3-post series series on building a modern website. The demo website is a fictional sailing club’s homepage. This post covers the mockup process and building the header. The next part will go into the navigation bar and body text.

Layout

The first thing I do when building a website is come up with a layout. For this site I thought we would keep the layout fairly minimal. I don’t generally build wireframes, preferring building in the browser instead, but I whipped one up in this case to let you see what kind of layout I am envisioning.

Since this is going to be responsive, we need to have a mobile layout as well.

Colors

The colors for this site are going to be blue and white. I got the exact shades straight from the Tango project’s color palette.

Fonts

The first thing I like to do before actually designing the site is find a font to use. For this project I just ran over to Google Fonts and chose Montserrat for the headers and Alegreya for the copy. As a rule of thumb it is usually good to choose a serif font for your body text if the headers are sans-serif, and vice versa.

Here is the link tag for the fonts, we’re just going to add it into the header. Although there are other methods of using Google Fonts, the link tag has the best browser support.

<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700|Alegreya:400,400italic,700,700italic" rel="stylesheet" type="text/css">

We will also be using Normalize.css which basically gives you a starting point that looks the same across all browsers. Since we want to override it’s styles with ours we put it’s link tag first. Our head tag should look something like this now:

<head>
    <title>R. S. Sailing Club</title>

    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700|Alegreya:400,400italic,700,700italic" rel="stylesheet" type="text/css">
    <link href="/css/normalize.css" rel="stylesheet" type="text/css">
    <link href="/css/style.css" rel="stylesheet" type="text/css">
</head>

We’re going to be using SASS for the stylesheets, but don’t worry, I’ll explain any nuances we come across in the project. For now, just think of it as CSS with extra features. Here is our stylesheet so far:

html, body {
    width: 100%;
    height: 100%;
}

body * {
    box-sizing: border-box;
}

body {
    font-family: 'Alegreya', serif;
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

Designing the header

Now that the fonts have been selected, we can start on the header. The markup for now is pretty simple.

<header>
    <h1>R. S. Sailing Club</h1>
</header>

Now let’s get into the CSS. We want the background of the header to be dark blue, and the font should be white. Here is the site so far:

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

SASS 101

This is probably a good time to go over a couple important SASS features: variables and nested selectors.

Variables

Variables names start with a $, and can contain any information you can put in a property. For example:

$my-border: 2px solid black;

div {
    border: $my-border;
}

That compiles to this CSS:

div {
    border: 2px solid black;
}

Nested Selectors

If you want to select an element inside another element, you can nest the selectors. Here is an example:

header {
    h1 {
        color: #fff;
    }
}

This compiles to:

header h1 {
    color: #fff;
}

You can also use the & to select the parent element, like this:

a {
    color #000;
    text-decoration: none;

    &:hover {
        text-decoration: underline;
    }
}

Which compiles into this CSS:

a {
    color: #000;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

Expositus