Sitemap

In the AI Era, 4 Things Ordinary People Can Do with HTML

8 min readOct 16, 2026

--

Is HTML outdated technology?

In the AI era, here are 4 things ordinary people can do with HTML—the 3rd one is the most practical

Press enter or click to view image in full size

Precisely because HTML is simple enough, AI can generate a usable page for you in seconds

I was having dinner with a friend who works in design. She asked me what she should learn, and I said: learn HTML. She paused: HTML? Isn't that something from ten years ago?

I didn't argue. I pulled out my phone and showed her something—an interactive webpage I'd generated with AI, where clicking a button would switch data charts, and it could even be opened directly on a phone. She stared at it for a while, then asked: This... how long did it take you to write the code?

I said: I didn't write any code, I just told AI one sentence. Her expression changed from "are you kidding me" to "say that again."

That's what I want to talk about today. HTML is indeed an old technology, so old that many people think it's already obsolete. But after AI arrived, things flipped around—precisely because HTML is simple and standardized enough, AI can generate a usable page for you in a second.

You don't need to know programming, don't need to install a development environment, don't even need to know what a "tag" is. As long as you can speak, AI can turn your idea into a webpage you can open, interact with, and share.

Here are 4 things I've personally tested as the most practical over this past period. Each comes with the actual prompt I used—just copy it and you're good to go.

Isn't HTML outdated?

Press enter or click to view image in full size

— HTML: old technology, new life

Many people's first reaction to hearing "HTML" is: isn't that for making websites? Who still makes websites these days?

Indeed, in the mobile internet era, everyone's using apps, mini-programs, and official accounts—HTML seemed to have become the exclusive skill of "frontend engineers." But AI changed this—the barrier to generating HTML dropped from three months of learning to code down to saying one sentence.

Why HTML? Three reasons:

  • Simple: There are only so many tags, so AI rarely makes mistakes.
  • Standard: It opens on any device, any browser.
  • Flexible: Pretty much any interaction you can think of, it can implement.

You don't need to learn programming, you just need to learn to "describe what you want"

AI will help turn your description into reality

Thing One: Turn Complex Concepts into Visualized Interactive Webpages

Have you read an article explaining economic cycles, algorithm principles, or human anatomy, where there's a wall of text and you're still confused after reading it all?

The human brain processes graphics several times faster than text. But the problem is, making an interactive chart is too hard: PS can't do animations, PPT can't do click interactions, and learning frontend development specifically for this isn't worth it. Now you don't need to.

▸ The actual prompt I used

Help me make an HTML page demonstrating the concept of "compound interest."

On the left, place a slider to adjust the annual return rate (2%-20%),

On the right, show in real time the total amount after 30 years starting from 100,000 in principal.

Use a line chart to show the growth curve for each year.

Keep the color scheme simple, suitable for mobile reading.

AI spit out a block of code, and I copied it into a browser and opened it—an interactive page where you can drag a slider and watch the curve change appeared right away.

Press enter or click to view image in full size

— Compound interest visualization

I sent this page to my mom. She dragged the slider for a while, then said: So that's how scary compounding interest is.

This is the power of visualization. Telling her ten times that compound interest matters doesn't work as well as letting her drag the slider herself.

▸ Suitable scenarios

  • Science popularization concepts
  • Data presentation
  • Product principle explanations
  • Teaching demonstrations

Thing Two: Use Webpages Instead of PPT for Presentations

I know a lot of people reading this will think: isn't PPT good enough, why switch to webpages?

Because PPT has a fatal flaw—it's page-flipping. Your content gets cut into page after page, and the audience's attention follows your flipping rhythm—they can't explore on their own.

Webpages are different. They're scrolling-based, so the audience can control the pace themselves, pausing to look closely where they want, and skimming past where they don't.

And webpages can do far more than PPT: scroll-triggered animations, click-to-expand details, embedded videos and interactive components, even putting a runnable calculator right on the page.

▸ The actual prompt I used

Help me make a single-page HTML presentation on the theme "2026 AI Tools Roundup."

Scroll from top to bottom through 5 tool categories,

Each category includes the tool name, a one-sentence introduction, and the target audience.

Add a fade-in animation for the title when scrolling to each category.

Keep the overall style clean, using a card-based layout.
Press enter or click to view image in full size

— Webpage instead of PPT

After making this, I realized this presentation method is far more flexible than PPT. No need to align text boxes, no need to adjust animation durations, no need to worry about fonts getting messed up after switching computers. HTML generated by AI opens exactly the same on any device.

At last week's department meeting, I just connected my phone to the projector and presented this page directly. A colleague asked what I used to make it, and I said: Notepad. He didn't believe me.

Get Cissy’s stories in your inbox

Join Medium for free to get updates from this writer.

▸ Suitable scenarios

  • Work reports
  • Product introductions
  • Personal portfolios
  • Event presentation pages

Thing Three: Pair It with Screen Recording for Video Material (Most Practical)

This is the thing I use the most, and the one I think has the best return on investment.

Anyone who makes short videos knows that the most frustrating part isn't writing the script—it's finding visual material. When explaining a concept, you have to find matching images, animations, screen recordings, and sometimes it takes half an hour to find footage, which is less efficient than just shooting an empty establishing shot.

Now I just have AI generate an interactive webpage and then screen-record it.

For example, if I want to talk about the "Pomodoro Technique," I have AI make a pomodoro timer webpage—a 25-minute countdown, start/pause buttons, automatic switch to a 5-minute break when finished, with a progress bar and sound effects. Then I screen-record myself operating it once, add narration, and a video clip is ready.

▸ The actual prompt I used

Help me make an HTML pomodoro timer page.

A 25-minute work countdown, automatically switching to a 5-minute break when finished.

Include start/pause/reset buttons, a circular progress bar,

And a notification sound when the countdown ends. Use a dark background with large-sized numbers.
Press enter or click to view image in full size

— Screen recording for video material

The whole process takes less than 5 minutes. AI generates the code in 30 seconds, I test it for 2 minutes, and screen-record for 2 minutes.

▸ Efficiency comparison

Previously finding material + editing took at least half an hour, now it's done in 5 minutes

And the visuals are exactly the effect I wanted, no need to settle for less

▸ Suitable scenarios

  • Knowledge-based short videos
  • Tool reviews
  • Tutorial demonstrations
  • Concept explanations

Thing Four: Build a Customized Schedule Management Dashboard

This last one might be the most addictive.

Have you tried various schedule management apps—TickTick, Notion, Feishu multidimensional tables, Apple Reminders... Each one gets used for a few days, and eventually you find there's always one or two features that don't quite fit, either too complicated or too simple.

Now I just have AI build me a dedicated schedule dashboard.

▸ The actual prompt I used

Help me make an HTML schedule management dashboard.

On the left, a today's to-do list (can add/check off/delete items),

On the right, a weekly timeline view.

At the top, show today's date and a motivational quote.

Store data locally in the browser, so it's not lost on refresh.

Use warm colors, and make the font a bit larger.

— Customized schedule dashboard

I've been using this dashboard for almost two weeks now. It has no cloud sync, no team collaboration, no AI-smart scheduling—but it's exactly what I need: simple, clean, ready to use the moment it opens.

And because I "designed" it myself, every button's position and every feature choice was made according to my own habits. This feeling of something perfectly tailored to you is something no off-the-shelf app can give you.

▸ Suitable scenarios

  • Personal schedule
  • Habit tracking
  • Reading lists
  • Project progress tracking

How to Get AI to Generate HTML? A One-Sentence Template

Reading this far, you might be wondering: these prompts look pretty complicated, what if I don't know how to write them?

Actually, you don't need to memorize anything. Just remember one universal template, and let AI fill in the rest:

Help me make an HTML page on the theme of 【what you want to do】.

Features include 【list 1-3 core features you want】.

Style requirements 【clean/dark/warm-toned/mobile-friendly】.

That's it—just three sentences. AI will fill in the details itself and generate complete, usable code.

▸ After getting the code

  1. Open Notepad (or any text editor) on your computer
  2. Paste the code into it
  3. Save it as "xxx.html" (note: the extension is .html, not .txt)
  4. Double-click this file, and it'll open in your browser

▸ Steps to follow

It's that simple.

You Might Still Want to Ask

▸ FAQ

  • Q: Can the generated HTML be shared with others?

A: Yes. You can send the HTML file directly to someone else, and they can open it just by double-clicking. If you want to turn it into an online link, you can have AI help you deploy it to a free hosting platform (like Vercel or Netlify), or use some tools that support HTML hosting.

  • Q: Is the data safe? Could it leak?

A: For HTML pages that run purely locally, all data is stored in your own browser and won't be uploaded to any server. If a page needs to fetch data online, that depends on the specific interface. Generally, personal-use tool pages run locally, with no risk of data leakage.

--

--

Cissy
Cissy

Written by Cissy

Independent developer and writer exploring open-source tools, developer workflows, Linux, macOS, and the web. I'm happy to share what I learn.