Claude Code Training Website
A training site that teaches students how to build a portfolio with Claude Code, utilizing concepts from agents to MCP servers.
In Major Project 3 we designed training materials for a specific community. Our team wrote a tutorial that walks a student (ideally freshman studying CS) through building their own portfolio site using Claude Code. Claude Code is Anthropic's AI coding agent, a tool that our team believed will be crucial in the future of software development. Our guide has six parts, starting with a conceptual overview of AI agents and context windows, moving through installation and first commands, and finishing with connecting MCP servers, and generating a static site. We built the site from scratch in HTML and CSS, which gave us full control over how our content is ingested. The tutorial uses code blocks for commands and separate callouts for tips. We aimed consistent formatting across the whole guide.
Live tutorial
The full website is embedded below.
Process and teamwork
A key part of this, that is unique when compared to other projects, is that we had to delegate the work between 4 team members. We split the work up and drafted all of our parts before porting them into the actual website.