Beginner Web Development — Build and Publish Two Projects
Start from zero, learn 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. You will learn how the web works, build responsive pages, add real JavaScript interactions, use Git and GitHub, debug with evidence, and use AI responsibly. 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 first webpage
Set up the coding environment and create, open and inspect a first HTML page. Learners finish with a working page they can explain.
- VS Code
- Browser tools
- HTML structure
- Files and paths
- Responsible AI
Class 2 — Setup clinic and HTML practice
Resolve setup problems, rebuild a small page and practise inspecting HTML. Learners finish with the foundation for their personal introduction page.
- HTML practice
- Troubleshooting
- Developer tools
- Head and body
- AI explanations
Class 3 — Semantic HTML and useful content
Structure a meaningful page with semantic elements, links, images, lists and an accessible form. Learners expand their first page into a learner profile.
- Semantic HTML
- Links
- Images
- Forms
- Accessibility
Class 4 — Git and GitHub fundamentals
Create a repository and use status, add, commit and push to preserve project history. Learners publish their profile source in a GitHub repository.
- Git
- GitHub
- Repositories
- Commits
- Push
Class 5 — CSS foundations and layout
Connect a stylesheet and use selectors, typography, spacing, the box model and Flexbox. Learners turn unstyled HTML into a clear visual layout.
- CSS selectors
- Typography
- Box model
- Flexbox
- Reusable classes
Class 6 — Responsive CSS and visual debugging
Adapt the profile site to phone and desktop widths, inspect styling problems and publish it. Learners finish with their first responsive live URL.
- Responsive design
- Media queries
- CSS debugging
- Accessibility
- GitHub Pages
Class 7 — JavaScript and the browser
Connect JavaScript to a page and work with values, variables, operators and input. Learners run and inspect their first browser programs.
- JavaScript
- Variables
- Data types
- Operators
- Console
Class 8 — Build a small interaction
Connect a button to a calculation, display a result and handle invalid input. Learners finish a small interactive calculator.
- User input
- Button events
- Calculations
- Output
- Error handling
Class 9 — Conditions and program decisions
Use comparisons, logical operators and conditional branches to handle different situations. Learners create predictable decision paths from user input.
- Conditions
- Comparisons
- Logical operators
- Branches
- Validation
Class 10 — Functions and logic clinic
Break repeated logic into functions with clear parameters and return values. Learners build and debug a small study-session planner.
- Functions
- Parameters
- Return values
- Scope
- Logic debugging
Class 11 — Arrays, objects and loops
Model structured items with arrays and objects and process them with loops. Learners render a data-driven list instead of repeated hard-coded content.
- Arrays
- Objects
- Loops
- Data modelling
- Rendering lists
Class 12 — Debugging with evidence
Reproduce a defect, inspect errors and values, make one focused change and retest. Learners document one bug and the evidence that led to its fix.
- Debugging
- Console errors
- Logging
- Expected values
- AI-assisted debugging
Class 13 — DOM, events and quiz planning
Select and update page elements, listen for events and plan quiz state and functions. Learners begin Project 1 with structured question data.
- DOM
- Selectors
- Events
- Application state
- Project planning
Class 14 — Quiz build clinic
Render questions and answers, check a selection, update the score and move through the quiz. Learners finish a playable Project 1 MVP.
- DOM rendering
- Answer handling
- Scoring
- State updates
- Project 1
Class 15 — Complete the quiz application flow
Add validation, feedback, progress, results and restart states to the quiz. Learners turn the MVP into a complete user journey.
- Forms
- Validation
- Feedback
- Results state
- Application flow
Class 16 — Test and publish the quiz
Test keyboard use, phone layout and edge cases, fix defects and document the project. Learners deploy the completed interactive quiz.
- Manual testing
- Accessibility
- Responsive checks
- README
- Deployment
Class 17 — JSON, localStorage and task-manager planning
Model task data and save and restore it with JSON and localStorage. Learners plan the data and behaviours for Project 2.
- JSON
- localStorage
- Persistence
- CRUD
- Project 2 planning
Class 18 — Create and display persistent tasks
Validate input, create task objects, render the task list and persist every change. Learners finish a Task Manager v1 that survives refresh.
- Form handling
- Task objects
- Identifiers
- Rendering
- Persistence
Class 19 — Update, delete and filter tasks
Implement editing, completion, deletion and status filters while keeping stored and displayed data synchronized. Learners complete the core task lifecycle.
- Update
- Delete
- Filters
- State synchronization
- Refactoring
Class 20 — GitHub workflow and task-manager deployment
Organise the project, commit features clearly, improve its README and verify a production deployment. Learners publish Task Manager v2.
- Git workflow
- Project structure
- Commit quality
- README
- Deployment
Class 21 — AI-assisted feature development
Specify one small improvement, ask AI for focused assistance and review every suggestion before use. Learners implement an approved Project 2 feature they understand.
- Feature specification
- AI prompting
- Code review
- Verification
- Data safety
Class 22 — Test, debug and refactor
Test the new feature and existing workflows, fix regressions and improve readability, accessibility and layout. Learners produce a stable final Project 2 candidate.
- Regression testing
- Debugging
- Refactoring
- Accessibility
- Responsive design
Class 23 — Final quality and portfolio preparation
Verify both live projects, polish repositories and prepare a concise project demonstration. Learners finish a portfolio they can confidently explain.
- Quality assurance
- GitHub profile
- Documentation
- Screenshots
- Presentation
Class 24 — Project presentations and next steps
Demonstrate both projects, explain a code decision and debugging story, and respond to feedback. Learners finish with two presented projects and a next learning goal.
- Project demonstration
- Code explanation
- Peer feedback
- Reflection
- Learning plan
What you'll walk away with
- 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 debugging and responsible AI-assisted development
- Plan for 4–6 hours of focused practice each week
- Present two portfolio projects you can confidently explain