The Moustache Monthly

In the course of this tutorial, we'll bring "The Moustache Monthly" to life, a simple blog website with two design templates:

The list view of the blog.


The detailed view for a blog post.

The HTML Template

The basic HTML structure for our blog's list view is very simple:

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>
    <header></header>

    <article class="teaser--top"></article>

    <section id="recent-posts">
      <article class="teaser--recent"></article>
      <article class="teaser--recent"></article>
      <article class="teaser--recent"></article>
      <article class="teaser--recent"></article>
    </section>

    <section id="subscribe"></section>

    <section id="about"></section>

    <footer></footer>

  </body>
</html>

Complete template code on GitHub

With an extended version of this template in place, we can now start implementing the CSS.

Giveaways. Cheat Sheets. eBooks. Discounts.
And great content from our blog!

About Us

As the makers of Tower, the best Git client for Mac and Windows, we help over 100,000 users in companies like Apple, Google, Amazon, Twitter, and Ebay get the most out of Git.

Just like with Tower, our mission with this platform is to help people become better professionals.

That's why we provide our guides, videos, and cheat sheets (about version control with Git and lots of other topics) for free.