Students treat the homepage as a finished professional product and look for problems before calling the project complete. The final lesson introduces quality assurance, peer testing, and verification, then gives students time to find bugs, fix the highest-priority issues, retest the page, and present the site they built throughout the course.

Lesson Overview

  • Course: Introduction to Web Coding
  • Lesson: 12 of 12
  • Suggested duration: 60 minutes
  • Primary concept: Quality Assurance
  • Project milestone: Test, fix, verify, and present the completed homepage

Learning Objectives

By the end of the lesson, students should be able to:

  • Explain why testing and refinement are part of professional web development.
  • Identify common content, layout, responsive, accessibility, and interaction problems.
  • Test another student’s site and report specific problems clearly.
  • Fix important issues in their own homepage and verify that the fixes work without creating new problems.

Key Concepts and Vocabulary

  • Quality assurance
  • Bug
  • Testing
  • Regression
  • Usability
  • Accessibility
  • Responsive testing
  • Peer review
  • Verification

Materials and Resources

  • The completed student website from Lessons 1 through 11
  • A text editor and web browser
  • Access to classmates’ websites for peer testing
  • A short QA checklist prepared by the instructor
  • Quality Assurance
  • Responsive Design and User Experience as review references

Prior Knowledge

Students should have a substantially complete homepage with content, visual design, spacing, layout, responsive behavior, interaction feedback, the Show More JavaScript behavior, and the search and relevance improvements from Lesson 11.

Opening Activity

Look at several polished websites and discuss the small details that make them feel complete and trustworthy. Then consider the opposite: broken links, overlapping text, missing images, unreadable narrow-screen layouts, controls that do not work, missing focus feedback, inconsistent spacing, or obvious spelling errors.

Connect the discussion to Quality Assurance. Users experience the finished result, not the amount of effort that went into building it. A site that feels incomplete, broken, or inconsistent can undermine confidence even when most of the code works correctly.

Direct Instruction

Introduce quality assurance as a systematic process of checking the finished website, correcting problems, and verifying the result before the work is considered complete.

  • Content should be complete, clear, readable, and free of obvious errors.
  • Links and controls should work and behave as users expect.
  • Layouts should remain usable at different browser widths.
  • Images should load correctly, remain inside their containers, and use appropriate alternative text.
  • Keyboard focus should remain visible, and hover should not be required to access essential information.
  • The Show More interaction should work repeatedly without errors.
  • After a fix, the affected area should be tested again to make sure the change worked and did not create a regression elsewhere.

Explain that developers become familiar with their own work and can stop noticing problems. Peer testing is useful because another person approaches the page without knowing what was intended. Testers should report observable issues rather than redesign the site according to personal preference.

Demonstrate one short QA cycle: identify a specific problem, reproduce it, locate the likely HTML, CSS, or JavaScript involved, make one focused correction, and then retest the original problem plus the surrounding area.

Recommended AI Coding Educator Lessons

The AI Tutor is appropriate when students have isolated a real bug but cannot explain why the relevant HTML, CSS, or JavaScript is failing. They should describe the specific problem and inspect the code involved rather than asking AI to rewrite the page. After any suggested fix, students should make the change themselves and retest it.

Applied Project

Students perform a focused peer QA pass, fix the highest-priority problems on their own site, verify those fixes, and then present the completed project. The testing should be structured enough to leave substantial time for correction.

  1. Open another student’s homepage and review it first as a normal visitor rather than immediately inspecting the code.
  2. Check the page at a wide width, a narrow width, and at least one width between them.
  3. Test every visible link and the Show More button.
  4. Use the pointer and Tab key to test hover and focus feedback.
  5. Look for missing images, horizontal overflow, overlapping content, inconsistent spacing, unclear text, spelling errors, or other visible problems.
  6. Give the site owner a short list of specific issues, including where each problem appears and what happens.
  7. Return to the student’s own site, prioritize the most important issues, and fix those first.
  8. Retest every fix and verify that it solved the original problem without creating another one.
  9. Complete one final top-to-bottom review of the homepage.
  10. Present the finished site and briefly explain one decision or improvement from the course and one problem discovered during QA.

The goal is not to make every site perfect in one class. Students should experience the professional habit of testing systematically, documenting specific problems, prioritizing fixes, and verifying the result before the work is considered finished.

Check for Understanding

Students should be able to identify a specific problem, explain why it matters to a user, make a focused correction, and demonstrate that the correction works.

Useful questions include:

  • What exactly is the bug or usability problem?
  • Can you reproduce it consistently?
  • At what screen width or interaction state does it appear?
  • How could this problem affect a visitor?
  • What HTML, CSS, or JavaScript did you change to fix it?
  • How did you verify that the fix worked?
  • What else did you retest to make sure the fix did not create a regression?

Differentiation and Extensions

Support: Provide a short checklist covering content, links, images, wide and narrow layouts, hover, focus, and the Show More interaction. Limit the required fixes to the two or three highest-priority issues so students have time to complete and verify them.

Extension: After fixing all reported bugs, have students perform a second QA pass and identify one improvement that is not technically broken but would make the page clearer, more consistent, or easier to use.

Lesson Outcome

Students finish the course with a tested and refined responsive homepage and practical experience moving through the full process of planning content, building HTML, designing with CSS, creating layout and responsive behavior, adding interaction, improving relevance, and performing final quality assurance.

Closure

Have students share their finished websites and briefly discuss something they understand now that they did not understand at the beginning of the course. Reinforce that the completed homepage demonstrates more than isolated syntax: students have used content strategy, web coding, web design, user experience, responsive design, SEO, and quality assurance to build and refine one working website.

Teacher Reflection

  • Were students able to identify specific, reproducible bugs and usability problems in one another’s work?
  • Could students prioritize fixes instead of trying to perfect every detail?
  • Did students retest their changes rather than assuming a code edit solved the problem?
  • Which concepts or technical skills would benefit from more time if the curriculum is taught again?