AI-Powered HTML & Frontend Web Development
Learn modern web development by building your own website with AI — then rebuild it with Bootstrap, Material, UIkit and Tailwind and choose a framework with evidence.
Self-Paced · AI Tutor Guided
About this course
No programming experience assumed. This course takes you from little or no practical experience to planning, building, debugging, refining and publishing a professional frontend website with HTML, CSS, JavaScript, DevTools, Git and AI — and understanding how that frontend connects to servers, APIs and databases. You build your own site throughout (a portfolio, restaurant, travel journal, whatever you choose in Module 5); FotoBlog is the reference you inspect, never clone.
In Part 2 you take the site you built and rebuild it with four frameworks, so “which framework should I use?” becomes a question answered with measurements instead of opinions.
Course curriculum
66 modules in two parts. Each phase builds on the one before it.
Part 1 · Frontend Foundations
-
Orientation & Planning Modules 1–5
Your tools, how the web works, reading a codebase, and writing your project brief.
-
HTML Foundations Modules 6–9
Structured, semantic, linked pages and a working form.
-
CSS Foundations Modules 10–16
Typography, colour, spacing, layout, and responsive design.
-
Identity & Components Modules 17–20
Your own visual identity, components, navigation, and images.
-
Professional Quality Modules 21–25
Accessibility, SEO, DevTools, debugging, and performance.
-
JavaScript Modules 26–29
Fundamentals, the DOM, interactive features, and form validation.
-
Version Control & Workflow Modules 30–31
Git in depth, GitHub, branches, and pull requests.
-
The Web & Full-Stack Bridge Modules 32–37
Hosting, publishing, APIs, backends, and databases.
-
Professional Practice Modules 38–39
Professional AI practice and full quality assurance.
-
Your Published Website Module 40
A refined, published, independent project and a path to full stack.
Part 2 · Frontend Frameworks
-
Framework Foundations Modules 41–44
Why frameworks exist, what modern CSS already does, and verifying a framework before trusting it.
-
Bootstrap Modules 45–49
The component model, the grid, components, customising, and transforming your project.
-
Material Design Modules 50–53
Material 3 as a design system, Beer CSS, theming, and transforming your project.
-
UIkit Modules 54–56
Attribute-driven components, layout, customising, and transforming your project.
-
Tailwind CSS Modules 57–61
Utility-first thinking, the v4 build, layout, design tokens, and transforming your project.
-
Judgement Modules 62–65
Comparing variants, accessibility and performance, choosing a framework, and migrating and reviewing AI-generated framework code.
-
Capstone Module 66
Ship and defend your choice.
Your final project
A published, accessible, responsive website of your own, with a GitHub repository, meaningful commit history and professional documentation — then the same site in five published implementations (vanilla + 4 frameworks), with a documented FRAMEWORK-DECISION.md, a written DEFENCE.md you can present, and a plan for turning it into a full-stack application.
Who this course is for
- Complete beginners and aspiring developers.
- Designers moving into frontend development.
- Entrepreneurs and SME owners who want to build or direct their own websites.
- Developers who’ve used Bootstrap or Tailwind by copying examples and want to understand them.
- Anyone planning to continue into the CSS or full-stack courses.
What you will need
- A computer (Windows, macOS or Linux) you can install software on.
- Basic computer skills: files, folders, installing programs, and using a browser.
- An AI assistant (a chat tool or an AI coding assistant in VS Code).
- A free GitHub account (needed from Module 31, not before).
- Node.js for Part 2 (for Tailwind and Sass) — installed when you get there.
Register for this course
Already have a bLMs account? Use the same email and password, and we’ll add this course to it. Fields marked * are required.