Learning Objectives • What You'll Build • Labs • Resources
Welcome to "Multi-modal Programming: Building Websites with AI Tools"! This course will guide you through the process of building a professional personal landing page using multi-modal AI programming techniques. You'll learn how to leverage visual inputs (screenshots, mockups, wireframes) with AI tools like Claude Code, GitHub Copilot, and Gemini CLI to transform designs into functional websites.
By the end of this course, you will be able to:
- Understand the fundamentals of multi-modal AI programming and visual-to-code workflows
- Use screenshots, wireframes, and mockups as input for AI-powered code generation
- Master prompt engineering techniques with visual context
- Work effectively with Claude Code, GitHub Copilot, and Gemini CLI
- Build responsive, interactive websites using AI-assisted development
- Implement professional web features like forms, animations, and responsive design
- Test, optimize, and deploy AI-generated websites
Throughout this course, you will build a professional personal landing page website from scratch. Your project will include:
- A responsive hero section with clear value proposition
- An about section showcasing your background and skills
- Interactive navigation and smooth scrolling
- Contact forms with validation
- Modern design elements including animations and visual effects
- Mobile-responsive layouts that work on all devices
- A fully deployed, production-ready website
Module 1.1: Understanding Multi-modal AI Programming
- What is multi-modal programming and how to use visual inputs with AI
- Setting up your multi-modal development environment
- Your first screenshot-to-code conversion
Module 1.2: Mastering Visual Input Techniques
- Prompt engineering with visual context
- Introduction to GitHub Copilot and Visual Studio Code
- Developing with GitHub Copilot's visual capabilities
Module 1.3: Building a Personal Landing Page
- Planning what to build with visual references
- Live reload and developer tools workflow
- Setting up the development environment
Module 2.1: Complex Layout and Responsive Design
- Designing with documentation and visual references
- Iterating over changes using screenshots
- Using images for effective iteration
- Automating checks and validations
Module 2.2: Interactive Features and Advanced Patterns
- Introduction to Model Context Protocol (MCP)
- Overview of Playwright for testing
- Using Playwright MCP for automated testing
- Course wrap-up and final project showcase
This course includes hands-on labs aligned with each module:
- Lab 1.1: Setting Up Multi-modal Development Tools
- Lab 1.2: Visual Input and Prompt Engineering
- Lab 1.3: Building Your Landing Page Foundation
- Lab 2.1: Advanced Layouts and Responsive Design
- Lab 2.2: Interactive Features and Testing
The following AI-powered development tools are used throughout this course:
- Claude Code - AI coding assistant with visual input capabilities
- Gemini CLI - Command-line tool for visual code generation
- GitHub Copilot - AI pair programmer with screenshot support
- VS Code or preferred IDE - Your development environment
- Git - Version control for your projects
- Modern web development best practices
- Responsive design principles
- Accessibility guidelines (WCAG)
- Documentation for each AI tool
Throughout the course, you'll work with:
- Landing page wireframes and design templates
- Example screenshots for visual reference
- Sample websites for inspiration (like One Page Love)
- Color schemes and typography guidelines
Your final landing page project will be evaluated on:
- Technical Implementation (40%): Clean, functional code using AI tools effectively
- Design Quality (25%): Professional appearance and user experience
- Responsive Design (20%): Perfect functionality across all devices
- Performance & Optimization (15%): Fast loading and production-ready code
Ready to begin? Start with Lab 1.1: Setting Up Multi-modal Development Tools to configure your environment and tools.