Lesson 10 - Home page complete and recap

Learn Eleventy From Scratch
Let’s build a website

We’ve achieved a heck of a lot over the last 9 lessons so let’s gather round and recap what we’ve learned.

We’re very nearly there with our home page now. All we’ve got to do is change the title and add a wrapper.

Open up eleventy-from-scratch/src/index.md and change the title from “Hello, world” to “Issue 33”:

Code language
Diff - don’t copy
- title: 'Hello, world'
+ title: 'Issue 33'

Finally, open up eleventy-from-scratch/src/_includes/layouts/home.html and delete everything. Replace it with this:

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

{% block content %}
<div class="wrapper">
  <article class="intro">
    <div class="[ intro__header ] [ radius frame ]">
      <h1 class="[ intro__heading ] [ weight-normal text-400 md:text-600 ]">
        {{ intro.eyebrow }}
        <em class="text-800 md:text-900 lg:text-major weight-bold">{{ intro.main }}</em>
    <div class="[ intro__content ] [ flow ]">
      <p class="intro__summary">{{ intro.summary }}</p>
      <a href="{{ intro.buttonUrl }}" class="button">{{ intro.buttonText }}</a>
    <div class="[ intro__media ] [ radius dot-shadow ]">
        class="[ intro__image ] [ radius ]"
        src="{{ intro.image }}"
        alt="{{ intro.imageAlt }}"

{% set ctaContent = primaryCTA %} 
{% include "partials/cta.html" %} 

{% include "partials/featured-work.html" %} 
{% include "partials/studio-feed.html" %} 

{% set ctaContent = cta %} 
{% include "partials/cta.html" %} 

{% endblock %}

Don’t worry, you haven’t missed anything. We just needed to add a wrapper, and this was the easiest way of doing it.

With that, we are done on the home page. Hell yeh!

A quick recap permalink

Here’s a list of stuff we've learned over the last 9 lessons:

  1. What Eleventy is and how it works
  2. How to create a “Hello, world” with Eleventy
  3. What Nunjucks is and how it works
  4. What Front Matter is and how it works
  5. How to copy assets over to our dist folder with Passthrough copy
  6. How to create partials with Nunjucks
  7. How to create global data and access it in our templates
  8. How to create collections from scratch and implement them in our templates
  9. How to pull data in from a remote source and render it on our templates

Holy moly, that is a lot of learning. You’re probably feeling pretty tired right now!

Take a breath, make a drink and have a stretch. We’re going to up the pace now and complete the HTML-only build of this website.

Let’s dig in!


Next up: Lesson 11 - Blog feeds, tags and pagination

Time to pick up the pace and dig in to what Eleventy is best known for by creating our front-end feeds.

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