Watch my free on-demand Bricks masterclass Watch Now

[Making Of… #7] Peeling The Onion

What’s this? In 2021 I made a course called From WordPress To Webflow. This post is one of a series of behind-the-scenes emails I wrote as I went along, exclusively for my email list (start here).

Yesterday, I droned on about onions for some reason.

Oh yeah! That was it. I was making the point that people buy online courses because they want a transformation, and fast.

And the very best courses are where the course-creator has gone the extra mile, has taken time to do the heavy problem-solving and thinking to provide the quickest shortcut possible.

I often liken this to peeling an onion.

The first layer of the onion is the layer many people stop at: record the screen, talk over it while you do stuff.

And that’s fine, really. And it’s definitely easiest and quickest for you that way.

But Onion Layer Number One ain’t gonna lead to any dramatic transformations.

Nor is it going to have your customers telling everyone they know to buy your course.

Nor will they be willing to invest top dollar.

There’s always another layer. And what sets excellent courses apart from the dross is the course creator’s willingness to peel another layer, to go a level deeper, to do the hard thinking and heavy lifting on behalf of their students.


What can you do to provide even more of a shortcut?

How can you make the unique process you’re teaching easier to understand, easier to implement?

How can you further boil down the steps into the simplest possible system that makes it quicker and easier to get results?

What painful problem solving can you do upfront, so your students don’t have to?

What resources can you create that make your students’ lives even easier and their projects even more profitable?

The thing is: there’s always another layer of the onion to peel.

Sure, all this onion peeling is hard work. And your brain will be telling you, “Nah, it’ll be ok like this, just leave it. No-one’ll notice.” Taking the time to go the extra mile can be exhausting.

But… that’s the shortcut your customers are paying you for. You’ve done all the heavy lifting and thorny problem solving for them.

So what metaphorical onion peeling had me so firmly in the zone for an entire week?

I guess Onion Layer Number One would be showing how to use Webflow to build a case study website.

That’s great, and that will be the basis of my new course too.

But…. there’s a ton of ‘how to use Webflow’ tutorials out there, including Webflow’s own excellent contributions.

What other layers are there? How could I make all of this an easier, quicker shortcut and all-round more valuable?

Another onion layer was to create a ready-to-go Starter Site, a framework of pre-built styles for common typography and layout elements.

That provides students with a cloneable Webflow project with a ton of classes and styles to make each new project much quicker to build and easier to maintain.

I covered the basics of that in the live Webflow training series I ran earlier in the year.

But there’s definitely another layer I could go to though.

I know from previous experience that many students happily cope with the technical aspects of the web design platform they’re learning, but struggle with knowing how to use it to create pleasing designs that look good.

I could get away with ignoring this fact… but I figure it’s not enough to leave people to ‘eyeball’ the spacing and widths and sizes and hope it looks ok.

Not everyone is a natural designer, and even pro designers follow predictable design rules.

So the next layer was to create a predictable layout system, a set of simple rules for creating spacing (like margins and padding) as well as a load of pre-built layout components that follow those rules. Easy peasy, designs always look great—that’s a valuable shortcut.

That took a few days of testing and head-scratching, made easier by patient and detailed feedback from several students who took the previous live Webflow training (thanks guinea pigs! I mean, faithful testers!)

And that got me thinking about another possible layer…

Let’s systematise typography sizes too.

How about coming up with a system that creates a beautifully proportioned typography scale, with relative type sizes matching perfectly, all the way from the very smallest text to mega huge headlines.

And that scale appropriately down on smaller screens (you do not want the same ‘jumps’ in font size between headings on smaller screens, but they still need to be proportional relative to each other).

Long story short, after testing various methods of handling this, using various calculators, custom code, fluid vs responsive typography, I eventually came up with what I think is the perfect solution. It’s all built-in to the provided cloneable Starter Site. Typography looks beautifully sized and scaled on all screens, with zero work required on the part of the student.

And the next layer is creating PDF cheatsheets for all this too, as an easy reference in future. Y’see, there’s always another layer of the onion.

But honestly, my eyes are kinda stinging from all the onion peeling today, so I’ll leave it here for today.

I’ve re-read this email and appreciate it might seem like I’m tooting my own horn (“Ooh, aren’t I an expert onion peeler!”).

That’s not what I mean, of course.

I just want to impress on you that if you’re planning on making your own online courses, the thing that will make them stand head-and-shoulders above the average is your ability and willingness to go the extra mile… to peel a few layers of the onion… to do the problem solving and heavy lifting on behalf of your students, to provide the quickest, easiest possible shortcut to the transformation they desire.

See you in the next instalment of this Making Of An Online Course series.