Kevin Powell Courses

3D CSS - Lighting, Animations, and More

Learn advanced 3D CSS techniques including lighting, animations, and perspective. Create interactive scenes with bouncing balls, rotating cubes, and dynamic shadows for engaging web designs.

• YouTube
• 45 minutes
• On-Demand
• Free Video

CSS Only Lightsaber - With Sound

Learn to create an interactive lightsaber using only CSS, including styling, animation, color changes, and even sound effects. Perfect for Star Wars fans and CSS enthusiasts alike!

• YouTube
• 34 minutes
• On-Demand
• Free Video

CSS Card With Hover Animation and Mobile Fallback

Learn to create an animated CSS card with hover effects and mobile compatibility, covering HTML structure, CSS styling, animations, accessibility, and performance optimization.

• YouTube
• 49 minutes
• On-Demand
• Free Video

Sass Features That Make It Better Than Vanilla CSS

Explore advanced Sass features like nesting, mixins, partials, functions, and loops to enhance your CSS workflow and create more efficient, maintainable stylesheets.

• YouTube
• 28 minutes
• On-Demand
• Free Video

Responsive Design Made Easy

Learn to create responsive layouts easily with custom properties, basic styling, and layout techniques for a pain-free approach to building adaptable websites.

• YouTube
• 43 minutes
• On-Demand
• Free Video

Animated Card with HTML & CSS - Tutorial

Learn to create an animated card design using HTML and CSS, inspired by a popular gaming website. Explore techniques for styling, hover effects, animations, and responsive layouts.

• YouTube
• 1 hour 9 minutes
• On-Demand
• Free Video

Getting Started with Figma - A Beginner's Guide

Learn Figma's interface, tools, and features to create designs and prototypes. Master shapes, colors, text, layers, alignment, and image placement for effective layouts.

• YouTube
• 43 minutes
• On-Demand
• Free Video

Creating a Responsive, Asymmetrical Design with HTML & CSS

Learn to create responsive, asymmetrical designs using modern CSS tools like grid, subgrid, flexbox, and clamp(). Master mobile-first approach and adapt layouts for larger screens.

• YouTube
• 58 minutes
• On-Demand
• Free Video

Build a Responsive, Animated Accordion That Looks Pretty Good

Learn to create a visually appealing, responsive accordion with smooth animations. Explore HTML structure, CSS styling, JavaScript interactions, and accessibility considerations for an enhanced user experience.

• YouTube
• 1 hour 18 minutes
• On-Demand
• Free Video

Taking on a Frontend Mentor Challenge - Responsive Product Preview Card Component

Learn to build a responsive product preview card component using HTML and CSS, from setup to deployment on Netlify, with expert guidance on frontend development best practices.

• YouTube
• 1 hour 7 minutes
• On-Demand
• Free Video

Animated Hamburger Icons - Basic, Intermediate, and Pro

Learn to create and animate SVG hamburger icons using CSS and JavaScript. Explore three different designs, from basic to advanced, and enhance your web development skills.

• YouTube
• 1 hour
• On-Demand
• Free Video

Spice Up Your Site - Easy Waves, Angles, and Other Creative Shapes With CSS

Learn to create visually appealing websites using CSS techniques for waves, angles, and creative shapes. Enhance your web design skills with practical examples and step-by-step guidance.

• YouTube
• 35 minutes
• On-Demand
• Free Video

From Design to Code - HTML & CSS From Scratch - Frontend Mentor

Explore the process of transforming a design into code, covering HTML structure, CSS styling, and frontend development techniques like flexbox, grid, and variable fonts.

• YouTube
• 36 minutes
• On-Demand
• 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
• On-Demand
• Free Video

Browser Support - Is It Okay if the Layout Is Different in Old Browsers?

Explore progressive enhancement in web design, focusing on modern CSS techniques while maintaining partial support for older browsers. Learn to balance innovation with compatibility.

• YouTube
• 18 minutes
• On-Demand
• Free Video