All Videos
-
How Anchors work in Modern CSS
Position elements relative to each other using just HTML and CSS, no JavaScript required. In this video, I break down the CSS Anchor Positioning API, show how it plays nicely with the Popover API, and cover graceful fallbacks so your UI stays usable even when space runs out.
-
Live Code: Hotel booking confirmation page (Astro Basics)
For 20% off FrontendMentor, use my coupon code: https://www.frontendmentor.io/?via=chrispennington Project: https://www.frontendmentor.io/challenges/hotel-booking-confirmation-page Check out my Astro course: https://learnastro.dev 🌐 Connect With Me 🌐 - Website: https://codinginpublic.dev - Blo
-
How to use popover API
Stop reaching for JavaScript every time you need a popover. In this video, I'll show you how to build accessible, animated popovers using just HTML and CSS, including a bunch of brand new CSS features you need to know about. - The basics of the `popover` attribute, `popovertarget`, and `popovertar
-
What Astro’s new compiler means for you
Astro 7 just dropped only a few months after Astro 6, and it's all because of Vite 8. In this video I break down the massive build speed improvements from the new Rust-based Rolldown bundler, plus one major gotcha around whitespace handling that will bite you when upgrading. ## What's covered - Wh
-
Never lose code again
A visual tutorial to explain GIT to absolute beginners :)
-
Lofi stream (designing Advent of Astro project)
I am in the process of building out a 25-day challenge for people to test their skills with Astro. I'm calling it Advent of Astro. Last time, I planned out the content of the 25 modules, which encourages someone to build a blog in 25 different challenges. Today, I'm designing and hopefully coding
-
Live CSS: Testing my CSS skills
https://www.webdevdaily.io/css-daily/2026-05-26
-
Lofi stream (planning Advent of Astro)
I am in the process of building out a 25-day challenge for people to test their skills with Astro. I'm calling it Advent of Astro. Come watch me plan the course curriculum in this lo-fi stream.
-
This took me way too long to solve 🤦♂️
You'd think adding a 1px border to a grid of cards would be simple, until you get double borders, broken edges when the card count changes, and layout shifts. Here's how I solved it with box-shadow and a 1px gap, no hacks required. - The double border problem when adding border to every card - The
-
Protect yourself from npm dependency attacks
Obviously, adding a minimum age isn't going to guarantee you're not impacted, but it's a baseline starting point for reducing the impact of new package versions.
-
Live Code: Dark Mode Landing Page (Astro Basics)
For 20% off FrontendMentor, use my coupon code: https://www.frontendmentor.io/?via=chrispennington Project: https://www.frontendmentor.io/challenges/fylo-dark-theme-landing-page-5ca5f2d21e82137ec91a50fd Github: Check out my Astro course: https://learnastro.dev 🌐 Connect With Me 🌐 - Website: h
-
Coding inspiration just dropped
Check it out at https://sillysoftware.club My dumb app: https://clawdagotchi.com/
-
Live Code: Settings page (UI Design Daily)
Project: https://www.uidesigndaily.com/posts/figma-notifications-settings-ceckbox-day-1389 Github: Check out my Astro course: https://learnastro.dev 🌐 Connect With Me 🌐 - Website: https://codinginpublic.dev - Blog: https://chrispennington.blog - Twitter: https://twitter.com/cpenned - Patreon:
-
The channel is changing
I've had people tell me my voice sounds like a meditation app. Time to give in to the vibes.
-
Astro's new Fonts API
Get my course for $20 off at https://learnastro.dev Use coupon: YOUTUBE