How to Create Cards in Oxygen Properly (Updated & Accessible!)

This is an advanced tutorial, but if you follow it you'll be able to create structurally organized and accessible card components better than 90% of web developers.

This is the type of tutorial I'd normally publish in my Inner Circle, but because it's an update of a previous tutorial I published, I'm making it free to everyone.

You can get more info and join the Inner Circle here: https://digitalambition.co/inner-circle/

You can purchase Automatic.css here: https://automaticcss.com

You can purchase WPCodeBox here: https://geni.us/uu8jqqf

In this tutorial:

0:00 Intro
01:04 Example Cards
02:07 Creating a Grid for the Cards
03:38 Article Tags vs List Items
09:08 Planning the Card Structure
10:23 Creating the General Card Structure
23:42 How to Use CSS Custom Properties
30:11 Controlling Aspect Ratio of Media
36:28 Proper DOM Structure for Media Placement
39:06 Accessible Icon Links
49:38 How to Link Cards Properly
55:55 Adding a Hover Style to the Card
58:42 Setting Keyboard Focus Properly
01:04:25 Testing With Apple Voiceover
01:05:08 Setting Equal Heights Properly
01:09:30 Review