Code

Websites don't have to be so cookie cutter. Make a website that feels uniquely you in under five minutes.

A prototype of the long-awaited CSS container queries has landed in Chrome Canary and is available for experimentation. Let’s look at what problem is being solved, learn how container queries work, and see how they compare with and complement existing CSS features for layout.

Support tables for HTML and CSS in emails

Create text that scales with the window size, so that your headings look great on any screen.

My simple portfolio blog built using 11th and tailwindcss. - kailoon/kailoon.com

Design that code.

SVG isn't just useful for illustrative animation. It's hella handy for UI too.

Web Dev Simplified is all about teaching web development skills and techniques in an efficient and practical manner. If you are just getting started in web development Web Dev Simplified has all the tools you need to learn the newest and most popular technologies to convert you from a no stack to full stack developer. Web Dev Simplified also deep dives into advanced topics using the latest best practices for you seasoned web developers. I started Web Dev Simplified in order to share my passion for web development, and do what I truly love. Teach and inspire new web developers. I have been in love with full stack web development since 2015 when I did my first internship as a web developer. Ever since then I have pursued my passion, learning everything there is to know about web development. Over the years I have taught many colleagues and friends the joys of web development, and cannot wait to teach you. Thank you for watching!

The wonder of local overrides

Images have also been a key part of the web. They communicate ideas instantly, but they are also a lot heavier than text to load. This means that it’s essential to get loading and displaying them right, if you want to give your users a fantastic first impression. An excerpt from [Addy's new book](https://www.smashingmagazine.com/2021/04/image-optimization-pre-release/) (also, check a [free PDF preview](http://provide.smashingmagazine.com/eBooks/image-optimization-sample-chapter.pdf)).

From my Twitch livestream on April 29, 2021 over on Twitch.TV/5t3phDev Topics: 03:04 - Begin developing the 11ty site 07:44 - Add a layout 13:06 - How Eleventy creates pages 15:33 - Adding CSS to an Eleventy project 19:09 - Enabling Eleventy to watch CSS files for changes 20:21 - Creating content without any page output 22:08 - Create a collection 24:07 - Create a data directory file to prevent page output and define a collection using tags 26:50 - How to mix templating languages in Eleventy 27:52 - Output content from a collection in a Nunjucks for loop 32:31 - Ways to define for ordering ...

...

Learn about css grid in a quick, easy, and interactive way!

Making the case for embracing CSS's cascade to create more adaptable and easier to use UI components

CSS tips and tricks you will not see in most of tutorials.

An extensive CSS reference with all the important CSS properties and info to learn CSS from the basics.

The way we style text hasn’t changed much over the years. There have been numerous advancements to help make things more flexible, like layouts, but in

Every element I use for the basic structure of a HTML document, with explanations why.

Plug11ty is a community-run repository for 11ty plugins. It's powered using NetlifyCMS Open Authoring. If you want to submit a plugin, click the Add Plugin button at the top

Clamp() linear intepolation based on viewport width builder by pprg1996 using react, react-dom, react-scripts, styled-components

For writing maintainable and scalable HTML documents

A demonstration and visualiser of fluid typography and space, using Utopia.

A foundational overview of how to build a settings component of sliders and checkboxes.

Personal Website built with Eleventy. Contribute to maxboeck/mxb development by creating an account on GitHub.

html5animationtogif.com is online tool to convert html5 animation to gif

A quick introduction to ARIA's properties.

Use lite-youtube-embed in Eleventy for faster and more privacy-minded video