YoVDO

CSS Card With Hover Animation and Mobile Fallback

Offered By: Kevin Powell via YouTube

Tags

HTML & CSS Courses Computer Science Courses Web Development Courses Animation Courses HTML Courses Pseudo-elements Courses

Course Description

Overview

Learn how to create an animated CSS card with hover effects and mobile fallback in this comprehensive tutorial video. Explore advanced CSS techniques including the new HSL syntax, gradients, pseudo-elements, and animations. Master the art of styling buttons, timing animations, and implementing keyboard navigation. Discover how to adapt the design for mobile devices and incorporate accessibility features like prefers-reduced-motion. Enhance your CSS skills and create visually appealing, interactive card designs that work across different devices and user preferences.

Syllabus

- Introduction to the project
- The HTML
- Starting the CSS
- New HSL Syntax and gradients
- Adding the pseudo-element
- Styling the button
- Little details
- The animations
- Timing the animations
- Fixing keyboard navigation
- Making it work on mobile
- prefers-reduced-motion


Taught by

Kevin Powell

Related Courses

Introduction to CSS3
University of Michigan via Coursera
Основы HTML и CSS
Moscow Institute of Physics and Technology via Coursera
Aprende Efectos CSS3
Udemy
CSS Selectors Course (How To)
Treehouse
HTML & CSS Crash Course Tutorial
Net Ninja via YouTube