diff --git a/docs/prd-learn-to-code.md b/docs/prd-learn-to-code.md new file mode 100644 index 0000000000..cd13b031e1 --- /dev/null +++ b/docs/prd-learn-to-code.md @@ -0,0 +1,192 @@ +# PRD: Learn to Code Hub + +## Overview + +Build `/learn-to-code` as daily.dev's answer to "I want to learn to code — where do I start?" A hub page aggregating hundreds of programmatic SEO leaf pages, each curated by an AI agent with AI-native content (prompts-as-tutorials) and live daily.dev feed data. Captures high-impression "learn to code" head terms at the hub and long-tail beginner intent queries at the leaf level. + +--- + +## User Stories + +### Must-have + +- As a career changer landing from Google, I want to immediately see paths relevant to my situation ("coding for marketers", "learn to code to get a job") so I don't bounce trying to figure out where to start. +- As a beginner on a leaf page (e.g. `/learn-to-code/python`), I want ready-to-paste prompts for Cursor/Claude Code so I can start building something real in 10 minutes, not finish a 20-hour course first. +- As someone who just vibe-coded something, I want to understand what the AI actually built so I'm learning concepts, not just copy-pasting forever. +- As a user exploring the hub, I want to see what's trending in the beginner community right now (live daily.dev content) so the page feels like a living resource, not a static blog post from 2024. +- As a search engine, I want well-structured JSON-LD, internal links between related leaf pages, and fresh content signals so the hub and leaves rank for their target queries. + +### Nice-to-have + +- As a returning user, I want to pick up where I left off (last visited leaf page surfaced on the hub). +- As a user finishing a beginner leaf page, I want a "what's next" recommendation linking to adjacent leaf pages. + +--- + +## Architecture + +### URL Structure + +``` +/learn-to-code ← The hub (aggregates everything below) +├── /learn-to-code/build/todo-app ← Use case pages +├── /learn-to-code/build/portfolio-site +├── /learn-to-code/automate/email +├── /learn-to-code/automate/spreadsheets +├── /learn-to-code/python ← Language/tool pages +├── /learn-to-code/javascript +├── /learn-to-code/cursor +├── /learn-to-code/vibe-coding ← Technique pages +├── /learn-to-code/for/designers ← Audience pages +├── /learn-to-code/for/marketers +└── ...hundreds more +``` + +### pSEO Dimensions + +| Dimension | Examples | Long-tail queries captured | +|-----------|----------|---------------------------| +| **Use case** | build a todo app, automate tasks, make a website | "how to build a todo app" | +| **Language/tool** | Python, JavaScript, Cursor, Claude Code | "learn python for beginners" | +| **Audience** | designers, marketers, students, career changers | "coding for marketers" | +| **Technique** | vibe coding, pair programming with AI, test-driven | "vibe coding for beginners" | +| **Goal** | get a job, freelance, build a startup, automate work | "learn to code to get a job" | + +--- + +## Hub Page (`/learn-to-code`) + +Four sections: + +1. **What do you want to build?** — use case cards linking to leaf pages +2. **Popular paths** — top-visited leaves, ranked by traffic (hardcoded initially, analytics-driven later) +3. **Fresh picks** — recently agent-updated pages, sorted by `lastUpdated` +4. **Trending on daily.dev** — dynamic feed data filtered by beginner/programming-basics tags + +All sections render server-side at build time. "Trending on daily.dev" hydrates client-side via TanStack Query against existing feed API. + +--- + +## Leaf Pages (`/learn-to-code/[...slug]`) + +Dynamic catch-all route. Each leaf page renders: + +1. **What & why** — one paragraph, agent-written, no fluff +2. **Start building** — progressive prompt sequence (3–7 prompts), labeled by tool (Cursor / Claude Code / Replit / generic). Prompts are first-class content — the new tutorials. +3. **Understand what you built** — key concepts the AI used, explained in plain language. Turns vibe-coding into actual learning. +4. **Go deeper** — curated external resources (tutorials, courses, videos, docs). Agent-curated, refreshed for dead links. +5. **Tools** — 2–4 AI coding tools recommended for this use case +6. **Communities** — daily.dev squads + relevant subreddits/discords +7. **Related daily.dev content** — dynamic feed filtered by leaf page's tags +8. **Related pages** — internal links to adjacent leaf pages (powers the pSEO linking mesh) + +--- + +## Data Model + +Each leaf page consumes a JSON file at `data/learn-to-code/{slug}.json`: + +```ts +type LeafPageData = { + slug: string; // e.g. "python" or "build/todo-app" + title: string; + description: string; // one paragraph — SEO meta + page intro + dimension: 'language' | 'usecase' | 'audience' | 'technique' | 'goal'; + tags: string[]; // daily.dev tag slugs for feed + related content + prompts: Prompt[]; + concepts: Concept[]; // "understand what you built" + resources: Resource[]; + tools: Tool[]; + communities: Community[]; + relatedSlugs: string[]; // internal linking mesh + lastUpdated: string; // ISO date, agent stamps on refresh +}; + +type Prompt = { + step: number; + title: string; + body: string; // the actual prompt text + tools: ('cursor' | 'claude-code' | 'replit' | 'generic')[]; +}; + +type Concept = { + name: string; + explanation: string; // plain language, 2-3 sentences +}; + +type Resource = { + title: string; + url: string; + type: 'video' | 'article' | 'course' | 'docs'; + free: boolean; +}; + +type Tool = { + name: string; + url: string; + description: string; // one-line rationale +}; + +type Community = { + name: string; + url: string; + platform: 'dailydev' | 'reddit' | 'discord' | 'other'; +}; +``` + +A manifest file (`data/learn-to-code/manifest.json`) lists all slugs, titles, dimensions, and `lastUpdated`. Used by `getStaticPaths` and the hub page. + +--- + +## The Curation Agent + +Separate system that outputs JSON files. Responsibilities: + +- Discover and curate quality resources across the web per page +- Generate/curate starter prompts per use case, versioned for different tools +- Write "understand what you built" concept explainers +- Refresh existing recommendations (dead links, outdated content) +- Identify new leaf pages worth creating (trending queries, emerging tools) +- Pull relevant daily.dev content per topic +- Stamp `lastUpdated` on each refresh + +--- + +## Rendering & Performance + +- `getStaticProps` + ISR with `revalidate: 3600` for leaf pages +- `fallback: 'blocking'` — pages generate on first request +- Pre-generate top ~50 leaf pages at build time once data is seeded +- Hub: ISR with `revalidate: 300` (5 min) + +--- + +## SEO + +- **Leaf JSON-LD**: `HowTo` schema for prompt sequence (each prompt = `HowToStep`), `CollectionPage` for resources, `BreadcrumbList` +- **Hub JSON-LD**: `CollectionPage` of featured leaf pages + `FAQPage` for common questions +- **Title pattern**: `"Learn [Topic] — Prompts, Resources & Community | daily.dev"` +- Canonical URLs enforced, no duplicate content across dimension combos +- `sr-only` anchor links to related leaf pages for link equity + +--- + +## Technical Details + +- **Routing**: `pages/learn-to-code/index.tsx` (hub) + `pages/learn-to-code/[...slug].tsx` (all leaves) +- **Feed integration**: Existing `HorizontalFeed` + `TAG_FEED_QUERY` filtered by leaf's tags +- **Squads integration**: Existing Squads API filtered by tags +- **Layout**: `PageWrapperLayout`, `getFooterNavBarLayout(getLayout(...))`, `max-w-6xl` +- **No new GraphQL**: All dynamic data uses existing queries. Leaf content is file-based. + +--- + +## Out of Scope + +- User accounts / personalization / progress tracking +- Generating leaf page JSON files (agent's job) +- A/B testing hub layout variants +- Mobile app surfaces +- User-submitted resources or community curation +- Search/filter UI within the hub +- Localization / non-English pages diff --git a/packages/webapp/data/learn-to-code/automate-your-workflow.json b/packages/webapp/data/learn-to-code/automate-your-workflow.json new file mode 100644 index 0000000000..085eb0a6fb --- /dev/null +++ b/packages/webapp/data/learn-to-code/automate-your-workflow.json @@ -0,0 +1,147 @@ +{ + "slug": "automate-your-workflow", + "title": "Automate Your Workflow", + "description": "You don't need to be a programmer to automate repetitive tasks. If you can describe what you do manually, AI can help you write a script to do it automatically. Reclaim hours every week by automating the boring stuff.", + "dimension": "goal", + "tags": ["python", "automation", "scripting", "productivity"], + "projectDescription": "You'll build scripts that do your boring work for you — organizing messy downloads folders, batch renaming files, sending automated email reports, and monitoring websites for changes. Each script saves you real time every week.", + "outcomes": [ + "Write Python scripts that automate repetitive file and folder tasks", + "Schedule scripts to run automatically without any manual trigger", + "Pull data from external services like Google Sheets and send formatted reports", + "Build a personal dashboard to monitor and manage all your automations" + ], + "aiTips": [ + "Describe your manual workflow step by step before asking for a script — the more precise the input, the more useful the output", + "Always ask the AI to add logging to scripts that will run unattended so you can debug failures later", + "Test scripts on a small sample of real data before pointing them at your full Downloads folder or live spreadsheet", + "Ask the AI to add a dry-run mode that prints what the script would do without actually doing it" + ], + "prompts": [ + { + "step": 1, + "title": "Automate file organization", + "body": "Write a Python script that watches my Downloads folder and automatically organizes files into subfolders by type: Images (jpg, png, gif, svg), Documents (pdf, docx, xlsx), Videos (mp4, mov), Code (py, js, html, css), and Archives (zip, tar, gz). Move each file to the right folder as soon as it appears.", + "tools": ["cursor", "claude-code", "generic"], + "difficulty": "beginner", + "timeEstimate": "~30 min", + "stuckTip": "If the file watcher doesn't trigger, ask the AI to show you how to test the script manually first by passing a folder path as a command-line argument." + }, + { + "step": 2, + "title": "Batch rename files", + "body": "Create a Python script that batch renames files in a folder. It should support: adding a prefix or suffix, replacing text in filenames, converting to lowercase, adding sequential numbers, and inserting the date. Show a preview of changes before applying them. Add an undo feature that can reverse the last rename operation.", + "tools": ["cursor", "claude-code", "generic"], + "difficulty": "beginner", + "timeEstimate": "~30 min", + "stuckTip": "If the undo feature is confusing to implement, ask the AI to save a rename log as a JSON file that can be replayed in reverse." + }, + { + "step": 3, + "title": "Automate email reports", + "body": "Write a Python script that reads data from a Google Sheet (using the gspread library), generates a summary report with key metrics and a chart, and sends it as a formatted HTML email using smtplib. Set it up to run automatically every Monday at 9am using a cron job or schedule library.", + "tools": ["cursor", "claude-code"], + "difficulty": "intermediate", + "timeEstimate": "~60 min", + "stuckTip": "If Google Sheets authentication fails, ask the AI to walk you through creating a service account and sharing the sheet with it." + }, + { + "step": 4, + "title": "Build a web scraper", + "body": "Create a Python script that monitors a webpage for changes. It should: fetch the page at regular intervals, compare with the previous version, and send me a notification (desktop notification or email) when something changes. Add support for monitoring multiple URLs from a config file.", + "tools": ["cursor", "claude-code"], + "difficulty": "stretch", + "timeEstimate": "~60 min", + "stuckTip": "If the comparison produces false positives (timestamps changing), ask the AI to extract only the relevant content section rather than comparing the full HTML." + }, + { + "step": 5, + "title": "Create a personal automation dashboard", + "body": "Build a web-based dashboard that shows all my automations: which ones are running, their last execution time, success/failure status, and logs. Add buttons to run each automation manually. Include a simple form to add new scheduled tasks. Use Flask for the backend and store automation status in SQLite.", + "tools": ["cursor", "claude-code"], + "difficulty": "stretch", + "timeEstimate": "~90 min", + "stuckTip": "Start with a static dashboard that reads from a hardcoded SQLite file before wiring up live automation status — get the UI right first." + } + ], + "concepts": [ + { + "name": "File System Operations", + "explanation": "Python's os and pathlib modules let you create, move, rename, and delete files and folders programmatically. Every automation starts with understanding how to interact with the file system." + }, + { + "name": "Scheduling and Cron Jobs", + "explanation": "Cron (Linux/Mac) and Task Scheduler (Windows) run scripts automatically at set times. This is how you make automation truly hands-free — your script runs while you sleep." + }, + { + "name": "APIs and Web Requests", + "explanation": "The requests library lets Python talk to any web service. Read data from Google Sheets, send Slack messages, check the weather — if a service has an API, you can automate it." + }, + { + "name": "Error Handling and Logging", + "explanation": "Automations run unattended, so they need to handle errors gracefully. Logging records what happened so you can debug failures. Try/except blocks prevent one error from crashing everything." + } + ], + "resources": [ + { + "title": "Automate the Boring Stuff with Python", + "url": "https://automatetheboringstuff.com/", + "type": "article", + "free": true + }, + { + "title": "Python Automation Tutorial — freeCodeCamp", + "url": "https://www.freecodecamp.org/news/python-automation-scripts/", + "type": "article", + "free": true + }, + { + "title": "Real Python — Task Automation", + "url": "https://realpython.com/tutorials/automation/", + "type": "article", + "free": true + }, + { + "title": "Zapier — No-Code Automation", + "url": "https://zapier.com/", + "type": "docs", + "free": false + } + ], + "tools": [ + { + "name": "Claude Code", + "url": "https://docs.anthropic.com/en/docs/claude-code", + "description": "Describe your manual workflow and let AI write the automation script" + }, + { + "name": "Cursor", + "url": "https://cursor.sh", + "description": "AI code editor — great for building and testing automation scripts" + }, + { + "name": "Zapier", + "url": "https://zapier.com", + "description": "No-code automation for connecting apps — good starting point before Python" + } + ], + "communities": [ + { + "name": "r/automate", + "url": "https://reddit.com/r/automate", + "platform": "reddit" + }, + { + "name": "r/learnpython", + "url": "https://reddit.com/r/learnpython", + "platform": "reddit" + }, + { + "name": "Indie Hackers", + "url": "https://indiehackers.com", + "platform": "other" + } + ], + "relatedSlugs": ["python", "for/marketers", "for/data-analysts"], + "lastUpdated": "2026-03-10" +} diff --git a/packages/webapp/data/learn-to-code/automate.json b/packages/webapp/data/learn-to-code/automate.json new file mode 100644 index 0000000000..72db5ba09f --- /dev/null +++ b/packages/webapp/data/learn-to-code/automate.json @@ -0,0 +1,79 @@ +{ + "slug": "automate", + "title": "Automate Your Life", + "description": "If you do the same task more than twice, a script can do it for you. Organize files, generate reports, send emails on a schedule — AI writes the code, you describe what you want automated.", + "dimension": "category", + "tags": ["python", "automation", "scripting", "productivity"], + "outcomes": [ + "Write scripts that handle repetitive tasks so you never do them manually again", + "Schedule automations to run on their own — no clicking required", + "Connect tools and services together with APIs", + "Build personal dashboards and reports that update themselves" + ], + "recommendedPaths": [ + { + "slug": "automate-your-workflow", + "title": "Automate Your Workflow", + "reason": "Start here. Organize messy folders, batch rename files, and build scripts that save you hours every week." + } + ], + "concepts": [ + { + "name": "Scripting", + "explanation": "A script is a small program that runs a sequence of steps automatically. Instead of clicking through 10 steps manually, you run one command and it does everything." + }, + { + "name": "APIs", + "explanation": "APIs let your scripts talk to services like Google Sheets, Slack, and email. Instead of copying data between tools, your script pulls it directly." + }, + { + "name": "Scheduling", + "explanation": "Cron jobs and task schedulers run your scripts on a timer — every hour, every morning, every Monday. Set it up once and forget about it." + } + ], + "resources": [ + { + "title": "Automate the Boring Stuff with Python", + "url": "https://automatetheboringstuff.com/", + "type": "article", + "free": true + }, + { + "title": "Python for Everybody", + "url": "https://www.py4e.com/", + "type": "course", + "free": true + } + ], + "tools": [ + { + "name": "Claude Code", + "url": "https://docs.anthropic.com/en/docs/claude-code", + "description": "Describe what you want automated in plain English and it builds the script" + }, + { + "name": "Cursor", + "url": "https://cursor.sh", + "description": "AI code editor — great for writing and debugging automation scripts" + }, + { + "name": "Google Apps Script", + "url": "https://script.google.com", + "description": "Automate Google Sheets, Docs, and Gmail — no setup required" + } + ], + "communities": [ + { + "name": "r/learnpython", + "url": "https://reddit.com/r/learnpython", + "platform": "reddit" + }, + { + "name": "r/automation", + "url": "https://reddit.com/r/automation", + "platform": "reddit" + } + ], + "relatedSlugs": ["python", "build", "skills"], + "lastUpdated": "2026-03-11" +} diff --git a/packages/webapp/data/learn-to-code/build.json b/packages/webapp/data/learn-to-code/build.json new file mode 100644 index 0000000000..9a3f8cfe5a --- /dev/null +++ b/packages/webapp/data/learn-to-code/build.json @@ -0,0 +1,100 @@ +{ + "slug": "build", + "title": "Build Something", + "description": "The fastest way to learn is to build. Pick a project below, paste the prompts into your AI coding tool, and ship something real this weekend. No experience required — each guide walks you through it step by step.", + "dimension": "category", + "tags": ["programming", "webdev", "beginners"], + "outcomes": [ + "Go from zero to a working app you can share with a link", + "Understand the basics of how web apps, bots, and extensions work", + "Learn to iterate on AI-generated code — add features, fix bugs, make it yours", + "Deploy a real project to the internet" + ], + "recommendedPaths": [ + { + "slug": "build/todo-app", + "title": "Build a Todo App", + "reason": "The classic first project. Simple enough to finish in an hour, complex enough to learn real concepts like state, storage, and UI." + }, + { + "slug": "build/personal-website", + "title": "Build a Personal Website", + "reason": "Create a portfolio site you actually own. Great for anyone who wants a web presence — students, freelancers, job seekers." + }, + { + "slug": "build/chrome-extension", + "title": "Build a Chrome Extension", + "reason": "Customize your browser with a tool you'll actually use every day. A satisfying project that feels immediately useful." + }, + { + "slug": "build/discord-bot", + "title": "Build a Discord Bot", + "reason": "Build a bot for your server — moderator, game, or utility. Fun to build, fun to show friends, and teaches real API concepts." + } + ], + "concepts": [ + { + "name": "Frontend vs Backend", + "explanation": "Frontend is what users see (HTML, CSS, JavaScript in the browser). Backend is the server-side logic — databases, APIs, authentication. Most projects touch both." + }, + { + "name": "State Management", + "explanation": "State is the data your app holds in memory — the list of todos, whether a toggle is on or off. Understanding state is the key to understanding how apps behave." + }, + { + "name": "Deployment", + "explanation": "Deployment means putting your app on the internet so anyone can use it. Services like Vercel, Railway, and Netlify make this free and simple for small projects." + } + ], + "resources": [ + { + "title": "freeCodeCamp - Responsive Web Design", + "url": "https://www.freecodecamp.org/learn/2022/responsive-web-design/", + "type": "course", + "free": true + }, + { + "title": "The Odin Project", + "url": "https://www.theodinproject.com/", + "type": "course", + "free": true + }, + { + "title": "JavaScript.info", + "url": "https://javascript.info/", + "type": "docs", + "free": true + } + ], + "tools": [ + { + "name": "Cursor", + "url": "https://cursor.sh", + "description": "AI-first code editor — the fastest way to build projects with AI assistance" + }, + { + "name": "Claude Code", + "url": "https://docs.anthropic.com/en/docs/claude-code", + "description": "Agentic coding in your terminal — describe what you want and it builds it" + }, + { + "name": "Vercel", + "url": "https://vercel.com", + "description": "Free hosting for web apps — deploy with one command" + } + ], + "communities": [ + { + "name": "r/learnprogramming", + "url": "https://reddit.com/r/learnprogramming", + "platform": "reddit" + }, + { + "name": "r/webdev", + "url": "https://reddit.com/r/webdev", + "platform": "reddit" + } + ], + "relatedSlugs": ["vibe-coding", "languages", "automate"], + "lastUpdated": "2026-03-11" +} diff --git a/packages/webapp/data/learn-to-code/debugging.json b/packages/webapp/data/learn-to-code/debugging.json new file mode 100644 index 0000000000..442b4e8ce5 --- /dev/null +++ b/packages/webapp/data/learn-to-code/debugging.json @@ -0,0 +1,152 @@ +{ + "slug": "debugging", + "title": "Debugging with AI", + "description": "Bugs are inevitable — even AI-generated code has them. The good news is that AI is also incredible at finding and fixing bugs. Learning to debug effectively is the difference between giving up in frustration and actually shipping your project.", + "dimension": "technique", + "tags": ["debugging", "programming", "beginners"], + "projectDescription": "You'll work through increasingly tricky bugs — from simple typos to logic errors to mysterious crashes. Each prompt gives you a broken piece of code and guides you through fixing it with AI. By the end, you'll have a repeatable system for solving any bug.", + "outcomes": [ + "Decode any error message and trace it back to the root cause", + "Use browser DevTools and VS Code debugger to step through code", + "Apply a systematic reproduce-isolate-fix workflow to any bug", + "Add TypeScript, validation, and tests to prevent bugs proactively" + ], + "aiTips": [ + "Always paste the full error message and stack trace — the AI needs the exact text, not a paraphrase", + "If the AI's fix introduces a new bug, describe both the original error and the new one together", + "Ask the AI to explain why a bug happened, not just how to fix it — the explanation is the real learning", + "Use AI as a rubber duck: describe what your code should do line by line and it will often spot the issue before you finish" + ], + "prompts": [ + { + "step": 1, + "title": "Learn to read error messages", + "body": "I'm going to paste error messages I encounter while coding. For each one, explain: what the error means in plain English, what likely caused it, and how to fix it. Start with these common ones: TypeError, ReferenceError, SyntaxError, and ModuleNotFoundError. Give me a real code example for each that triggers the error.", + "tools": ["cursor", "claude-code", "generic"], + "difficulty": "beginner", + "timeEstimate": "~20 min", + "stuckTip": "If an error type is confusing, ask the AI to show you three different real-world examples of what triggers it." + }, + { + "step": 2, + "title": "Debug a broken app", + "body": "Create a simple todo app in JavaScript that has 5 intentional bugs: a logic error, an off-by-one error, a missing null check, a scope issue, and a race condition. Show me the buggy code first. Then walk me through finding each bug using console.log, the browser debugger, and logical reasoning.", + "tools": ["cursor", "claude-code", "generic"], + "difficulty": "beginner", + "timeEstimate": "~40 min", + "stuckTip": "If you can't find a bug after 10 minutes, ask the AI to give you a single hint about which line range to look at — not the answer." + }, + { + "step": 3, + "title": "Set up proper debugging tools", + "body": "Show me how to set up debugging for a Node.js project in VS Code: breakpoints, watch variables, step through code, and the debug console. Then do the same for a React app in Chrome DevTools: component inspector, network tab, and console filtering. Create a sample project to practice with.", + "tools": ["cursor", "claude-code"], + "difficulty": "intermediate", + "timeEstimate": "~45 min", + "stuckTip": "If the VS Code debugger won't attach, ask the AI to walk you through the launch.json configuration for your specific project type." + }, + { + "step": 4, + "title": "Debug someone else's code", + "body": "Generate a 100-line Python script that processes a CSV file but has 3 subtle bugs that only appear with certain data. Give me the script without telling me what the bugs are. Guide me through a systematic debugging approach: reproduce, isolate, identify, fix, verify.", + "tools": ["cursor", "claude-code", "generic"], + "difficulty": "stretch", + "timeEstimate": "~60 min", + "stuckTip": "Create a minimal test CSV with only a few rows that triggers the bug — smaller inputs make issues much easier to isolate." + }, + { + "step": 5, + "title": "Prevent bugs before they happen", + "body": "Take the todo app from step 2 and add: TypeScript for type safety, input validation for all user inputs, error boundaries for the React components, and 5 unit tests for the most critical functions. Explain how each prevention measure would have caught the original bugs.", + "tools": ["cursor", "claude-code"], + "difficulty": "stretch", + "timeEstimate": "~60 min", + "stuckTip": "If TypeScript migration feels overwhelming, ask the AI to convert one file at a time and explain each type annotation it adds." + } + ], + "concepts": [ + { + "name": "Error Messages Are Your Friend", + "explanation": "Error messages tell you exactly what went wrong and where. The stack trace shows the chain of function calls that led to the error. Learning to read them is the single biggest debugging skill you can develop." + }, + { + "name": "Reproduce, Isolate, Fix", + "explanation": "The debugging process: first make the bug happen reliably, then narrow down where it occurs (binary search by commenting out code), then fix it and verify the fix didn't break anything else." + }, + { + "name": "Rubber Duck Debugging", + "explanation": "Explaining your code line by line — to an AI, a colleague, or even a rubber duck — often reveals the bug. The act of verbalizing your assumptions forces you to check each one. AI assistants are the ultimate rubber duck." + }, + { + "name": "Defensive Programming", + "explanation": "Check for problems before they crash your app. Validate inputs, handle null values, add type checks. It's easier to prevent bugs than to find them after they happen." + } + ], + "resources": [ + { + "title": "Chrome DevTools Debugging Guide", + "url": "https://developer.chrome.com/docs/devtools/javascript/", + "type": "docs", + "free": true + }, + { + "title": "VS Code Debugging Documentation", + "url": "https://code.visualstudio.com/docs/editor/debugging", + "type": "docs", + "free": true + }, + { + "title": "Fireship — Debugging Tips", + "url": "https://www.youtube.com/@Fireship", + "type": "video", + "free": true + }, + { + "title": "Python Debugging with pdb", + "url": "https://docs.python.org/3/library/pdb.html", + "type": "docs", + "free": true + } + ], + "tools": [ + { + "name": "Chrome DevTools", + "url": "https://developer.chrome.com/docs/devtools/", + "description": "Built-in browser debugger — breakpoints, network inspector, console, and more" + }, + { + "name": "Cursor", + "url": "https://cursor.sh", + "description": "Paste your error into the AI chat and get an explanation and fix instantly" + }, + { + "name": "Claude Code", + "url": "https://docs.anthropic.com/en/docs/claude-code", + "description": "Describe your bug in plain English and let AI find and fix it in your codebase" + }, + { + "name": "VS Code Debugger", + "url": "https://code.visualstudio.com/docs/editor/debugging", + "description": "Step through code line by line, inspect variables, and set breakpoints" + } + ], + "communities": [ + { + "name": "r/learnprogramming", + "url": "https://reddit.com/r/learnprogramming", + "platform": "reddit" + }, + { + "name": "Stack Overflow", + "url": "https://stackoverflow.com/", + "platform": "other" + }, + { + "name": "r/webdev", + "url": "https://reddit.com/r/webdev", + "platform": "reddit" + } + ], + "relatedSlugs": ["vibe-coding", "python", "javascript"], + "lastUpdated": "2026-03-10" +} diff --git a/packages/webapp/data/learn-to-code/for/data-analysts.json b/packages/webapp/data/learn-to-code/for/data-analysts.json new file mode 100644 index 0000000000..3b9ac3ee55 --- /dev/null +++ b/packages/webapp/data/learn-to-code/for/data-analysts.json @@ -0,0 +1,132 @@ +{ + "slug": "for/data-analysts", + "title": "Coding for Data Analysts", + "description": "You already think in data — coding just gives you superpowers. Stop clicking through Excel menus and start writing scripts that clean, analyze, and visualize data in seconds. Python + AI tools = the end of repetitive data work.", + "dimension": "audience", + "tags": ["python", "data-science", "pandas", "automation"], + "outcomes": [ + "Replace repetitive Excel workflows with Python scripts that process data in seconds", + "Generate professional charts and multi-page PDF reports automatically from any dataset", + "Build interactive dashboards stakeholders can explore without emailing you for filters", + "Connect directly to databases with SQL and schedule automated data refreshes" + ], + "aiTips": [ + "Paste a few rows of your actual data as context — AI writes much better pandas code when it can see your real column names and data types", + "Ask the AI to add print statements at each step so you can see what the data looks like as it transforms — this makes debugging much faster", + "When a chart doesn't look right, describe the visual problem specifically: 'the x-axis labels are overlapping' is more useful than 'it looks bad'", + "Ask the AI to write modular functions rather than one big script — it's easier to reuse and adapt pieces for your next analysis" + ], + "recommendedPaths": [ + { + "slug": "python", + "title": "Learn Python", + "reason": "Python + pandas is how analysts replace Excel. Write scripts that clean, transform, and analyze data in seconds instead of clicking through menus." + }, + { + "slug": "automate-your-workflow", + "title": "Automate Your Workflow", + "reason": "Stop manually pulling reports every Monday. Build scripts that fetch data, generate charts, and email summaries on a schedule." + }, + { + "slug": "debugging", + "title": "Debugging with AI", + "reason": "When your data pipeline breaks at 2am, you need to fix it fast. Learn to diagnose and fix errors systematically with AI help." + }, + { + "slug": "vibe-coding", + "title": "Try Vibe Coding", + "reason": "Describe your analysis in plain English — 'group by region, calculate monthly growth rate, make a heatmap' — and watch AI write the pandas code." + } + ], + "concepts": [ + { + "name": "DataFrames", + "explanation": "A DataFrame is a table in code — rows and columns you can filter, sort, and aggregate programmatically. pandas DataFrames are like Excel spreadsheets that can process millions of rows in seconds." + }, + { + "name": "Data Cleaning", + "explanation": "Real data is messy — missing values, duplicates, inconsistent formats. Data cleaning is usually 80% of the work. Python scripts make this repeatable — clean once, run the same steps on every new data drop." + }, + { + "name": "Visualization Libraries", + "explanation": "matplotlib creates any chart you can imagine. seaborn makes statistical charts beautiful with minimal code. Plotly adds interactivity. Together they replace Tableau for most reporting needs." + }, + { + "name": "SQL Fundamentals", + "explanation": "SQL is the language of databases. SELECT, WHERE, GROUP BY, and JOIN let you pull exactly the data you need from any database. Every analyst job expects SQL proficiency." + } + ], + "resources": [ + { + "title": "Python for Data Analysis (Wes McKinney)", + "url": "https://wesmckinney.com/book/", + "type": "article", + "free": true + }, + { + "title": "Kaggle Learn — Pandas", + "url": "https://www.kaggle.com/learn/pandas", + "type": "course", + "free": true + }, + { + "title": "Mode Analytics — SQL Tutorial", + "url": "https://mode.com/sql-tutorial", + "type": "course", + "free": true + }, + { + "title": "Streamlit Documentation", + "url": "https://docs.streamlit.io/", + "type": "docs", + "free": true + }, + { + "title": "Corey Schafer — Pandas Tutorials", + "url": "https://www.youtube.com/playlist?list=PL-osiE80TeTsWmV9i9c58mdDCSskIFdDS", + "type": "video", + "free": true + } + ], + "tools": [ + { + "name": "Cursor", + "url": "https://cursor.sh", + "description": "AI code editor — describe your analysis and it writes the pandas code" + }, + { + "name": "Claude Code", + "url": "https://docs.anthropic.com/en/docs/claude-code", + "description": "Build data pipelines and dashboards from plain English descriptions" + }, + { + "name": "Jupyter Notebooks", + "url": "https://jupyter.org/", + "description": "Mix code, charts, and notes in one document — the standard for data analysis" + }, + { + "name": "Streamlit", + "url": "https://streamlit.io", + "description": "Turn Python scripts into interactive web dashboards in minutes" + } + ], + "communities": [ + { + "name": "r/dataanalysis", + "url": "https://reddit.com/r/dataanalysis", + "platform": "reddit" + }, + { + "name": "r/learnpython", + "url": "https://reddit.com/r/learnpython", + "platform": "reddit" + }, + { + "name": "Kaggle Community", + "url": "https://www.kaggle.com/discussions", + "platform": "other" + } + ], + "relatedSlugs": ["python", "automate-your-workflow", "for/marketers"], + "lastUpdated": "2026-03-10" +} diff --git a/packages/webapp/data/learn-to-code/for/designers.json b/packages/webapp/data/learn-to-code/for/designers.json new file mode 100644 index 0000000000..d4f9837a4b --- /dev/null +++ b/packages/webapp/data/learn-to-code/for/designers.json @@ -0,0 +1,132 @@ +{ + "slug": "for/designers", + "title": "Coding for Designers", + "description": "You already think in layout, color, and interaction — coding just gives you the tools to build what you design. With AI writing the syntax for you, the gap between a Figma mockup and a live website has never been smaller.", + "dimension": "audience", + "tags": ["css", "html", "webdev", "design"], + "outcomes": [ + "Translate Figma mockups into working HTML and CSS without relying on a developer", + "Build a reusable component library with consistent design tokens you control", + "Create polished micro-interactions and animations that match your design intent", + "Ship a live portfolio site and React component library you can show in interviews" + ], + "aiTips": [ + "Share your Figma specs or screenshots directly — AI understands design language like spacing, type scale, and color values", + "Describe interactions the way you'd write a design note: 'button scales to 1.05 on hover with a 150ms ease-out transition'", + "Ask the AI to use CSS custom properties for all colors so you can swap themes without hunting through the code", + "When the output doesn't match your vision, annotate a screenshot and describe exactly what looks off rather than re-explaining from scratch" + ], + "recommendedPaths": [ + { + "slug": "html-css", + "title": "Learn HTML & CSS", + "reason": "You already think in layout and color — HTML and CSS are the code equivalent of your design tools. See your designs come alive in the browser." + }, + { + "slug": "build/personal-website", + "title": "Build a Personal Website", + "reason": "Turn your portfolio into a real website. Build it yourself, deploy it, and show it off with a custom domain." + }, + { + "slug": "javascript", + "title": "Learn JavaScript", + "reason": "Add interactivity to your designs — hover animations, scroll effects, dynamic content. JavaScript makes static pages feel alive." + }, + { + "slug": "vibe-coding", + "title": "Try Vibe Coding", + "reason": "Describe your Figma mockup in words and watch AI write the code. The fastest way to prototype in code instead of static screens." + } + ], + "concepts": [ + { + "name": "CSS Custom Properties (Design Tokens)", + "explanation": "Design tokens in code. Define your colors, spacing, and typography as CSS variables once, then reference them everywhere. Change the primary color in one line and the entire site updates — just like Figma styles." + }, + { + "name": "CSS Transforms and Transitions", + "explanation": "Transforms move, rotate, and scale elements. Transitions animate between states smoothly. Together they create the micro-interactions that make interfaces feel polished — hover effects, button animations, loading states." + }, + { + "name": "Component-Based Architecture", + "explanation": "Just like Figma components with variants, code components are reusable pieces with configurable properties. Build a Button component once, use it everywhere with different styles. Changes propagate automatically." + }, + { + "name": "Responsive Units", + "explanation": "rem, em, vw, vh, and % let your designs adapt to any screen size. Combined with media queries, you can create layouts that flow naturally from phone to desktop — no fixed pixel values needed." + } + ], + "resources": [ + { + "title": "CSS-Tricks — A Complete Guide to CSS Grid", + "url": "https://css-tricks.com/snippets/css/complete-guide-grid/", + "type": "article", + "free": true + }, + { + "title": "Refactoring UI", + "url": "https://www.refactoringui.com/", + "type": "article", + "free": false + }, + { + "title": "Kevin Powell — CSS for Designers", + "url": "https://www.youtube.com/@KevinPowell", + "type": "video", + "free": true + }, + { + "title": "Tailwind CSS Documentation", + "url": "https://tailwindcss.com/docs", + "type": "docs", + "free": true + }, + { + "title": "Storybook — UI Component Workshop", + "url": "https://storybook.js.org/docs", + "type": "docs", + "free": true + } + ], + "tools": [ + { + "name": "Cursor", + "url": "https://cursor.sh", + "description": "Describe your design in words and AI writes the HTML and CSS" + }, + { + "name": "Claude Code", + "url": "https://docs.anthropic.com/en/docs/claude-code", + "description": "Convert design specs into working code from your terminal" + }, + { + "name": "CodePen", + "url": "https://codepen.io", + "description": "Live playground to experiment with CSS animations and layouts" + }, + { + "name": "Tailwind CSS", + "url": "https://tailwindcss.com", + "description": "Utility-first CSS framework — design directly in your HTML with readable classes" + } + ], + "communities": [ + { + "name": "r/web_design", + "url": "https://reddit.com/r/web_design", + "platform": "reddit" + }, + { + "name": "r/Frontend", + "url": "https://reddit.com/r/Frontend", + "platform": "reddit" + }, + { + "name": "Designership Slack", + "url": "https://designership.com/", + "platform": "other" + } + ], + "relatedSlugs": ["html-css", "build/personal-website", "javascript"], + "lastUpdated": "2026-03-10" +} diff --git a/packages/webapp/data/learn-to-code/for/marketers.json b/packages/webapp/data/learn-to-code/for/marketers.json new file mode 100644 index 0000000000..f302ee4d8e --- /dev/null +++ b/packages/webapp/data/learn-to-code/for/marketers.json @@ -0,0 +1,121 @@ +{ + "slug": "for/marketers", + "title": "Coding for Marketers", + "description": "You don't need to become a developer — you need to automate the repetitive parts of your job, build internal tools your team actually needs, and stop waiting on engineering for simple changes. AI makes this realistic for the first time.", + "dimension": "audience", + "tags": ["javascript", "python", "automation", "beginners"], + "outcomes": [ + "Automate repetitive reporting tasks with Python scripts that run on a schedule", + "Build internal tools like UTM generators and content calendars without a developer", + "Make basic edits to landing pages and web copy without touching engineering", + "Connect marketing platforms to scripts via APIs to eliminate manual data exports" + ], + "aiTips": [ + "Start by describing your existing manual process — AI works best when you tell it what you're already doing step by step", + "Paste in a sample of your real data (a few rows of CSV) so the AI can write code that matches your exact column names", + "When something breaks, copy the full error message into the chat — AI can fix most errors immediately if you share the exact text", + "Ask the AI to explain each section after it writes code, so you understand what to change next time" + ], + "recommendedPaths": [ + { + "slug": "automate-your-workflow", + "title": "Automate Your Workflow", + "reason": "Stop manually pulling campaign reports and copying data between spreadsheets. Build scripts that do it for you on a schedule." + }, + { + "slug": "python", + "title": "Learn Python", + "reason": "Python is the fastest way to automate spreadsheet tasks, analyze campaign data, and generate reports — no computer science needed." + }, + { + "slug": "build/personal-website", + "title": "Build a Personal Website", + "reason": "Stop waiting on engineering for landing pages. Build and deploy pages yourself with HTML, CSS, and a free hosting tool." + }, + { + "slug": "vibe-coding", + "title": "Try Vibe Coding", + "reason": "Describe what you want in plain English and watch AI build it. The fastest way to create internal tools without learning syntax." + } + ], + "concepts": [ + { + "name": "Data Processing with Python", + "explanation": "Python is a marketer's best friend for data work. Reading CSVs, calculating metrics, generating reports — these are things you currently do in Excel that Python can automate and run on a schedule." + }, + { + "name": "HTML/CSS Basics", + "explanation": "Every web page is HTML (structure) and CSS (styling). Understanding this lets you tweak landing pages, fix formatting issues, and build simple tools without waiting for a developer." + }, + { + "name": "APIs and Automation", + "explanation": "APIs let your scripts talk to services like Google Ads, HubSpot, and Slack. Instead of manually exporting data and building reports, you can automate the entire pipeline." + }, + { + "name": "localStorage and Client-Side Apps", + "explanation": "You can build genuinely useful internal tools that run entirely in the browser with no server needed. localStorage keeps the data on your machine — perfect for personal productivity tools." + } + ], + "resources": [ + { + "title": "Automate the Boring Stuff with Python", + "url": "https://automatetheboringstuff.com/", + "type": "article", + "free": true + }, + { + "title": "freeCodeCamp - Responsive Web Design", + "url": "https://www.freecodecamp.org/learn/2022/responsive-web-design/", + "type": "course", + "free": true + }, + { + "title": "Google Apps Script Tutorial", + "url": "https://developers.google.com/apps-script/overview", + "type": "docs", + "free": true + }, + { + "title": "Zapier - Intro to APIs", + "url": "https://zapier.com/resources/guides/apis", + "type": "article", + "free": true + } + ], + "tools": [ + { + "name": "Claude Code", + "url": "https://docs.anthropic.com/en/docs/claude-code", + "description": "Describe what you want automated in plain English and it builds it" + }, + { + "name": "Google Apps Script", + "url": "https://script.google.com", + "description": "Automate Google Sheets, Docs, and Gmail — the easiest entry point for marketers" + }, + { + "name": "Cursor", + "url": "https://cursor.sh", + "description": "AI code editor for building web pages and tools visually" + } + ], + "communities": [ + { + "name": "r/learnprogramming", + "url": "https://reddit.com/r/learnprogramming", + "platform": "reddit" + }, + { + "name": "r/nocode", + "url": "https://reddit.com/r/nocode", + "platform": "reddit" + }, + { + "name": "Indie Hackers", + "url": "https://indiehackers.com", + "platform": "other" + } + ], + "relatedSlugs": ["python", "vibe-coding", "build/todo-app"], + "lastUpdated": "2026-03-06" +} diff --git a/packages/webapp/data/learn-to-code/for/students.json b/packages/webapp/data/learn-to-code/for/students.json new file mode 100644 index 0000000000..eae4408ac8 --- /dev/null +++ b/packages/webapp/data/learn-to-code/for/students.json @@ -0,0 +1,127 @@ +{ + "slug": "for/students", + "title": "Coding for Students", + "description": "Whether you're studying CS or something completely different, coding is the most useful skill you can learn in school. It's not just for tech jobs — it helps you analyze data, automate homework, build side projects, and stand out in any career.", + "dimension": "audience", + "tags": ["python", "programming", "beginners", "career"], + "outcomes": [ + "Automate repetitive study tasks like summarizing notes and generating flashcards", + "Build web apps with real data persistence that you can add to your portfolio", + "Analyze and visualize datasets for class assignments using Python and pandas", + "Deploy a full-stack project to the web using modern tools like React, Firebase, and Vercel" + ], + "aiTips": [ + "Use AI as a study partner — ask it to explain why the code works, not just to write it for you", + "When debugging, describe what you expected vs what actually happened — that context helps AI find the real issue faster", + "Ask the AI to suggest what to learn next after each project so you build skills in the right order", + "If you're short on time before a deadline, tell the AI your constraints upfront so it scopes the solution appropriately" + ], + "recommendedPaths": [ + { + "slug": "python", + "title": "Learn Python", + "reason": "The most beginner-friendly language — great for automating study tasks, analyzing data for class projects, and building scripts that save you hours." + }, + { + "slug": "build/todo-app", + "title": "Build a Todo App", + "reason": "Your first real project that teaches web development fundamentals. Simple enough to finish in an afternoon, impressive enough to show friends." + }, + { + "slug": "build/discord-bot", + "title": "Build a Discord Bot", + "reason": "Build something your friend group will actually use. Learn APIs, event handling, and deployment while making your server more fun." + }, + { + "slug": "get-a-dev-job", + "title": "Get Your First Dev Job", + "reason": "Turn your coding skills into a career. Build a portfolio, nail interviews, and land your first developer role after graduation." + } + ], + "concepts": [ + { + "name": "Text Processing", + "explanation": "Splitting text into chunks, finding patterns, and generating structured output from unstructured input. This is how chatbots, search engines, and autocomplete work under the hood." + }, + { + "name": "State Management", + "explanation": "Keeping track of data that changes over time — your GPA as you add courses, your timer as it counts down. Understanding state is the key to building any interactive application." + }, + { + "name": "Data Visualization", + "explanation": "Charts and graphs turn raw numbers into insights you can actually see. Libraries like matplotlib (Python) and Chart.js (JavaScript) make it easy to create professional visualizations from any dataset." + }, + { + "name": "Full-Stack Development", + "explanation": "Frontend (what users see) + Backend (data storage, authentication) = a full-stack app. Firebase handles the backend so you can focus on the user experience without managing servers." + } + ], + "resources": [ + { + "title": "CS50 — Harvard's Intro to Computer Science", + "url": "https://cs50.harvard.edu/x/", + "type": "course", + "free": true + }, + { + "title": "The Odin Project", + "url": "https://www.theodinproject.com/", + "type": "course", + "free": true + }, + { + "title": "freeCodeCamp", + "url": "https://www.freecodecamp.org/", + "type": "course", + "free": true + }, + { + "title": "GitHub Student Developer Pack", + "url": "https://education.github.com/pack", + "type": "docs", + "free": true + }, + { + "title": "Codecademy", + "url": "https://www.codecademy.com/", + "type": "course", + "free": false + } + ], + "tools": [ + { + "name": "Cursor", + "url": "https://cursor.sh", + "description": "AI code editor — build projects for class or side projects faster" + }, + { + "name": "GitHub", + "url": "https://github.com", + "description": "Store your code, collaborate on group projects, and build your portfolio" + }, + { + "name": "Claude Code", + "url": "https://docs.anthropic.com/en/docs/claude-code", + "description": "Get AI help while learning — explain code, debug errors, build features" + } + ], + "communities": [ + { + "name": "r/learnprogramming", + "url": "https://reddit.com/r/learnprogramming", + "platform": "reddit" + }, + { + "name": "r/csMajors", + "url": "https://reddit.com/r/csMajors", + "platform": "reddit" + }, + { + "name": "CS50 Discord", + "url": "https://discord.gg/cs50", + "platform": "discord" + } + ], + "relatedSlugs": ["python", "javascript", "get-a-dev-job"], + "lastUpdated": "2026-03-10" +} diff --git a/packages/webapp/data/learn-to-code/get-a-dev-job.json b/packages/webapp/data/learn-to-code/get-a-dev-job.json new file mode 100644 index 0000000000..0561cd4f06 --- /dev/null +++ b/packages/webapp/data/learn-to-code/get-a-dev-job.json @@ -0,0 +1,158 @@ +{ + "slug": "get-a-dev-job", + "title": "Get Your First Dev Job", + "description": "Breaking into tech is more realistic than ever. Companies need developers, and AI tools mean you can build production-quality projects faster than previous generations of developers. Here's a practical path from zero to employed.", + "dimension": "goal", + "tags": ["career", "programming", "webdev", "interview"], + "projectDescription": "You'll build a portfolio that actually gets interviews — a deployed full-stack project, a polished GitHub profile, and practice solving the coding challenges companies ask. Each step is designed around what hiring managers and recruiters actually look for.", + "outcomes": [ + "Ship a deployed full-stack portfolio project employers can click and use", + "Write a resume and GitHub profile that pass ATS filters and impress recruiters", + "Solve common interview coding challenges with explained, optimal solutions", + "Perform confidently in a simulated junior developer technical interview" + ], + "aiTips": [ + "Describe your target role when asking for help — 'junior frontend at a startup' gets more relevant advice than 'developer job'", + "Use AI to critique your resume and GitHub README as if it were a skeptical hiring manager", + "For coding challenges, attempt the problem yourself first before asking the AI for the solution — the struggle is the practice", + "Run mock interviews repeatedly with different questions until answers feel natural, not rehearsed" + ], + "prompts": [ + { + "step": 1, + "title": "Build a portfolio project", + "body": "Build a full-stack task management app with: user authentication (email/password), create/edit/delete tasks with due dates and priority levels, drag-and-drop to reorder tasks, and a dashboard showing task completion stats. Use React, Node.js, and PostgreSQL. Deploy to Vercel + Railway.", + "tools": ["cursor", "claude-code"], + "difficulty": "beginner", + "timeEstimate": "~2 hrs", + "stuckTip": "If the database connection fails, ask the AI to walk you through the Railway environment variables step by step." + }, + { + "step": 2, + "title": "Create your developer resume", + "body": "Generate a one-page developer resume in HTML/CSS that I can also export to PDF. Include sections for: technical skills, projects (with links to live demos and GitHub), education, and a brief professional summary. Use a clean, ATS-friendly design. Make it responsive so it also works as a web page.", + "tools": ["cursor", "claude-code", "generic"], + "difficulty": "beginner", + "timeEstimate": "~45 min", + "stuckTip": "If PDF export looks off, ask the AI to add print-specific CSS that hides nav elements and fixes page breaks." + }, + { + "step": 3, + "title": "Practice coding challenges", + "body": "Give me 5 coding challenges that commonly appear in junior developer interviews. For each one: state the problem clearly, let me attempt it, then show the optimal solution with a step-by-step explanation. Cover: array manipulation, string processing, basic algorithms, object transformation, and async/promises.", + "tools": ["cursor", "claude-code", "generic"], + "difficulty": "intermediate", + "timeEstimate": "~90 min", + "stuckTip": "If you're completely blocked on a challenge, ask the AI for just the algorithm approach (not the code) so you can implement it yourself." + }, + { + "step": 4, + "title": "Set up a GitHub profile", + "body": "Help me create a standout GitHub profile README with: a brief intro, my tech stack with badges, links to my best projects with descriptions, contribution stats, and a 'currently learning' section. Also help me write good README files for my top 3 repositories with screenshots, setup instructions, and tech stack details.", + "tools": ["cursor", "claude-code", "generic"], + "difficulty": "stretch", + "timeEstimate": "~60 min", + "stuckTip": "Ask the AI to review your README from the perspective of a hiring manager who has 30 seconds to decide whether to look at your code." + }, + { + "step": 5, + "title": "Prepare for the interview", + "body": "Simulate a technical interview for a junior frontend developer position. Ask me: 2 behavioral questions about my projects, 3 technical questions about React and JavaScript, 1 system design question about building a simple feature, and 1 live coding exercise. After each answer, give me feedback and a better answer.", + "tools": ["claude-code", "generic"], + "difficulty": "stretch", + "timeEstimate": "~60 min", + "stuckTip": "If your answers feel thin, ask the AI to help you build a story around a specific project using the STAR format (Situation, Task, Action, Result)." + } + ], + "concepts": [ + { + "name": "The Portfolio Over the Resume", + "explanation": "For junior developers, your projects speak louder than credentials. A deployed app that solves a real problem is more impressive than any certificate. Hiring managers want to see you can build things." + }, + { + "name": "Full-Stack Basics", + "explanation": "Most junior roles expect you to work across the stack — frontend (React, HTML/CSS), backend (Node.js, Python), and database (SQL). You don't need to be an expert in all of them, but you need to be comfortable navigating each layer." + }, + { + "name": "Git and Collaboration", + "explanation": "Every development team uses Git. Understanding branches, pull requests, and code reviews is essential. Contributing to open source is the best way to practice collaboration before your first job." + }, + { + "name": "Technical Communication", + "explanation": "Explaining your code and decisions clearly matters as much as the code itself. Write good READMEs, comment your thought process, and practice talking through your approach to problems." + } + ], + "resources": [ + { + "title": "The Odin Project — Full Stack Path", + "url": "https://www.theodinproject.com/", + "type": "course", + "free": true + }, + { + "title": "LeetCode — Interview Prep", + "url": "https://leetcode.com/", + "type": "course", + "free": false + }, + { + "title": "Tech Interview Handbook", + "url": "https://www.techinterviewhandbook.org/", + "type": "article", + "free": true + }, + { + "title": "Neetcode — Algorithm Patterns", + "url": "https://neetcode.io/", + "type": "video", + "free": true + }, + { + "title": "daily.dev — Developer News Feed", + "url": "https://app.daily.dev", + "type": "article", + "free": true + } + ], + "tools": [ + { + "name": "Cursor", + "url": "https://cursor.sh", + "description": "Build portfolio projects fast with AI assistance" + }, + { + "name": "Claude Code", + "url": "https://docs.anthropic.com/en/docs/claude-code", + "description": "Practice coding challenges and get instant feedback" + }, + { + "name": "GitHub", + "url": "https://github.com", + "description": "Your developer portfolio — employers will check your GitHub profile" + }, + { + "name": "Vercel", + "url": "https://vercel.com", + "description": "Deploy your portfolio projects for free so employers can see live demos" + } + ], + "communities": [ + { + "name": "r/cscareerquestions", + "url": "https://reddit.com/r/cscareerquestions", + "platform": "reddit" + }, + { + "name": "r/learnprogramming", + "url": "https://reddit.com/r/learnprogramming", + "platform": "reddit" + }, + { + "name": "daily.dev", + "url": "https://app.daily.dev", + "platform": "dailydev" + } + ], + "relatedSlugs": ["javascript", "build/personal-website", "for/students"], + "lastUpdated": "2026-03-10" +} diff --git a/packages/webapp/data/learn-to-code/html-css.json b/packages/webapp/data/learn-to-code/html-css.json new file mode 100644 index 0000000000..4df354d42d --- /dev/null +++ b/packages/webapp/data/learn-to-code/html-css.json @@ -0,0 +1,153 @@ +{ + "slug": "html-css", + "title": "Learn HTML & CSS", + "description": "HTML and CSS are the foundation of every website. HTML structures the content, CSS makes it look good. These are the easiest coding skills to learn — you'll see results in your browser within minutes.", + "dimension": "language", + "tags": ["html", "css", "webdev", "beginners"], + "projectDescription": "You'll build a real personal portfolio website from scratch — starting with text and images, then adding layout, colors, and responsive design. By the end, it'll be live on the internet with your own URL that you can share with anyone.", + "outcomes": [ + "Build and publish a complete personal portfolio site from scratch", + "Write semantic HTML that is accessible and SEO-friendly", + "Create responsive layouts using Flexbox and CSS Grid that work on any device", + "Add polished animations and interactions using pure CSS and the Intersection Observer API" + ], + "aiTips": [ + "Paste your full HTML into the chat and ask the AI to explain what each tag does — reading AI explanations of your own code is one of the fastest ways to learn", + "When a layout breaks, describe what you see vs. what you expect and ask the AI to diagnose it; this trains you to spot box-model and specificity issues yourself over time", + "Ask the AI to generate two or three alternative CSS approaches for the same layout so you can compare trade-offs between Flexbox, Grid, and older techniques", + "Use AI to review your finished page for accessibility issues — ask it to check color contrast, missing alt text, and keyboard navigation before you publish" + ], + "prompts": [ + { + "step": 1, + "title": "Your first web page", + "body": "Create a personal homepage about me. Include a heading with my name, a short bio paragraph, a profile photo placeholder, and a list of 3 hobbies. Use semantic HTML (header, main, section, footer). Add basic CSS to center everything and use a nice font.", + "tools": ["cursor", "claude-code", "generic"], + "difficulty": "beginner", + "timeEstimate": "~30 min", + "stuckTip": "Open the page in Chrome, right-click any element, and choose 'Inspect' to see exactly what styles are being applied and why." + }, + { + "step": 2, + "title": "Make it responsive", + "body": "Update the homepage to look great on both phones and desktops. Add a navigation bar that collapses into a hamburger menu on mobile. Use CSS Grid for the layout and Flexbox for the nav. Add a dark color scheme with good contrast.", + "tools": ["cursor", "claude-code", "generic"], + "difficulty": "beginner", + "timeEstimate": "~45 min", + "stuckTip": "Toggle Chrome DevTools into mobile view (Ctrl+Shift+M) and shrink the viewport width slowly to pinpoint exactly where the layout breaks." + }, + { + "step": 3, + "title": "Add a project showcase", + "body": "Add a 'Projects' section with 4 cards in a responsive grid. Each card should have an image, title, description, and a 'View project' link. Cards should have a subtle shadow and a hover effect that lifts them up slightly.", + "tools": ["cursor", "claude-code"], + "difficulty": "intermediate", + "timeEstimate": "~1 hr", + "stuckTip": "If the grid isn't behaving, paste your CSS into the AI and ask it to explain what each grid property does — understanding grid-template-columns will unblock most issues." + }, + { + "step": 4, + "title": "Build a contact form", + "body": "Add a contact section with a form that has name, email, and message fields. Style the inputs to match the page design. Add CSS-only validation styles — green border for valid fields, red for invalid. The submit button should have a gradient background.", + "tools": ["cursor", "claude-code"], + "difficulty": "stretch", + "timeEstimate": "~1 hr", + "stuckTip": "CSS validation styles rely on :valid and :invalid pseudo-classes — ask the AI to explain how browsers decide when an input is valid, and make sure your inputs have the correct type attribute." + }, + { + "step": 5, + "title": "Add animations and polish", + "body": "Add CSS animations: fade-in sections as you scroll down (using @keyframes and Intersection Observer), smooth transitions on all hover states, and a subtle parallax effect on the hero section. Add a custom favicon and Open Graph meta tags for social sharing.", + "tools": ["cursor", "claude-code"], + "difficulty": "stretch", + "timeEstimate": "~1.5 hrs", + "stuckTip": "If Intersection Observer isn't firing, add a console.log inside the callback to confirm the observer is attached, then ask the AI why the threshold or root margin might be causing it to miss your elements." + } + ], + "concepts": [ + { + "name": "Semantic HTML", + "explanation": "Tags like
,