Скачать или смотреть 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