Vibe Coding 101: A Starter Guide for Non-STEM Students

The Story

One day, my cousin—a design major—was feeling the heat from a class project. She wanted to use AI to build a small app but had no idea where the “Start” button was. I helped her set up the environment and get her first project running in record time. If you can move files into a folder, you can do this too.

Step 1: Install VS Code

Think of this as your “PowerPoint” but for code. It’s a secure, professional, and free code editor. Download it, install it, and just keep the default installation options. Download link

Step 2: Initialize Your Environment

Once you open VS Code, you should see a welcome screen like this:

Use Open Folder to choose where you want to store your files and create a new folder for your project.

A popup will ask if you trust the authors. Since it’s on your own computer, go ahead and trust this folder XD.

Now, create a new file.

Important: Choose the .html extension for the file name, for example test.html or happy.html, so the browser knows how to read it.

At this point your environment is ready.

Step 3: Ask AI for HTML Code

Now for the “Vibe” part. You don’t need to write code; you just need to describe the vibe. Whether you use ChatGPT, Grok, or Gemini, describe the feature you want. For example:

Generate a simple interactive game in HTML with an 8×8 grid of square buttons. Each button can be one of six possible colors: red, orange, yellow, green, blue, purple. Each button is assigned a random color. At the top of the page there is a display area that randomly shows a color name, with a matching text color and background color.
The goal is to click the text color of the prompt, not the prompt’s background color. If the player is correct, they gain points; if incorrect, they lose points. After each click, the grid and the prompt refresh.

Step 4: Run Your Project

Copy the code the AI gives you into the blank HTML file you created in VS Code and save it. Then double‑click the HTML file in that folder path to open it in your browser — your project will appear there.

You can also transfer the HTML file to a tablet or phone for a demo.

Live Demo Page: https://color-game-happy.pages.dev/