Kevin Powell Courses

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

Create a Horizontal Media Scroller With CSS

Learn to create a horizontal media scroller using CSS, covering HTML structure, styling, custom properties, scroll snapping, and scroll groups. Enhance your web design skills with this practical tutorial.

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

Creating an Interactive Dribbble Card Design

Learn to create an interactive Dribbble card design using HTML, Sass, and CSS animations. Master grid layouts, hover effects, and cross-browser compatibility in this hands-on tutorial.

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

The 6 Most Important CSS Concepts for Beginners

Explore essential CSS concepts for beginners: inheritance, cascade, box model, specificity, naming conventions, layouts, and content vs. layout separation. Gain foundational knowledge for effective styling.

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

Learn How to Create a Responsive CSS Grid Layout

Create a dynamic, responsive CSS grid layout using properties like aspect-ratio and object-fit. Learn to style cards, make grids adaptive, and design featured elements for various screen sizes.

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

Learn Flexbox the Easy Way

Master flexbox fundamentals through practical examples. Learn key properties like flex-grow, flex-direction, and justify-content. Gain skills to create responsive layouts and solve common flexbox challenges.

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

Learn CSS Grid the Easy Way

Simplify CSS Grid with practical tips on layout creation, column spanning, element placement, and responsive design using grid-template-areas and media queries.

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

Responsive Navbar Tutorial Using HTML, CSS & JS

Learn to create a responsive navbar using HTML, CSS, and JavaScript, covering mobile and desktop layouts, styling, animations, and browser compatibility.

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

Cool 3D Grid Layout - Can I Clone It?

Learn to create a visually striking 3D grid layout with hover effects, perspective, and shadows. Follow along as the instructor tackles challenges in real-time, offering insights into problem-solving in web design.

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

Creating a Robust Grid System Using Subgrid

Learn to build a powerful and flexible grid system using CSS subgrid, enhancing layout control and responsiveness for web designs. Explore advanced techniques for creating custom sections and breaking out of containers.

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

3D Text Animations With CSS

Learn to create stunning 3D text animations using CSS, from basic setup to advanced techniques like twisting, rotating, and adding depth, with expert guidance and practical examples.

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

Cloning Google Font's Light-Dark Mode Toggle

Learn to clone Google Font's light/dark mode toggle with CSS animations, custom properties, and accessibility features in this step-by-step tutorial by Kevin Powell.

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

Turn Static HTML-CSS into a Blog with CMS Using the JAMStack

Learn to transform static HTML/CSS into a dynamic blog with CMS using JAMStack, Eleventy, GitHub, Netlify, and Netlify CMS. Gain hands-on experience in modern web development techniques and tools.

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