How to Create Review Cards With Dynamic Star Ratings in Oxygen (Follow Along Full Tutorial)

Описание: This is the type of Oxygen tutorial I'd normally publish in my Inner Circle. For info on the inner circle, go here: https://digitalambition.co/inner-circle/

THIS TUTORIAL REQUIRES NO PAID ADD-ONS ;)

Why is this called a follow along tutorial? Because I want to challenge you to follow along and build exactly what I'm building on a blank website so you can truly absorb each and every aspect of the training (what you'll learn is detailed below).

Are you going to participate? Drop the hashtag #intraining below in the comments to let me know you're taking action!

Here's what you'll learn:

• How to create & configure a custom post type
• How to attach custom fields to a custom post type
• How to work with various types of custom fields including images, numbers, dropdowns, and more
• How to create review cards with proper semantic HTML structure
• BEM naming structure for custom classes
• Basic flex layout techniques
• Auto margin techniques
• nth-of-type margin techniques
• How to use the Oxygen Grid Builder
• How to use the Oxygen Repeater
• How to use the Oxygen Repeater Advanced Query Builder
• How to insert dynamic data from custom fields
• How to use object-fit for constraining and positioning images
• How to use data attributes
• How to manipulate elements with CSS by targeting their data attribute value
• nth-of-type pseudo classes for targeting specific items

0:00 - Intro & Context
02:05 - Design Inspiration
02:52 - Getting Started
03:26 - Creating Reviews Custom Post Type
06:30 - Creating Custom Fields
09:55 - Adding Reviews
16:40 - Creating a Page & Repeater Grid
23:30 - Creating the Review Card
48:28 - Adding the Data Attribute
50:05 - Changing Stars With Data Attribute Values
59:40 - Checking Work & Wrap Up