Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Animated Card with HTML & CSS - Tutorial

Kevin Powell via YouTube

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!
Learn how to recreate an animated card design from the Top Games section of popdog.com using only HTML and CSS in this comprehensive tutorial video. Follow along as the instructor guides you through the process, starting with the HTML structure and progressing to CSS styling and animations. Master techniques for styling the front and back of the card, creating hover effects, animating game names, and implementing fade-up transitions. Gain practical experience by working on a real-world design example, enhancing your web development skills in HTML and CSS. Includes helpful resources like a clip-path maker and UI Faces, as well as detailed timestamps for easy navigation through different sections of the tutorial.

Syllabus

- Introduction

- Overview

- HTML

- CSS basic setup

- styling the front

- front and background hover

- animating the game name

- the rank

- styling the back

- fixing the spacing

- fade-up and in for the back

Taught by

Kevin Powell

Reviews

Start your review of Animated Card with HTML & CSS - Tutorial

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.