Lesson 15: Adding our work landing page

This content is likely out of date

The content of this course was written in May 2020, so parts will be outdated. There’s no immediate plan to do a full update, but this course is now open source, so if you see an issue, please raise an issue.

Head over to the project and follow the contribution guide if you would like to help.

As I said in the last lesson, repetition is super useful for committing stuff to memory. So let’s put together our ‘work’ landing page using knowledge we already have.

Add a work landing layout

Create a new file in your layouts folder called work-landing.html and add the following to it:

{% extends "layouts/base.html" %} 

{% set pageHeaderTitle = title %} 
{% set pageHeaderSummary = content %} 

{% block content %}
  <article>
    {% include "partials/page-header.html" %}
  </article>
  <div class="[ panel dot-shadow ] [ bg-tertiary-glare ]">
    <div class="wrapper">
      <article class="[ gallery ] [ flow flow-space-800 ]">
        {% for item in collections.work %}
        <figure class="[ gallery__item ] [ flow ]">
          <div class="[ gallery__media ] [ frame ]" data-frame="primary">
            <img
              class="radius"
              src="{{ item.data.hero.image }}"
              alt="{{ item.data.hero.imageAlt }}"
            />
          </div>
          <figcaption class="[ gallery__content ] [ flow ]">
            <h2 class="[ gallery__heading ] [ text-700 md:text-900 ]">
              {{ item.data.title }}
            </h2>
            <p class="[ gallery__summary ] [ measure-short flow-space-300 ]">
              {{ item.data.summary }}
            </p>
            <a href="{{ item.url }}" class="button">See this work</a>
          </figcaption>
        </figure>
        {% endfor %}
      </article>
    </div>
  </div>

  {% include "partials/cta.html" %} 

{% endblock %}

That’s the whole template! What we’re doing is grabbing all items from the work collection and looping through them. For each item, we use a <figure> element which is for self-contained content, which is perfect for each individual piece of work. These are also within <article> elements to give us some landmark goodness.

Remember: an <article> doesn’t have to be a big group of content, like a whole blog post. There can be many <article>s on a page that contain one bit of content. That’s where, in my opinion, they are the most useful. I strongly recommend reading Bruce Lawson’s Why you should choose HTML5 article over section (opens new window).

We already created our work collection when we created our home page, so really, we’ve covered all we need to know in this lesson. All we need to do now is create our markdown file which, in turn, creates our page for us.

Create a new file in your src folder called work.md and add the following to it:

---
title: 'Our finest work'
layout: 'layouts/work-landing.html'
---

Some of our finest work from websites right through to printed
branding that shows our range and diversity of talent in the agency.

And with that, you should see something like this when you open up http://localhost:8080/work (opens new window):

Wrapping up

I hope this group of quick lessons have given you a little morale boost after what has been a very heavy part of the course.

Your Eleventy knowledge will now be completely unrecognisable to what it was 14 lessons ago and in another few lessons, you will have covered an immense amount of ground with this platform.

Onto the next lesson!