Learn Eleventy From Scratch
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.
About your instructor permalink
Your instructor for Learn Eleventy From Scratch is me, Andy Bell—a freelance designer and front-end developer—based in the UK. I have worked in the design and web industries for well over a decade and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, Oracle, Capita, Vice Media and the NHS.
Over these years, I have worked on both extremely large projects for huge organisations and tiny projects for small startups. This has given me a lot of experience over a large variety of project types. It also means I’ve worked with a lot of teams in various sizes—each with their own constraints and goals. These projects vary between design systems, creative campaign work and good ol’ websites.
I mostly specialise in CSS—whether that is writing a course for Google, co-authoring a book on CSS layout, or creating a methodology to help people write better CSS. Most of my client work involves me applying this experience to help teams write better CSS—often by helping them create a design system.
Table of contents permalink
Welcome! Here’s all of the lessons for this course. Let’s get cracking!
Module 1: Let’s build a website permalink
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 permalink
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 permalink
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.