contrapaul.com/make/Code with AI

A guide for high school students

Code with AI, not instead of it.

An AI assistant can write code for you in seconds. But it cannot tell you when that code is wrong. It cannot explain the words that everyone around you is using. And when your project breaks the day before it is due, the problem is still yours. This site is for the parts that stay yours: knowing what a repository is, reading an error message, and asking a good question.

Open the glossary How to work with an assistant

Start with the words

The hardest part of learning to code with AI is not the code. It is the vocabulary. Everyone who codes, including the AI, uses words that nobody taught you (yet!). Imagine an answer that starts Just clone the repo and run it from the CLI. If you do not know three of those words, the answer is useless. If you paste the commands anyway without understanding them, you can break your project.

So the glossary is the first part of this site I built, and you should come back to it often. Every term is explained in plain English. The English term is always shown, so you can find it on a button, in a menu or in an answer from someone else.

What the glossary covers

Move your mouse over any underlined word on this site to read a short version, without leaving the page.

Built for English language learners

  • The glossary has a toggle: English or 中文.
  • English terms stay visible in both modes.
  • Chinese can be added, but doesn't replace English.
  • Definitions are written twice, not machine translated.

The goal is understanding concepts in your native language (if Chinese!), but ensuring that you also learn terms in English, as it is the global standard for code.

Intentional Translanguaging

Almost every menu, button and error message you will see is in English. Imagine a student who learns only 仓库. The direct translation is 'warehouse', so dropping 仓库 into a translator will lead to some confusion, as the contextual translation is repository, such as in GitHub.

For this reason the toggle never hides the English terms. When you turn it on, the explanation changes to Chinese. I promise you can ask professional programmers and software developers and they'll confirm the importance of learning the English coding words. They'll eventually allow you to talk about this stuff with people all over the world.

What an AI assistant can and cannot do

A language model predicts text. It is very good at this. Writing code is mostly a text problem, so the results can be impressive. But predicting is not understanding. A wrong answer sounds exactly as sure as a right one. The assistant also cannot see your screen, run your program or know what you tried an hour ago.

This leads to some practical habits. Ask for one piece at a time. Run it. Read the error yourself before you paste it. Commit before you accept a large change, so you can always return. None of this means you should distrust the tool. It means you stay the person who knows what your project does.

Four habits worth having early

  • Never accept a line you could not have written yourself, until you understand it.
  • Run the code after every small change, not after fifty.
  • Give the assistant the real error text, not a description of it.
  • Keep the project in version control from the first day.

The Workflow tab will explain each of these in detail.

Where to go next

The glossary is finished and ready to use. The other three tabs are being written.

Glossary

Every technical word on this site, in plain English and in Chinese. Start here.

Setup

Getting an editor, a terminal and Git working on your own machine.

Workflow

How to build a real project with an assistant, one small step at a time.

Setup

This page takes you from an empty laptop to your own webpage in a browser. It takes about 30 minutes. Do the steps in order. Each step ends with a picture. When your screen looks like the picture, go to the next step.

Your computer

  1. 1 What you need

    • A laptop with Windows 10 or 11, or with macOS.
    • An internet connection. VS Code is a large download: about 250 MB. about 550 MB on a Mac. On school Wi-Fi, this can take a few minutes.
    • At least 2 GB of free space on your drive.
    • About 30 minutes, and the password for your laptop, in case it asks.

    You are ready when you have all four.

  2. 2 Install VS Code

    VS Code is the code editor you will use. It is free, and Microsoft makes it.

    1. Go to code.visualstudio.com/download.
    2. Click the big Windows button. The installer downloads.
    3. Open the file. Its name starts with VSCodeUserSetup.
    4. Click I accept the agreement. Then click Next.
    5. Click Next again until you see Select Additional Tasks.
    6. Check that Add to PATH is ticked. Also tick the two boxes that start with Add "Open with Code" action. They help you later.
    7. Click Next. Then click Install.
    8. Keep Launch Visual Studio Code ticked. Click Finish.
    The Select Additional Tasks page of the VS Code installer, with Add to PATH and both Open with Code boxes ticked.
    1. Go to code.visualstudio.com/download.
    2. Click the big Mac button. A .zip file downloads to your Downloads folder.
    3. Open Downloads. If you see the .zip file, double-click it.
    4. You now have an app called Visual Studio Code. Drag it into your Applications folder.
    5. Open Applications. Double-click Visual Studio Code.
    6. Your Mac asks if you are sure, because the app came from the internet. Click Open.
    A Finder window, with Visual Studio Code being dragged into the Applications folder.

    You are done when VS Code is open and you can see the Welcome page.

    VS Code open for the first time, showing the Welcome page.

  3. 3 The VS Code window

    Learn these five names first. Every step after this one uses them.

    The VS Code window with a project open. Five parts are numbered: 1 Activity Bar, 2 Side Bar, 3 Editor, 4 Panel, 5 Status Bar.
    1. Activity Bar: the icons on the far left. Each one opens a view.
    2. Side Bar: the panel next to the icons. Explorer shows your files here.
    3. Editor: the big area in the middle. You write code here.
    4. Panel: the area at the bottom. The terminal opens here.
    5. Status Bar: the thin bar along the bottom edge.

    The Panel may be closed. To open the terminal in it, press Ctrl+`. This is the same on Windows and Mac. The ` key is to the left of 1.

    You are done when you can point at all five parts on your own screen.

  4. 4 Make a folder and a file

    A website is a folder of files. You will make the folder and the first file now.

    1. In VS Code, click File. Then click Open Folder…
    2. Go to your Documents folder.
    3. Click New folder or New Folder. Name it my-site.
    4. Open my-site. Then click Select Folder or Open.
    5. VS Code asks if you trust the authors of the files. You are the author. Click Yes, I trust the authors.
    6. In the Explorer, move your mouse over MY-SITE. Click the New File… icon.
    7. Type index.html and press Enter. The file opens in the editor.
    8. Copy this code into the file:
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>My first page</title>
</head>
<body>
  <h1>Hello! This is my page.</h1>
  <p>I made this with VS Code.</p>
</body>
</html>
    1. Save the file. Press Ctrl+S or Cmd+S.
    The Explorer in the Side Bar, with the mouse over MY-SITE and the New File icon showing.

    A dot on the file's tab means it has changes that are not saved. When you save, the dot goes away.

    Why the name index.html? A browser opens the file with this name first. It is the front page of your site.

    You are done when index.html is in the Explorer, the code is in the editor, and the tab has no dot.

    VS Code with index.html in the Explorer and the starter code in the editor. The tab has no dot.

  5. 5 See your page

    Now you will see your page next to your code. First, you need one extension.

    1. Click the Extensions icon in the Activity Bar. It looks like four small squares.
    2. Type Live Preview in the search box.
    3. Find Live Preview by Microsoft. Check the name of the publisher, because other extensions have similar names.
    4. Click Install.
    5. Click index.html in the Explorer to go back to your file.
    6. Click the Show Preview button at the top right of the editor.
    The Extensions view, with Live Preview by Microsoft at the top of the results and its Install button.

    You can also right-click index.html in the Explorer and click Show Preview. Your page opens next to your code. Live Preview runs it on your own computer, so only you can see it.

    You are done when you see Hello! This is my page. as a big heading next to your code. This is your first webpage.

    VS Code with index.html on the left and the preview on the right, showing the heading Hello! This is my page.

  6. 6 Change one thing

    1. In the editor, find the line with <h1>.
    2. Change the words between <h1> and </h1>. Write your name, or anything you like.
    3. Watch the preview. It changes while you type.
    4. Save the file.

    The preview shows your change before you save. A normal browser only shows what is saved. So save each change you want to keep. If you make a mistake, press Ctrl+Z or Cmd+Z to undo it.

    This is the loop you will use for everything. Change one thing, look at the result, then keep it or undo it. The Workflow tab explains this loop in detail.

    You are done when the preview shows your new heading, and the tab has no dot.

    The preview showing a changed heading, next to the edited h1 line in the editor.

Coming next

Steps 7 to 9 are being written. They cover installing Git, saving your first commit, and turning on GitHub Copilot.

Workflow

How to run a real project alongside an assistant: small steps, frequent commits, and reading a change before you keep it.

Not written yet

This page is a placeholder. The four habits listed on the home page are the outline it will follow.

Prompting

How to ask well: what to include, what to skip, and why pseudocode gets you better code than a description does.

Not written yet

This page is a placeholder. See prompt and context window in the glossary for the idea underneath it.

Glossary

This page explains every technical word on this site in plain English. Move your mouse over any underlined word on the site to see a short version, without leaving the page. The 中文 switch shows the explanations in Chinese. The English term always stays.