Skip to content

This is a new introduction lesson that I (Mason) wanted to develop. This lesson talks about AI and the industry and how AI is impacting everything we do. Plus it goes over the importance of knowing your code, and why vibe coding might not be the best choice.

Notifications You must be signed in to change notification settings

hacksu/first-lesson-ai-and-proper-usage

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 

Repository files navigation

first-lesson-ai-and-proper-usage

Pre reqs

  • Vscode
  • Github Copilot extension in vscode and signed into

Slides

Main hackus intro

AI VS LLMs

Lesson

This is a new introduction lesson that I (Mason) wanted to develop. This lesson talks about AI and the industry and how AI is impacting everything we do. Plus it goes over the importance of knowing your code, and why vibe coding might not be the best choice.

Begin this lesson after HacKSU club introductions.

These intros include the organizers, the club, and additional information about meetings and events HacKSU has planned.

Lesson start

I believe a good lesson always starts by gaiging the audience and figuring out what they know and what they already use. This can help you pivot in one direction over another, while also keeping engagement and understanding what the audience can get out of the meeting.

What even is AI programming.

A few questions that you could potentially ask (use this as a judgement of time, if one question has a lot of participation it may not be necessary to ask more questions)

  1. Who all has completed a personal coding project before? If so what did you make?
  2. Who has used AI as a coding assistant before? What was the tool or AI model that you used?
  3. If you experience a bug in your code, what is the first thing you do to figure out the issue?
  4. If ChatGPT gave you a fully working program in a langauge you did not understand, would you use it?

What is the difference between AI and LLMs

You’ve probably heard a bunch of terms floating around like AI, LLMs, agents, tools, and AI assistants. It can be confusing to figure out what’s what.

  • AI (Artificial Intelligence) is a broad term. It’s like saying vehicle. That includes everything from Teslas to bicycles with motors. AI can mean anything from your phone’s autocorrect to advanced robotics or self-driving cars.
  • LLMs (Large Language Models) are a specific kind of AI. Think of them like the Teslas in the vehicle analogy. They’re trained on massive amounts of human language and code, and they’re really good at understanding, predicting, and generating text, including code.

So when you use something like ChatGPT or Claude to write Python code, you’re using an LLM, which is a type of AI designed to work with language. It’s not thinking like a human, but it’s learned patterns based on billions of examples. That’s why it can generate a joke one minute, and a sorting algorithm the next. It’s also why you need to be careful. LLMs are powerful assistants, but they don’t know if the code they generate is correct or secure they’re just guessing what looks right based on patterns. Your job as a developer is to guide them with clear prompts, check their work, and make sure that what you’re building is safe, readable, and actually does what you intended.

Proper AI coding assistant usage.

You’ve probably heard the term “vibe coding”. It’s when people rely on LLM tools like ChatGPT or GitHub Copilot to generate entire projects without really knowing how the code works. It feels productive. You build something fast. But you often don’t understand what you just built.

Now, that might be fine for personal projects or quick MVPs (minimum viable product). If you’re prototyping an idea for yourself, speed over structure. But the moment your code needs to be maintained, secured, or shared with others? That’s where vibe coding breaks down.

Many companies in the industry all say one thing: no one is hiring vibe coders. They're hiring developers who can reason through a problem, collaborate with tools like AI, and confidently read, modify, and explain code in a codebase.

AI should be your assistant — not your author. Great developers know how to:

Ask AI for help with boilerplate or syntax,

Prompt AI to explain unfamiliar concepts in plain language,

Use AI to refactor or optimize code they’ve already written.

But most importantly, they know when the AI is wrong and that only happens if you understand the code it gives you.

Today, we’re going to look at examples of vibe coding gone wrong, and then walk through how to use AI to write clean, understandable, secure, and production-ready code, even as a beginner. By the end, you’ll walk away knowing how to prompt better, code smarter, and learn faster all without giving up control to the bot.

This is probably one of the most important things to touch on:

“AI won’t replace you. But someone who knows how to use AI better than you might.”

But you need to be careful with AI, especially in school. Schools are usually slow to adabt to new technologies, and it can take time for them to create lessons surrounding AI. So it is important to be aware of the teachers rules for the courses. If they allow AI usage, then great! But if they forbid AI usage, then be cautious. They may have good plagarism checkers that look at your codes variables names, comments, and formatting to detect potential AI generated code.

Some examples of AI programming tools: ChatGPT Claude Claude Code - IDE integration Cursor - IDE integration Copilot - IDE integration

DEMO: The Vibe Coding Trap

To begin this demo, we want to make sure everyone has access to some kind of LLM, chatbot, or AI agent (IDE Integration)

If there are some people without one of these things, we can go over how to set up Copilot in visual studios.

Download VScode: https://code.visualstudio.com/download

Then open up VScode and in the extensions tab you will need to install Github Copilot.

Once GH Copilot is installed, then you need to click on its icon and follow the steps to login and make an account if needed. Then it should be all good and ready to go! It is important to note that this only has limited access to AI tools, and that you can have better access but you need to pay.

Demo Start: (The attendants should follow along with me :) )

To bring the point across of using vibe coding to build your app without knowing what is going on, we will need to prompt the AI to use a langauge we had never heard of or worked with before.

We can ask it something like,

Generate me a haskell program that fetches a web page and prints the first 100 characters. Then take these characters and create a dictionary that stores the character and the amount of times it appears in that first 100 generated.

Then try to figure out how to get the program to run. AND STRUGGLE, mwhahahahaah!!!! Even though it may be a little embrassing, showing the students that you are struggling is important to bring the point across that vibe coding comes with issues.

After spending some time failing, go back to the LLM and ask it how to run haskell, and then explain the langauge of Haskell and the code that it created for you line by line. This helps you to first of all, run manually the code you created and also helps you better understand what each peice does and how it fits together.

DEMO TWO: Properly using AI to your advantage!

Now it is time to have a new example to show how to use AI to make a project.

Now for example we could have AI generate a whole project for use using this prompt:

Write a single Python file that uses pygame to make moving dot-lights on the screen.
The lights should change brightness randomly and not look boring.
They should hit the borders and not disappear.
 When I click or drag with the mouse, they should kind of zoom towards that place in a floaty way.
Make sure to pack everything into one file with no separation, use really short or random variable names (like a, bb, xx1), don’t add comments, and don’t try to explain what the code does.
Put all the logic inside big loops and inline math instead of functions if possible. The visuals should still look pretty and interactive, but the code should be ugly and difficult to follow.

But that makes it really hard to understand the code and also it becomes very messy. In addition, even though it works, I am not really learning anythign in the process. I can use AI all I want, but if I am not learning anything, then how will I be able to provide value to companies in the future.

A great way to have AI work as an assistant and a way to learn is by going through your project step by step.

Lets say we want to make a video game in Python. We can first start by saying

I want to make a video game in python. What are somethings that I can use with python to make a video game?

Now we can get some useful information regarding what libraries we can use to build a video. Let us expand off of Pygame, a very popular library for building 2D video games.

While using strong naming conventions and techniques. Help me set up a pygame window and a basic animation loop. Include comments where necessary, in addition to when I ask for new code changes, only show the code that should actually be changed. Do not repeat code that should stay the same.

Now we can start to add more complex things and focus more on what we actually would like to create.

Now, let’s add particles that move randomly like fireflies. How are they able to move?
Can you suggest a way to make them glow/fade in and out smoothly? What are two different ways we could potentially do, and what are the pros and cons.
Now let’s handle bouncing off the edges. Can you also explain how the fireflies now when they reach the edge of the pygame window?
Add mouse interaction so fireflies are attracted to clicks. How does pygame know when we actually click?

Example prompt:

Write a clean, well-commented Python program that uses pygame to create an interactive visualization of particles that move around the screen like fireflies. They should glow, fade in and out, and bounce off the edges. Add mouse interaction so when I click or drag the mouse, the fireflies are attracted to that point with a smooth animation. Make the visuals colorful and beautiful, almost like a digital art piece. The code should be self-contained and run as-is.

Ask the participants to read the functions and see if they can understand what is going on. Ask them further how they could extend upon and resuse some of the code.

Explain the following program that I created, and what each method does.

Questions to ask: Would you feel more comfortable running this code now, or making changes to this code now? How do these changes reduce the potential of bugs and attacks?

Final demo moments

This is a part of the lesson where you can have some fun with the project you are working on. In addition to asking some prompts to make each piece come together.

For example, you can ask the AI to:

Rewrite the full program with clean structure, secure input validation, and inline comments in a way that’s production ready and easy to maintain.

This helps make the code more stable and potentially ready for production, mind you testing is still needed.

ALSO ask the AI to take the prompts you just asked it, and to generate one prompt that accomplishes the same thing, with the same level of quality.

About

This is a new introduction lesson that I (Mason) wanted to develop. This lesson talks about AI and the industry and how AI is impacting everything we do. Plus it goes over the importance of knowing your code, and why vibe coding might not be the best choice.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published