Build Your First Page
Module 2: Setup
The Challenge
Let's create a styled "Hello World" page that proves you've got Claude Code working. This will be a real webpage you can open in your browser.
Make sure you're in your project folder with Claude running:
📋 Copy this command:
cd ~/my-landing-page && claude
Build It
Make sure you're in your project folder with Claude running. Then send this prompt:
Create a hello world HTML file with a nice design. Make it say "I built this with Claude Code" and add some celebratory styling!
Let's make this celebration-worthy! ✓ Updated index.html with your message ✓ Added gradient background to styles.css ✓ Added confetti animation ✓ Made the text pop with a nice font 🎉 Your celebratory page is ready! Open index.html in your browser to see it.
View Your Creation
Now let's see your creation! Ask Claude how to open it:
How do I open this in my browser?
Here's how to open your page: Mac: open index.html Windows: start index.html Linux: xdg-open index.html Or just drag the file into your browser!
Run the command for your operating system, or simply drag the index.html file into your browser window.
MODULE 2 COMPLETE!
You just built a real webpage using Claude Code. It's sitting on your computer right now. You can open it, edit it, share it.
This is the foundation of everything else we'll build together.
What You Accomplished in Module 2
- ✅ Opened your terminal
- ✅ Installed Node.js and Claude Code
- ✅ Had your first conversation with Claude
- ✅ Created a project folder
- ✅ Built a real HTML page
- ✅ Viewed it in your browser
Think Bigger: That simple prompt ("Create a hello world HTML file with a nice design") just saved you 30+ minutes of:
- Looking up HTML boilerplate
- Finding a nice color scheme
- Writing CSS from scratch
- Debugging why things aren't centered
Now imagine what you can build when you ask for more complex things.
Next module: We'll build a real landing page and learn how to give Claude better instructions.