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

Scenario

One day my cousin, who studies design, felt a lot of pressure about a class project. She wanted to use AI to build some software but didn’t know how to get started. I helped her set up the environment and get up to speed as quickly as possible.

Install VS Code

This is a convenient and secure code editor. Download and install it, keeping the default installation options.
Download link

Initialize your environment

You should see a screen like this:

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

Trust this folder since it’s on your own computer XD

Create a new file.

Choose the .html extension for the file name, for example test.html or happy.html.

At this point your environment is ready.

Ask AI for HTML code

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.

Copy the code the AI gives you into the blank HTML file you created 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.

Example page: https://color-game-happy.pages.dev/