Learn to build production applications by combining visual and textual inputs with AI coding tools. You will explore multi-modal programming where screenshots, images, and text serve as inputs for AI-assisted code generation, and set up development environments configured for visual AI workflows. The course covers prompt engineering with visual context to improve code generation accuracy, and hands-on development with GitHub Copilot in VS Code for inline suggestions and chat-based interactions. You will build a complete project using live reload and browser developer tools for rapid feedback between AI generation and visual output. The iterative development module teaches documentation-driven design where documentation guides AI toward desired outcomes, image-based iteration for refining generated code through visual comparison, and automated checks and validations that maintain quality through development cycles. You will learn to identify and overcome common iteration challenges including regression and context drift. The advanced module covers Model Context Protocol for connecting AI tools with external capabilities, Playwright for browser automation and visual testing, and Playwright MCP for AI-driven browser interactions that validate web applications directly. By completing this course, you will be able to convert screenshots into production code through iterative, automated, multi-modal AI workflows.
Covers multi-modal, screenshots, overview, programming, and visual.
涵盖的内容
15个视频6篇阅读材料
显示有关单元内容的信息
15个视频•总计52分钟
Course Introduction•1分钟
What Is Multi-Modal Programming•3分钟
Setting Up Multi-Modal Dev Environments•6分钟
Your First Screenshot to Code Conversion•6分钟
Lesson 1.1 Conclusion•0分钟
Prompt Engineering Introduction•1分钟
Prompt Engineering with Visual Context•5分钟
Introduction to GitHub Copilot and VS Code•5分钟
Developing with GitHub Copilot•5分钟
Lesson 1.2 Conclusion•1分钟
Building Introduction•1分钟
What Will We Build•4分钟
Live Reload and Developer Tools•7分钟
Setting Up the Development Environment•7分钟
Lesson 1.3 Conclusion•1分钟
6篇阅读材料•总计6分钟
Key Terms•1分钟
Reflection•1分钟
Key Terms•1分钟
Reflection•1分钟
Key Terms•1分钟
Reflection•1分钟
Iterative Development and Automation
第 2 单元•小时 后完成
单元详情
Covers iterative, documentation, iteration, designing, and context.
涵盖的内容
12个视频4篇阅读材料
显示有关单元内容的信息
12个视频•总计39分钟
MCP and Automation Introduction•1分钟
Introduction to MCP•4分钟
Overview of Playwright•4分钟
Using Playwright MCP•6分钟
Overview of What We Built•3分钟
Course Conclusion•1分钟
Iterative Development Introduction•1分钟
Designing with Documentation•4分钟
Iterating Over First Changes•4分钟
Using Images for Iteration•6分钟
Challenges with Iteration•3分钟
Automating Checks and Validations•4分钟
4篇阅读材料•总计40分钟
Key Terms•10分钟
Reflection: MCP and Automation•10分钟
Key Terms•10分钟
Reflection: Iterative Development•10分钟
Capstone Project
第 3 单元•小时 后完成
单元详情
Build a web application using multi-modal AI development techniques, progressing from screenshot-to-code conversion through iterative refinement with visual feedback to automated browser testing with MCP and Playwright. The project demonstrates the complete multi-modal development lifecycle including prompt engineering with visual context, GitHub Copilot integration, and documentation-driven iteration.
When will I have access to the lectures and assignments?
To access the course materials, assignments and to earn a Certificate, you will need to purchase the Certificate experience when you enroll in a course. You can try a Free Trial instead, or apply for Financial Aid. The course may offer 'Full Course, No Certificate' instead. This option lets you see all course materials, submit required assessments, and get a final grade. This also means that you will not be able to purchase a Certificate experience.
What will I get if I subscribe to this Specialization?
When you enroll in the course, you get access to all of the courses in the Specialization, and you earn a certificate when you complete the work. Your electronic Certificate will be added to your Accomplishments page - from there, you can print your Certificate or add it to your LinkedIn profile.
Is financial aid available?
Yes. In select learning programs, you can apply for financial aid or a scholarship if you can’t afford the enrollment fee. If fin aid or scholarship is available for your learning program selection, you’ll find a link to apply on the description page.