HTML foundations
Create meaningful, interoperable documents.
Beginner / Structured learning draft / Version 0.9
Structured learning draftHTML & CSS Foundations
Build and test a responsive digital product. You will finish with a responsive, accessible application you can demonstrate.
This open learning manuscript is undergoing course-specific editorial review. It does not provide certification. Progress and notes are stored only in this browser.
Web developmentTool stack
HTML5CSS
12guided lessons
4focused modules
1reviewable project
PDFoffline workbook
The problem
What this course helps you do
Build and publish a responsive, accessible portfolio using standards-based HTML and CSS. The course moves from document structure through layout, accessibility, performance and release evidence.
Who it is for
Beginners who can manage files and use a browser, and who want a defensible first web project.
Prerequisites
- Create and rename plain-text files
- Use a modern browser
- Install or access a text editor
Portfolio-ready project
Design, build, test and publish a professional one-page portfolio.
Deliverable: A deployed portfolio, editable source, accessibility audit and versioned release record.
Practice fileResponsive interface starterA semantic HTML starter with a clear project region.Planning template · MarkdownProject briefDefine the user, outcome, boundaries, evidence and acceptance criteria before building.Printable workbook · PDFComplete course workbookA4-ready lesson prompts, project worksheets, evidence logs and references.
Downloads open without an account. Practice data is fictional; review each file before using it in another system.
Definition of done
- HTML validation has no unresolved errors.
- The complete journey works with keyboard alone.
- Content reflows at 320 CSS pixels and 400% zoom without loss.
- Text and component contrast meet the selected WCAG 2.2 target.
Course plan
From first concept to finished work
Forms and CSS foundations
Build interaction and control styling and sizing.
Modern layout
Use Flexbox, Grid and responsive constraints.
Production quality
Audit accessibility, optimize delivery and publish defensible work.
Source-led learning
Authoritative references
Course claims are grounded in primary documentation and recognized public guidance. Recheck version-sensitive information before professional use.
- Learn web developmentMDN Web Docs
- HTML StandardWHATWG
- Page Structure TutorialW3C Web Accessibility Initiative
- Web Content Accessibility Guidelines 2.2W3C