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

Intro

Since August 2018, I’ve worked closely with Tailored Tutors to transform their online learning experience using custom HTML inside the Teachable platform. What started as a few layout tweaks has grown into a long-term collaboration focused on making lessons more engaging, visually polished, and easier for students to navigate. In this post, I’ll walk you through how we used HTML blocks and the Power Editor to go beyond Teachable’s default lesson view—and share examples of the custom layouts that helped elevate their course content.

About Tailored Tutors and Their Teaching Goals

Tailored Tutors is an online education company based in the UK that specializes in helping A-Level students master Maths, Biology, and Chemistry. Their courses are designed to simplify complex topics, improve exam performance, and ultimately boost student confidence. With a focus on visual learning and structured revision strategies, Tailored Tutors has built a reputation for delivering high-quality, results-driven content that supports students through two years of the most challenging academic stages in the UK.

Unlike many generic online course providers, Tailored Tutors offers a more personalised, school-aligned experience. Their lesson videos, practice questions, and revision materials are carefully aligned with A-Level exam boards, helping students stay focused and on track.

As their course library grew, so did their need for a learning experience that reflected the same level of care and clarity they put into their teaching. Students were also becoming overwhelmed with the huge number of lessons in each course and they needed to find a solution. That’s where edits using the Power Editor and custom HTML inside the Teachable platform came into play—helping them present their lessons in a clearer, more visually engaging format that matched their high teaching standards.

The Collaboration Over Time

The first project that I worked on with Tailored Tutors started on the 8th August 2018. It dealt with some custom navigation, adding a collapsible view for the sections inside the lesson, locked lecture view and implementing the first version of the Purple Hippo Favourites Plugin.

The collapsible sections on Tailored Tutors

The original Favourites Plugin (current version on ghionis.com)

Over the course of the next two years I was essentially on a monthly retainer with them providing small tweaks and updates to their course view including some more complicated layout work for their lessons starting in December 2019.

Sometimes around 2019 or so, I updated their favourites plugin to the Traffic-Light plugin (we never really did come up with a better name). This version changed the simple ‘heart on’, ‘heart off’ feature to ❤️ a lesson into a ‘red’ 🔴 , ‘orange’ 🟠 and ‘green’ 🟢 colour option to highlight the confidence level a student had for a particular lesson. A ‘Note to your future self’ was also added around this time. All of this additional information is saved to a 3rd party Google Firebase database.

Hugo, the design

In August 2024, I started working with them on implementing a new design for their lessons that I called ‘Hugo’ (the name of the designer who created the views). This was a tough two month marathon to get all the Figma designs implemented before the start of the new school year.

Each lesson is almost 2,000 lines of code

This image shows the main Home page for students to give them a quick overall view of how they are doing with their studies. The confidence meter on the left calculates the percentage of red/orange and green ‘smiley’ faces to give them an overall understanding of the subject. This single lesson, again using the HTML block is almost 2,000 lines of custom HTML, CSS and JavaScript.

There are other screens that we worked on, particularly the actual lesson view which you can see below.

This top section has tabs on the left for different lessons within a single overarching subject as well as tabs on the right to show Tutorial, Quiz and Practice Questions for that lesson. The new ‘traffic light’ feature is at the bottom of the block a design choice to move away from the traffic concept to a more user-friendly view.

Conclusion

Whilst this design may not be required for all Teachable schools, it does show how customisable it can be. With a little imagination and good design, a simple video and text lesson can be turned into a full-blown learning experience.

If you’re in the UK and looking for Biology, Chemistry, or Maths tutorials for your child, go check out Tailored Tutors.

If you need custom landing pages or have the need for a specific block inside your Teachable lesson, get in touch with me.