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.
You don’t need to be an experienced developer to take this course. All you need is basic HTML and CSS skills, with some optional JavaScript skills.
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.
You can read more about me over on my personal blog, or catch up with me on Twitter, CodePen or Github.
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
Lesson 1: Intro
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
Time to get your site up and running in the browser with a good old-fashioned “Hello, world”.
Lesson 3: Nunjucks basics
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
Learn about what Front Matter is, why it’s useful and how we can use it to super-charge our site’s content.
Lesson 5: Passthrough basics
A quick tutorial on telling Eleventy to copy files over to your website output.
Lesson 6: Partials basics
A quick tour of partials and how we can include them by adding our site header.
Lesson 7: Data basics
We’re diving into Eleventy’s data capability and making sections of the site dynamic.
Lesson 8: Creating our first collection
Collections are a crucial part of Eleventy’s capabilities, so it’s time to learn about them.
Lesson 9: Adding remote data
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 10: Home page complete and recap
We’ve achieved a heck of a lot over the last 9 lessons so let’s gather round and recap what we’ve learned.
Lesson 11: Blog feeds, tags and pagination
Time to pick up the pace and dig in to what Eleventy is best known for by creating our front-end feeds.
Lesson 12: Blog post view, directory data and filters
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.
Lesson 13: Recommended content
Most of our blog template is done and dusted. All we have to do now is add a recommended posts section at the end.
Lesson 14: Adding our about page
A nice straightforward page build using some of the knowledge we’ve already learned.
Lesson 15: Adding our work landing page
Another quick and (hopefully) easy lesson to give you a chance to practice your new skills.
Lesson 16: Creating a work item page
Time to add a core page to the site and learn about linked content.
Lesson 17: Meta info, RSS feeds and module recap
Let’s wrap up our HTML-only build of the website and recap on where we’ve got to.
Module 2: Asset Pipeline permalink
Lesson 18: Setting up Gulp
Now that we have an HTML-only site, it’s time to start making it look good, and that starts with an asset pipeline.
Lesson 19: Setting up Sass
First up in our asset pipeline is our Sass (SCSS) setup.
Lesson 20: Setting up fonts
Time to load our fonts from Google Fonts, locally.
Lesson 21: Setting up images
Time to wrap up the asset pipeline with some image optimisations.
Module 3: Front-End Build permalink
Lesson 22: Global CSS and design tokens
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 23: Styling global blocks
The site header, navigation and site footer appear on every page, so let’s get them styled up.
Lesson 24: Styling the skip link
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
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
We’ve got 3 different types of panel on our home page, so let’s style them all up in one lesson.
Lesson 27: Styling the blog
Now it’s time to make our blog feeds and blog posts look exquisite.
Lesson 28: Styling the about page
We’re almost there with this front-end now. Let’s do some quickfire styling of our about page.
Lesson 29: Add a contact page
We’ve got most our front-end now, so let’s see how flexible it is by quickly adding our contact page.
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.
Module 4: Wrapping Up permalink
Lesson 31: Wrapping Up
Here we are at the last lesson. Time to get our new site ready to go live and plan for the future.