Creating a Power Page with Claude - Session 2: Creating the Site

In Session 2 of this series, Brian Knight shows how to use VS Code + Claude Code to create a full “county 311” style website prototype and iterate on it fast, before deploying it to Power Pages in the next video. Instead of starting from the usual templated Power Pages look, you’ll generate a modern single-page experience first, then refine it with prompts like you’re pair-programming.

Brian walks through opening your project folder, running the provided prompt from the series guide, and letting Claude scaffold the site locally. You’ll see how to approve actions as Claude runs commands, how to handle credit limits in the free plan, and how to spin up a local dev URL to preview the site. Then the fun part starts: making rapid changes with natural language, using screenshots to request UI fixes, adding features like a “use my location” button, filtering what appears on maps, and running an accessibility pass to improve contrast and meet WCAG needs.

By the end, you’ll have a working local prototype with mock data and iterative improvements, ready for the next step: deploying to Power Pages and wiring it to Dataverse.

⛔ Important note: This feature requires a pro license of Claude. Watch the video to see if it's worth it for you but it has made me 10x more effective and productive.

✅ Step-by-Step Cheat Sheet Word Doc: https://tinyurl.com/claudepowerpage

Part 1 - Installing the Prerequisites - https://youtu.be/Hisv23A97Fc
Part 2 - Using Claude to Build Your Power Page: https://youtu.be/hLM4LSd5xnQ
Part 3 - Deploying to Power Pages https://youtu.be/RW_wJ1ZF2ys
Part 4 - Connecting to Dataverse and Using Mock Data https://youtu.be/PDB-0-M69bQ
Part 5 - Connecting the Site to Data https://youtu.be/rur3hnbLnNU
Part 6 - https://youtu.be/mnondFuOJfQ

👉 On-Demand Learning - Start With The FREE Community Plan: https://prag.works/odl-trial-yt

🔗Pragmatic Works On-Demand Learning Packages: https://pragmaticworks.com/pricing/
🔗Pragmatic Works Boot Camps: https://pragmaticworks.com/boot-camps/
🔗Pragmatic Works Hackathons: https://pragmaticworks.com/private-training/hackathons/
🔗Pragmatic Works Virtual Mentoring: https://pragmaticworks.com/virtual-mentoring/
🔗Pragmatic Works Enterprise Private Training: https://pragmaticworks.com/private-training/customized-enterprise-training/
🔗Pragmatic Works Blog: http://blog.pragmaticworks.com/

00:00 Series recap + Session 2 goal: create the site with Claude Code
00:40 What we’re building: a county 311 Power Pages experience
02:16 Claude account options and credit considerations
03:34 Open your project folder in VS Code
04:32 Paste and run the long “create site” prompt
07:24 Approve commands and permissions as Claude executes
10:54 Site scaffolding completes + dev server options
12:22 Preview the local site and explore the mock experience
14:06 Iteration demos: remove UI elements and filter map categories
15:58 Screenshot prompting: add “use my location” + accessibility improvements

Let's connect:

✔️Discord: https://prag.works/yt-discord
✔️Facebook: https://prag.works/yt-fb
✔️Instagram: https://prag.works/yt-insta
✔️LinkedIn: https://prag.works/yt-li

Pragmatic Works
350 Governor St, Suite 300, Green Cove Springs, FL 32043
Phone: (904) 638-5743
Email: training@pragmaticworks.com
#PragmaticWorks

Видео Creating a Power Page with Claude - Session 2: Creating the Site канала Pragmatic Works