#css (22)
- Design Tokens: The Language of Your System
Discover Design Tokens: what they are, why they're crucial for consistent UI, and how to implement them using Style Dictionary for scalable design systems.
- Scoped View Transitions Practical Field Guide
Learn to create smooth, controlled UI animations on specific parts of your web page with Scoped View Transitions.
- Naming Your Elements: The `view-transition-name` Property
Learn how to use the view-transition-name property for seamless, element-specific animations in your web applications.
- Run Independent Scoped View Transitions Simultaneously
Learn how to run multiple, independent Scoped View Transitions simultaneously on different parts of your webpage to create dynamic, responsive user interfaces.
- Dynamic Content & Lists: Animating Additions and Removals
Learn how to animate the addition and removal of elements in dynamic content using Scoped View Transitions.
- Performance Considerations & Debugging Strategies
Learn how to optimize and debug Scoped View Transitions for smooth performance and a better user experience.
- Accessibility Best Practices for View Transitions
Learn how to make your View Transitions accessible for all users, including those with motion sensitivities and assistive technologies.
- Building an Interactive Image Gallery with Scoped Transitions
Master the View Transition API to construct a dynamic image gallery, enabling smooth transitions when selecting images and creating a delightful, modern user experience.
- Project: Dynamic Dashboard Widgets & Layout Changes
Learn how to use Scoped View Transitions for dynamic dashboard widgets and layout changes.
- HTMX Practical Field Guide
Learn to build dynamic, interactive web applications using HTMX without complex JavaScript frameworks.
- Getting Started with HTMX: Your First Dynamic Element
Learn HTMX from zero to mastery, creating dynamic web elements without JavaScript.
- Events and Triggers: Making Elements Respond
Learn how to make your HTML elements interactive with HTMX's powerful event and trigger system, without writing a single line of JavaScript.
- HTMX Best Practices: Do's and Don'ts for Maintainable Code
Learn best practices for building maintainable HTMX applications with clean code and excellent user experience.
- Common Pitfalls and How to Avoid Them
Learn to avoid common pitfalls and build robust HTMX applications with confidence.
- SVGs: From Zero to Hero with HTML and CSS
Learn to create stunning SVG graphics with HTML and CSS, from basics to advanced animations.
- Advanced Topics: Animation with CSS and SMIL
Learn how to animate SVGs using CSS transitions and keyframes, along with native SMIL elements.
- Intermediate Topics: Transformations
Learn how to use SVG transformations for positioning, resizing, and reorienting elements.
- Build Animated Weather Icons with SVG, HTML, and CSS
Build dynamic animated weather icons using SVG, HTML, and CSS, applying fundamental concepts such as basic shapes, grouping, styling, and keyframe animations.
- Build an Interactive Bar Chart with SVG, HTML, and CSS
Learn to build a responsive and interactive bar chart using SVG, HTML, and CSS, solidifying your understanding of web data visualization techniques.
- Styling Your Next.js Applications
Learn how to style your Next.js applications using global CSS, styled components, and utility-first frameworks like Tailwind CSS.
- Build Reusable UI Elements with Native Web Components
Understand and implement Web Components to build reusable, encapsulated UI elements with Custom Elements, Shadow DOM, and HTML Templates.
- Tailwind CSS (v4.1)
Learn Tailwind CSS v4.1, a utility-first framework for building custom user interfaces quickly and efficiently.