← Back to Setup & Foundation

Exercise 1 of 3: Eisenhower Matrix

Your first real build. You're going to tell Claude to create a four-quadrant task prioritizer with drag-and-drop — a fully interactive web app — from a single conversation.

0 / 0 steps
1
What You're Building
The Eisenhower Matrix is a prioritization tool named after President Eisenhower. It divides tasks into four quadrants based on urgency and importance:

Q1 — Do Now: Urgent AND important (fires, deadlines)
Q2 — Schedule: Important but NOT urgent (planning, training, growth)
Q3 — Delegate: Urgent but NOT important (interruptions, some emails)
Q4 — Backlog: Neither urgent NOR important (busywork, time-wasters)

You're going to build this as an interactive HTML page. Cards for each task. Color-coded quadrants. Drag-and-drop to move tasks between quadrants. An "Add Item" button to create new tasks. All in a single file you can open in your browser.

Why this is a great first project:

  • It's a single HTML file — no server, no database, no setup
  • You can see the result instantly — one sentence to Claude and it's open in your browser
  • It's genuinely useful — you'll actually want to use this
  • It teaches the core workflow: describe → plan → approve → build
2
Set Up the Project

Every project gets its own folder. Open Command Prompt and create one for this exercise:

mkdir C:\dev\EisenhowerMatrix

Now navigate there:

cd C:\dev\EisenhowerMatrix

Start Claude Code:

claude

First things first — let's have Claude set up the project files. Notice what's not in this prompt: who you are or how you work. Your global CLAUDE.md already covers that — the project CLAUDE.md only carries rules specific to this build. Give it this prompt:

Prompt: Set up the project Set up this project for me. Create: 1. A CLAUDE.md at the project root with the project rules: this is a single HTML file (matrix.html), vanilla JavaScript, no server, no frameworks, no build step. 2. A context/ folder with: - context/PROJECT.md: "Building an Eisenhower Matrix - a four-quadrant personal task prioritizer as a single HTML file with drag-and-drop." - context/JOURNAL.md with a first entry: "Started project. Setting up workspace and creating the matrix."
What just happened: Claude created your CLAUDE.md at the project root and a context/ folder holding PROJECT.md and JOURNAL.md. You can see them in File Explorer if you navigate to C:\dev\EisenhowerMatrix. Open them in Notepad if you're curious — they're just text files. Or skip the spelunking and ask Claude: "Show me the CLAUDE.md you created."
3
Your First Real Prompt

Now for the main event. You're going to describe what you want, and Claude is going to build it. This is the prompt that creates the entire app:

Prompt: Build the Eisenhower Matrix Build me a personal Eisenhower Matrix as a single HTML file called matrix.html. Here's what I want: LAYOUT: - A 2x2 grid of quadrants filling the page - Q1 (top-left): "Do Now" - red theme - Q2 (top-right): "Schedule" - green theme - Q3 (bottom-left): "Delegate" - orange theme - Q4 (bottom-right): "Backlog" - blue theme - Each quadrant shows a count of items in it CARDS: - Each task is a card inside a quadrant - Cards are draggable between quadrants - Each card has the task text and a delete button - Visual feedback when dragging (opacity change, drop zone highlights) ADD ITEMS: - An "Add Item" button at the top - Clicking it opens a panel where I type a task and pick which quadrant to put it in - Pressing Enter adds the item STYLE: - Clean, modern look - Professional fonts - Cards should lift slightly on hover (subtle shadow) - Make it look like something I'd be proud to show a client Start me off with a few sample tasks in each quadrant so it doesn't look empty.
Watch what happens next. Claude will read your prompt and probably propose a plan before building — because your global CLAUDE.md told it to. It might say something like "I'll create a single HTML file with CSS Grid for the layout, vanilla JavaScript for drag-and-drop, and..." Let it explain. Then approve it.

Now approve it. You can say something as simple as:

Looks good, go ahead and build it.

Claude will write the entire HTML file. You'll see it working in real-time — writing HTML, CSS, and JavaScript. When it's done, it'll tell you.

4
See What You Built

Time for the payoff. Don't go digging through folders — opening files is Claude's job now. Just say:

Open matrix.html in my browser.
Curious where it lives? C:\dev\EisenhowerMatrix\matrix.html — you can go look at it in File Explorer any time. But from here on, when you want a file opened, run, or shown, you ask Claude.

You should see a color-coded 2x2 grid with task cards in each quadrant. Try these things:

Pause and absorb this. You just built a fully interactive web app by describing what you wanted in English. No coding. No Googling. No Stack Overflow. You had a conversation, and Claude built the thing. This is the workflow.
5
Make It Yours

The first version is never perfect. Maybe you want different colors, or the font is too small, or you want categories for each task. The beauty of this workflow is that changes are just another conversation.

Go back to your Claude Code window (it should still be running). Try some of these — or make up your own:

Example customization prompts "Add category tags to each card - like WORK, PERSONAL, HEALTH - with color-coded badges." "Make the fonts bigger and use a dark mode color scheme." "Add a daily checklist section above the matrix for recurring tasks." "Save the tasks to localStorage so they persist when I close and reopen the browser." "Add a header with my name and today's date."
The localStorage one is highly recommended. Without it, your tasks disappear when you close the browser. With it, they're saved and come back when you reopen the page. Ask Claude to add this if it didn't already.
Notice the pattern: You describe what you want in plain English. Claude modifies the file. You refresh the browser. Repeat until you're happy. That's the development loop. You'll use this exact pattern for everything you build.
6
Save Your Progress & Wrap Up

Before you leave, tell Claude to update the memory log. This is how future sessions know what you've done.

Update context/JOURNAL.md with everything we did today. Include what we built, any customizations, and what the matrix looks like now.
Exercise 1 of 3 complete. You now know the core workflow:

1. Create a project folder
2. Set up CLAUDE.md plus context/PROJECT.md and context/JOURNAL.md
3. Describe what you want to Claude
4. Review the plan, approve it
5. Claude builds it
6. Test it in the browser
7. Request changes until you're happy
8. Update context/JOURNAL.md before you leave

Next Up: Exercise 2 of 3

You're going to build a client homework form that collects answers and emails them to you automatically. This introduces Google Apps Script — your first "backend" — a piece that runs on Google's servers and does work for you.

Start Exercise 2 of 3 →