Useful Skills

Foundational skills that make everything else easier

Master these three skills and you'll unlock the full power of AI: Markdown for documents, HTML for interactive content, and GitHub Pages to publish and share your creations with the world — for free.

Markdown — For Documents & Text

Markdown is a super simple way to format text. It's what AI uses to format its responses — headings, bold text, bullet lists, tables. It's clean, free of unnecessary formatting, and easy to read and edit. When you ask AI to create documents, ask for Markdown format — then paste it into Google Docs or your word processor.

What You Type

# My Report Title ## Introduction This is a paragraph with **bold** and *italic* text. ### Key Points - First important point - Second important point - Third important point | Country | Capital | |-----------|-------------| | France | Paris | | Japan | Tokyo | | Brazil | Brasilia |

What You See

My Report Title

Introduction

This is a paragraph with bold and italic text.

Key Points

  • First important point
  • Second important point
  • Third important point
CountryCapital
FranceParis
JapanTokyo
BrazilBrasilia

How to Use Markdown with Google Docs

Step 0: Preparation

First, enable native Markdown support in Google Docs: go to Tools → Preferences and check "Enable Markdown". This unlocks features like Paste from Markdown and automatic Markdown formatting.

For advanced Markdown use, you may optionally install the Docs to Markdown plugin from the Google Workspace Marketplace. However, native Markdown support is more than enough for most users and our scenarios.

Step 1: Ask AI for Markdown

When asking AI to write a document, add: "Please output in Markdown format". The result will be clean, well-structured text without any messy formatting.

Step 2: Paste into Google Docs

Copy the Markdown text from your AI tool, then in Google Docs use Edit → Paste from Markdown (or right-click and select "Paste from Markdown"). Google Docs will automatically convert the Markdown into beautifully formatted text — headings, bold, lists, links, and more will all render correctly.

Note: The Paste from Markdown option is only available if you completed Step 0 (enabling Markdown in Preferences). If you don't see it, go back to Tools → Preferences and make sure "Enable Markdown" is checked.

Step 3: Download Google Docs as Markdown

Google Docs can export directly to Markdown! Go to File → Download → Markdown (.md). This gives you a clean Markdown file you can feed back to AI, use in GitHub, or convert to any other format. It works the other way too — you can open a .md file in Google Docs and it will render with full formatting.

Why Markdown over regular text?

Markdown is clean — no hidden formatting that breaks when you copy-paste. It's universal — works everywhere. And it's how AI thinks — you'll get better results when you speak its language.

HTML — For Interactive Content

When you want to create something that people can open in a browser and interact with — like a website, a quiz, an interactive chart, or a presentation — ask AI to give you HTML. You don't need to learn HTML. The AI writes all the code for you. You just save the file and open it in Chrome or any browser.

What You Ask AI

"Create an interactive quiz about the French Revolution with 10 questions, a score tracker, and colorful design. Give me a single HTML file I can open in a browser." The AI generates ALL the code: - HTML (the structure) - CSS (the design) - JavaScript (the interactivity) You just save it as a .html file and open it! That's it.

What You Get

French Revolution Quiz

Question 3 of 10

When did the Bastille fall?

A) July 14, 1789
B) June 20, 1791
C) August 10, 1792

Score: 2/2 correct

How It Works — It's Really This Simple

1. Ask AI to create whatever you want as "a single HTML file" — 2. Copy the code AI gives you — 3. Save it as something.html on your computer — 4. Double-click to open in your browser. Done!

You can share the file with anyone — they just open it in their browser. No apps to install, no accounts to create. This very website you're reading right now is an HTML file created with AI.

When to Use What

Use Markdown

Essays, reports, notes, study guides, emails, documents you'll paste into Google Docs or Word

Use HTML

Quizzes, interactive presentations, games, charts, websites, anything others will view in a browser

Pro Tip

You don't need to learn either format. Just tell AI what you want and say "in Markdown" or "as an HTML file" — AI does the rest!

Key Insight

The more you understand these formats, the more powerful your AI results become. It's about communication, not coding.

Mermaid — Diagrams from Text

Mermaid lets you create professional diagrams — flowcharts, timelines, mind maps, sequence diagrams — just by writing simple text. AI writes the Mermaid code for you. Just describe your diagram, paste the code into the Mermaid Live Editor, and export it. You can also use Mermaid to explain complex flows and processes to AI.

What You Ask AI

"Create a Mermaid flowchart showing how a student decides what to study based on their mood." AI generates the Mermaid code: graph TD A[How are you feeling?] A -->|Energetic| B[Math] A -->|Creative| C[Art] A -->|Curious| D[Science] A -->|Tired| E[Light Reading]

What You Get

How are you feeling?
Energetic
Math
Creative
Art
Curious
Science
Tired
Reading

Rendered from Mermaid code

Why Mermaid?

Mermaid supports flowcharts, sequence diagrams, Gantt charts, mind maps, timelines, pie charts, class diagrams, and more. The code is text-based, so AI can generate and modify it easily. GitHub renders Mermaid natively in Markdown files, and the Live Editor lets you export as PNG or SVG.

Pro tip: You can also use Mermaid to explain complex flows to AI — paste a Mermaid diagram in your prompt so AI understands your process or architecture at a glance.

Publish for Free — GitHub Pages

You've created an amazing interactive app, game, or website with AI. Now what? Share it with the world for free using GitHub Pages. Anyone with the link can use your creation — no hosting fees, no server setup, no technical knowledge needed.

Step 1: Create a Free GitHub Account

Go to github.com and sign up for a free account. This is your home for publishing websites and sharing code.

Step 2: Create a New Repository

Click "New repository", give it a name (this becomes part of your URL), and make sure it's set to Public. Think of a repository as a folder for your project.

Step 3: Upload Your HTML File

Click "Add file" → "Upload files" and drag your HTML file in. Important: name your main file index.html — this is what GitHub Pages will show when someone visits your site.

Step 4: Enable GitHub Pages

Go to your repository's Settings → Pages. Under "Source", select "Deploy from a branch", choose "main" branch, and click Save. In a few seconds, your site is live!

Step 5: Share Your Link

Your site will be live at https://yourusername.github.io/your-repo-name/. Share this link with anyone — they can open your interactive creation instantly, on any device. This very website is hosted on GitHub Pages!

100% Free

No hosting fees, no credit card, no limits for personal projects. GitHub Pages is completely free.

Instant Updates

Upload a new version of your file and the site updates automatically. Iterate fast with AI.

Share Anything

Games, quizzes, portfolios, interactive stories, data visualizations — if AI can build it, GitHub Pages can host it.

Pro Tip

You can even use a custom domain name! GitHub Pages supports free HTTPS and custom domains for a professional touch.