Class today

• Coding with AI!
• Download Cursor right now — it’s VS code with AI capabilities built in
  • Download Prettier and Live Server extensions
• As part of homework, you will need to submit a refined concept for your final project
  • Expecting sketches, details, or even a working prototype with code
  • You have received feedback on your concept
  • Grades for Hypertext will be posted by Friday
• End of semester is approaching: we have 3 more classes to learn including today

Debugging

As we move to coding with AI, you’ll need to focus your attention on troubleshooting and debugging. LLMs will produce lots and lots of code, and it won’t always be correct. The LLM is your assistant, and it’s your job to guide it and check its work.

Use DevTools, as we’ve been using in the past.

• Console tab: console.log() — you can even ask AI to do this for you
  • Pay attention to the line of the error shown. Look at what variables are referenced in that line, and log them to see if they have results
  • You can comment out pieces of code, run it, and see if errors show up. If no errors, uncomment and repeat
• use the Elements tab: to figure out whether a specific element is showing up on the page
• Network tab: to figure out if assets like images or other files were loaded

We will do a workshop on DevTools next class. For today, let’s have fun with AI-assisted coding.

Coding with AI

Intro

We’ll be using Cursor for development today. Cursor is VS code with AI capabilities layered on top. You can use it with any off the shelf LLM model (OpenAI, Claude, Deepseek), but I recommend using it with Claude, as it has shown to be the best model for development.