Learning

Pete Barr teaches us how he creates beautiful animations with SVG and GSAP. We pick up a few techniques like text splitting and infinite scroll.

Zach takes a look at some fundamental HTML+CSS usage for fluid, responsive images. Most of it, I'd say, is what you'd expect, but things get weird when srcset

Animated SVGs add a touch of interactive whimsy and polish to our websites. In this episode, Cassie Evans will teach us how to use Greensock to create fun, engaging experiences!

By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids. In this article, Rachel Andrew is going to demonstrate an approach to this kind of editorial design, which builds on a few techniques. In addition to this being a nice way to name sections of your layout, this technique exposes a whole bunch of interesting things about Grid Layout which you may find useful in creating your own layout patterns.

What can you do with a single CSS keyframe? A metric ton. 0:00 - 50% keyframes are magic 0:49 - Animation is easier than you think 2:17 - Why at 50%? 6:51 - Trick 1 Shake 12:00 - Trick 2 Pulse 23:25 - Trick 3 Glitch 27:55 - Trick 4 Flip 32:45 - Trick 5 Fill 41:20 - Trick 6 Sheen 44:25 - Trick 7 Emphasize 46:50 - Trick 8 Censor 48:35 - Trick 900 Tony Hawk Links Bad at CSS - https://twitter.com/badatcss Adam Twitter - https://twitter.com/argyleink David Twitter - https://twitter.com/_davideast Codepen Demo: https://codepen.io/davideast/pen/MWxvzjm Open Props: https://open-props.style

The past few years have brought us a tonne of new CSS features to help solve common layout challenges. In this session, we’ll delve into some real-world use cases for new features like container queries and the :has() pseudo class.

The @view-transition at-rule has two descriptions. One is the commonly used navigation descriptor. The second is types, the lesser-known of the two, and one that probably envies how much attention navigation gets. But read on to learn why we need types and how it opens up new possibilities for custom view transitions when navigating between pages.

With the new CSS `linear()` easing function on the horizon, the possibilities of what we can do to create natural-feeling animations and transitions in the future are greatly expanded. Jhey Tompkins looks at the current state of CSS easing in this article and demonstrates what we can expect from `linear()`, including handy tools to get your hands on it today.

A modern look at responsive web design.

I'm an Award-winning Designer with 14+ years of experience in GUI, Interaction, Animation, and 3D. I like discovering new tools and techniques to make my design life easier and lazier.

Visual guide to CSS selectors, including pseudo-classes (:nth-child, :hover,...), functional pseudo-classes (:not, :is,...) and pseudo-elements.

Simple CSS scrollbar editor.

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

I recently updated the grid system on my site from Flexbox to CSS Grid. Today, I wanted to share how to use it, how it works under-the-hood, and why I made the switch. Let’s dig in! A responsive grid system My websites tend to be pretty boring. Years ago, I decided to prioritize simple readability over flashy features, and that seems to resonate with a lot of people. But I do occasionally need multi-column layouts, like the list of projects on the Lean Web Club homepage.

Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany. Besides design practice he teaches Interface Prototyping at the Muthesius Academy of Fine Arts and Design, Kiel.

A series examining modern CSS solutions to problems Stephanie Eckles (@5t3ph), a seasoned frontend developer, has been solving for 15+ years.

A blog post about modern CSS every day for 100 days.

Learn, practice and get world-class mentoring in over 50 languages. 100% free.

Commit messages matter. Here's how to write them well.

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.

Improve how you architect webapps Patterns.dev is free book on design patterns and component patterns for building powerful web apps with...

Gymnasium offers free online courses on web development, design, user experience, and content creation.

A course exploring all aspects of responsive design. Learn how to make sites that look great and work well for everyone.

The Odin Project empowers aspiring web developers to learn together for free

An introduction to the intellectual enterprises of computer science and the art of programming.

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 ...