Kevin Powell Courses

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

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

How to Make a Nice Site With Less CSS

Learn to create visually appealing websites with minimal CSS. Covers color schemes, typography, spacing, and essential styling techniques for efficient and attractive web design.

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

Creating a Layered Card With HTML & CSS

Learn to create a layered card using HTML and CSS, exploring subgrid and advanced styling techniques for an engaging UI component.

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

From Figma to Code - Creating a Resume Page

Learn to transform a Figma design into a functional resume webpage using HTML and CSS, with a focus on flexbox, custom properties, and responsive design techniques.

• YouTube
• 1 hour 30 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

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

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