Markdown + Prompt Basics

--- theme: seriph title: Markdown + Prompt Basics info: "Module A-MD-001 — Markdown syntax, prompt writing, ask modes" --- # Markdown + Prompt Basics --- # Why Markdown? In this course, you'll write Markdown every week: - **Weekly logs** (`logs/wk01.md`) - **READMEs** for every project - **Proposals** for mini projects - **Prompts** to AI tools Markdown is the language of developer communication. --- # Markdown in 5 Minutes ```markdown # Heading 1 ## Heading 2 **bold** and *italic* - bullet list - another item 1. numbered list 2. second item `inline code` [link text](https://example.com) ``` --- # Code Fences The most important Markdown pattern for this course: ````markdown ```js const button = document.querySelector('#btn'); button.addEventListener('click', () => { alert('Hello!'); }); ``` ```` Use the language tag (`js`, `html`, `css`) for syntax highlighting. Your weekly log Section 3 requires a fenced code block. > **AI tip:** When sharing code with AI, always use fenced code blocks with the language tag. AI gives better answers when it knows the language. --- # Your Weekly Log Uses 6 Patterns | Pattern | Example | |---|---| | `#` heading | `# Week 1 Log` | | `##` subheading | `## 3. Code I want to highlight` | | `-` bullet | `- **What I asked AI to do**:` | | `**bold**` | `**What it does:**` | | `` `inline code` `` | `` `addEventListener` `` | | ```` ``` ```` fenced block | code snippet in Section 3 | After 10 weekly logs, you'll be fluent in the Markdown that matters. --- layout: center --- # Prompting AI --- # Four Ways to Ask AI | Mode | What you say | What you get | |---|---|---| | **Generate** | "Create a nav bar with 3 links" | Code you need to read and verify | | **Explain** | "What does this addEventListener do?" | A teaching response | | **Refactor** | "Simplify this to use fewer nested ifs" | A cleaner version of existing code | | **Debug** | "Here's my code, the error message, and what I expected. What's wrong?" | A targeted fix with explanation | Know which mode you're in. Each requires different follow-up. --- # A Good Prompt Has Context Bad: > "Fix my code" Better: > "This JavaScript click handler should toggle a class on the button, but nothing happens when I click. Here's the code: [paste]. The console shows no errors." **Include**: what you expected, what happened, the relevant code. > **AI tip:** The Debug mode formula: paste (1) your code, (2) the exact error message, and (3) what you expected to happen. All three together get the best results. --- # AI as a Tutor The most underused mode. Try: - "What does `await` mean in JavaScript?" - "Explain CSS specificity like I'm a beginner" - "Why does my `fetch` call return a Promise instead of data?" > **AI tip:** AI is an infinitely patient tutor. Ask the same question five different ways if needed. It never gets frustrated. --- # After AI Gives You Code 1. **Read it line by line** — do you know what each line does? 2. **Find the part you don't recognize** — ask AI to explain just that part 3. **Modify something** — change a color, a text, a variable name 4. **Test it** — does it work? Does changing it break it? If you can't do steps 1-4, you're not ready to submit it. > **AI tip:** If AI gives you code with a part you don't understand, use Explain mode: "What does line 3 of this code do?" --- # Your Turn Open `logs/wk01.md` in your `oim3690` repo. Write your first weekly log entry using all 6 Markdown patterns from this deck: heading, subheading, bullet list, bold, inline code, and a fenced code block. Then try all four AI modes on your `index.html`: 1. **Generate**: "Add a footer with my name and the current year" 2. **Explain**: "What does `<meta charset='UTF-8'>` do?" 3. **Refactor**: "Simplify this HTML to use semantic tags" 4. **Debug**: paste any error you see in DevTools with your code --- # Key Takeaways 1. Markdown is 6 patterns, you'll learn by using them weekly 2. Four AI modes: generate, explain, refactor, debug 3. Good prompts include context (expected, actual, code) 4. AI is a tutor, ask it to explain, not just produce 5. Read, identify unknowns, modify, test before submitting