Kevin is the real deal. Yes, his in-yer-face style is not for everyone, but, over the last 2-3 years he has generously shared his immense knowledge, critical thinking, and industry experience to help thousands become better web builders. He answers real-life website questions, and offers solutions that catapult your workflow to new heights. His software, ACSS and Frames, have revolutionised the web building process. I have been away from web building for a year now, and Kevin is my go-to to get back into it the fastest and best possible way.
Page Building 101: Era 4
Free Course: Master The Art of Modern Page Building
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.
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, andbuttonencode 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.
Click the button above to copy the JSON for "Selector School" and then go paste it in Etch (ACSS required with both Primary and Base color activated). Then you can follow right along with the videos!
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.
Participation
How to Participate in this Course
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
Things You Need to Know
This course is 100% free, no gotchas. You can even get a free development copy of Etch and install WordPress locally on your computer which is also free. You can literally participate in the course for $0. Awesome, right?
Sure! Just keep in mind that not every page builder is equipped to do many of things you’ll be learning how to do. A lot of builders are designed for beginners and laypeople and are intentionally limited. You’ll also find that things are often hidden behind lots of panels, making an advanced and professional workflow very inefficient. Lastly, almost every page builder besides Etch abstracts and hides the code, so you won’t be able to see exactly what’s happening, making learning slower and more difficult. While you can use any builder, Etch is recommended.
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.
We will discuss the role of AI in modern web development, but we won’t rely on AI or heavily use AI throughout the course. I do intend, though, to do a lesson on prompting AI and analyzing the output you get from AI so you can incorporate it more responsibly.
Reviews
What People Are Saying
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:
- If you’re a newbie, or you’re a little uncomfortable with what he said about being married to one specific builder, you need this information. I’ve learned more from his tutorials on Oxygen and Bricks about web design, HTML/CSS, WCAG compliance, WordPress, and a host of other subjects than I have in any other tutorial series – including Lynda/LinkedIn, Packt, Udemy, OSTraining, YouTube and more. If Kevin says it, I’m listening.
- This is one of the highest quality courses I’ve taken. Actually, this is more than just a course – it’s a time machine. If you finish this course (yes, it is a lot to take in, so don’t be afraid to bring a notebook, try out what he’s doing, etc), you will get back HOURS of your life that would otherwise be spent living with the wrong web design choices.
- Kevin’s web design course is a game-changer! His clear explanations and hands-on examples made learning CSS a breeze. I’ve built stunning websites thanks to his guidance!
- This is an absolute gem. Kevin is a highly intelligent, honest and passioned teacher who will take your knowledge and skill higher than you would ever dream of!
- I’m about 5 lessons in and maaaaate. You are amazing. No really, I was a bit apprehensive to this channel but it’s now my greatest resource. Thank you. I feel like everyone else is teaching basic web design and elementor level/beginner stuff… you are taking me from intermediate to advanced/professional. My goal is agency owner and this just GOLD. I love it.
- If you are looking to learn how to get ahead of most webdesigners/developers this is the course for you. You will get a great foundation on the basics of webdesign and the correct way to build websites that are accessible, scalable and maintainable. Kevin is a great instructor and teacher and knows how to explain complex subjects to the layman.
- This course is absolutely unbelievable. Unbelievable because it’s free. Unbelievable because it shows you every mistake you’re making. Unbelievable because it keeps you hooked for hours, peeling back the layers of page building with pace and enthusiasm. Unbelievable because, by the end, you know exactly what you should be doing and where to return if you get stuck. Thanks, Mr Geary.
