Learner guide

Who this course is for

You do not need programming experience. You should be able to create a folder, save a file, and switch between applications. If those tasks are unfamiliar, spend extra time in module 00 with a teacher or support person. You will need a computer with a keyboard, a plain-text or code editor, and a current web browser. A phone is useful for later testing, but is not an effective primary authoring environment for these exercises.

By the end you should be able to write meaningful HTML, create labels and text alternatives, style with CSS, reason about the cascade and box model, choose Flexbox or Grid, adapt layouts to narrow screens, and debug a small static site. This is an introductory foundation, not a claim of professional competence or complete WCAG conformance.

Open the package correctly

1. Extract the ZIP. Keep its folders together.
2. Open index.html at the package root in your browser. This is the course reader.
3. Create a separate harbor-work folder for your own site. Do not overwrite the course’s root index.html.
4. Open harbor-work in your editor. Module 00 tells you what to create.
5. When comparing a reference, open versions/NN/index.html and its styles.css in the editor. Browser links show the rendered output; they do not copy or apply the code to your project.

If a browser opens raw tags, check the file type and saved text format. If course images or links are missing, confirm that you extracted the entire archive rather than opening a file inside its preview. Reference folders are self-contained: when you copy one, copy the whole numbered folder, including assets and the result page.

A learning loop that builds independence

Read a short section, predict the result, type or adapt its code, and run it. Then change one meaningful detail and explain what happened. You are learning to reason about a browser, not to reproduce a screenshot from memory. Keep a learning log with “I expected…”, “I observed…”, and “I changed…”. These notes make a later bug easier to diagnose.

Each module has a narrative lesson, three practice tasks, and separate explained solutions. Attempt the tasks before opening the solutions. If you use help or an AI tool, describe the problem and ask for an explanation or a hint, then verify the answer in your own browser. Do not accept a claim that code was tested unless you can identify the actual test evidence.

When stuck, reduce the problem. Check the saved file path, a selector spelling, one missing closing tag, or one width rule. Compare only the relevant portion of the reference instead of replacing your entire project. If you need to reset, copy the previous complete version into a new working folder and make the next change there.

Suggested pacing

Module estimates include reading, guided building, and the three practice tasks. Across modules 00–09 they total roughly 14–19 hours. Allow another 1½–2½ hours for the three assessments and 4–6 hours for the capstone, for a provisional overall range of about 20–28 hours. These are editorial planning estimates, not measured learner completion times. All timings remain unpiloted and may be much longer for a first-time computer user.

A useful schedule is one module per session, with a pause after HTML module 03 and layout module 07 to complete the relevant assessment. Break a long lesson into two sessions if necessary. Revisit failed concepts before moving on; finishing quickly is not the objective.

Assessments and feedback

Each assessment has six questions, each worth five points, for thirty points. Give two points for a correct technical conclusion, two for a sound explanation, and one for clear evidence or a working artifact where requested. The separate answer guide gives question-specific expectations. A suggested readiness threshold is 24/30, with no critical misunderstanding about navigation, labels, or form-data boundaries. This threshold is a teaching suggestion, not a validated credential.

If you score lower, select the concept behind each missed question, revisit its module, and attempt a new example with different wording or values. Retrying the identical answer from memory is weaker evidence than applying the idea in a fresh situation. The capstone rubric evaluates a working artifact, reasoning, and honest testing evidence together.

Safe fictional practice

All people, venues, and events in the project are invented. Use only invented form details such as Alex Example and alex@example.com. The supplied practice controls have no name attributes, so their values do not join the form’s submitted data. This site stores no responses, but your browser may still manage autofill or history. Do not enter secrets or real personal information.

No live publication, registrations, payments, analytics, or third-party embeds are required. Do not buy hosting or connect a form service for a lesson. If you later publish a real adaptation, replace fictional facts with verified information, check permission to use all assets, and arrange appropriate privacy and service behavior.

Accessibility and teaching notes

The course includes meaningful text alternatives, readable HTML, and keyboard-friendly native elements. Images have adjacent explanatory text. The optional audio lab has a complete text alternative, so listening is not required. Print styles are supplied, but reading the digital HTML is the primary format.

Screen-reader testing, real-device testing, operating-system setup walkthroughs, and a human beginner pilot remain separate work. Review the QA page for the evidence actually gathered. Teachers should ask learners to explain one selector, one semantic choice, and one debugging decision rather than grading only visual resemblance.

Continue into Basic JavaScript

The next course starts from the finished static Harbor Together site and adds behavior. It assumes you understand tags, classes, ids, forms, basic CSS, and the save–refresh loop. The handoff contract names stable event identifiers and category values so the two courses connect without repeating the HTML/CSS syllabus.