The Ultimate Student Guide to Coding with AI in VS Code

Welcome! If you are learning HTML and JavaScript, you are in the right place. You no longer have to memorize every single line of code or spend hours staring at a typo. You now have AI assistants that act like a personal tutor built right into your screen.

This guide will show you how to set up Visual Studio Code (VS Code) from scratch, how to securely use AI assistants (including your CUNY-provided M365 Copilot), and how to publish your website to the world.

Part 1: Setting Up Your Workspace (The Basics)

Visual Studio Code (VS Code) is the industry-standard application for writing code.

1. Go to code.visualstudio.com and download the installer for Mac or Windows.
2. Install and open the application.
3. On your computer's Desktop, create a new empty folder and name it MyWebsite.
4. Drag and drop the MyWebsite folder into the open VS Code window. This tells VS Code, "This is my workspace."

Part 2: Choosing Your AI Assistant & Protecting Your Data

When using AI for schoolwork, privacy is the top priority. Under the Family Educational Rights and Privacy Act (FERPA), your educational data must be protected. Many free, public AI tools use your code to train their models, which means your work is no longer private.

To keep your coursework safe and compliant, you should use these two secure options:

Option A: The Local AI (No Login, Total Privacy in VS Code)

This is the most private method possible. The AI runs entirely on your computer's hardware. It requires zero accounts, works offline, and ensures your code never leaves your laptop.

1. Install Ollama: Go to ollama.com and install it.
2. Download the Model: Open your computer's Terminal (Mac) or Command Prompt (Windows) and type: ollama run llama3. Once it finishes, you can close the terminal.
3. Connect to VS Code:

• In VS Code, click the Extensions icon on the far left (four building blocks).
• Search for Continue and click Install.
• Click the new Continue icon on your sidebar. At the bottom of the panel, select Ollama - llama3.

  ---

Option B: CUNY M365 Copilot (The FERPA-Safe Web Assistant)

CUNY provides all students with an official Microsoft 365 Copilot account. This is covered by CUNY's legal contract to ensure Enterprise Data Protection (EDP).

Is it worth using Option B?

While Option A is faster for writing lines of code, Option B is often a better "Learning Companion" because:

• Internet Access: It can search documentation sites like MDN or StackOverflow for the latest fixes.
• Complex Reasoning: It uses a much larger model that is better at explaining why a bug is happening.
• Multimedia Support: You can upload a screenshot of your broken website, and it can "see" the error to help you.

How to use it safely:

1. Go to copilot.microsoft.com.
2. Click Sign In and use your official CUNY Login (e.g., First.LastNN@login.cuny.edu).
3. Check for the Shield: Look for a Green Shield or "Protected" badge at the top. This confirms your data is not being used to train public models.

Part 3: Coding with AI (HTML & JavaScript)

1. Creating Your Files

In VS Code, click the New File icon and create:

• index.html (Must be all lowercase!)
• script.js

2. Generating a Template

• Using Local AI (Continue): In index.html, press Ctrl + L (Windows) or Cmd + L. Type: "Write a standard HTML5 template. Link it to script.js and add a button with the ID 'colorBtn'." Click Apply.
• Using CUNY Copilot (Web): Type the same prompt in your browser, then copy/paste it into VS Code.

3. Creating Functions

1. Open script.js.
2. Ask your AI: "Write a JavaScript function that changes the background to a random color when 'colorBtn' is clicked. Explain each line."
3. Paste the result into your file and save it (Ctrl + S).

   ---

Part 4: Sharing Your Website (GitHub Pages)

Step 1: Upload to GitHub

1. Create a free account at github.com.
2. In VS Code, click the Source Control icon (the branch icon) on the left.
3. Click Publish to GitHub. Follow the prompts to log in and select Public Repository.

Step 2: Make it a Live Website

1. Go to your repository on github.com.
2. Click the Settings tab at the top.
3. Click Pages on the left-hand sidebar.
4. Under Build and deployment > Branch:

• Change "None" to main.
• Ensure the folder next to it is set to /(root).
• Click Save.

5. Check the Status: Click the Actions tab at the top. You will see a yellow circle (building) that eventually turns into a green checkmark (deployed).
6. Find your Link: Go back to the Pages section. Once finished, a bar will appear at the top saying: "Your site is live at..." Troubleshooting Note: If you see a "404 Error," double-check that your file is named exactly index.html (no capital letters) and that it is located in the main folder, not a sub-folder.

Congratulations! You've built a secure, AI-powered website that respects your privacy.