Code

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

Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually build web layouts with our interactive CSS Grid Generator.

Let's take the mystery out of sizing type. Learn recommended units for `font-size`, how to generate ratio-based fluid sizes with Sass, and how to handle overflow.

We're excited to announce Astro as a new way to build static websites and deliver lightning-fast performance without sacrificing a modern developer experience.

HTML processor powered by plugins part of the @unifiedjs collective - rehypejs/rehype

This post is the third installment of our five-part series on building GitHub’s new homepage: How our globe is built How we collect and use the data behind the globe How we made the page

CSS ~ Cutting edge Cascading Style Sheets. Experiments in CSS

A game for learning CSS grid layout

As someone who loves and works with CSS on an almost daily basis, DevTools are something near and dear to my heart.

Today we will look at fit-content and fit-content(), which are special values for width and grid definitions. It’s ... complicated — not as a concept, but in its practical application....

An evergreen CSS course and reference to level up your web styling expertise.

Bernard Nijenhuis • Front-end Developer • Katwijk, The Netherlands • Father of 3 kids • Husband to 1 wife • Owner of 2 cats