Kevin Powell Courses

Figma Dev Mode Is Here

1 review

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

Figma Components - The Basics to Creating Robust Components

1 review

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

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

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

1 review

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

• YouTube
• 56 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

Position Absolute and Responsive Layouts

Learn to create responsive layouts using position absolute, from basic setup to advanced techniques for larger layout pieces.

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

How to Create a Theme Switcher With HTML & CSS

Learn to create a theme switcher using HTML, CSS, and JavaScript, with custom properties, :has() selector, and localStorage for user preferences and fallback options.

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

Recreating Stripe's Text Effect

Recreate Stripe's eye-catching text effect with CSS. Learn gradient animations, positioning techniques, and custom properties to enhance readability and visual appeal.

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

Custom HTML Emails With an Email Expert

Learn HTML email best practices, accessibility, and advanced techniques from an expert. Discover tools, resources, and frameworks to create effective, visually appealing custom emails.

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

Create a Tilting Card on Hover With CSS Only

Learn to create an interactive tilting card effect using only CSS, exploring selectors, mouse tracking, and the :has() selector for a visually appealing hover animation.

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

Build a Responsive Website With HTML & CSS - Analyzing the Project and Setting the Stage

Learn to build a responsive website from scratch, analyzing layout, setting up with Vite, adding resets, configuring custom properties, and creating utility classes for efficient development.

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

JavaScript Scroll Animation Tutorial - Web Animations API and ScrollTimeline

Learn to create scroll-based animations using Web Animations API and ScrollTimeline. Master techniques for animating elements based on scroll position and viewport visibility.

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

Creating Netflix's Video Carousel with CSS Only

Learn to create Netflix's video carousel using only CSS, exploring advanced techniques for layout, scrolling, and interactive elements without relying on JavaScript.

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

Creating a Tricky Orbiting Icon Animation

Learn to create an orbiting icon animation with CSS, covering HTML structure, color generation, styling, rotation, hover effects, and throbbing animation techniques.

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

A Look at the CUBE CSS Methodology in Action

Explore CUBE CSS methodology through a practical Frontend Mentor project, covering HTML structure, global styles, utilities, composition, and exceptions in web development.

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