WEB DEVELOPMENT FUNDAMENTALS

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

01

Orientation & Planning Modules 1–5

Your tools, how the web works, reading a codebase, and writing your project brief.

02

HTML Foundations Modules 6–9

Structured, semantic, linked pages and a working form.

03

CSS Foundations Modules 10–16

Typography, colour, spacing, layout, and responsive design.

04

Identity & Components Modules 17–20

Your own visual identity, components, navigation, and images.

05

Professional Quality Modules 21–25

Accessibility, SEO, DevTools, debugging, and performance.

06

JavaScript Modules 26–29

Fundamentals, the DOM, interactive features, and form validation.

07

Version Control & Workflow Modules 30–31

Git in depth, GitHub, branches, and pull requests.

08

The Web & Full-Stack Bridge Modules 32–37

Hosting, publishing, APIs, backends, and databases.

09

Professional Practice Modules 38–39

Professional AI practice and full quality assurance.

10

Your Published Website Module 40

A refined, published, independent project and a path to full stack.

Part 2 · Frontend Frameworks

11

Framework Foundations Modules 41–44

Why frameworks exist, what modern CSS already does, and verifying a framework before trusting it.

12

Bootstrap Modules 45–49

The component model, the grid, components, customising, and transforming your project.

13

Material Design Modules 50–53

Material 3 as a design system, Beer CSS, theming, and transforming your project.

14

UIkit Modules 54–56

Attribute-driven components, layout, customising, and transforming your project.

15

Tailwind CSS Modules 57–61

Utility-first thinking, the v4 build, layout, design tokens, and transforming your project.

16

Judgement Modules 62–65

Comparing variants, accessibility and performance, choosing a framework, and migrating and reviewing AI-generated framework code.

17

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

What You Will Need