🎓 Frontend Design & Development
@fdnd.nl
The (only) study for Frontend Development in the Netherlands
Website: https://fdnd.nl 🇳🇱
Program: https://programma.fdnd.nl 🇳🇱
Part of the Amsterdam University of Applied Sciences 🎓
Website: https://fdnd.nl 🇳🇱
Program: https://programma.fdnd.nl 🇳🇱
Part of the Amsterdam University of Applied Sciences 🎓
Pinned
@cassiecodes.bsky.social joined us yesterday to talk about the hidden gems in the @gsap-greensock.bsky.social API. There’s so much good stuff in the documentation that you can miss if you don’t know about it. Thanks Cassie! 💚
Reposted by 🎓 Frontend Design & Development
Updated once again. This time with some blog posts added and experimented with CSS carousels, sibling-index(), and scroll state!
May 27, 2025 at 3:30 PM
Updated once again. This time with some blog posts added and experimented with CSS carousels, sibling-index(), and scroll state!
Reposted by 🎓 Frontend Design & Development
And don't forget to take the State of CSS 2025 survey when you're not watching #cssday talks. survey.devographics.com/en-US/survey...
State of CSS 2025
Take the State of CSS survey
survey.devographics.com
June 6, 2025 at 10:20 AM
And don't forget to take the State of CSS 2025 survey when you're not watching #cssday talks. survey.devographics.com/en-US/survey...
We were at CSS Day with a LOT of students, thanks to both @bitsandletters.com and CSS Day for sponsoring them! 🫶
Thank you to @bitsandletters.com, who sponsor this year's #CSSDay not for themselves, but to make additional student tickets available to the event! Here are all student attendees on our conf stage. (Plus some special guests / photo bombers, can you spot them?) /ht @demar.ee
June 6, 2025 at 6:25 PM
We were at CSS Day with a LOT of students, thanks to both @bitsandletters.com and CSS Day for sponsoring them! 🫶
@cassiecodes.bsky.social joined us yesterday to talk about the hidden gems in the @gsap-greensock.bsky.social API. There’s so much good stuff in the documentation that you can miss if you don’t know about it. Thanks Cassie! 💚
March 8, 2025 at 2:46 PM
@cassiecodes.bsky.social joined us yesterday to talk about the hidden gems in the @gsap-greensock.bsky.social API. There’s so much good stuff in the documentation that you can miss if you don’t know about it. Thanks Cassie! 💚
Reposted by 🎓 Frontend Design & Development
February 2, 2025 at 1:42 PM
Reposted by 🎓 Frontend Design & Development
February 9, 2025 at 1:21 AM
Reposted by 🎓 Frontend Design & Development
Just hit the “publish” button on a brand-new blog post! ⭐
This one shares the killer pattern I find myself using over and over with container queries: responding *within* media queries to adapt to the new container size.
Once you start using this trick, you’ll see opportunities for it all over. 😄
This one shares the killer pattern I find myself using over and over with container queries: responding *within* media queries to adapt to the new container size.
Once you start using this trick, you’ll see opportunities for it all over. 😄
Container Queries Unleashed • Josh W. Comeau
Container queries expand the universe of designs that can be implemented, giving us whole new superpowers. Now that container queries are broadly available, I think it’s time we start exploring this p...
www.joshwcomeau.com
January 27, 2025 at 4:18 PM
Just hit the “publish” button on a brand-new blog post! ⭐
This one shares the killer pattern I find myself using over and over with container queries: responding *within* media queries to adapt to the new container size.
Once you start using this trick, you’ll see opportunities for it all over. 😄
This one shares the killer pattern I find myself using over and over with container queries: responding *within* media queries to adapt to the new container size.
Once you start using this trick, you’ll see opportunities for it all over. 😄
Reposted by 🎓 Frontend Design & Development
Anchor positioning is awesome... until you run into a situation where it just doesn't work. Here's a checklist for troubleshooting, and a recommendation for how to avoid issues in the first place.
Here's why your anchor positioning isn't working
How to find an anchor element
www.oddbird.net
January 29, 2025 at 5:17 PM
Anchor positioning is awesome... until you run into a situation where it just doesn't work. Here's a checklist for troubleshooting, and a recommendation for how to avoid issues in the first place.
Reposted by 🎓 Frontend Design & Development
CSSWG is talking about
#CSS `superellipse`
for SQUIRCLES
(and more like notches, cutouts and bevels)
try it
noamr.github.io/squircle-tes...
awesome work @nomster.bsky.social and Simon Fraser!
#CSS `superellipse`
for SQUIRCLES
(and more like notches, cutouts and bevels)
try it
noamr.github.io/squircle-tes...
awesome work @nomster.bsky.social and Simon Fraser!
January 29, 2025 at 5:30 PM
CSSWG is talking about
#CSS `superellipse`
for SQUIRCLES
(and more like notches, cutouts and bevels)
try it
noamr.github.io/squircle-tes...
awesome work @nomster.bsky.social and Simon Fraser!
#CSS `superellipse`
for SQUIRCLES
(and more like notches, cutouts and bevels)
try it
noamr.github.io/squircle-tes...
awesome work @nomster.bsky.social and Simon Fraser!
Reposted by 🎓 Frontend Design & Development
#CSS scroll-state() container queries
in Chrome 133!
@container scroll-state(stuck: top) {
…
}
Read all about snapped, stuck and scrollable in this post:
developer.chrome.com/blog/css-scr...
↪ nerdy.dev/scroll-state...
in Chrome 133!
@container scroll-state(stuck: top) {
…
}
Read all about snapped, stuck and scrollable in this post:
developer.chrome.com/blog/css-scr...
↪ nerdy.dev/scroll-state...
January 15, 2025 at 8:21 PM
#CSS scroll-state() container queries
in Chrome 133!
@container scroll-state(stuck: top) {
…
}
Read all about snapped, stuck and scrollable in this post:
developer.chrome.com/blog/css-scr...
↪ nerdy.dev/scroll-state...
in Chrome 133!
@container scroll-state(stuck: top) {
…
}
Read all about snapped, stuck and scrollable in this post:
developer.chrome.com/blog/css-scr...
↪ nerdy.dev/scroll-state...
Next week Dave Bitter, front end consultant at iO, will talk to our students about the rise of AI-Powered Voice Interfaces. Dave is a google dev expert, writes a ton of blogs and speaks at a lot of conferences. We can’t wait!
January 9, 2025 at 2:24 PM
Next week Dave Bitter, front end consultant at iO, will talk to our students about the rise of AI-Powered Voice Interfaces. Dave is a google dev expert, writes a ton of blogs and speaks at a lot of conferences. We can’t wait!
Reposted by 🎓 Frontend Design & Development
I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 Declarations 🎇 frontendmasters.com/blog/pure-cs...
This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns.
#CSS #pattern #gradient #halftone
This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns.
#CSS #pattern #gradient #halftone
Pure CSS Halftone Effect in 3 Declarations – Frontend Masters Boost
A halftone is a pattern of dots that vary in size and spacing. It's a printing technique that you normally don't see, but blown up in size, is a cool aesthetic. This is a deep dive on how it can be do...
frontendmasters.com
December 4, 2024 at 11:06 AM
I have a new article out: 🎇 Pure CSS Halftone Effect in Only 3 Declarations 🎇 frontendmasters.com/blog/pure-cs...
This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns.
#CSS #pattern #gradient #halftone
This goes through the how behind the 3 declarations and then explores a lot of variations that help us produce 🌟 cooler, more interesting 🌟 patterns.
#CSS #pattern #gradient #halftone
Reposted by 🎓 Frontend Design & Development
CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜
li {
animation: bright;
animation-range: calc(50% - 1lh) calc(50% + 1lh);
animation-timeline: view();
scroll-snap-align: center;
}
@keyframes bright { 50% { opacity: 1; }}
line-height units are a gift 🎁
li {
animation: bright;
animation-range: calc(50% - 1lh) calc(50% + 1lh);
animation-timeline: view();
scroll-snap-align: center;
}
@keyframes bright { 50% { opacity: 1; }}
line-height units are a gift 🎁
December 3, 2024 at 8:15 AM
CSS position: sticky, scroll-snap + progressively enhanced scroll animation 📜
li {
animation: bright;
animation-range: calc(50% - 1lh) calc(50% + 1lh);
animation-timeline: view();
scroll-snap-align: center;
}
@keyframes bright { 50% { opacity: 1; }}
line-height units are a gift 🎁
li {
animation: bright;
animation-range: calc(50% - 1lh) calc(50% + 1lh);
animation-timeline: view();
scroll-snap-align: center;
}
@keyframes bright { 50% { opacity: 1; }}
line-height units are a gift 🎁
Reposted by 🎓 Frontend Design & Development
"babe, new craft of ui jus' dropped"
babe: 😴
what happens when you stay up to publish a post before Thanksgiving 💀
👉 craftofui.substack.com/p/scrolling-a-page-out-of-the-playbook
babe: 😴
what happens when you stay up to publish a post before Thanksgiving 💀
👉 craftofui.substack.com/p/scrolling-a-page-out-of-the-playbook
November 28, 2024 at 8:06 AM
"babe, new craft of ui jus' dropped"
babe: 😴
what happens when you stay up to publish a post before Thanksgiving 💀
👉 craftofui.substack.com/p/scrolling-a-page-out-of-the-playbook
babe: 😴
what happens when you stay up to publish a post before Thanksgiving 💀
👉 craftofui.substack.com/p/scrolling-a-page-out-of-the-playbook
Reposted by 🎓 Frontend Design & Development
I posted this earlier this year when I turned 12 on @codepen.io, but here it is again for everyone new here: my personal faves out of the demos I did over these years.
#CSS #3D #SVG
#CSS #3D #SVG
November 7, 2024 at 11:21 AM
I posted this earlier this year when I turned 12 on @codepen.io, but here it is again for everyone new here: my personal faves out of the demos I did over these years.
#CSS #3D #SVG
#CSS #3D #SVG
Reposted by 🎓 Frontend Design & Development
We implemented a new value for `background-clip` called `border-area`. It lets you use CSS fill a border with a background image or gradient.
This article explains how it works, and shows up the possibilities in 7 demos.
#css #webdesign #webdevelopment #graphicdesign
webkit.org/blog/16214/b...
This article explains how it works, and shows up the possibilities in 7 demos.
#css #webdesign #webdevelopment #graphicdesign
webkit.org/blog/16214/b...
Make creative borders with background-clip border-area
How’d you like to use CSS to easily create a border from an image or gradient?
webkit.org
November 20, 2024 at 4:03 PM
We implemented a new value for `background-clip` called `border-area`. It lets you use CSS fill a border with a background image or gradient.
This article explains how it works, and shows up the possibilities in 7 demos.
#css #webdesign #webdevelopment #graphicdesign
webkit.org/blog/16214/b...
This article explains how it works, and shows up the possibilities in 7 demos.
#css #webdesign #webdevelopment #graphicdesign
webkit.org/blog/16214/b...
Reposted by 🎓 Frontend Design & Development
As of Chrome 131 you have more options to style `
` and ``.
`.
You can now use of the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses.
developer.chrome.com/blog/styling...
November 20, 2024 at 4:42 PM
As of Chrome 131 you have more options to style `
` and ``.
`.
You can now use of the `display` property on these elements, and also use a `::details-content` pseudo-element to style the part that expands and collapses.
developer.chrome.com/blog/styling...
Reposted by 🎓 Frontend Design & Development
🔥 CSS Tip:
Use CSS :has() and :is() to create layouts based on contents.
For my slides, I cover several common layouts - text only, text + image, two images.
Then I just have to add the contents to the slide and the proper layout is applied.
Use CSS :has() and :is() to create layouts based on contents.
For my slides, I cover several common layouts - text only, text + image, two images.
Then I just have to add the contents to the slide and the proper layout is applied.
November 15, 2024 at 7:29 PM
🔥 CSS Tip:
Use CSS :has() and :is() to create layouts based on contents.
For my slides, I cover several common layouts - text only, text + image, two images.
Then I just have to add the contents to the slide and the proper layout is applied.
Use CSS :has() and :is() to create layouts based on contents.
For my slides, I cover several common layouts - text only, text + image, two images.
Then I just have to add the contents to the slide and the proper layout is applied.
Reposted by 🎓 Frontend Design & Development
a few tricks to this CSS-only styled range slider
using a scroll animation on the underlying [type=range] to grab the value in CSS is only part of it 🤙
this video reveals one trick where we translate the track inside a clipped container
learn about it in this week's "Craft of UI" 👇
using a scroll animation on the underlying [type=range] to grab the value in CSS is only part of it 🤙
this video reveals one trick where we translate the track inside a clipped container
learn about it in this week's "Craft of UI" 👇
November 15, 2024 at 7:55 PM
a few tricks to this CSS-only styled range slider
using a scroll animation on the underlying [type=range] to grab the value in CSS is only part of it 🤙
this video reveals one trick where we translate the track inside a clipped container
learn about it in this week's "Craft of UI" 👇
using a scroll animation on the underlying [type=range] to grab the value in CSS is only part of it 🤙
this video reveals one trick where we translate the track inside a clipped container
learn about it in this week's "Craft of UI" 👇
Reposted by 🎓 Frontend Design & Development
One of my favourite things in the whole world is creating interactive explanations for things.
It’s so cool that it somehow became my job 😄
It’s so cool that it somehow became my job 😄
Discovered this interactive guide to CSS Flexbox by @joshwcomeau.com today
So much better than looking up the boring docs. 😅
www.joshwcomeau.com/css/interact...
So much better than looking up the boring docs. 😅
www.joshwcomeau.com/css/interact...
An Interactive Guide to Flexbox in CSS • Josh W. Comeau
When we truly learn the secrets of the Flexbox layout mode, we can build absolutely incredible things. Fluid layouts that stretch and shrink without arbitrary breakpoints. In this action-packed intera...
www.joshwcomeau.com
November 14, 2024 at 4:00 PM
One of my favourite things in the whole world is creating interactive explanations for things.
It’s so cool that it somehow became my job 😄
It’s so cool that it somehow became my job 😄
Reposted by 🎓 Frontend Design & Development
Every ~3 weeks we invite an expert to talk to our students about what it’s really like to work as a web developer, next week @emielvanbetsbrugge.bsky.social is talking about how projects work from pitch to production.
We can’t wait!
We’re always looking for front end speakers, btw, reach out! 🫶
We can’t wait!
We’re always looking for front end speakers, btw, reach out! 🫶
November 13, 2024 at 5:52 PM
Every ~3 weeks we invite an expert to talk to our students about what it’s really like to work as a web developer, next week @emielvanbetsbrugge.bsky.social is talking about how projects work from pitch to production.
We can’t wait!
We’re always looking for front end speakers, btw, reach out! 🫶
We can’t wait!
We’re always looking for front end speakers, btw, reach out! 🫶
For our open day one of our teachers, Sanne 't Hooft (CSS magician 🪄 sinds1971.nl), created this lovely explainer of frontend development and the focus points of our study 🤩 #frontenddevelopment #creativedevelopment #webdevelopment
November 7, 2024 at 1:19 PM
For our open day one of our teachers, Sanne 't Hooft (CSS magician 🪄 sinds1971.nl), created this lovely explainer of frontend development and the focus points of our study 🤩 #frontenddevelopment #creativedevelopment #webdevelopment
Reposted by 🎓 Frontend Design & Development
This article by @ericwbailey.website on @piccalil.li is incredibly useful.
It’s exactly how I prefer CSS articles to be written: starting with a problem, including clear illustrations, and offers a practical solution.
Highly recommended 💯
piccalil.li/blog/making-...
It’s exactly how I prefer CSS articles to be written: starting with a problem, including clear illustrations, and offers a practical solution.
Highly recommended 💯
piccalil.li/blog/making-...
Making content-aware components using CSS :has(), grid, and quantity queries
Eric Bailey teaches us how to make a hyper-resilient component that responds not only to the container, but other languages too.
piccalil.li
November 6, 2024 at 6:44 AM
This article by @ericwbailey.website on @piccalil.li is incredibly useful.
It’s exactly how I prefer CSS articles to be written: starting with a problem, including clear illustrations, and offers a practical solution.
Highly recommended 💯
piccalil.li/blog/making-...
It’s exactly how I prefer CSS articles to be written: starting with a problem, including clear illustrations, and offers a practical solution.
Highly recommended 💯
piccalil.li/blog/making-...
Reposted by 🎓 Frontend Design & Development
