YoVDO

Creating an Interactive Dribbble Card Design

Offered By: Kevin Powell via YouTube

Tags

HTML & CSS Courses Computer Science Courses Sass Courses Animation Courses HTML Courses

Course Description

Overview

Learn how to recreate an interactive Dribbble card design in this comprehensive video tutorial. Follow along as the instructor guides you through writing the HTML, setting up Sass files, creating a grid layout, and styling the basic card. Master advanced techniques like implementing hover states, creating shaking animations, and animating images. Troubleshoot common issues such as z-index problems and browser compatibility. By the end of this tutorial, you'll have the skills to create stunning, interactive card designs inspired by Dribbble showcases.

Syllabus

- Introduction
- Writing the HTML
- Setting up my Sass files
- Setting up the grid and basic card styling
- Styling the hover state
- Creating the shaking animation
- Animating the images
- Fixing the z-index issue
- Adding a shadow to the cards
- Fixing the issue in Firefox


Taught by

Kevin Powell

Related Courses

Interactive 3D Graphics
Autodesk via Udacity
Creative Coding
Monash University via FutureLearn
Make Your Own 2048
Udacity
An Introduction to Interactive Programming in Python (Part 2)
Rice University via Coursera
HTML5 Coding Essentials and Best Practices
World Wide Web Consortium (W3C) via edX