{"componentChunkName":"component---src-templates-section-tsx","path":"/claude-code-introduction","result":{"data":{"section":{"title":"Introduction on Claude Code","subtitle":"Getting Started with Claude Code CL","slug":"claude-code-introduction","videoDuration":116,"releaseDate":null,"tags":null,"contentful_id":"2hg2rs6wBhnu5V9XgvOGB0","isFree":true,"illustration":null,"source":null,"colors":null,"chapter":[{"title":"Claude Code Crash Course on Agentic Workflows","slug":"claude-code","hoursOfVideo":1,"description":{"description":"This course teaches you how to use Claude Code efficiently with slash commands, hooks, parallel workflows, and more. You’ll learn the mindset of working with AI, simplify repetitive tasks and connect tools into one unified agentic workflow, giving you everything you need to go from idea to working app."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/1bYdUtniEAUH3jdqQd3Qc1/7cf21d20882bfe59f01d7bc74e81010d/react-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/39xkJS0CvrRBKgMnyLYBks/14d434f819fef062dce8c72efecbc74d/react-logo.png?w=400&q=50"}}],"instructors":[{"name":"Vanh Roeung","slug":"instructor/vanh","avatar":{"fluid":{"src":"//images.ctfassets.net/ooa29xqb8tix/2anEzU2n2tP4f0kSZCLWb2/0358b4770ab46ed28f961cfb81a09b3b/Screenshot_2025-08-22_at_11.29.49â__AM.png?w=200&h=200&q=50"}}}],"illustration":{"file":{"url":"//images.ctfassets.net/ooa29xqb8tix/304Tlb60pUSlhG8CMC5gUf/4bc2717aad54e15dd68d275520eb06d8/claude-code.svg"}},"illustrationConverted":{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/76YCbDJok71emzDKE43HtK/7383feb1723d2f7e52a76fa4f0186f1a/claude-code.png?w=400&q=50"}},"colors":["#171515","#322E2E"],"sections":[{"title":"Introduction on Claude Code","subtitle":"Getting Started with Claude Code CL","slug":"claude-code-introduction","videoDuration":116,"releaseDate":null,"tags":null},{"title":"Beat Context Pruning & Pick the Perfect Anthropic Plan","subtitle":"Running Claude Code Directly for Full-Context","slug":"claude-code-beat-context-pruning","videoDuration":491,"releaseDate":null,"tags":null},{"title":"Why the Terminal Matters: The Foundation for Claude Code and CLI Tools","subtitle":"Command Line Crash Course: Unlocking Claude Code’s Power","slug":"claude-code-why-the-terminal-matters","videoDuration":600,"releaseDate":null,"tags":null},{"title":"How to Safely Resolve npm Permission Errors Without sudo","subtitle":"Why You Shouldn’t Use sudo for npm Installs","slug":"claude-code-how-to-safely-resolve-npm-permission-errors-without-sudo","videoDuration":443,"releaseDate":null,"tags":["npm permission","sudo","npm installs","error fix"]},{"title":"Using Claude Code’s /init and claude.md Effectively","subtitle":"Customizing Your Project Guide","slug":"claude-code-using-claude-codes-init-and-claude-md-effectively","videoDuration":277,"releaseDate":null,"tags":["Claude code","init","claude.md","customizing Claude.md","project guide","ai coding assistant","Claude setup","claude workflow","next.js project","terminal commands"]},{"title":"Navigating Your Project with Claude Code","subtitle":"Finding and Understanding Feature Implementations","slug":"claude-code-navigating-your-project-with-claude-code","videoDuration":241,"releaseDate":null,"tags":["Claude code","codebase navigation","feature implementation","developer onboarding","code exploration","ai coding tools","code understanding","project navigation","software development","claude ai"]},{"title":"Using Claude Code in the Terminal and IDE","subtitle":"Setting Up the Claude Extension in VS Code, Cursor, or Windsurf","slug":"claude-code-using-claude-code-in-the-terminal-and-ide","videoDuration":262,"releaseDate":null,"tags":["claude code","terminal workflow","ide integration","vs code","cursor editor","windsurf","ai coding assistant","code setup","developer productivity","coding tools"]},{"title":"Slash Commands in Claude Code","subtitle":"How to Build and Use Slash Commands in Claude Code","slug":"claude-code-slash-commands","videoDuration":291,"releaseDate":null,"tags":["Claude code","slash commands","custom commands","workflow automation","create slash commands","coding shortcuts","developer productivity","markdown commands","Claude tutorial","ai coding tools"]}],"releaseDate":"2025-09-01","isFreeCourse":false,"isFeatured":true,"tags":["Claude Code","terminal","slash commands","hooks","parallel workflows","agentic workflows"],"promoUrl":null,"contentType":"Course","source":null}],"author":[{"name":"Vanh Roeung","jobTitle":"Developer","twitterHandle":"@VanhDesign","biography":{"biography":"Developer at Design+Code"},"avatar":{"fluid":{"src":"//images.ctfassets.net/ooa29xqb8tix/2anEzU2n2tP4f0kSZCLWb2/0358b4770ab46ed28f961cfb81a09b3b/Screenshot_2025-08-22_at_11.29.49â__AM.png?w=200&h=200&q=50"}},"location":"Montreal, Canada","slug":"instructor/vanh","chapter":[{"title":"Claude Code Crash Course on Agentic Workflows","slug":"claude-code","hoursOfVideo":1,"description":{"description":"This course teaches you how to use Claude Code efficiently with slash commands, hooks, parallel workflows, and more. You’ll learn the mindset of working with AI, simplify repetitive tasks and connect tools into one unified agentic workflow, giving you everything you need to go from idea to working app."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/1bYdUtniEAUH3jdqQd3Qc1/7cf21d20882bfe59f01d7bc74e81010d/react-logo.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/39xkJS0CvrRBKgMnyLYBks/14d434f819fef062dce8c72efecbc74d/react-logo.png?w=400&q=50"}}],"releaseDate":"2025-09-01"},{"title":"Master Agentic Workflows","slug":"agentic-workflows","hoursOfVideo":2,"description":{"description":"In this course, you’ll learn how to add agents to your workflows. An agent workflow is more than just a simple automation. Instead of following a fixed script, agents can make decisions, adjust to changes, and figure out the best way to complete a task. We’ll start by exploring what MCP servers are and all the new possibilities they bring. Then, we’ll dive into agentic frameworks that make it easy to build flexible, helpful agents that can take care of your everyday tasks."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/7bIHb2z3qClO9GfyPwj6nP/4cb3a08cdc0d34645540b1295f96dc67/Logo_React.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/7bIHb2z3qClO9GfyPwj6nP/4cb3a08cdc0d34645540b1295f96dc67/Logo_React.png?w=400&q=50"}}],"releaseDate":"2025-04-29"},{"title":"Build a React Native app with Claude AI","slug":"react-native-ai","hoursOfVideo":14,"description":{"description":"This comprehensive course explores the integration of cutting-edge AI tools into the React Native development workflow, revolutionizing the approach to mobile application creation. Participants will learn to leverage AI-powered platforms such as Claude and Locofy to expedite coding processes, enhance problem-solving capabilities, and optimize productivity."},"logos":[{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/66irryXYcTuNVwWnuuzYz5/6097d6a5f5bf4d44678566034879d2a1/logo-react-native.png?w=400&q=50"}},{"fixed":{"src":"//images.ctfassets.net/ooa29xqb8tix/66irryXYcTuNVwWnuuzYz5/6097d6a5f5bf4d44678566034879d2a1/logo-react-native.png?w=400&q=50"}}],"releaseDate":"2024-09-17"}]}]},"en":{"title":"Introduction on Claude Code","subtitle":"Getting Started with Claude Code CL","excerpt":{"markdown":{"html":"<p>In this course you will discover everything you need to turn an idea into a working application by collaborating with AI.</p>","excerpt":"In this course you will discover everything you need to turn an idea into a working application by collaborating with AI."}},"content":{"markdown":{"htmlAst":{"type":"root","children":[{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"In this course you will discover everything you need to turn an idea into a working application by collaborating with AI."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"You will get hands-on with the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"tools"}]},{"type":"text","value":" and, more importantly, the "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"mind-set"}]},{"type":"text","value":" of thinking like a builder:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Prompt engineering"}]},{"type":"text","value":" and "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"context engineering"}]},{"type":"text","value":" basics"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"How to create productive "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"agents"}]},{"type":"text","value":" and automate repetitive work"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A step-by-step workflow that starts with choosing the right AI coding tool"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Why we start with Claude Code"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Our journey begins with "},{"type":"element","tagName":"a","properties":{"href":"https://www.anthropic.com/claude-code"},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Claude Code"}]}]},{"type":"text","value":", Anthropic’s command-line interface for large-context models. Claude Code is both efficient and highly customizable, making it ideal for an agentic workflow."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"//images.ctfassets.net/ooa29xqb8tix/6z33WCRwenXexQ4ev2bpy3/749c7e59f188c33bf34d166528db1ade/claudeCode.jpg","alt":"claudeCode"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"What you will master inside Claude Code"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Slash commands"}]},{"type":"text","value":" that let you drop full prompt templates or trigger entire workflows with a single line"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Hooks"}]},{"type":"text","value":" that control how Claude Code behaves so it adapts to your style and project needs"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Parallelization"}]},{"type":"text","value":" so multiple model instances can tackle different tasks at once"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Seamless integration of "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"CLI tools"}]},{"type":"text","value":" directly inside Claude so your whole tool-chain feels like one agent"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"The tech stack you will build with"}]}]},{"type":"text","value":"\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n"},{"type":"element","tagName":"table","properties":{},"children":[{"type":"element","tagName":"thead","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"th","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Layer"}]}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Tool"}]}]},{"type":"element","tagName":"th","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Why we use it"}]}]}]}]},{"type":"element","tagName":"tbody","properties":{},"children":[{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Front-end"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://nextjs.org/"},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Next.js"}]}]},{"type":"text","value":" / "},{"type":"element","tagName":"a","properties":{"href":"https://react.dev/"},"children":[{"type":"text","value":"React"}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Modern, SEO-friendly, component-driven"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Styling"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://tailwindcss.com/"},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Tailwind CSS"}]}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Utility classes for rapid UI iteration"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Back-end & Auth"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://supabase.com/"},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Supabase"}]}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Postgres, storage, and Auth in one open-source service"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Hosting & Deploy"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://vercel.com/"},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Vercel"}]}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Instant CI/CD, edge caching, zero-config deploys"}]}]},{"type":"element","tagName":"tr","properties":{},"children":[{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"UI Builder"}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"element","tagName":"a","properties":{"href":"https://aura.build/"},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Aura"}]}]}]},{"type":"element","tagName":"td","properties":{},"children":[{"type":"text","value":"Prompt-based component creation with visual Design Mode and full-access Code Mode"}]}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"What Aura brings to the table"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"With Aura you will design components by simply prompting. You can tweak every detail visually in "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Design Mode"}]},{"type":"text","value":" (no credits needed) and switch to "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Code Mode"}]},{"type":"text","value":" whenever you want absolute control."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"//images.ctfassets.net/ooa29xqb8tix/2uvozJmuPCdUZXxgyBQ3AE/237db367269c97ad37dac22fcb0c88ff/Aura.jpg","alt":"Aura"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"What you will achieve"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"We start with fundamentals, then dig into advanced features:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Craft reusable slash commands and hooks"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Launch parallel tasks that speed up development"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Scaffold a full-stack app, style it, add authentication, and deploy it live"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Design beautiful UI components in Aura without writing boilerplate code"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"By the end of the course you will understand each step involved in building and shipping your own product. If you have ever had an idea for an app but were unsure where to begin, this is your starting point."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Let’s dive in. Our first stop is Claude Code, your AI coding agent."}]}]}],"data":{"quirksMode":false}}}}},"contentfulChapter":{"test":null,"metadata":{"title":"Claude Code Crash Course on Agentic Workflows","slug":"claude-code","description":"This course teaches you how to use Claude Code efficiently with slash commands, hooks, parallel workflows, and more. You’ll learn the mindset of working with AI, simplify repetitive tasks and connect tools into one unified agentic workflow.","keywords":"claude code, agentic workflow, slash command, hooks, parallel workflows, ","image":"https://www.dropbox.com/scl/fi/nlvmlv8l7ss5wr2blrwzk/claude-code.jpg?rlkey=blzzwn00ujon53e0xlwwswxa6&dl=0"}},"contentfulMetadata":{"title":"Claude Code Crash Course on Agentic Workflows","slug":"claude-code","description":"This course teaches you how to use Claude Code efficiently with slash commands, hooks, parallel workflows, and more. You’ll learn the mindset of working with AI, simplify repetitive tasks and connect tools into one unified agentic workflow.","keywords":"claude code, agentic workflow, slash command, hooks, parallel workflows, ","image":"https://www.dropbox.com/scl/fi/nlvmlv8l7ss5wr2blrwzk/claude-code.jpg?rlkey=blzzwn00ujon53e0xlwwswxa6&dl=0"}},"pageContext":{"slug":"claude-code-introduction","contentType":"Courses","isCourse":true,"isLivestream":false,"isTutorial":false,"chapterSlug":"claude-code"}}}