Lesson 10: Home page complete and recap

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.

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”:

- title: 'Hello, world'
+ title: 'Issue 33'

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

{% 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>
      </h1>
    </div>
    <div class="[ intro__content ] [ flow ]">
      <p class="intro__summary">{{ intro.summary }}</p>
      <a href="{{ intro.buttonUrl }}" class="button">{{ intro.buttonText }}</a>
    </div>
    <div class="[ intro__media ] [ radius dot-shadow ]">
      <img
        class="[ intro__image ] [ radius ]"
        src="{{ intro.image }}"
        alt="{{ intro.imageAlt }}"
      />
    </div>
  </article>
</div>

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

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!