Learn Eleventy From Scratch - Table of Contents

Learn how to build a stunning website from scratch, using Eleventy, bleeding-edge front-end technologies and web development best practices—all powered by a resilient asset pipeline.

Here’s all of the lessons for this course, broken into modules. This course takes around 6+ hours to complete.

Buy this course

Let’s build a website permalink

Lesson 1: Intro

Takes about 7 minutes to read

Welcome aboard. Let’s take a look at what we’re making in this course and what you’ll need to get started.

Lesson 2: Hello world

Takes about 5 minutes to read

Time to get your site up and running in the browser with a good old-fashioned “Hello, world”.

Lesson 3: Nunjucks basics

Takes about 5 minutes to read

Now that we have Eleventy up and running with a “Hello, world” example, let’s add some HTML and Nunjucks.

Lesson 4: Front matter basics

Takes about 4 minutes to read

Learn about what Front Matter is, why it’s useful and how we can use it to super-charge our site’s content.

Lesson 6: Partials basics

Takes about 7 minutes to read

A quick tour of partials and how we can include them by adding our site header.

Lesson 7: Data basics

Takes about 9 minutes to read

We’re diving into Eleventy’s data capability and making sections of the site dynamic.

Lesson 9: Adding remote data

Takes about 7 minutes to read

Data doesn’t have to be local and static. Using the power of JavaScript data files, we’re going to pull in some remote data and render it on a template.

Lesson 13: Recommended content

Takes about 4 minutes to read

Most of our blog template is done and dusted. All we have to do now is add a recommended posts section at the end.

Asset Pipeline permalink

Lesson 18: Setting up Gulp

Takes about 4 minutes to read

Now that we have an HTML-only site, it’s time to start making it look good, and that starts with an asset pipeline.

Front-End Build permalink

Lesson 22: Global CSS and design tokens

Takes about 9 minutes to read

It’s time to make this site look darn good now. Let’s set up our global CSS and design tokens to do some of the heavy lifting for us.

Lesson 24: Styling the skip link

Takes about 4 minutes to read

Skip links are really handy for screen reader and keyboard users, so let’s style ours up, along with the button block.

Lesson 25: Home page intro

Takes about 10 minutes to read

We’re going to learn some CSS Grid to layout our home page intro responsively by creating a compositional layout block.

Lesson 26: Home page panels

Takes about 10 minutes to read

We’ve got 3 different types of panel on our home page, so let’s style them all up in one lesson.

Lesson 29: Add a contact page

Takes about 2 minutes to read

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

Wrapping Up permalink

Lesson 31: Wrapping Up

Takes about 6 minutes to read

Here we are at the last lesson. Time to get our new site ready to go live and plan for the future.

Buy this course