"Vibe coding" involves describing what you want to build and letting an AI write the code for you. You can also test and refine the code with the AI.
In this activity, you'll use an LLM to build a web app that loads and visualizes the basketball measurements data.
What Is a Web App?
A web app is a program that runs in your browser, like a web page that does something interactive.
In this activity, your app will load the measurements CSV, display a chart, and let users explore the data.
The app will be a single HTML file that you can open directly in any browser.
Step 1: Choose an LLM That Can Write Code
You may need to check with a teacher or guardian before using these tools. Avoid sharing any personal information.
Excellent at writing clean, well-structured code and displaying it as an artifact. Requires login.
Step 2: Start With a Simple App
Start by asking the LLM to build a basic web page that loads the data and shows a chart.
Copy the first prompt below, paste it into the LLM, and copy the HTML code it gives you into a new file called my-app.html. Open that file in your browser to see it.
Starter Prompts
Build a single-file HTML web app that loads this CSV URL and displays a scatter plot of height vs. wingspan. CSV URL: https://docs.google.com/spreadsheets/d/1ToPtuvdbMKDqhS3uod08I94D2lKA3h7ONg4gOuKmlEY/export?format=csv
Build a single-file HTML web app that loads the CSV from this URL and displays a bar chart of the average value for each numeric column. CSV URL: https://docs.google.com/spreadsheets/d/1ToPtuvdbMKDqhS3uod08I94D2lKA3h7ONg4gOuKmlEY/export?format=csv
Step 3: Iterate and Improve
Once your first version is working, you can work on improving it. Paste the code back into the LLM and ask it to add features, fix problems, or change the design.
This back-and-forth cycle of testing and refining is what makes vibe coding useful and fun.
Adding Features
Add a dropdown menu so the user can choose which two columns to compare in the scatter plot.
Add a table below the chart that shows the raw data from the CSV.
Add a summary section that shows the average, minimum, and maximum for each numeric column.
Add a correlation matrix heatmap using color to show which columns are most related to each other.
Fixing Problems
The chart isn't showing up. Here is my current code: [paste your code].
The CSV isn't loading. The error in the browser console says: [paste the error].
Changing the Look
Make the app look more professional. Use a dark background, clean fonts, and make the chart fill the width of the page.
Add a title and a short description at the top of the page explaining what the data shows.
Make the chart interactive. When you hover over a point, show the name of the person and their measurements.
Tips for Vibe Coding
Start simple: Get something working first, then add features one at a time.
Continue your progress: When asking for changes, include what you have so the LLM can improve it rather than start over.
Save versions: Before making big changes, save a copy of your working file so you can go back if something breaks.
Read the code: Even if you didn't write it, try to understand what each part does. Ask the LLM to explain any lines you don't recognize.
Use the browser console: If something breaks, open the browser developer tools (press F12) and check the Console tab for error messages.
