Working with LLMs

What are we trying to accomplish?

The goal of these two lectures, UI Fundamentals and Building Your SPA, is to equip students with the knowledge and practical skills necessary to transform an application idea into a functional, visually appealing, and interactive Single Page Application (SPA) using AI-powered development tools like Claude Code. Students will first learn how to approach software development from a planning perspective by identifying the problems their application solves, defining user goals, outlining features, mapping user journeys, and creating visual wireframes that clearly communicate their vision. They will then learn how to bring those designs to life by understanding the roles of foundational front-end technologies such as React, Vite, Node.js, npm, and React Router DOM, while leveraging Claude Code, specialized Skills, and MCP servers to streamline development, validate functionality, and refine their application's design. By the end of these lectures, students should be capable of independently planning, directing, building, testing, and version-controlling a complete front-end application without needing to manually write or fully understand the underlying code, establishing a strong foundation for eventually integrating databases, authentication, APIs, and other full-stack capabilities.

Lectures and Assignments

Lectures

• Lecture - User Interface Fundamentals
• Lecture - Building your SPA

Assignments

TLO's (Terminal Learning Objectives)

• Create Skills within Claude Codes folder structure
• Identify Skills needed for Front-End Design
• Use Claude Code to create a Vite + React SPA
• Create Wire Frames for a Front-End Application

ELO's (Enabling Learning Objectives)

• Access the Skills Store within Anthropic
• Understand the fundamentals of a good User Interface