1-Pager
12th Grade  Project 8 weeks

Building a website with AI

Luca P
Updated
Collaboration
Effective Communication
Critical Thinking & Problem Solving
Self Directed Learning
Content Expertise
+ 1 more
1-pager

Purpose

You will create a real website about a topic you care about that is useful, clear, and interactive for an audience beyond just completing an assignment. As you learn HTML, CSS, TypeScript, Visual Studio Code, and AI-supported coding step by step, you will test how digital tools can help you build something meaningful while also noticing where your own judgment still matters. Through weekly check-ins, revision, and feedback from your teacher and classmates, you will strengthen your technical skills, communication, collaboration, and self-direction. The experience ends with a public showcase where you present your website and share what you learned about both web development and the smart use of AI.

Learning goals

You will build a purposeful website using HTML to organize clear content with headings, sections, links, images, and forms, and use CSS to improve layout, readability, and user experience. You will use TypeScript to create one simple interactive feature, such as a quiz, menu, filter, or form check, that responds to user actions and supports your site’s purpose. You will learn how to use VS Code and AI tools productively by testing suggestions, fixing errors, and judging when AI is helpful, inaccurate, or incomplete. You will strengthen collaboration, communication, problem solving, and self-direction by sharing progress in weekly teacher check-ins, using feedback for revision, and presenting your final website and AI reflections to classmates and your teacher.

Competencies
  • Collaboration - Students co-design projects with peers, exercise shared-decision making, strengthen relational agency, resolve conflict, and assume leadership roles.
  • Effective Communication - Students practice listening to understand, communicating with empathy, and share their learning through exhibiting, presenting and reflecting on their work.
  • Critical Thinking & Problem Solving - Students consider a variety of innovative approaches to address and understand complex questions that are authentic and important to their communities.
  • Self Directed Learning - Students use teacher and peer feedback and self-reflection to monitor and direct their own learning while building self knowledge both in and out of the classroom.
  • Content Expertise - Students develop key competencies, skills, and dispositions with ample opportunities to apply knowledge and engage in work that matters to them.
  • Academic Mindset - Students establish a sense of place, identity, and belonging to increase self-efficacy while engaging in critical reflection and action.

Products

You will create a series of small build artifacts as you learn, including tested AI prompts, simple HTML page drafts, CSS style experiments, and a basic TypeScript interaction such as a quiz, filter, button action, or form check. Each week, you will also keep brief progress notes that capture one technical skill you gained, what AI helped with, and where you still had to think or revise on your own. By the end, you will publish a complete website about a topic you care about that clearly serves a real purpose, uses HTML and CSS for structure and design, and includes at least one working TypeScript feature. You will also produce a short AI use review that documents your prompt attempts, useful outputs, mistakes, limitations, and what you learned from using AI wisely.

Launch

Begin with an AI Prompt Jam where you and your classmates ask AI to help create a simple webpage element, then test the code in VS Code to see what works, what breaks, and what still needs human judgment. Compare AI-generated HTML, CSS, and TypeScript suggestions in small groups, then discuss how a website can serve a real purpose while staying clear and usable for a real audience. End by choosing a topic you care about, drafting one possible website purpose, and naming one question you have about using AI wisely during the project.

Exhibition

Host a Launch Day Showcase where you demo your website live for classmates and the teacher, explain the real purpose it serves, and show the TypeScript feature in action. Include a short explanation of how you used HTML, CSS, TypeScript, and AI, plus one example of where AI helped and one place where you had to question or revise its suggestions. Set up the room like a gallery walk so visitors can test your site, ask questions, and give feedback on clarity, usefulness, and design. End with a whole-class share-out where you compare what you learned about building websites and using AI wisely.