Lesson 15 - Adding our work landing page

Course
Learn Eleventy From Scratch
Module
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
HTML
{% 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.

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
text
---
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!


Comments

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, accessible websites & design systems.

I’m a freelance CSS and design systems consultant, based in the UK. I specialise in design systems and creative web design, such as landing pages and campaign work.

I’m currently helping Google by refactoring the CSS and creating a design system for web.dev, but I have availability for projects such as small websites, landing pages and consultancy. I will have full availability for larger projects in January 2022.

Hire me