Inner Circle
Join 1500+ Web Developers, Agency Owners, & Freelancers
What You'll Learn
A Simple & Repeatable ‘5s’ Approach to Modern Web Development
Structure
All patterns, components, pages, and templates start with basic structure. This consists of the placement of boxes on the page, grouping associated content, and arranging boxes to work seamlessly with modern styling principles.
Semantics
Quality web development is about communicating accurate meaning through strategic HTML choices. Semantic tags like article, nav, and button encode information that makes content accessible, searchable, and functional across all contexts and devices.
Selectors
Before you can style something on the web, you need to select it. Mastering CSS selectors—from basic elements and classes to complex combinators and specificity rules—is fundamental to targeting exactly what you intend and avoiding errors and collisions.
Styling
Styling on the web requires a streamlined, organized approach. With clear naming conventions, intelligent tokenization, and relational "tie-ins," your styling becomes predictable, maintainable, and adaptable as projects grow and evolve.
Systems
Systematic development is what separates static, one-off pages from dynamic, scalable architectures. Understanding how to manage content, control areas of a site with templates, loop through data, apply conditional logic, and properly relate items, empowers you to build sites that adapt and scale efficiently.
In just a few short weeks, you'll learn my repeatable '5S Framework' for building anything on the web—from complete sites built from scratch to surgical edits of existing patterns and templates.
It's going to feel like drinking from a firehose, but I can promise you this: we're not going to waste a single second learning the proprietary language of a random page builder. What you're going to learn is the universal language of web development in a visual interface.
If there's only one course you have time for, make it this one. It will put you in the top 5% of page builder users, guaranteed.
This course is hosted on YouTube with new lessons released as they're completed. You can participate in the discussion surrounding each lesson via the comments section of each video.
I'll be using a visual builder for WordPress called Etch for each lesson because it's the best visual builder for WordPress as well as the best tool for learning modern web development. If you don't own a copy of Etch, you can claim a free development-only copy as part of your participation in this course.
The development copy of Etch can be activated on the following domains:
.dev.local.test.staging.example
You can host one of these domains, or generate a staging site for any existing domain, at Rocket.net. You can also install WordPress locally using LocalWP.
Get a Development Copy of EtchFAQs
Have Questions?
We don’t have time to go into granular detail about why I rank page builders the way I do, but here’s my general grading of top options:
Worst: Elementor, WP Bakery / Visual Composer, Divi, Beaver Builder, Thrive, Brizy, all Gutenberg-based Builders, Wix, Squarespace.
Mediocre: Breakdance
Good: Webflow, Bricks, Builderius.
Elite: Etch
We’ll be discussing frameworks in the styling section of the course. I’ll be demonstrating the use of a framework called Automatic.css and talking about the pros and cons of various frameworks. Automatic.css is the recommended framework for modern development (I developed it, after all), but it’s not required.
Two years ago I released a first version of this course (for Era 3) and it promptly racked up hundreds of thousands of views, becoming one of the most popular and well-respected web development courses online.
Here's what a few of the viewers had to say: