This is PART 1, which covers the layout, styling, and general functionality. In PART 2, I'll cover the accessibility details.
This is one of those tutorials that you should watch even if you don't want to build a switchable pricing grid. Why? Because the techniques and skills you'll learn in this tutorial are extremely useful across a wide range of layouts and projects.
If you're a beginner or intermediate user, I encourage you to fire up a dev site and build with me step-by-step.
*** MY TOOLS ***
🔥 AutomaticCSS (ACSS) – https://automaticcss.com
🔥 Frames – https://getframes.io
See all my recommended tools here: https://geary.co/tools/
*** INNER CIRCLE ***
Step your design/dev game up, make more money, and get the full scoop on scaling your digital agency! When it comes to the Inner Circle, I don't hold back.
⭕ In-depth design & dev trainings
⭕ Business, sales, & marketing trainings
⭕ Agency resources & downloadables
⭕ Vibrant, quality community with zero toxicity
⭕ …and much more!
Learn more and join here: https://geary.co/inner-circle/
*** SOCIAL ***
👉 FB – https://www.facebook.com/marketingkev/
👉 LinkedIn – https://www.linkedin.com/in/kevingeary/
*** CHAPTERS ***
0:00 Intro
1:30 General Layout
5:37 Building the Cards
25:00 Building the Switch
54:40 Sliding Switch Indicator