Ship It: From Your Screen to the World
Ship It: From Your Screen to the World
Here's a hard truth: a page that only exists on your computer isn't shipped. Nobody can see it, nobody can use it, and nobody can tell you it's great. Shipping means one thing — a URL anyone in the world can open. That's the line between "I'm learning to code" and "I built something."
The good news? Getting a URL is the easy part now. Free services do it in seconds:
- Netlify Drop — open the site, drag your HTML file onto the page, get a live URL. That's the whole process.
- Vercel — connect a folder or a GitHub repo, click deploy, done. (This very academy runs on it.)
And if you ever get stuck? You're a vibe coder — ask the AI. "Walk me through deploying this HTML file to Netlify, step by step" works beautifully. Deployment used to be the scary part of coding. Now it's a conversation.
But before you drag that file anywhere, there's a difference between a page that works and a page that's launch-ready. Real sites have professional touches: a proper title in the browser tab, a description that search engines and link previews can show, social tags so your link looks good when someone shares it on WhatsApp or X, and a footer that says "a real person made this — here, share it." In this final lesson, you'll take your Idea Board from Module 4 and give it exactly those touches.
What's next on your path
This is the last lesson of Vibe Coding Fundamentals — but it's step one of the Zero to Hero path. From here you'll meet Claude Code in the browser (an AI that builds whole projects from a conversation), then install the real tool on your own machine, and eventually build your own AI agent. You now know how the web is made. Time to make a lot more of it.
Let's ship.
Instructions
Give your page a real <title> — replace "Untitled" with a name worthy of the browser tab. This is the first thing search engines and bookmarks show.
Hint: Find `<title>Untitled</title>` in the <head> and change it to something like `<title>Idea Board — Never Lose a Spark</title>`. At least a few characters — make it yours.
Add a <meta name="description"> tag in the <head> — one sentence that tells search engines (and curious humans) what your app does.
Add Open Graph tags — <meta property="og:title"> and <meta property="og:description">. These control how your link looks when shared on WhatsApp, X, or LinkedIn.
Add a <footer> at the bottom of the card with a "Built with vibes" credit and an <a id="share-link"> — every shipped product signs its work.
Your Code
Describe what you want to build for this step and I'll write the code — then click Apply to drop it into your editor. This step: Give your page a real <title> — replace "Untitled" with a name worthy of the browser tab. This is the first thing search engines and bookmarks show.