2 min read
Step 1: Starting
Create the project and basic structure.
Create the Project Folder
In Terminal:
mkdir ~/Desktop/LinkPreview
cd ~/Desktop/LinkPreviewStart Claude
claudeYour First Prompt
I want to build a simple web tool called LinkPreview.
What it does:
- Has an input field for entering a URL
- Fetches the Open Graph metadata for that URL
- Displays the og:title, og:description, and og:image
- Shows a nice preview card like you'd see on social media
Keep it simple — single page, no framework needed.
Use vanilla HTML, CSS, and JavaScript.What to Expect
Claude will create:
- An
index.htmlfile - Basic styling
- A simple structure
Verify It Works
Open the HTML file in your browser:
Open index.html in my browserOr manually open the file. You should see a basic page with an input field.
Checkpoint
- Project folder created
- Basic HTML file
- Page opens in browser
- Input field visible
What You Learned
- Starting web projects is fast
- Vanilla HTML/CSS/JS works for simple tools
- No complex setup required