Free Course ยท Vibe Coding Foundations

Lesson 1.6: Project, publish a one-page site

Foundations progress 0 of 7 lessons complete (0%)

Time to ship something. This is the lesson that proves the whole idea to yourself, and it is also the moment most people decide whether this approach is for them.

The brief: use one of the two real prompts you wrote and saved in Lesson 1.3. Not a new idea. One you already committed to.

Five steps

  1. Open your chat tool and paste your saved prompt from Lesson 1.3.
  2. Run the look, test, describe, repeat loop from Lesson 1.4 until it matches what you wanted. Expect at least two rounds.
  3. If anything goes properly wrong, use the framework from Lesson 1.5: expected, actual, when.
  4. Get your page viewable in a browser. Some tools will give you a live link you can open right away. Others, including many ChatGPT sessions, will hand you the page as HTML in the chat instead. Both count. If you get HTML, follow the save-and-open steps in the next section.
  5. Send your page to one other person and ask them to actually try it, not just look at it. Share a live link if you have one, or send the .html file as an email attachment or via Google Drive or Dropbox.

If you get HTML instead of a live link

This is normal with chat tools. The page is real. You just need to save it as a file and open it in your browser.

  1. Copy the full HTML the tool gave you. It usually starts with <!DOCTYPE html> or <html>. If the tool wrapped it in a code block, copy everything inside the block.
  2. Open a plain text editor on your computer. On Mac, TextEdit works if you switch to plain text first (Format, then Make Plain Text). On Windows, Notepad works. Do not use Word or Google Docs for this step.
  3. Paste the HTML, then save the file with a name like my-page.html. The .html ending matters.
  4. Find the file in Finder or File Explorer and double-click it. It should open in your default browser.
  5. If double-clicking does nothing, drag the file onto an open browser window, or right-click the file, choose Open With, and pick your browser.

When someone else opens the same file the same way, they will see exactly what you see. That counts as shipping for this course.

You are done when: you have a page you can open in a browser, it does what you said it would do in your original prompt, and a real second person opened it and clicked around.

That is the whole loop: describe it, test it, fix it, ship it. Everything from here is the same loop applied to bigger things with better tools.
Assignment

Assignment 1.6 - Ship it, and reflect

You're done when: your project opens in a browser, someone else has used it, and you have a real answer for what you would build next.

0 of 5 items checked

Prompt 1 preview: Save your first prompt in Lesson 1.3.

Prompt 2 preview: Save your second prompt in Lesson 1.3.

Your notes save to your account and this browser.

Self-check

What counts as shipping if your chat tool gave you HTML instead of a hosted link?

What is the point of sending your project to another person instead of only checking it yourself?

← 1.5 Fixing without code 1.7 Where to go →