Building HTML5 eLearning with AI Coding Tools – No Authoring Tool

Authoring tools are great until you hit their walls: a layout they can't do, a tracking need they won't support or a file that only one person can open. More developers are now asking a bold question: what if we skip the authoring tool and build the course as a regular web page, with an AI coding assistant doing much of the typing? That's the idea behind AI-assisted HTML5 eLearning, and it's more practical than it sounds. Can you really build solid eLearning in HTML5 with AI coding tools, and should you?

Yes, you can build professional HTML5 eLearning with AI coding tools such as GitHub Copilot, ChatGPT or Claude, as long as someone on the team understands web basics well enough to review, test and maintain the code. The AI writes the HTML, CSS and JavaScript for layouts, interactions and SCORM tracking from your descriptions, which makes custom builds far faster than hand-coding. You get full design control, true responsive layouts, small files and code you can manage with normal developer tools. The trade-off is that non-developers can't easily edit the result, and every line of AI-written code needs testing in your actual LMS before launch.

Why Build eLearning Without an Authoring Tool?

Because the web already does most of what authoring tools do, and sometimes does it better. Here's what you gain:

• Full control over layout and design, with no template walls.
• Truly responsive pages that reflow on phones, tablets and desktops.
• Accessible structure using standard HTML elements that screen readers understand.
• Small, fast-loading files with no extra player code.
• Version control with tools like Git, so every change is tracked and reversible.
• No license fees per developer.

Before AI coding tools, the cost was time, because hand-coding every interaction took far longer than building it in Storyline. AI assistants close much of that gap.

What Do AI Coding Tools Actually Do Here?

They turn plain-language descriptions into working code, and they explain code you don't understand. GitHub Copilot suggests code as you type in your editor. Chat tools like ChatGPT and Claude can write whole components from a description, review your code and help you fix errors. Editors with built-in AI, such as Cursor, combine both styles.

In practice, you describe what you want: "A drag-and-drop sorting activity with three categories, keyboard accessible, that reports a score to a JavaScript function." The AI writes a first version, and you test it, describe what's wrong and refine. A component that might have taken a day to hand-code often takes an hour or two.

A Practical Workflow for AI HTML5 eLearning

1. Write a Short Technical Spec

List the screens, the interactions, the navigation, what gets tracked and which browsers and devices you support. Give the AI this specification at the start of every session, because clear specifications produce consistent code.

A spec for a short module might say: six screens, linear navigation with a menu, one sorting activity and one five-question quiz, passing score of 80 percent, SCORM 1.2 tracking, works on current desktop and mobile browsers, meets WCAG 2.1 AA (the Web Content Accessibility Guidelines). That's a few lines of text, and it prevents hours of drift later.

2. Build a Reusable Shell

Ask the AI to create a simple course shell: a page layout, navigation, a progress indicator and a place for content. Keep it plain, since once you get this right, every future course starts from it.

3. Build Interactions as Separate Components

Build each interaction type, such as a knowledge check, a scenario or a sorting activity, as its own reusable piece. Ask the AI for accessible versions from the start: keyboard support, proper labels and visible focus states. Accessibility added later is always harder.

4. Add Tracking

To report completion and scores to an LMS, the course needs to talk to it through a standard like SCORM. For SCORM 1.2, the course finds the LMS's API object and calls a few functions. Here's a simplified version of what an AI assistant will typically generate:

function findAPI(win) {
  var tries = 0;
  while (win && !win.API && win.parent && win.parent !== win && tries < 10) {
    win = win.parent;
    tries++;
  }
  return win ? win.API : null;
}

var api = findAPI(window) || (window.opener ? findAPI(window.opener) : null);

if (api) {
  api.LMSInitialize("");
  api.LMSSetValue("cmi.core.score.raw", "85");
  api.LMSSetValue("cmi.core.lesson_status", "passed");
  api.LMSCommit("");
  api.LMSFinish("");
}

Real courses also need an imsmanifest.xml file at the root of the zip package, plus handling for bookmarking and for learners who close the window early. Rustici's SCORM 1.2 overview for developers explains the details clearly, and it's worth reading before you trust any generated tracking code.

5. Test in a Real LMS

Package the course and test it in your LMS or in a SCORM testing service, checking launch, completion, score, resume and exit. Then test on every browser and device your learners use.

What About xAPI and Cmi5?

SCORM 1.2 is the safest choice for broad LMS support, which is why most examples start there. If you need richer data, such as which choices learners made in a scenario or activity that happens outside the LMS, xAPI (the Experience API) sends detailed statements to a learning record store. cmi5 combines xAPI's detail with rules for how an LMS launches and tracks a course.

AI tools can write code for both, but the specs are more involved, and generated code is more likely to contain mistakes. Confirm what your LMS supports first, then have the AI follow the official specification closely and test every statement in your actual system.

How Much Faster Is It Really?

Faster than hand-coding, for sure. How much depends on the developer and the task. GitHub published research in 2022 in which developers using Copilot completed a coding task noticeably faster than those without it. That's a general coding study, not an eLearning one, but it matches what many course developers report: the biggest gains come on repetitive code, such as layouts, form handling and standard interactions.

The gains are smaller on tricky work like tracking edge cases and accessibility details, where you still need to read, test and fix carefully. Track your own hours on a pilot module to get a number you can actually plan with.

Where Does Human Review Matter Most?

AI writes code that looks right, but it isn't always right. Build these checks into every project:

1. Read every function. Ask the AI to explain anything you don't understand.
2. Test tracking end to end. Tracking bugs are invisible until learners complain or reports come up empty.
3. Test accessibility with a keyboard only and with a screen reader.
4. Check any outside libraries the AI suggests for license terms and security.
5. Never put passwords, keys or private data in course code.

Where AI still needs you: the AI is a fast pair programmer, not a quality department. A person who understands HTML, CSS and JavaScript should review and test everything before learners see it.

Is AI-assisted HTML5 eLearning Right for Your Team?

It depends mostly on skills and maintenance. This approach fits well when:

• You have at least one person comfortable with web development basics.
• You need designs, interactions or tracking that authoring tools can't deliver.
• Courses must work well on phones.
• You want to reuse components across many courses.

It's a weaker fit when:

• Non-technical staff need to update courses themselves.
• Your team turns over often and nobody owns the code.
• Courses are simple and an authoring tool already does the job well.

Many teams land on a mix: authoring tools for most courses, and AI-assisted HTML5 for showcase projects, custom simulations or interactive tools that need to live outside a typical course.

Common Pitfalls to Avoid

A few mistakes show up again and again in early AI-built courses:

• Letting the code grow without structure. Ask the AI to keep files organized and consistent.
• Copying code between courses with small differences, so fixes never spread. Build shared components instead.
• Skipping documentation. Ask the AI to write a short README for each course: how it's built, how to update it, how to package it.
• Testing only in the browser. A course that works locally can still fail inside an LMS frame.

HTML5 eLearning with AI Puts the Web Back in Your Hands

Building HTML5 eLearning with AI gives you the freedom of custom web development at a pace a small team can sustain. AI coding tools write the layouts, interactions and tracking, while you bring the design, the testing and the judgment.

Your first project should be modest on purpose: one simple module with a knowledge check and SCORM tracking, tested in your LMS from launch to completion. You'll learn more about your team's comfort with code in that one module than in a month of planning. If the course includes video, the same AI-assisted mindset applies to the media too, and I've covered how AI video editing for training speeds up production of the clips you'll embed.

← All articles