Lesson 15 - Adding our work landing page

Learn Eleventy From Scratch
Let’s build a website

Another quick and (hopefully) easy lesson to give you a chance to practice your new skills.

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 permalink

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

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

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

{% block content %}
    {% include "partials/page-header.html" %}
  <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">
              src="{{ item.data.hero.image }}"
              alt="{{ item.data.hero.imageAlt }}"
          <figcaption class="[ gallery__content ] [ flow ]">
            <h2 class="[ gallery__heading ] [ text-700 md:text-900 ]">
              {{ item.data.title }}
            <p class="[ gallery__summary ] [ measure-short flow-space-300 ]">
              {{ item.data.summary }}
            <a href="{{ item.url }}" class="button">See this work</a>
        {% endfor %}

  {% 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.

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:

Code language
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:

The work landing page featuring a list of work items

Wrapping up permalink

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!

Next up: Lesson 16 - Creating a work item page

Time to add a core page to the site and learn about linked content.

Get started

Help! My version of this lesson isn’t working.

Don’t panic, you can download the working project here! Once they are downloaded: replace your project with these files and run npm install. You can read more information here.

Download project files

Hello, I’m Andy and I’ll help you build fast & visually stunning websites.

I am currently setting up a new creative agency called Set Creative Studio and we are taking on projects for 2022, so if you have a project in mind, get in touch.