The AI Coding Educator curriculum is designed around a simple teaching pattern: introduce a professional web concept, examine how it appears on real websites, explore a few focused lessons, and then apply those ideas to the same student-built homepage throughout the course.

How to Use This Curriculum

This is a suggested 12-class sequence for introducing practical web coding. It is intended to give instructors a clear structure without requiring every class to be taught exactly the same way.

Lessons can be combined, expanded, reordered, or shortened based on student age, prior experience, class length, and the pace of the group. The main goal is to preserve the progression from understanding websites to building, styling, adapting, testing, and refining one complete homepage.

Suggested Class Structure

Each class follows the same general pattern.

  1. Introduce or reinforce a concept. Begin with one larger idea from professional web work, such as web coding, web design, content strategy, user experience, responsive design, SEO, or quality assurance.
  2. Look at real websites. Use current websites to show how the concept appears in practice. Instructors should choose examples that are appropriate for their students rather than relying on fixed examples that may become outdated.
  3. Explore related lessons. Students read and experiment with a small number of AI Coding Educator lessons connected to the day’s topic.
  4. Work on the student website. Students apply what they learned to the same homepage they have been building throughout the course.

Start With the Base Files

Students do not need to begin with completely blank files. The course starts with the Base HTML and Base CSS provided in the Setup section.

The Base HTML provides a simple professional page shell: the document setup, a header with a text site logo and Home link, a <main> area, and a footer. The Base CSS provides a small reset, basic formatting, a reusable wrapper class, simple header and navigation styling, and one introductory breakpoint.

Sections, wrappers, and the page’s actual content structure are added by students as the project develops. This keeps the starter files readable while giving students practice creating the structural HTML they will use throughout the course.

The HTML also includes a link to scripts.js, but students do not need a JavaScript starter file. They create that file later when JavaScript behavior is introduced.

The purpose of the base files is to remove repetitive setup work, not to hide how websites work. Instructors should briefly walk through the starter code so students recognize the page areas and understand the files they are modifying.

One Homepage, Built Over 12 Classes

The student project is cumulative. Each class should make visible progress on the same homepage rather than produce a separate exercise that is discarded afterward.

Early in the course, students add plain headings, paragraphs, links, lists, images, sections, and wrappers without worrying about a finished visual design. Later, those same pieces of content can be grouped into boxes, styled with CSS, arranged into columns, adapted for mobile screens, given interaction states, and improved for search and usability.

This progression helps students see how professional websites develop in layers. HTML provides meaningful content and structure. CSS controls presentation and layout. JavaScript can add behavior. Content strategy, user experience, responsive design, SEO, and quality assurance guide the decisions made along the way.

The Concepts Section Is Part of the Course

The curriculum is not intended to teach code in isolation. The Concepts section introduces the larger ideas that explain why websites are structured, designed, written, and tested the way they are.

Each lesson introduces or reinforces one of these ideas before students work with the related technical material. Instructors can use the Concepts pages as preparation, assigned reading, discussion support, or a reference for explaining the day’s topic.

Use the Lessons as Learning Resources

The lesson pages on AI Coding Educator are intended to support the instructor rather than replace instruction. Each curriculum lesson recommends a small group of related pages that students can read, experiment with, and return to while they work.

Interactive Demos help students see how individual concepts behave, while the Code Sandbox gives them a safe place to modify examples before applying similar ideas to their own files. The AI Tutor can help when a student needs a simpler explanation, wants to understand a particular piece of code, or needs help troubleshooting.

AI should support the learning process rather than replace it. Students should still read the code, make their own changes, test the result, and understand what the code they use is doing.

Suggested Pacing

The curriculum is designed with approximately one-hour classes in mind, but exact timing should remain flexible.

  • Concept discussion and website examples: approximately 10 to 15 minutes
  • Related AI Coding Educator lessons: approximately 10 to 15 minutes
  • Website project work: approximately 30 to 40 minutes

These times are only a guide. Some groups may need more discussion or guided practice early in the course and more independent project time later.

What Students Should Finish With

By the end of the suggested sequence, students should have a complete responsive homepage containing real content, visual design, grouped components, multi-column layouts, mobile behavior, interface feedback, a small JavaScript interaction, search-friendly content, and the results of a final quality assurance pass.

Just as important, students should leave with a broader understanding of what websites are for, how design and content affect users, why responsive behavior matters, how search engines interpret relevance, and why testing and refinement are part of professional web work.

Begin With Lesson 1

Lesson 1: Understand the Base Site introduces the starter files and the roles of HTML, CSS, and JavaScript, then gives students an immediate opportunity to change the page and see those changes appear in the browser.