Lesson 29 - Add a contact page

Course
Learn Eleventy From Scratch
Module
Front-End Build

We’ve got most our front-end now, so let’s see how flexible it is by quickly adding our contact page.


If you click around the site now, you’ll see that the front-end is pretty much done. Yes, we’ve still got the work pages to do, but even they look pretty darn good.

One page that is very missing, though, is the contact page. So let’s demonstrate how flexible our Eleventy site really is, and put a contact page together in under 3 minutes.

Ready. Steady. Go!

Adding the template permalink

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

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

{% set pageHeaderTitle = title %} 
{% set pageCriticalStyles = ['css/page.css'] %}

{% block content %}
<article>
  {% include "partials/page-header.html" %}
  <div class="panel dot-shadow bg-tertiary-glare">
    <div class="[ page-content ] [ flow wrapper ] [ flow-space-700 ]">
      {{ content | safe }}
    </div>
  </div>
</article>
{% endblock %}

Now create another file in your src folder called contact.md and add the following to it:

Code language
text
---
title: 'Contact us'
layout: 'layouts/page.html'
---

This is a made up agency that is being used as a context for the project that you build when you [learn Eleventy from scratch](https://piccalil.li/course/learn-eleventy-from-scratch/), so ideally, you shouldn’t try to contact us.

You can go ahead and purchase the course to build this page—amongst [the rest of the site](/)—by visiting [Piccalilli](https://piccalil.li/course/learn-eleventy-from-scratch/).

Now, if you go to http://localhost:8080/contact you’ll see that it’s good to go!

Wrapping up permalink

Because we’ve built everything in such a modular way, adding a page that looked good was trivial. Pretty cool, right?

I’ll bring your attention back to the work section, too. Really, when you look around, it looks pretty good already, thanks to our flexible codebase. All we’re going to do in the next lesson is dot the i’s and cross the t’s.

Let’s do it.


Comments

Next up: Lesson 30 - Styling the work section

The last bit of front-end work is to make the work section look awesome by adding some compositional blocks.

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