Lesson 4: Design

1 Create a public directory

So far, none of our files (app.js or blog.handlebars) have been directly accessible.

There are some types of files that we want to expose publicly like images (.jpg .png…) or stylesheets .css.

Let’s create a /public folder next to /views, in which we will add 3 files:

// Path to our public directory
app.use(express.static('public'));
Copy to clipboardapp.js

2 Add our first image

To see if our server is returning the image properly, let’s include an image element in our home.handlebars template.

<img src="/avatar.png" alt="Avatar">
Copy to clipboardhome.handlebars

3 Create a head partial

All pages of a website share some HTML elements: the <head>, the <header>, the <footer>…

To avoid repeating ourselves, let’s create a head.handlebars partial, which will include a <meta> element and the <link> to both stylesheets.

<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="/reset.css">
<link rel="stylesheet" type="text/css" href="/styles.css">
Copy to clipboardpartials/head.handlebars

4 Create a header partial

Let’s replace our navigation partial with a more general header.

<header class="header">
  <div class="container">
    <p class="name">
      <a href="/">Sam Walton</a>
    </p>

    <nav class="nav">
      <a href="/">
        Home
      </a>
      <a href="/blog">
        Blog
      </a>
      <a href="/contact">
        Contact
      </a>
    </nav>
  </div>
</header>
Copy to clipboardpartials/header.handlebars

5 Add structure to the homepage

Any HTML page requires:

  • a Doctype
  • a <html> element
  • a <head> element
  • a <body> element

We can now use all the partials we’ve created.

<!DOCTYPE html>
<html>
  <head>
    <title>Home</title>
    {{> head}}
  </head>
  <body>
    {{> header}}

    <main class="main home">
      <div class="container">
        <figure class="home-avatar">
          <img src="/avatar.png" alt="Avatar">
        </figure>

        <h1 class="home-title">
          Hello there, my name is Sam Walton.
        </h1>

        <p class="home-introduction">
          I’m a <strong>Product Designer</strong> spending my time growing an amazing team.
          <br>
          Our aim is to shape the <strong>future of digital learning</strong> at <a href="http://www.codeatuni.com/">Code at Uni</a>.
        </p>
      </div>
    </main>

    {{> footer}}
  </body>
</html>
Copy to clipboardhome.handlebars

6 Style the blog list

Let’s style the /blog route as well.

<!DOCTYPE html>
<html>
  <head>
    <title>Blog</title>
    {{> head}}
  </head>
  <body>
    {{> header}}

    <main class="main blog">
      <div class="container">
        <h1 class="heading">Blog</h1>

        <section class="list">
          {{#each posts}}
            <article class="item">
              <h2 class="item-title">
                <a href="/blog/{{id}}">{{title}}</a>
              </h2>
              <p class="item-excerpt">
                {{excerpt}}
              </p>
            </article>
          {{/each}}
        </section>
      </div>
    </main>

    {{> footer}}
  </body>
</html>
Copy to clipboardblog.handlebars

7 Style the single post

Let’s style the single post template as well.

Note that we can use the {{post.title}} in the title of the page.

<!DOCTYPE html>
<html>
  <head>
    <title>{{title}} | Blog</title>
    {{> head}}
  </head>
  <body>
    {{> header}}

    <main class="main post">
      <div class="container">
        <h1 class="heading">
          <a href="/blog">Blog</a>
          <strong>{{title}}</strong>
        </h1>

        <main class="post-content">
          {{{content}}}
        </main>
      </div>
    </main>

    {{> footer}}
  </body>
</html>
Copy to clipboardpost.handlebars

8 Style the contact page

Although the contact page is light on content, let’s add some structure as well.

<!DOCTYPE html>
<html>
  <head>
    <title>Contact</title>
    {{> head}}
  </head>
  <body>
    {{> header}}

    <main class="main contact">
      <div class="container">
        <h1 class="heading">Contact</h1>
      </div>
    </main>

    {{> footer}}
  </body>
</html>
Copy to clipboardcontact.handlebars