How I Built a Complete Teachable Landing Page in 1 Hour with AI (A Case Study)

Waiting for a car repair

Most of us have been there, idly sitting with nothing to do but wait for the mechanic to finish repairing your car wondering how much it’s going to cost. I have a BMW. A lovely white 2013 X1 xDrive 20d, but please don’t hold that against me! I drove a skedonk of a car for a decade before I decided to just get that car I fell in love with in a parking lot one day.

Anyway, back to the mechanic. I’m sitting with my laptop in the waiting room at the BWM service centre and I have two hours of waiting but didn’t want to leave it to waste. Usually, I check emails, look at Xero, balance my books, but I knew I had a landing page I wanted to get started and thought, sure why not — so I grabbed a free coffee from the kitchen and sat down to write some HTML code in Teachable. Then I had a thought… “could I build a complete, professional, A-to-Z sales page—the kind that usually takes me the full day—in just the few hours that I have sitting here?”

I had one key difference: I would use an AI as my development partner.

The problem was that AI can sometimes get confused and if you don’t feed it the correct information right from the start you’ll get all sorts of unhelpful responses.

For example, “Gemini, write me a sales page for my online course about baking soda bread.”

This results in the following except:

Of course. Here is a draft for your sales page, incorporating elements of your unique background to build authenticity and connection.
[Headline] From Rock-Hard Bricks to Rustic Perfection: Master Authentic Soda Bread in Under an Hour Tired of dense, crumbly soda bread that tastes more like baking soda than bliss? Do you dream of pulling a warm, crusty loaf from your own oven, with a soft, fluffy inside, ready to be slathered in butter?
You don’t need to be a master baker. You don’t need fancy equipment. And you certainly don’t need to waste another batch of ingredients.

Clearly, this isn’t our intended purpose, but it is the copy we’d need to get started with the code we’d want to get from the AI model.

But, adding a further prompt: ‘oh sorry, I mean an HTML page for this idea. Maybe just start with a hero-header?

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>The Simple Soda Bread Method</title>
7
    <style>
8
        /* --- Basic Resets & Font --- */
9
        body, html {
10
            margin: 0;
11
            padding: 0;
12
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
13
            line-height: 1.6;
14
        }
15

16
        /* --- Hero Section Styles --- */
17
        .hero-header {
18
            /* Hero Background:
19
               - Replace 'soda-bread-background.jpg' with a URL to your own high-quality image.
20
               - I've added a semi-transparent overlay to make the text more readable.
21
            */
22
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1594498762137-92015243f7a2?q=80&w=2070') no-repeat center center/cover;
23
            color: #ffffff;
24
            text-align: center;
25
            padding: 100px 20px;
26
            display: flex;
27
            justify-content: center;
28
            align-items: center;
29
            flex-direction: column;
30
            min-height: 60vh; /* Ensures the hero section takes a good portion of the screen height */
31
        }
32

33
        .hero-header .container {
34
            max-width: 800px;
35
        }
36

37
        .hero-header h1 {
38
            font-size: 3rem; /* Responsive font size */
39
            margin-bottom: 0.5em;
40
            font-weight: 700;
41
            line-height: 1.2;
42
        }
43

44
        .hero-header p {
45
            font-size: 1.25rem;
46
            margin-bottom: 1.5em;
47
            font-weight: 300;
48
        }
49

50
        /* --- Call to Action (CTA) Button --- */
51
        .cta-button {
52
            display: inline-block;
53
            background-color: #d46a2a; /* A warm, rustic orange */
54
            color: #ffffff;
55
            padding: 15px 35px;
56
            font-size: 1.1rem;
57
            font-weight: 600;
58
            text-decoration: none;
59
            border-radius: 5px;
60
            transition: background-color 0.3s ease, transform 0.3s ease;
61
        }
62

63
        .cta-button:hover {
64
            background-color: #b3521b;
65
            transform: translateY(-2px); /* Slight lift on hover */
66
        }
67

68
        /* --- Media query for smaller screens --- */
69
        @media (max-width: 768px) {
70
            .hero-header h1 {
71
                font-size: 2.5rem;
72
            }
73
            .hero-header p {
74
                font-size: 1.1rem;
75
            }
76
        }
77
    </style>
78
</head>
79
<body>
80

81
    <header class="hero-header">
82
        <div class="container">
83
            <h1>From Rock-Hard Bricks to Rustic Perfection</h1>
84
            <p>Tired of dense, crumbly soda bread? Master the simple, authentic method and bake a perfect, crusty loaf in under an hour. Guaranteed.</p>
85
            <a href="#pricing" class="cta-button">Bake Your First Loaf Today</a>
86
        </div>
87
    </header>
88

89
    </body>
90
</html>

The problem with this code, although it will work if pasted inside a Teachable HTML block, is that it has superfluous code that we don’t need.

It normally takes me about a day to write the code for a full landing page.

So, to get our AI model to understand our needs, we need to feed it some prompts on what Teachable needs for it’s HTML block so we don’t get more than we really need.

All we need is

1
<style>
2
        /* --- Basic Resets & Font --- */
3
        body, html {
4
            margin: 0;
5
            padding: 0;
6
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
7
            line-height: 1.6;
8
        }
9

10
        /* --- Hero Section Styles --- */
11
        .hero-header {
12
            /* Hero Background:
13
               - Replace 'soda-bread-background.jpg' with a URL to your own high-quality image.
14
               - I've added a semi-transparent overlay to make the text more readable.
15
            */
16
            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1594498762137-92015243f7a2?q=80&w=2070') no-repeat center center/cover;
17
            color: #ffffff;
18
            text-align: center;
19
            padding: 100px 20px;
20
            display: flex;
21
            justify-content: center;
22
            align-items: center;
23
            flex-direction: column;
24
            min-height: 60vh; /* Ensures the hero section takes a good portion of the screen height */
25
        }
26

27
        .hero-header .container {
28
            max-width: 800px;
29
        }
30

31
        .hero-header h1 {
32
            font-size: 3rem; /* Responsive font size */
33
            margin-bottom: 0.5em;
34
            font-weight: 700;
35
            line-height: 1.2;
36
        }
37

38
        .hero-header p {
39
            font-size: 1.25rem;
40
            margin-bottom: 1.5em;
41
            font-weight: 300;
42
        }
43

44
        /* --- Call to Action (CTA) Button --- */
45
        .cta-button {
46
            display: inline-block;
47
            background-color: #d46a2a; /* A warm, rustic orange */
48
            color: #ffffff;
49
            padding: 15px 35px;
50
            font-size: 1.1rem;
51
            font-weight: 600;
52
            text-decoration: none;
53
            border-radius: 5px;
54
            transition: background-color 0.3s ease, transform 0.3s ease;
55
        }
56

57
        .cta-button:hover {
58
            background-color: #b3521b;
59
            transform: translateY(-2px); /* Slight lift on hover */
60
        }
61

62
        /* --- Media query for smaller screens --- */
63
        @media (max-width: 768px) {
64
            .hero-header h1 {
65
                font-size: 2.5rem;
66
            }
67
            .hero-header p {
68
                font-size: 1.1rem;
69
            }
70
        }
71
    </style>
72
    <section class="hero-header">
73
        <div class="container">
74
            <h1>From Rock-Hard Bricks to Rustic Perfection</h1>
75
            <p>Tired of dense, crumbly soda bread? Master the simple, authentic method and bake a perfect, crusty loaf in under an hour. Guaranteed.</p>
76
            <a href="#pricing" class="cta-button">Bake Your First Loaf Today</a>
77
        </div>
78
    </section>

Hero-header image

This is better but the layout is wrong because Teachable is also providing CSS which is conflicting with the code provided by Gemini.

“Hey Gemini, this is a good start, but the Teachable .container class is conflicting with the .container we are using”.

This gives us this code which we’ll show the result below the code block.

1
<style>
2
    /* --- Hero Section Styles --- */
3
    .hero-header {
4
        /* Hero Background */
5
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1594498762137-92015243f7a2?q=80&w=2070') no-repeat center center/cover;
6
        color: #ffffff;
7
        text-align: center;
8
        padding: 100px 20px;
9
        display: flex;
10
        justify-content: center;
11
        align-items: center;
12
        flex-direction: column;
13
        min-height: 60vh;
14
    }
15

16
    /* RENAMED this class to avoid conflicts with Teachable */
17
    .hero-header .hero-container {
18
        max-width: 800px;
19
    }
20

21
    .hero-header h1 {
22
        font-size: 3rem;
23
        margin-bottom: 0.5em;
24
        font-weight: 700;
25
        line-height: 1.2;
26
    }
27

28
    .hero-header p {
29
        font-size: 1.25rem;
30
        margin-bottom: 1.5em;
31
        font-weight: 300;
32
    }
33

34
    /* --- Call to Action (CTA) Button --- */
35
    .cta-button {
36
        display: inline-block;
37
        background-color: #d46a2a;
38
        color: #ffffff;
39
        padding: 15px 35px;
40
        font-size: 1.1rem;
41
        font-weight: 600;
42
        text-decoration: none;
43
        border-radius: 5px;
44
        transition: background-color 0.3s ease, transform 0.3s ease;
45
    }
46

47
    .cta-button:hover {
48
        background-color: #b3521b;
49
        transform: translateY(-2px);
50
    }
51

52
    /* --- Media query for smaller screens --- */
53
    @media (max-width: 768px) {
54
        .hero-header h1 {
55
            font-size: 2.5rem;
56
        }
57
        .hero-header p {
58
            font-size: 1.1rem;
59
        }
60
    }
61
</style>
62

63
<section class="hero-header">
64
    <div class="hero-container">
65
        <h1>From Rock-Hard Bricks to Rustic Perfection</h1>
66
        <p>Tired of dense, crumbly soda bread? Master the simple, authentic method and bake a perfect, crusty loaf in under an hour. Guaranteed.</p>
67
        <a href="#pricing" class="cta-button">Bake Your First Loaf Today</a>
68
    </div>
69
</section>

Hero-header image - step 2

Much better, but you notice we have a gray background, this is because the image link Gemini is providing us in the code is not working.

Let’s ask Gemini to use lorem.picsum website. This is a great site for quickly using images during the development phase.

“Can you use https://lorem.picsum instead of Unsplash since the Unsplash images are not working.”

And, voilà! Our Hero header in all it’s glory after the code block:

1
<style>
2
    /* --- Hero Section Styles --- */
3
    .hero-header {
4
        /* Hero Background:
5
           - Now using a random placeholder image from lorem.picsum.
6
           - A semi-transparent overlay is added to make the text more readable.
7
        */
8
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://picsum.photos/1920/1080') no-repeat center center/cover;
9
        color: #ffffff;
10
        text-align: center;
11
        padding: 100px 20px;
12
        display: flex;
13
        justify-content: center;
14
        align-items: center;
15
        flex-direction: column;
16
        min-height: 60vh;
17
    }
18

19
    /* RENAMED this class to avoid conflicts with Teachable */
20
    .hero-header .hero-container {
21
        max-width: 800px;
22
    }
23

24
    .hero-header h1 {
25
        font-size: 3rem;
26
        margin-bottom: 0.5em;
27
        font-weight: 700;
28
        line-height: 1.2;
29
    }
30

31
    .hero-header p {
32
        font-size: 1.25rem;
33
        margin-bottom: 1.5em;
34
        font-weight: 300;
35
    }
36

37
    /* --- Call to Action (CTA) Button --- */
38
    .cta-button {
39
        display: inline-block;
40
        background-color: #d46a2a;
41
        color: #ffffff;
42
        padding: 15px 35px;
43
        font-size: 1.1rem;
44
        font-weight: 600;
45
        text-decoration: none;
46
        border-radius: 5px;
47
        transition: background-color 0.3s ease, transform 0.3s ease;
48
    }
49

50
    .cta-button:hover {
51
        background-color: #b3521b;
52
        transform: translateY(-2px);
53
    }
54

55
    /* --- Media query for smaller screens --- */
56
    @media (max-width: 768px) {
57
        .hero-header h1 {
58
            font-size: 2.5rem;
59
        }
60
        .hero-header p {
61
            font-size: 1.1rem;
62
        }
63
    }
64
</style>
65

66
<section class="hero-header">
67
    <div class="hero-container">
68
        <h1>From Rock-Hard Bricks to Rustic Perfection</h1>
69
        <p>Tired of dense, crumbly soda bread? Master the simple, authentic method and bake a perfect, crusty loaf in under an hour. Guaranteed.</p>
70
        <a href="#pricing" class="cta-button">Bake Your First Loaf Today</a>
71
    </div>
72
</section>

Hero-header image - step 3

There are other changes I would make to this. Certainly, let’s increase the font size. Teachable has a base html font-size of 10px and the code we’re using from Gemini is using ‘rem’. Without providing a CSS lesson, rems are a multiple of the base html font-size. So, .hero-header h1 is 3rem x 10px or 30px. This is far too small for a hero-header. Typical body or html font-size would be 16px or 18px, meaning our H1 font size would be 3rem x 18 = 54px. So, let’s just set that manually and see how the hero-header looks.

1
html {
2
  font-size: 18px;
3
}

Hero-header image - step 4

It’s a case of asking Gemini to do what you think needs to be done and then refining the results until you get what you need. Unfortunately, without the vocabulary, it may be incredibly frustrating for a non-developer to construct the correct prompts to properly guide Gemini to provide HTML code that works.

This is where my new course comes in. It’s still in the planning and development process, but if you’re interested feel free to sign-up to the waiting list over at https://ai.purplehippo.io.

How I Built a Complete Teachable Landing Page in 60-Minutes with AI (A Case Study)

How I Built a Complete Teachable Landing Page in 1 Hour with AI (A Case Study)

Waiting for a car repair

It normally takes me about a day to write the code for a full landing page.

Free Traffic Guide for Course Creators

Related Posts

5 Proven Ways to Drive Traffic to Your Teachable School (That Actually Work)

Tailored Tutors on Teachable: How We Used Custom HTML to Build Better Lessons

Teachable API: Retrieve a List of Students in Your School

Teachable Review (2025) - Pros, Cons & Expert Insights