AI Web Design Foundations Learning

AI Web Design Foundations Course in Multan

This course follows Web Design Foundations and introduces students to a practical, AI-assisted design-to-code workflow — entirely using free tools. No paid AI subscriptions. No expensive software. Just a laptop, a Google account, and VS Code. This is not a vibe-coding course. Students use AI as a tool, not a crutch — they must understand what the AI generates and be able to edit it.

Who should attend?

This course is designed for students who have a basic understanding of HTML & CSS and want to learn how to accelerate their design and development workflow using modern AI tools without blindly copy-pasting code.

Learning Outcomes

By the end of this course, you will be able to:

• Write effective AI prompts to generate web page designs in Google Stitch.
• Use Google Antigravity or VS Code + OpenCode to convert design images into Bootstrap 5 code.
• Read, understand, and modify AI-generated Bootstrap HTML.
• Apply Bootstrap 5 grid system, components, and utilities confidently.
• Test and fix responsive layouts using Chrome DevTools.
• Build and deploy a complete multi-page Bootstrap website.
• Explain what the AI did and why — not just accept its output.

Course Outline

The curriculum walks you through the core workflow of rapid UI generation and clean, manual editing:

Phase 1: Bootstrap Foundations & AI Workflow

• Course Intro & Tool Setup: Google Stitch, Antigravity, OpenCode, and DevTools
• Bootstrap 5 Basics: Containers, rows, columns, and reading Bootstrap class names
• Stitch Designs: Writing design prompts, generating layouts, and exporting screenshots
• Design to Code: Feeding designs to AI and making first manual adjustments

Phase 2: Bootstrap Components & Prompt Engineering

• Bootstrap Components: Navbars, cards, buttons, badges, modals, and form elements
• Better Prompts = Better Code: Code specifications, prompt structures, and iteration
• Multi-Page Layouts: Consistent navbars, page links, and relative file paths

Phase 3: Real Projects & Deployment

• Forms, Validation & Polish: Inputs, client-side validation, spacing, and typography utilities
• Final Project Build: 3-page site generation and code-level tuning
• Deploy & Present: Git version control, Netlify hosting, and code presentations

Course Projects

• Project 1: AI-Designed Business Page - Pick a local Pakistani business, design a landing page in Google Stitch, convert to Bootstrap code, and manually customize 5 key features.
• Project 2: Two-Page Website - A consistent 2-page site (Home + About) designed in Stitch and coded with Bootstrap and a shared navbar.
• Project 3: Final Portfolio Site - A 3-page Bootstrap portfolio website fully designed in Stitch, coded with AI assistance, and deployed live on Netlify.