Frontend Masters
Your path to senior developer and beyond! 🚀 In-depth frontend & fullstack courses.
For support, email: support@frontendmasters.com
7 day free trial frontendmasters.com/trial/
- Container Query for “is there enough space outside this element?” A container query can contain viewport units, meaning you can compare the window vs the element and make choices.
- Creating Flower Shapes using clip-path: shape() Use the `arc` command within the `shape()` function we can draw a line that follows a circle from one point to the next, controlling the direction.
- shape(): A New Powerful Drawing Syntax in CSS Don't underestimate `shape()` — it's the CSS version of SVG that we absolutely needed.
- Using Container Query Units Relative to an Outer Container Container units (e.g. cqi) are only able to reference the closest container. But if you register a custom property and set that higher up, you can get your hands on other containers units.
- Seeking an Answer: Why can’t HTML alone do includes? Is there a perfectly clear and reasonable answer? Or could we get this someday?
- Reposted by Frontend Masters[Not loaded yet]
- Complete Go for Professional Developers by @melkey.bsky.social is out! frontendmasters.com/courses/comp... Learn Go by building a real-world backend app: 🖥️ HTTP server from scratch 🐘 Postgres with Docker 🔐 Implement secure auth & JWT 🛠️ Test your APIs 🚀 Best practices for scalability
- React Internals: Which useEffect runs first? It's not particularly obvious, but a child's useEffect will run before a parent's will. Let's look at why.
- Am I a Sadistic Developer? Are You? "...nobody thinks they’re writing bad code while they’re doing it. That’s the trap."
- Newfangled Browser Alternatives Most folks use one of the big browsers that we've all heard of. But there are more and more niche browsers built upon those big open source engines that differentiate themselves in interesting ways.
- Reposted by Frontend Masters[Not loaded yet]
- Reposted by Frontend Masters[Not loaded yet]
- Lessons Learned from Recreating a Styled Dialog Sometimes pretty simple HTML elements have a lot of things to consider and take care of, from interactivity, styling, accessibility, and more.
- Using currentColor in 2025 Do you need it? Not really, custom properties are probably a better bet. But it still has a bit of utility and it's fun to think about.
- Custom progress element using the attr() function Now that we're starting to be able to apply types (like `number`) to values of attributes we pull of HTML elements in CSS, doing interesting things with is easier.
- ▲ Next.js Fundamentals v4 by @scotups is out now! 👉 frontendmasters.com/courses/next... Build a real-world app & level up your Next.js skills: 🔐 Auth with Server Actions 📊 Dynamic dashboards 🧩 API routes + Middleware ⚡ Blazing-fast caching 🚀 Deploy to Vercel like a pro
- CSS Bursts with Conic Gradients Using hard color stops with `repeating-conic-gradient()` and the double-stop syntax, we can pretty easily create a burst background. Then get fancier.
- Reanimating the CSS Day Buttons These buttons animate from a square to an arrow, and we look at three different ways to do it, each with their own upsides.
- Expanding CSS Shadow Effects Shadows don't have to be used for... shadows. Inset shadows can layer over backgrounds and because they are animatable, it's just another tool for drawing what we want to the page.
- Reposted by Frontend Masters[Not loaded yet]
- Layered Text Headers Being able to control the `paint-order` in CSS means you can push the stroke behind the fill, fixing awkward issues with ruining letterform readability.
- A Deep Dive into the Inline Background Overlap Problem `box-decoration-break: clone;` in CSS can help us make for interesting backgrounds across lines of text that break, but when opacity gets involved, things can get complicated.
- Chilled Out Text Underlines Blue links with underlines is a good default style for links in body text, but it's a bit intense. Maybe we can chill it out a bit and be a bit more flexible.
- Reposted by Frontend Masters[Not loaded yet]
- The Moment You Need a Database There are quite a few tools to avoid *needing* a database these days, static site generators chief among them. So then what are the things that push toward or require a database?
- Movies as Images Safari made .mp4 file work in img tags in HTML back in 2017, but no other browser followed suite. Should they have?
- Custom Property Fallbacks This post starts with quite a tricky little quiz about what a color value resolves to be.
- Examples of Why The Web Needs Anchored Popovers Seriously almost every "menu" and "tooltip" could and should use this when it's ready.
- How to Use attr() in CSS for Columns, Colors, and Font-Size You can pluck off values from HTML attributes that actually have types now, so if you put data-font-size="2.2rem" on an element you could actually, ya know, honor that.
- A Color Input That Also Shows the Value For who-knows-what reason color inputs only show a color swatch, not a string representation of the color. Let's see if we can fix that.
- Rainbow Selection in CSS ::selection is cool, but scoping it to selectors like :nth-child(5n+2) is even more fun, especially on a love filled ay like Valentine's Day.
- Reposted by Frontend Masters[Not loaded yet]
- 🎉 NEW COURSE: My Dev Setup is Better Than Yours from ThePrimeagen! frontendmasters.com/courses/deve... Learn Prime's exact workflow for maximum speed ⚡️⚡️⚡️ – Simple Bash over complex tooling – Master core Unix commands – Tmux for seamless navigation – Vim motions
- 25+ Days of Expert-Led Workshops Coming in 2025 All sorts of great stuff coming up for all our members. Intermediate React, Complete Go, CSS Basics, TypeScript Monorepos, and so much more.
- Optimizing Images for Web Performance There is some low-hanging web performance fruit with images. Serving them in the right format, from a CDN, with the right HTML can be a big perf win.
- Three Approaches to the “&” (ampersand) Selector in CSS The & is a powerful addition to CSS, allowing us to craft selectors without repetition and helping organization and understanding.
- 2025 Workshops so far!
- Notes on the Code Editors with AI Landscape There are A LOT of options these days for getting AI help right in your code editor. What seemed to begin with plugins has morphed into a lot of VS Code forks.
- Mapping with Leaflet Leaflet.js is a free open-source mapping library. We'll look at how to use it to create a basic map with location points of cats up for adoption.
- Full-Bleed Layout with Modern CSS Just four declarations in CSS can handle this nicely, while avoiding the vertical scrollbar issue.
- Creating an Angled Slider We'll get into layered content, clip-path, and the :has() selector to build a responsive slider with live videos. We can do it by hand, but a few SCSS loops will help make it more manageable.
- Simplify Lazy Loading With Intersection Observer’s ScrollMargin This helps load in data just *before* a user gets to it, and it works with non-root containers and horizontal scrolling.
- Reposted by Frontend Masters[Not loaded yet]
- Reposted by Frontend MastersThis week, I had a career highlight in having been able to join the ranks as a @frontendmasters.com instructor. As a platform that I was a longtime subscriber to, it's amazing to have a course with them now! The course is Professional CSS: Build a website from scratch, and you can find it here:
- Reposted by Frontend Masters[Not loaded yet]
- 🎉 NEW COURSE: Pro CSS from @kevinpowell.co! Build a complete website from Figma to production: - Modern responsive layouts - CSS animations & transitions - Production-ready deployment Plus: Get Kevin's exact workflow for writing scalable CSS 👊 frontendmasters.com/courses/pro-...
- CSS Wishlist for 2025 Hey we might as well spill out all these wishes as the CSS feature train has been rolling and we oughta get while the getting is good.
- Reposted by Frontend Masters[Not loaded yet]
- Sharing a Variable Across HTML, CSS, and JavaScript Set a variable in Pug, then create an inline script which sets that variable for using in JavaScript and use setProperty to pass it to CSS.
- @starbuxman.joshlong.com hey Josh! Any interest in teaching a Java Spring Boot workshop with us? Building on the legendary @angiejones.tech's course (she recommended you) frontendmasters.com/courses/java/
- Reposted by Frontend Masters[Not loaded yet]
- Relatively New Things You Should Know about HTML Heading Into 2025 Accordion details, toggle switches, styleable selects, responsive video, and more!
- Containers & Context If you've applied `container` to an element, know that, for the next little while, that makes a new "formatting context" in Safari, and does not in Chrome or Firefox.
- Baseline Data Choices Why can't we see if a feature is polyfillable or able to be progressively enhanced in the baseline data? There are reasons.
- Scroll-Driven & Fixed It's quite fun to have an element react to another element scrolling in an unexpected way!
- Introducing TanStack Start TanStack Start enhances the TanStack Router by adding a server layer that improves performance through server-side rendering (SSR) and isomorphic loaders.
- React 19 and Web Component Examples "... props that match a property on the Custom Element instance will be assigned as properties, otherwise they will be assigned as attributes."
