Lesson 10: Home page complete and recap

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!