CSS has a feature called scroll snapping. A lot of the demos and examples, rightfully so, focus around things that benefit highly from it. For instance, an image slider, carousel, or grid of things that just beg to be aligned after scrolling. But you don’t have to be in such a strict and rigid situation […]
If you’re an active Frontend Masters member, under the Apps section of your account you can join our Discord community to chat with fellow developers. There are often great conversations there. Here’s one about choosing a path to focus on. Should I go deeper into front end, or expand to learning full stack? xSOu!3nder Hey […]
In a previous article, we created flower-like shapes using modern CSS (mask, trigonometric functions, etc). This article is a follow-up where we will create a similar shape and also introduce some fancy animations. Here is a demo of what we are building. Hover the image to see the animation Cool right? If you check the […]
Stefan Judis covered this recently, and like Stefan, I first heard of the safe keyword in CSS from Rachel Andrews at an AEA conference years ago. It’s used in addition to other alignment keywords in layout like this for example: The extra value safe here is essentially saying “don’t let the alignment force a situation […]
Why should you spend the time making your web apps accessible? Not only are there legal and business reasons, but the biggest reason is it’s a civil right – we want *everyone* to be able to access our websites and web apps! “An inaccessible website can exclude people just as much as steps at an entrance to a physical location.” ~ADA.gov […]
If you find yourself removing a border from an element that has a border and are tempted to use border: 0 , border: none, or outline: none, I’d urge you to stop for a moment and reconsider. It’s like the old G.K. Chesterton saying about fences: Do not remove a fence until you know why […]
A Frontend Masters personal account is $390/year. It’s an investment. It can be an investment in yourself if you’re looking for work, but if you’re already working, it can be an investment from that company that is good for everyone. A smart company with teams of developers should take advantage of buying a team account, […]
I admit I went pretty far in my web development career without understanding that Streamed HTML is a thing. And while I’m admitting things, I’m still not 100% sure when it’s an ideal solution and how best to take advantage of it. But knowing is half the battle sometimes, so let me get into some […]
We left off in a decent place, but there was some missing functionality that we wanted all along. Editing To-Dos The interaction we decided on for editing is to double-click the todo. This will turn the to-do, in place, into an editable input. Then you hit enter (e.g. submit) or leave the input (e.g. blur) […]
Safari 17.4 dropped an interesting an unexpected feature, a native UI toggle switch control! It’s so new it’s not even in the HTML spec yet. While that might be a blocker for your project, you can use it today as a progressive enhancement on top of the standard checkbox input.
Frontend Masters donates to open source projects through thanks.dev and Open Collective, as well as donates to non-profits like The Last Mile, Annie Canons, and Vets Who Code.
