project linkpreview

Step 1: Starting

System Text-to-Speech Ready
Slide: 0:00 / 0:00
Slide 1 of 0Interactive Deck

Full Lesson Reference

Create the project and basic structure.

Create the Project Folder

In Terminal:

terminal
mkdir ~/Desktop/LinkPreview
cd ~/Desktop/LinkPreview

Start Claude

terminal
claude

Your First Prompt

terminal
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.html file
  • Basic styling
  • A simple structure

Verify It Works

Open the HTML file in your browser:

Open index.html in my browser

Or 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

Tip: As you build more projects, you can teach Claude your design preferences using skill files — reusable markdown files for things like consistent spacing, accessibility, and responsive layouts.

Exercises

  1. Create the project folder and launch Claude using the exact mkdir, cd, and claude commands above.
  2. Paste the "Your First Prompt" block into Claude, then open index.html and confirm you see a page with a working input field.
  3. Rewrite the first prompt in your own words for a different tiny tool you'd like (e.g. a color-contrast checker), keeping the "single page, vanilla HTML/CSS/JS" constraint.