Live Workshop: Building & Presenting — The grand finale where students build their portfolio website and showcase all their work
Build a complete portfolio website showcasing all your AI-created work, then learn about AI safety and ethics.
Students learn to plan their portfolio website structure, map out content from previous sessions, and create a clear navigation plan before coding begins.
Students list everything they've created: news articles, lyrics, comic scripts, images, voiceovers, music, and presentations. They organize content by session.
Students plan their website structure: Homepage, About, Creative Writing Portfolio, Multimedia Gallery, Presentations, and Contact sections.
Students create a visual or written map showing which content goes in which section, how sections link together, and what the user journey will be.
Students identify technical needs: image galleries, audio players, video embeds, file downloads, and responsive design requirements.
Students create their website's homepage using AI-assisted coding. They learn HTML, CSS, and basic JavaScript with AI as their coding partner.
Students create their project folder, set up HTML, CSS, and JavaScript files. They learn about file organization and basic project structure.
Students use AI to generate the HTML structure for their homepage, learning about semantic HTML, headings, navigation, and content sections.
Students use AI to generate CSS styling, learning about layout, colors, typography, spacing, and responsive design principles.
Students add basic JavaScript for interactivity: smooth scrolling, mobile menu toggle, and simple animations with AI assistance.
Students build each section of their website one at a time, integrating their created content from previous sessions. They learn iterative development and debugging.
Students create a section showcasing their news articles, lyrics, and comic scripts. They learn to format text content, add images, and create readable layouts.
Students build an image gallery, audio players for voiceovers and music, and embed multimedia content. They learn about media elements and responsive galleries.
Students embed or link to their presentations, create preview cards, and add descriptions. They learn about embedding external content.
Students learn to identify and fix common issues: broken links, layout problems, responsive design issues, and browser compatibility. They use AI to help debug code.
Students learn to publish their website online using free hosting platforms. They understand domains, hosting, and making their work accessible to the world.
Students learn about free hosting options: GitHub Pages, Netlify, Vercel, or similar platforms. They understand the differences and choose the best option for their needs.
Students organize their files, ensure all assets (images, audio, etc.) are properly linked, and test locally before uploading.
With mentor guidance, students upload their files to the hosting platform, configure settings, and publish their website. They receive their live URL.
Students test their live website on different devices and browsers, fix any issues, and ensure all content displays correctly online.
Students learn to convert their website into a mobile app using simple tools and techniques, making their portfolio accessible as a native app experience.
Students discover how websites can be wrapped into mobile apps using tools like Progressive Web Apps (PWA) or simple app wrappers. They understand the concept of hybrid apps.
Students learn to add PWA features: manifest file, service worker, app icons, and offline capabilities. They make their website app-like.
With mentor guidance, students use tools to package their website as an app, create installable versions, and understand app distribution basics.
Students install their app on their devices, test functionality, and experience their portfolio as a native app.
Students learn about AI safety concerns and how to protect themselves and their loved ones from potential risks associated with AI technology.
Students learn about potential risks: privacy concerns, misinformation, deepfakes, inappropriate content, and over-reliance on AI. They understand why safety measures are important.
Students learn to configure safety settings on AI tools: content filters, privacy settings, age-appropriate restrictions, and parental controls where applicable.
Students create a simple guide or checklist for their family about safe AI usage: what to share, what not to share, how to verify information, and when to ask for help.
Students practice explaining AI safety to family members, helping them understand how to use AI tools responsibly and protect themselves online.
Students explore ethical considerations in AI usage: academic integrity, creative attribution, bias awareness, and responsible AI practices for the future.
Students learn about key ethical concepts: fairness, transparency, accountability, privacy, and the importance of human oversight in AI-assisted work.
Students discuss when it's appropriate to use AI for schoolwork, how to cite AI assistance, and the difference between using AI as a tool vs. replacing learning.
Students learn to recognize bias in AI outputs, understand why it happens, and practice critical thinking when evaluating AI-generated content.
Students work through scenarios: when to disclose AI use, how to give credit, when to question AI outputs, and how to use AI responsibly in different contexts.
Students create their own commitment to ethical AI use, outlining how they will use AI responsibly, fairly, and transparently in their academic and creative work.