Classwork 2

Vibe Coding

What is Vibe Coding?

Vibe coding is an artificial intelligence-assisted software development technique popularized by Andrej Karpathy in February 2025. The term was listed in the Merriam-Webster Dictionary the following month as a “slang & trending” term. (Wikipedia, 2025)

What are HTML and JS?

• HTML (HyperText Markup Language) is the standard language for creating web pages.
  • It defines the structure of a webpage.
    
  • A webpage is made up of HTML elements.
    
  • These elements instruct the browser on how to display the content.
• JavaScript (JS) is a programming language that enhances web interactivity.
  • It runs directly in the user’s browser, reducing server load.
  • It enables dynamic content, user interactions, and animations.
• Analogy:
  • HTML = The structure of a house (walls, roof, foundation).
    
  • JS = The interactive elements (automatic doors, lights, smart devices).

Step 1. Start with this prompt (use exactly):

“Create a single-file HTML/JS page to play perfect tic-tac-toe vs. human.”

• e.g., Prof. Choe’s Tic-Tac-Toe

Step 1-1 Prepare your text editor:

---

Windows

1. Press the Windows key, type Notepad, and press Enter.
   
2. Paste the HTML code from your AI.
   
3. Go to File → Save As.
   • Change Save as type to All Files.
     
   • Enter a name like tic-tac-toe.html.
     
   • Select the location (Desktop, Documents, etc.).
     
   • Set Encoding to UTF-8.
     
   • Click Save.
     
4. Double-click the file to open it in your default browser (Edge, Chrome, etc.).

---

Mac

Set up TextEdit (one-time)

1. Press Command + Space to open Spotlight.
   
2. Type TextEdit and press Enter.
   
3. Press Command + , to open Settings.
   • Under Format, select Plain Text.
     
4. Quit TextEdit (Command + Q).

Re-open TextEdit for coding

5. Press Command + Space, type TextEdit, and press Enter.
   
6. Click Show Options.
   • Under Plain Text Encoding, select Unicode (UTF-8).
     
7. Click New Document.
   
8. Paste the HTML code from your generative AI.
   
9. Save the file (Command + S):
   • Name it tic-tac-toe.html.
     
   • Ensure the extension is .html.
     
   • Choose a location (Desktop, Documents, etc.).
     
   • Click Save, and if prompted, choose Use .html.
     
10. Double-click the file to open it in your default browser (Safari, Chrome, etc.).

---

Step 2. Add an option for two-player mode.

• e.g., Prof. Choe’s Tic-Tac-Toe with the Two-player Mode

Step 3. Make a 4×4 tic-tac-toe version (if your current build is only 3×3).

• e.g., Prof. Choe’s 4×4 Tic-Tac-Toe