1-Pager
Back to Plan
Launch

🤖 AI Prompt Jam in VS Code

Competencies Critical Thinking & Problem Solving Self Directed Learning Content Expertise Effective Communication Collaboration Academic Mindset
Elements Product Core Content Project Launch Community Partners Essential Question Critique and Revision
Settings Submission Required

Use AI to generate one small webpage element such as a heading section, image block, or button, then paste the HTML, CSS, or TypeScript into VS Code and run it. In a small group, compare what loaded correctly, what broke, and what needed human fixes. Capture your tested prompt, one screenshot, and brief notes about where AI helped and where your judgment was necessary.

Plan day
Day 1
Duration
90 min
Grouping
Small Group
Steps
7 steps

Lesson plan

7 steps · 90 min
# What teachers do Time
1 [] Open the project launch by introducing the goal of the prompt jam, naming the essential question, and showing a very short example of how AI can generate a small webpage element that still needs human testing and judgment in VS Code. 10 min
2 [] Set up the workspace by opening VS Code, creating or opening a simple project folder, making an index.html file and optional style.css or script.ts file, and checking that everyone can run a basic page in the browser. 15 min
3 [] Write and submit one focused AI prompt asking for a small webpage element such as a heading section, image block, styled button, or simple interactive feature, then paste the returned code into your files. 15 min
4 [] Test the generated code in VS Code and the browser, notice what loads correctly or breaks, and make at least one human fix or one prompt revision so the element becomes clearer, more functional, or more useful. 20 min
5 [] Meet with your small group to compare prompts, code results, errors, and fixes, then discuss where AI helped, where it was unclear, and what required human decision-making. 15 min
6 [] Capture your project evidence by saving the tested prompt, taking one screenshot of the webpage element, and writing brief notes on what worked, what broke, what you changed, and one question you still have about building your website. 10 min
7 [] Close with a quick share-out and teacher check-in where you name one technical skill you gained today and one next step for making your future website more useful and clear. 5 min
Total 90 mins
Preparation (10 items)
  • Confirm that every device has VS Code installed, internet access, and a working way to preview HTML files in a browser.
  • Prepare a starter project folder with blank index.html, style.css, and script.ts files for students who need more structure.
  • Test one sample AI prompt in advance that generates a simple HTML or CSS element and verify that it can be run during the launch demo.
  • Prepare a short visible checklist for the artifact requirements: tested prompt, screenshot, notes on AI help, notes on AI limits, and one human fix or prompt revision.
  • Set up a simple place for students to save evidence, such as a shared folder, LMS submission, or slide template.
  • Plan small groups of 3 to 4 students that balance confidence levels with coding and technology tools.
  • Prepare a brief mini-demo on how to create files, paste code, save changes, and refresh the browser in VS Code for students with limited experience.
  • Have 2 or 3 fallback prompt options ready for students who struggle to write a first prompt, such as asking for a hero section, image card, or button with a click response.
  • Prepare quick troubleshooting supports for likely issues, including missing file links, unclosed HTML tags, incorrect CSS selectors, and TypeScript or script connection problems.
  • Create a short check-in script for the closing reflection so each student can report one technical skill gained and one next step.
Student-facing instructions
You will use AI and VS Code to test one small piece of webpage code and study what AI can and cannot do well. Your materials are a computer with VS Code, browser access, internet or AI access, and a place to save your screenshot and notes. First, you will open or create a simple project with an index.html file and optional style.css or script.ts file. Then you will write one clear AI prompt asking for a small webpage element such as a heading section, image block, styled button, or simple interactive feature. You will paste the AI response into your files, run the page, and test whether it works. Your task is to notice what loads correctly, what breaks, and what needs your own judgment to improve. You will make at least one human fix or revise your prompt once. After that, you will compare results with your small group, explain what happened, listen to others, and discuss where AI helped and where human thinking mattered. Before the end, you will save your tested prompt, capture one screenshot, and write brief notes about what worked, what broke, what you changed, and one question you still have. The goal is to begin your website project by practicing real coding workflow, learning how to question AI output, and identifying what makes a webpage element useful for a real audience.