Build a Community Website with HTML and CSS

A complete beginner course from your first saved file to a responsive, accessible-minded static events site. You will build Harbor Together, a fictional community project, in small working stages and explain your choices as you go.

Start here: Read the learner guide, then begin module 00. The course works offline after extraction; only the external reference links need internet access. No JavaScript, npm, account, or paid service is required.

Aabha course package · 2026-10-14.1 · Authored and technically reviewed on 14 October 2026 · Human beginner pilot still required

Ordered syllabus

0. 00 Set up a workspace and make a first page
   60–90 minutes, unpiloted estimate

   Create an HTML file, open it in a browser, edit it, and explain the save–refresh loop.

1. 01 Give content a meaningful structure
   90–120 minutes, unpiloted estimate

   Choose headings, paragraphs, lists, and landmarks that express the content before styling.

2. 02 Connect pages and make media understandable
   90–120 minutes, unpiloted estimate

   Build meaningful navigation, follow relative paths, choose useful alternatives for images, and identify accessible media requirements.

3. 03 Build a form people can understand
   90–120 minutes, unpiloted estimate

   Associate visible labels and hints, use native controls and validation, and explain what a static practice form does and does not send.

4. 04 Explain how CSS chooses a style
   90–120 minutes, unpiloted estimate

   Attach a stylesheet, write selectors and declarations, and diagnose simple cascade and inheritance conflicts.

5. 05 Size boxes and make text comfortable
   90–120 minutes, unpiloted estimate

   Calculate the box model, choose flexible sizing, and style readable content and usable native controls.

6. 06 Arrange a flexible navigation row
   75–105 minutes, unpiloted estimate

   Use Flexbox for one-dimensional groups and predict wrapping, alignment, and spacing.

7. 07 Build an event grid
   75–105 minutes, unpiloted estimate

   Use Grid tracks and gaps, explain fractional space, and keep useful source order.

8. 08 Adapt the page without losing access
   90–120 minutes, unpiloted estimate

   Choose a content-based breakpoint, test reflow and keyboard use, and preserve visible focus and meaningful order.

9. 09 Debug and prepare a static release
   90–120 minutes, unpiloted estimate

   Diagnose problems with evidence, package a portable static site, and explain hosting and release limits.

Check your understanding

• Assessment 1 after module 03: meaningful HTML
• Assessment 2 after module 07: CSS and layout
• Assessment 3 after module 09: diagnose and prepare a release
• Capstone: a usable community events site

Reference and release information

Dated primary-source register and asset rights · Version map · Optional audio lab · What was and was not tested

The reference is one possible solution. Try the task before opening its answers. This package is teaching content awaiting website integration; no public site has been published.