Vibe Coding for free: three practical projects

You can start with a single HTML file. It opens in a browser, and its code can be edited in a regular text editor. Below are our three educational examples: no registration, no payment, no package installation, and no database connection required.

How to complete the workshop

1. Open the demo, then download the HTML file. If the browser opens it instead of downloading it, save the page as HTML.
2. Save an untouched copy. Open the working copy with a double-click in the browser and separately in a text editor.
3. Pass the code to your chosen AI assistant along with the task below. Ask it to explain the change.
4. Replace the code in the working copy, save, and refresh the browser. Check the result using the examples.

1. Work cost calculator

Enter hours, rate, and additional expenses. You get the arithmetic sum. This is an educational estimate, not a market price recommendation.

Open calculator → · Download HTML

Add an optional percentage buffer to this calculator, from 0 to 100. The initial value is 0. Show the base sum, the buffer amount, and the total separately. Do not add libraries or network requests. Explain the changed lines and provide checks for empty, negative, and zero values.

Control: 4 hours × 500 UAH + 200 UAH = 2200 UAH. After adding a 10% buffer, the total should be 2420 UAH. Changing the rate to 1000 without a buffer gives 4200 UAH. Empty fields and negative numbers should not produce a fake result.

2. Service portfolio

A small page for a fictional specialist with three work examples. It contains no stolen photos, fake reviews, or forms that go nowhere.

Open portfolio → · Download HTML

Redesign this educational template for my service: [description]. Keep it as a single page without libraries. Do not invent clients, reviews, or results. Instead of missing works, leave the note "educational example". Contact: [my public link]. Check that the menu leads to the correct sections and the text is readable on a narrow screen.

Control: Go to the works from the menu, increase the text in your browser, or shrink the window. After replacing the contact, click the link and check the address. Do not publish personal data that you do not want to show everyone.

3. File Renaming Planner

Paste a list of names, set a prefix, and get new names with preserved extensions. The example is just a plan: it does not read the disk or rename files.

Open planner → · Download HTML

Add a starting number from 1 to 9999 to the planner. Preserve extensions, do not change files on the disk. Show an error for an empty list or an invalid prefix. Add a copy button for the result and a clear message if the browser blocks copying.

Control: for cat.png and dog.jpg with the prefix project, the result is project_001.png and project_002.jpg. A name without an extension must remain without an extension. Two identical input names receive different sequence numbers.

Your manual marks: 0 out of 3. This is a self-assessment, not an automatic code check.

What to do when a change breaks the example

Compare it with an unchanged copy. Instead of writing "nothing works," write the input values, the expected result, and what you actually see. Our error assistant will help you draft such a prompt.

How to turn an exercise into a skill proof

Save the original code, your version, and a short description: what you changed, how you tested it, and what limitations remain. Do not present a learning template as a commercial project for a client. Read about real requirements in the article "Vibe Coder: Profession and Skills".

Examples are created by the Vibe Coding editorial team. We allow you to copy and modify them, including for your own projects. They do not include a server, payment, or user data storage. Progress marks are reset after a reload.