Learn Eleventy From Scratch
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.
In this Eleventy course, we go from a completely empty directory to a full-blown marketing site for a design agency, and along the way, we dive really deep into Eleventy and front-end development best practices.
Over the course of 31 written lessons, split over 4 modules, you will learn core Eleventy platform knowledge—step-by-step—to build out a real-world project. The linear project structure helps your learning because you’re working with a real context, rather than foo bar or fizzbuzz. This also means you’ll actually achieve something at the end that you can build on, too!
Learn more details about this course
It’s not just a course about Eleventy, either. We’re learning how to build a fast, lightweight website that’s progressively enhanced with the user at the forefront. You’re going to learn some solid HTML, CSS and accessibility best practices just by completing this course.
Finally—if that wasn’t enough to convince your already—you’ll learn about design implementation, details and refinement to achieve a solid, professional end-product.
Everything is explained, in detail, in a friendly, conversational manner, and if you get stuck in any of the lessons, you can download the project files, so you’ll have no blockers and you’ll maintain your momentum. Because it’s a written course, it’s available offline by default too.
Now is the time to get into the Jamstack, with static site generators. By taking this course, you’re going to get a solid head-start in that.
So what are you waiting for? Grab a copy of Learn Eleventy From Scratch today and let’s get started with building something awesome.
About your instructor permalink
Your instructor for Learn Eleventy From Scratch is Andy Bell—an educator and consultant designer & developer—based in the U.K. Andy has worked in the design and web industries for well over a decade and in that time, has worked with some of the largest organisations in the world, like Harley-Davidson, BSkyB, Unilever, Oracle, Capita, Vice Media and the NHS.
Over these years, Andy has worked on both extremely large projects for huge organisations and tiny projects for small startups. This has given him a vast experience over a large variety of work, which means the tutorials and courses you read on this site have a pragmatic, flexible approach to them. No shoe fits all sizes, but Andy aims to get as close as possible to that with Piccalilli.
Table of contents permalink
See all modules and lessons
Module 1: Let’s build a website
Welcome aboard. Let’s take a look at what we’re making in this course and what you’ll need to get started.
Time to get your site up and running in the browser with a good old-fashioned “Hello, world”.
Now that we have Eleventy up and running with a “Hello, world” example, let’s add some HTML and Nunjucks.
Learn about what Front Matter is, why it’s useful and how we can use it to super-charge our site’s content.
A quick tutorial on telling Eleventy to copy files over to your website output.
A quick tour of partials and how we can include them by adding our site header.
We’re diving into Eleventy’s data capability and making sections of the site dynamic.
Collections are a crucial part of Eleventy’s capabilities, so it’s time to learn about them.
We’ve achieved a heck of a lot over the last 9 lessons so let’s gather round and recap what we’ve learned.
Time to pick up the pace and dig in to what Eleventy is best known for by creating our front-end feeds.
After a pretty full-on start to this blog, let’s spend some time focusing on the blog post view, filters and setting global data for directories.
Most of our blog template is done and dusted. All we have to do now is add a recommended posts section at the end.
A nice straightforward page build using some of the knowledge we’ve already learned.
Another quick and (hopefully) easy lesson to give you a chance to practice your new skills.
Time to add a core page to the site and learn about linked content.
Let’s wrap up our HTML-only build of the website and recap on where we’ve got to.
Module 2: Asset Pipeline
Now that we have an HTML-only site, it’s time to start making it look good, and that starts with an asset pipeline.
First up in our asset pipeline is our Sass (SCSS) setup.
Time to load our fonts from Google Fonts, locally.
Time to wrap up the asset pipeline with some image optimisations.
Module 3: Front-End Build
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.
The site header, navigation and site footer appear on every page, so let’s get them styled up.
Skip links are really handy for screen reader and keyboard users, so let’s style ours up, along with the button block.
We’re going to learn some CSS Grid to layout our home page intro responsively by creating a compositional layout block.
We’ve got 3 different types of panel on our home page, so let’s style them all up in one lesson.
Now it’s time to make our blog feeds and blog posts look exquisite.
We’re almost there with this front-end now. Let’s do some quickfire styling of our about page.
We’ve got most our front-end now, so let’s see how flexible it is by quickly adding our contact page.
The last bit of front-end work is to make the work section look awesome by adding some compositional blocks.
Module 4: Wrapping Up
Here we are at the last lesson. Time to get our new site ready to go live and plan for the future.