Module 1: Web Foundation + AI Workflow
Build a functional, responsive 3-page website using semantic HTML and CSS while establishing your AI-assisted development workflow. Learn to collaborate with AI tools like Cursor IDE and Claude Code to accelerate development.
Module Objectives
Semantic HTML Mastery
Create accessible, well-structured web pages using semantic HTML5 elements that communicate meaning to browsers, search engines, and assistive technologies.
Responsive CSS Design
Build mobile-first responsive layouts using modern CSS techniques including Flexbox, Grid, and media queries that work beautifully across all devices.
AI-Powered Development Workflow
Establish effective patterns for working with Cursor IDE and Claude Code to generate code, debug issues, and learn faster through AI collaboration.
Web Accessibility Fundamentals
Apply WCAG guidelines to ensure your website is usable by everyone, including users with disabilities, while learning best practices for inclusive design.
Module Roadmap
Recommended Learning Path
Follow this sequence for optimal learning:
Each step builds upon the previous one, so following this order will give you the best learning experience.
Prerequisites
Before starting this module, make sure you have:
- Computer with internet access
- Modern web browser (Chrome, Firefox, or Edge)
- Text editor or IDE installed (VS Code recommended)
- GitHub account (free)
- Willingness to learn and experiment
Key Technologies
What You'll Learn
By the end of Module 1, you'll have built a real website using modern HTML and CSS, established your AI-powered development workflow, and learned how to explain technical concepts clearly. This foundation prepares you for adding interactivity and dynamic features in future modules.