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