Course Overview
Writing one page by hand is fine. Writing forty pages that share a header, a footer and a card is where hand-written HTML falls apart — you end up with forty copies of the same thing and no way to change them at once.
This course is about the fix. You learn to describe a page as components instead of as markup, to style them with utility classes instead of a growing CSS file nobody can delete from, and to give them state so the page can change without a reload. Twelve chapters, one site built the whole way through.
Some prior HTML and CSS helps. If you have none, do the beginner course first — it is free too.
What You’ll Learn
✅ HTML5: semantic structure, accessibility, and markup that survives being restyled.
✅ TailwindCSS: utility-first styling, the responsive prefixes, states, and how a design system lives in the config.
✅ React: components, props, state, effects, lists and forms — the five ideas everything else is built from.
✅ Putting it together: a multi-page site with shared layout, real data and a deploy at the end.
✅ Performance and SEO: what a component-built site gets wrong by default, and how to fix it.
The Chapters
1 — Semantic HTML5, properly. Document outline, landmarks, headings, alt text, labels. You can mark up a page that reads correctly with CSS turned off.
2 — The head of the document. Title, meta description, viewport, canonical, Open Graph. You can explain why a page looks tiny on a phone, and fix it in one line.
3 — Utility-first thinking. Why Tailwind exists, what problem a growing stylesheet causes, and what a utility class actually is. You can restyle a block without opening a CSS file.
4 — Tailwind in anger. Spacing scale, colour, typography, flex and grid utilities. You can rebuild an existing page in Tailwind and get the same result with less to maintain.
5 — Responsive and stateful variants. md:, hover:, focus:, and how they stack. You can build one component that behaves at every width without a media query of your own.
6 — Your first React component. JSX, className, returning one root, composing components. You can split a page into components and see it render unchanged.
7 — Props: components that take input. One card component, twelve cards. You can render a list from data with correct, stable keys.
8 — State: components that change. useState, events, controlled inputs. You can build a working menu, a tab strip and a form that validates as you type.
9 — Effects and data. useEffect, dependency arrays, fetching, loading and error states. You can render a page from data that arrives after the first paint, without a flicker or a crash.
10 — Structure for a real site. Shared layout, routing, reusable sections, where to keep content. You can add a new page to your site in minutes rather than by copy-paste.
11 — Performance and SEO for component sites. Images, fonts, bundle size, what a crawler sees. You can measure your own site and name its three slowest things.
12 — Ship it. Build, deploy, check it live. Your site is at a URL, and you know what to look at when something breaks.
Course Highlights
🔥 One project, twelve chapters — the site grows with you rather than restarting each week.
🔥 Modern tooling — Vite, React Hooks, Tailwind config, Git.
🔥 Every chapter names its outcome, so you can tell whether you actually got it.
🔥 Free, including the test and the certificate.
Who Should Enroll?
- Developers with basic HTML and CSS who want to move to modern frameworks.
- UI and design-minded people who want to build what they draw.
- Anyone who has copied React tutorials and wants to understand what they copied.
The Test and Certificate
Twelve multiple-choice questions across the twelve chapters — semantics, Tailwind variants, keys, state and effects. Register, take the hall ticket, sit the timed paper, and a pass earns a certificate with your name on it.
Sit it now, free, before you enrol: take the practice test for this course. It runs and is scored entirely in your browser, and it is a self-assessment rather than a proctored exam.
Course Duration
📅 6 weeks, twelve chapters, project-based. Free.
🚀 Stop copying components and start writing them.
Keywords
free HTML5 course, TailwindCSS tutorial, React web development, build a modern website, responsive web design, front-end frameworks, free React certificate
