AI Web Development — Build and Publish Two Projects
Start from zero, learn AI, HTML, CSS and JavaScript, then publish two projects you can confidently explain.
- Format
- 24 classes over 12 weeks
- Schedule
- Two live classes each week: one 2-hour workshop and one 1-hour practice/review class. Times to be confirmed.
- Delivered
- Online
About this bootcamp
A practical 12-week live online bootcamp for complete beginners. Learn web foundations and a modern AI-assisted development workflow from day one: prompt clearly, work with chat assistants and coding copilots, review agent-made changes, debug with evidence, test every suggestion and protect private data. By the end, you will have a deployed interactive quiz and task manager in your portfolio.
Two real portfolio projects
Interactive Quiz
Build a complete quiz flow with questions, scoring, validation, results, restart and responsive design.
Persistent Task Manager
Create, edit, complete, delete and filter tasks, then save them in the browser so they survive refreshes.
What you'll cover
Class 1 — Your AI developer toolkit and first webpage
Set up VS Code, browser developer tools and an AI assistant, then create and inspect a first HTML page. Learners finish with a working page and a repeatable ask–build–verify workflow.
- VS Code
- Browser tools
- HTML structure
- ChatGPT or Claude
- Ask–build–verify
Class 2 — Prompting for learning, not copying
Practise giving useful context, asking for explanations and checking AI answers against the browser and trusted documentation. Learners create a personal prompt notebook for the bootcamp.
- Prompt anatomy
- Context
- Follow-up questions
- Hallucinations
- Verification
Class 3 — Semantic HTML with AI page planning
Turn a plain-language page brief into an accessible semantic outline, then build and inspect it by hand. Learners use AI for planning while retaining control of the markup.
- Semantic HTML
- AI page outlines
- Links and images
- Forms
- Accessibility
Class 4 — Git, GitHub and AI-assisted repository habits
Create a repository, make meaningful commits and use AI to explain diffs and draft a README without exposing secrets. Learners publish their profile source with understandable history.
- Git
- GitHub
- Commits
- Diff explanations
- README drafting
Class 5 — CSS foundations from an AI design brief
Translate an AI-assisted visual brief into selectors, typography, spacing, the box model and Flexbox. Learners compare generated suggestions with CSS they can explain.
- CSS selectors
- AI design briefs
- Box model
- Flexbox
- Reusable classes
Class 6 — Responsive design and AI visual debugging
Adapt the profile site for phone and desktop, use screenshots and precise prompts to diagnose layout issues, then verify fixes with developer tools and accessibility checks.
- Responsive design
- Media queries
- Screenshot prompting
- Accessibility
- GitHub Pages
Class 7 — JavaScript with an AI code explainer
Learn variables, data types, operators and console output while using AI to trace short programs line by line. Learners distinguish an explanation from a correct, tested result.
- JavaScript
- Variables
- Data types
- Code tracing
- Console
Class 8 — Pair-build a small interaction with AI
Write a clear feature request, ask an AI assistant for one step at a time and build an input-driven calculator. Learners review and test every suggestion before keeping it.
- Feature prompts
- DOM events
- Calculations
- Incremental changes
- Error handling
Class 9 — Conditions, validation and AI-generated edge cases
Use conditions and logical operators to handle different inputs, then ask AI to propose difficult edge cases. Learners turn those cases into a practical manual test checklist.
- Conditions
- Validation
- Logical operators
- Edge-case generation
- Manual testing
Class 10 — Functions and AI-assisted refactoring
Break repeated logic into small functions and compare a learner refactor with an AI suggestion. Learners keep only changes that improve clarity and preserve behaviour.
- Functions
- Parameters
- Return values
- AI refactoring
- Behaviour checks
Class 11 — Arrays, objects and AI data modelling
Model real items with arrays and objects, render them with loops and use AI to critique the proposed data shape. Learners explain why each property exists.
- Arrays
- Objects
- Loops
- AI schema critique
- Rendering lists
Class 12 — Evidence-first debugging with AI
Reproduce a defect, collect console evidence and ask AI a focused debugging question with expected and actual behaviour. Learners verify the smallest suggested fix and record the evidence.
- Debugging
- Console errors
- Focused AI prompts
- Hypotheses
- Retesting
Class 13 — Plan the quiz with AI user stories
Convert the quiz idea into user stories, acceptance checks, DOM responsibilities and structured question data. Learners use AI to challenge the plan before writing project code.
- User stories
- Acceptance criteria
- DOM
- Application state
- AI planning
Class 14 — Build the quiz MVP with an AI pair programmer
Render questions and answers, update score and move through the quiz using tightly scoped AI assistance. Learners finish a playable MVP and explain every retained function.
- DOM rendering
- Pair programming
- Scoring
- State updates
- Project 1
Class 15 — Complete the quiz with AI test generation
Add validation, feedback, progress, results and restart states, then turn AI-generated scenarios into a test matrix. Learners complete the full quiz journey.
- Application flow
- AI test cases
- Validation
- Feedback
- Regression checks
Class 16 — AI code review, accessibility and deployment
Request a structured AI review for bugs, accessibility and readability, evaluate each finding and deploy only verified improvements. Learners publish Project 1 with a review log.
- AI code review
- Accessibility
- False positives
- README
- Deployment
Class 17 — Data, localStorage and privacy-aware AI use
Model task data and persist it with JSON and localStorage while learning what must never be pasted into public AI tools. Learners plan Project 2 and its data lifecycle.
- JSON
- localStorage
- CRUD
- Data privacy
- Project 2 planning
Class 18 — Build a persistent task manager with an AI copilot
Create, validate, render and save tasks through small reviewed iterations. Learners use editor or chat-based AI assistance without delegating the whole application.
- AI copilots
- Task objects
- Identifiers
- Rendering
- Persistence
Class 19 — Add features through AI-guided iteration
Implement editing, completion, deletion and filters from one acceptance check at a time. Learners use AI to review state synchronisation and refactor duplication safely.
- Feature iteration
- Filters
- State synchronisation
- AI refactoring
- Regression testing
Class 20 — Ship with AI-assisted documentation and QA
Organise commits, draft and fact-check the README, generate a release checklist and verify the production deployment. Learners publish Task Manager v2 with honest documentation.
- Git workflow
- AI documentation
- Release checklist
- README
- Deployment
Class 21 — AI coding tools lab: chat, copilot and agent
Compare ChatGPT, Claude, GitHub Copilot and Cursor-style workflows on the same small task. Learners choose the right mode for explanation, completion, review or multi-file work.
- ChatGPT
- Claude
- GitHub Copilot
- Cursor
- Tool selection
Class 22 — Safe agent workflows and human code review
Practise defining scope, supplying repository rules, reviewing diffs and testing agent-made changes. Learners identify hallucinations, insecure code, licensing concerns and secret leakage.
- Coding agents
- Repository instructions
- Diff review
- Security
- Licensing and privacy
Class 23 — Portfolio polish with AI, without fake claims
Use AI to improve project summaries, screenshots, accessibility checks and presentation structure while keeping every claim accurate. Learners finish a credible portfolio they can defend.
- Portfolio copy
- AI critique
- Accessibility audit
- Screenshots
- Truthful claims
Class 24 — Project presentations and your personal AI workflow
Demonstrate both projects, explain AI-assisted decisions and debugging evidence, respond to review and design a personal workflow for learning and building after the bootcamp.
- Project demonstration
- AI decision log
- Code explanation
- Peer feedback
- Learning workflow
What you'll walk away with
- Use ChatGPT, Claude, GitHub Copilot and Cursor-style workflows responsibly
- Build and publish an interactive quiz and a persistent task manager
- 24 live classes across 12 structured weeks
- Learn HTML, CSS, JavaScript, Git, GitHub and deployment from zero
- Practise AI planning, debugging, test generation, code review and refactoring
- Present two portfolio projects you can confidently explain