Initial commit: todo app guide with 5 prompts and examples
Complete companion repo for "Your First Hour with Claude Code" article. Includes step-by-step prompts, example output, troubleshooting, and cost guide. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
commit
ec708ba943
10 changed files with 1089 additions and 0 deletions
26
prompts/05-make-responsive.md
Normal file
26
prompts/05-make-responsive.md
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
# Prompt 05: Make It Mobile-Friendly
|
||||
|
||||
Copy and paste this into Claude Code:
|
||||
|
||||
---
|
||||
|
||||
Make the todo app responsive and mobile-friendly. Requirements:
|
||||
|
||||
- Works well on phone screens (375px wide and up)
|
||||
- Touch-friendly: buttons and inputs are at least 44px tall
|
||||
- Category filters wrap to multiple lines on small screens
|
||||
- Search bar is full width on mobile
|
||||
- Task text does not overflow, long text wraps properly
|
||||
- Add a proper viewport meta tag if missing
|
||||
- Swipe-to-delete would be a bonus but not required
|
||||
- Test: the app should look good on both a phone screen and a desktop monitor
|
||||
- Keep all existing functionality working
|
||||
|
||||
---
|
||||
|
||||
## What to Expect
|
||||
|
||||
- Open `index.html` on your phone (or use browser dev tools to simulate a phone screen)
|
||||
- Everything fits and is easy to tap
|
||||
- No horizontal scrolling
|
||||
- Filter buttons wrap neatly on small screens
|
||||
Loading…
Add table
Add a link
Reference in a new issue