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 knowledgestep-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!

Check out what you’ll build

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

Module 2: Asset Pipeline permalink

Module 3: Front-End Build permalink

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.

Hello, I’m Andy and I’ll help you to level up your front-end development skills.

I’m a designer and front-end developer who has worked in the design and web industries for over 15 years, and in that time, I have worked with some of the largest organisations in the world, like Google, Harley-Davidson, BSkyB, Unilever, The Natural History Museum, Oracle, Capita, Vice Media and the NHS.

On Piccalilli, I share my knowledge and experience to make you a better front-end developer.

I’m the founder of Set Studio, a creative agency that specialises in building stunning websites that work for everyone. Check out what we're all about.