Code

The community-driven resource library of CSS Houdini worklets. Learn about CSS Houdini, its APIs, usage, polyfills, and browser status, to take advantage of the Houdini APIs today.

Accessibility is a critical skill for developers doing work at any point in the stack. For front-end tasks, modern CSS provides capabilities we can leverage to make layouts more accessibly inclusive for users of all abilities across any device.

Learn how to use the JAMstack from an expert in this full course for beginners. The JAMstack allows people to create websites that are simpler, faster, and ...

Currently setting up my third site with Eleventy, I’ve run into a few things that proved useful. Here are five of them, including centrally defined layouts, title sorting, and easier hiding of posts.

Documenting everything through the journey of learning web accessibility.

Setting and using data in the static site generator Eleventy

Includes are great. But for actual reusability of code, parameters are always needed. Luckily, nunjucks makes this possible with macros!

Animate.css is a library of ready-to-use, cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and attention-guiding hints.

Tasty CSS-animated Hamburgers

Magic CSS are a set of simple animations to include in your web or app project's

While some SSGs have a standardized way of handling assets, Eleventy does not. That's a good thing! Here are a few possible approaches you can take.

These days, web development and design are all about modularization and components. Template languages have a lot to offer and Eleventy itself has a few tricks up its sleeve.

Highway helps you manage your page transitions.

A collection of bad practices in HTML, copied from real websites.

The what, why, and how of Eleventy Image.

A post by Zach Leatherman (zachleat)

Break out of the mould of your fixed-width container to create visual interest.

How to create filters, shortcodes and plugins in Eleventy.

Stephanie Eckles teaches us how to make a Food Menu with CSS Grid, container queries, CSS functions, aspect-ratio, and more!It was streamed live on Twitch so...

View source anywhere.

Start from a blank project and build up to an Eleventy site that includes a blog collection and is prepared to source content from a headless CMS. You'll also learn how to add Sass as the styling solution, complete with triggering 11ty to re-compile when the Sass changes. These lessons will help explain key 11ty features and concepts to help you make the most of this amazing static site generator. By the last lesson, you'll have learned how to: define custom input and output directories create a layout that accesses front matter variables watch for Sass changes and include CSS in the build proces create an 11ty collection using tags define front matter for an entire collection make and apply a filter to a collection generate pages from an external data source, such as a CMS or API

show me your eleventy websites NOW pic.twitter.com/dDSZiuSXA2— ceora🌺🌸 (@ceeoreo_) June 15, 2021

Code Practice and Mentorship for Everyone. Level up your programming skills with 1,879 exercises across 38 languages, and insightful discussion with our dedicated team of welcoming mentors. Exercism is 100% free forever.

To eleventy and beyond! The incredible build plugin for components, page transitions, and more.

Eleventy is a simpler static site generator.

Create stunning 2D motion graphics and vector animations for any platform in a matter of minutes, whether you’re a beginner or a professional.

Want to get started with Eleventy but feel overwhelmed? Try out this pared-down tutorial