Simon's Larabits
Here, you'll find Simon Swiss's personal collection of Larabits. If you're unfamiliar, Larabits are short, isolated lessons that focus on a single concept or technique. While a typical series may take hours to work your way through, Larabits are instead for when you have five or ten minutes to pick up a small bit of knowledge.
Please keep in mind that each of these lessons is self-contained and may be viewed in any order. Happy learning!
Progress
Series Info
- Episodes
- 11
- Run Time
- 2h 43m
- Difficulty
- Intermediate
- Last Updated
- Apr 25, 2025
- Version
- Latest
Series Episodes
- Episodes (11)
Simon's 7 Go-To Design Inspiration Resources
In this video, I'll walk you through the seven design inspiration resources that I rely on most frequently — whether I'm stuck on a layout, exploring new visual styles, or just browsing for fun. From Pinterest to curated landing page galleries and community gems, these are my go-to creative starting points.Logo Marquees?
Learn how to build a smooth, endlessly looping logo marquee using only CSS - complete with scroll animations, edge fades, hover pauses, and grayscale-to-color transitions.How to Construct a CSS-Only Carousel
Displaying multiple items in a carousel typically involves a lot of JavaScript. But what if I told you that you can build a functional carousel with CSS only? New CSS features are landing in all major browsers faster than ever before, and now is a great time to look at some of the key ingredients of a CSS-only carousel, such as the '::scroll-button' and '::scroll-marker' pseudo elements. Before you know it, they'll be supported in all major browsers!Can I Win This CSS Battle?
CSS Battle challenges are always fun, and a great way to practice creative thinking with CSS. It's particularly helpful to sharpen your Flex and Grid layout skills, to avoid resorting to some absolutely positioned hacks. Let's walk through this challenge together!Turn Any HTML Element Into a Popover
Turn any HTML element into a popover with a single HTML attribute. You'll get keyboard navigation support and the ability to style the popover (and its backdrop!) with CSS. No JavaScript required, and it's supported in all major browsers.How To Implement CSS Scroll-Driven Animations
Did you know you can tie CSS keyframe animations to the scroll position of an element with one line of CSS? Let me show you how. We'll create a reading progress indicator that's implemented as a progressive enhancement, and we'll make sure we respect users' preferences when it comes to reduced motion.Managing The CSS Cascade At Scale
One of the most challenging aspects of CSS is understanding (and managing) the cascade, at scale. Cascade Layers allow you to compartmentalize your CSS into stacked layers, where each layer is independent of one another. They make CSS much easier to scale and reason about!Laravel's Brand New Starter Kits
Built from the ground up, with variants for React, Vue, and Livewire, the brand new Laravel starter kits set you up with an incredible foundation to build your next modern web app faster than ever. Let's walk through everything you need to know.CSS Only Cross-Resource Page Transitions
Let's take a mini-dive into the world of full website page transitions using CSS View Transitions. This downright feels like magic — but I'll show you some of the heavy lifting the browser does to make this happen.From Zero To "Laravel + React" In 10 Minutes
Want to use Laravel on the backend and React on the frontend? Great choices! Let's place Inertia between the two, and build a single page app (SPA) with a traditional, monolith approach. We'll set everything up from scratch, and try to do it in less than 10 minutes.When Should I Use CSS Subgrid?
CSS subgrid is a relatively new CSS feature that allows you to create a grid within a grid, while inheriting the track sizing of the parent grid. In this Larabit, we'll review precisely when you might want to reach for a subgrid.
