Explore the power of CSS in this 20-minute video tutorial by Kevin Powell. Dive into the creation of a complex interactive form using only CSS, with a focus on the :has() pseudo-class. Learn how to set up custom properties, implement different states, add shaking animations, and dynamically change button styles based on input validity. Follow along as Powell deconstructs and recreates an impressive CodePen example, offering insights into advanced CSS techniques and demonstrating their practical applications in web design.
Overview
Syllabus
- Introduction
- what I'm trying to copy
- Setting up my custom properties
- Using :has
- setting up the different states
- Adding the shaking animation
- removing the animation when the input is empty
- changing the style of the button when everything is valid
- should I do more videos like this one?
Taught by
Kevin Powell
