How to Make Things (with AI)

An Illustrated Primer

What is this?

This is an interactive guide that's designed to get you started making things with the help of AI. It is designed to be accessible to any beginner with curiosity, moxie and an appetite for teaching themselves new skills. Even if you are not (currently) a "technical" person, I hope you will find something interesting and educational in this guide.

This particular tutorial is focused on building software (and, in our case, a website), partly because software engineering is one of the first fields that AI tools are currently revolutionizing (and those tools are now sophisticated enough to let you build some pretty cool things, pretty quickly, even if you're new to the subject).

Various companies are starting to bring the power of those tools to disciplines other than software engineering (see, for example, Claude Cowork). So even if your ultimate goal is not to "become a software engineer," it is my hope that you will learn some useful skills here that you will soon be able to apply to other areas of interest to you.

More broadly, however, this is a tutorial about how to use technology to teach yourself new things. It is designed to familiarize you with certain patterns of using AI and the internet to learn new concepts and skills. It follows a "learn by doing" model and it is designed to enable you to teach yourself just enough, as you go, to make things.

Throughout this guide, you will:

If that sounds good to you, read on!

What you will need

In order to follow this guide effectively, you will need the following:

Step 1: Create a GitHub account

GitHub is a platform where developers store and collaborate on code. You'll need a free account to access the project and use the tools described on this page. If you already have an account, skip ahead to Step 2.

Sign up for GitHub →

Step 2: Sign up for the GitHub Copilot Pro free trial

Copilot Pro gives you access to the AI assistant that will help you write code and learn as you go. GitHub offers a free 30-day trial, so you can get started without any cost. You'll need your GitHub account from Step 1.

Start your free Copilot Pro trial →

Step 3: Meet your AI assistant

Now that you have a GitHub account and a Copilot Pro subscription, you have access to your very own AI assistant: GitHub Copilot. Think of it as a knowledgeable friend who's always available to answer questions, explain concepts, and help you figure things out — right in your browser.

To chat with your Copilot, open a new tab and go to github.com/copilot. You'll see a chat interface where you can type messages in plain English. This is called "Ask Mode" — you ask questions, and Copilot answers them. Simple as that.

Here's the cool part: for the rest of this tutorial, you'll have your Copilot open in a separate tab, ready to help whenever you need it. At the start of each new step, you'll paste a short message into the chat that tells Copilot which step you're on and points it at this tutorial's code repository. That way, Copilot can read the tutorial itself and understand exactly what you're working on. It's like giving your assistant the same instruction manual you're reading.

One really neat thing: you can point Copilot at a GitHub repository and it can actually read and understand the files inside it. The repository for this tutorial is at github.com/Davis-B-Allen/ai-illustrated-primer, and the tutorial page lives in the site/ folder. When you share this link with Copilot, it'll be able to see the same content you're reading right now.

Let's try it out! Copy the text block below and paste it into a new chat with your Copilot at github.com/copilot. 

I am following along with a tutorial on a website I found. The repo for the site can be found at https://github.com/Davis-B-Allen/ai-illustrated-primer and the page with the tutorial is found in the site/ folder. I am currently working through step 3. I'd like you to read the tutorial so you understand its context. And then, just so I know you've understood it, can you please tell me the name of the next step of the tutorial? Once you confirm that, I'll be ready to move on to the next step (since I know you'll be here to help me).

If your Copilot assistant confirmed that the next step is "Step 4: Fork the repository", you're ready to move on. And your Copilot is ready to help you!

Don't worry if the wording isn't exact — as long as Copilot mentions "Step 4" or "Fork the repository", it's understood the tutorial. If something seems off, just try pasting the prompt again.

Step 4: Fork the repository

Time to get your own copy of this project! In this step, you'll "fork" the repository — which is just a fancy way of saying you'll make your own personal copy of it on GitHub.

Copy the text block below and paste it into a new chat with your GitHub Copilot assistant, in "Ask Mode". You can access your Copilot at github.com/copilot. 

I am following along with a tutorial on a website I found. The repo for the site can be found at https://github.com/Davis-B-Allen/ai-illustrated-primer and the page with the tutorial is found in the site/ folder. I am about to start step 4 and I would like you to advise me if I get stuck or need help. So I'd like you to read the tutorial in full, and step 4 in particular, and await any questions I might have. Can you please do that?

So, what's a repository? It's basically a project folder that lives on GitHub. It contains all the files, folders, and history for a project. And forking means creating your own copy of someone else's repository under your GitHub account. It's like photocopying a recipe — you get your own version to modify however you like, without changing the original.

Here's what to do: visit the project's repository page and click the Fork button near the top right of the page. Follow the prompts to create your fork.

Go to the repository on GitHub →

Once you've forked it, you'll have your very own copy at https://github.com/<your-username>/ai-illustrated-primer. This is where you'll do all your work — safe to experiment, break things, and learn without worrying about messing up the original.

Step 5: Open your fork in GitHub Codespaces

Now it's time to open up your development environment — the place where you'll actually view and edit code. And the best part? It all happens right in your browser.

Copy the text block below and paste it into a new chat with your GitHub Copilot assistant, in "Ask Mode". You can access your Copilot at github.com/copilot. 

I am following along with a tutorial on a website I found. The repo for the site can be found at https://github.com/Davis-B-Allen/ai-illustrated-primer and the page with the tutorial is found in the site/ folder. I am about to start step 5 and I would like you to advise me if I get stuck or need help. So I'd like you to read the tutorial in full, and step 5 in particular, and await any questions I might have. Can you please do that?

A Codespace is a complete development environment that runs in the cloud — think of it as a virtual computer that's already set up with everything you need for this project. Instead of installing complicated software on your own computer, you just click a button and get a ready-to-go workspace powered by VS Code, a popular code editor.

Here's how to launch yours: go to your fork of the repository on GitHub (not the original). Click the green <> Code button, select the Codespaces tab, and click Create codespace on main. After a minute or two, a fully configured editor will open in your browser — you're ready to start building!

Step 6: Preview the site locally

Let's make sure everything is working! In this step, you'll fire up a little web server and see this site running live in your browser.

Copy the text block below and paste it into a new chat with your GitHub Copilot assistant, in "Ask Mode". You can access your Copilot at github.com/copilot. 

I am following along with a tutorial on a website I found. The repo for the site can be found at https://github.com/Davis-B-Allen/ai-illustrated-primer and the page with the tutorial is found in the site/ folder. I am about to start step 6 and I would like you to advise me if I get stuck or need help. So I'd like you to read the tutorial in full, and step 6 in particular, and await any questions I might have. Can you please do that?

The terminal is like a text-based command center for your computer (or in this case, your Codespace). Instead of clicking buttons, you type commands to tell the computer what to do. Don't worry — it's easier than it looks, and you only need one command right now.

Open the terminal in VS Code (Terminal → New Terminal, or press Ctrl+`) and run: 

npx serve site -p 8080

This starts a small local server — a program that serves your website files so you can view them in a browser. In a Codespace, a notification will pop up saying "Your application running on port 8080 is available." Click Open in Browser to see the site. You can also open the Ports panel (in the bottom bar) and click the globe icon next to port 8080.

Note: If you're developing locally (not in a Codespace), open http://localhost:8080 directly in your browser after running the serve command.

Step 7: Publish your site with GitHub Pages

This is the exciting part — you're going to publish your site to the actual internet! Anyone with the link will be able to see it.

Copy the text block below and paste it into a new chat with your GitHub Copilot assistant, in "Ask Mode". You can access your Copilot at github.com/copilot. 

I am following along with a tutorial on a website I found. The repo for the site can be found at https://github.com/Davis-B-Allen/ai-illustrated-primer and the page with the tutorial is found in the site/ folder. I am about to start step 7 and I would like you to advise me if I get stuck or need help. So I'd like you to read the tutorial in full, and step 7 in particular, and await any questions I might have. Can you please do that?

GitHub Pages is a free hosting service from GitHub that takes the files in your repository and publishes them as a website. It's perfect for static sites like this one — no server setup, no monthly fees, just your code turned into a live webpage.

The magic behind it is GitHub Actions — an automation system that can run tasks whenever something happens in your repository (like pushing new code). Your fork already includes a workflow file that knows how to build and deploy the site. You just need to flip a few switches to turn it on:

  1. In your fork on GitHub, go to the Actions tab. If prompted, click "I understand my workflows, go ahead and enable them".
  2. Go to Settings → Pages (in the left sidebar under "Code and automation").
  3. Under Build and deployment, set Source to GitHub Actions.
  4. Push a commit to main (or click "Run workflow" on the Actions tab) to trigger deployment.

After a few minutes, your site will be live at https://<your-username>.github.io/<your-repo>/. How cool is that? You just published a real website!

Next Steps

Now that you have your development environment running, it's time to build something! Here's a suggested first feature to tackle using the spec-driven development workflow.

Suggested Feature: Expand the Site with Concept Pages

Right now, this is a single page. A great next step would be to expand it into a multi-page site with a dedicated "Concepts" section — individual pages that explain the key topics you'll encounter on your journey:

You don't need to be an expert on these topics — that's what your AI assistant is for! You'll use spec-kit slash commands to guide the process:

  1. /speckit.specify — describe what you want to build
  2. /speckit.plan — create a technical plan
  3. /speckit.tasks — break the plan into tasks
  4. /speckit.implement — build it step by step

Ready-to-Use Command

To get started, copy the prompt below and paste it into your AI agent's chat. This will kick off the specification step for the Concepts pages feature: 

/speckit.specify

I'd like to add a "Concepts" section to the site. This would expand the current single-page site into a multi-page site with individual pages for key topics. Each concept page should provide a beginner-friendly explanation of the topic, written for someone with no technical background.

Topics to cover (each gets its own page):
- Git & version control
- GitHub
- GitHub Copilot & AI agents
- Spec-Driven Development & spec-kit
- Devcontainers
- GitHub Codespaces
- GitHub Pages (publishing a site to the web)

Each page should:
- Explain the concept in plain language using second-person voice ("you")
- Include at least one practical example or analogy
- Link to official documentation or a reputable external reference
- Include a "back to home" link to return to the main page

The main page (index.html) should be updated with a navigation section or links to each concept page.

A Tip: Ask Mode

If you run into something you don't understand — a term, a concept, an error message, anything at all — you can switch your AI agent to "ask" mode at any time. Just type your question in plain English and it will explain things for you. There are no silly questions — that's exactly what your AI assistant is there for.