Kevin Powell Courses

Figma Dev Mode Is Here

1 rating

Explore Figma's new Dev Mode: enhanced units, VS Code plugin, and features for easier design-to-code workflow. Learn its benefits and limitations for web development.

• YouTube
• 25 minutes
• Self-Paced
• Free Video

Figma Components - The Basics to Creating Robust Components

1 rating

Learn to create robust Figma components using auto-layout. Master basics, build complex forms, and organize effectively for streamlined design workflows.

• YouTube
• 38 minutes
• Self-Paced
• Free Video

Bring a Smile to Your Users' Face With a Confetti Celebration

1 rating

Learn to create engaging confetti celebrations using CSS and SCSS, enhancing user experience with interactive animations and 3D effects.

• YouTube
• 56 minutes
• Self-Paced
• Free Video

You Probably Want Position- Sticky Instead of Fixed

Explore the differences between position: fixed and sticky in CSS, with practical examples and creative use cases for sticky positioning in web design.

• YouTube
• 16 minutes
• Self-Paced
• Free Video

Creating a CSS-Only Directionally Aware Button

Learn to create a directionally aware button using only CSS and the :has() selector, enhancing user interaction without JavaScript. Explore advanced CSS techniques for modern web design.

• YouTube
• 17 minutes
• Self-Paced
• Free Video

Animated Glowing Border - Easy to Customize CSS Effect

Learn to create a customizable animated glowing border effect using CSS and SVG, inspired by a Dribbble design. Includes variations and optimization tips.

• YouTube
• 50 minutes
• Self-Paced
• Free Video

Getting Started with Variable Fonts on the Web

Explore variable fonts for web typography: learn about their features, implementation, and advantages. Discover resources, conversion techniques, and practical usage tips for enhanced design flexibility.

• YouTube
• 22 minutes
• Self-Paced
• Free Video

3D Tilting Card Effect with Mouse Tracking - HTML, CSS & JS

Create a 3D tilting card effect with mouse tracking using HTML, CSS, and JavaScript. Learn to style code, add 3D layers, implement mouse-following functionality, and make the code editable.

• YouTube
• 23 minutes
• Self-Paced
• Free Video

Common Beginner CSS Mistakes

Discover common CSS pitfalls for beginners and learn effective solutions to improve your coding practices, from avoiding useless declarations to mastering flexbox and positioning techniques.

• YouTube
• 21 minutes
• Self-Paced
• Free Video

Stop Fighting with CSS Positioning

Understand CSS containing blocks and positioning to improve responsiveness and control layout. Master absolute, sticky, and fixed positioning for effective web design.

• YouTube
• 22 minutes
• Self-Paced
• Free Video

Container Queries Are Going to Change How We Make Layouts

Explore container queries for component-based layouts. Learn basics, real-world examples, range syntax, named containers, and integration with flexbox and grid for more flexible and responsive web design.

• YouTube
• 24 minutes
• Self-Paced
• Free Video

How Is This Possible With CSS Only?

Explore advanced CSS techniques with :has() pseudo-class to create interactive form validation and animations, enhancing user experience without JavaScript.

• YouTube
• 20 minutes
• Self-Paced
• Free Video

Create Borders With Cut Corners - Fully Responsive CSS and Easy to Adapt

Learn to create responsive buttons with cut corners using CSS custom properties, clip-path, and pseudo-classes. Master advanced styling techniques for unique and adaptable designs.

• YouTube
• 24 minutes
• Self-Paced
• Free Video

Generative Art & CSS Houdini with Amit Sheen

Explore generative art, canvas, and CSS Houdini with Amit Sheen in this live stream recording. Learn to create dynamic, visually appealing designs using advanced web technologies.

• YouTube
• 1 hour 36 minutes
• Self-Paced
• Free Video

Background Images with HTML & CSS

Learn to effectively use background images in HTML and CSS, covering common issues, sizing techniques, and tips for improved readability.

• YouTube
• 20 minutes
• Self-Paced
• Free Video