Code

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

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