Kevin Powell Courses

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
• Self-Paced
• 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
• Self-Paced
• 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
• Self-Paced
• 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
• Self-Paced
• 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
• Self-Paced
• 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
• Self-Paced
• 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
• Self-Paced
• Free Video

Creating a Better Todo App - The HTML and CSS

Learn to create an engaging todo app interface with HTML and CSS, focusing on custom checkboxes, transitions, and responsive layouts using grid and flexbox.

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

Coding a Responsive Webpage From Start to Finish

Learn to build a responsive webpage from scratch using HTML and CSS, covering mobile and desktop layouts, typography, navigation, and various sections like hero, products, and footer.

• YouTube
• 2 hours 2 minutes
• Self-Paced
• Free Video

Coding the Front-End of a Signup Form

Learn to create an attractive signup form using CSS Grid, custom properties, and pseudo-elements. Explore layout techniques, styling, and tooltip creation for an enhanced user interface.

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

Create a Responsive Navigation Nav With No JS

Learn to create a responsive navigation menu using modern CSS techniques, including flexbox, grid, and pseudo-elements, without relying on JavaScript for functionality.

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

Responsive Navigation With an Animated Dropdown Using CSS Clip-Path

Learn to create a responsive navigation menu with an animated dropdown using CSS clip-path, jQuery, and custom hamburger menu animation for enhanced user experience.

• YouTube
• 51 minutes
• Self-Paced
• 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
• 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