"Who I Am" v3 — Hand-Coded Personal Website
ABCD- Key Concept
- Communication
- Related Concepts
- Function, Aesthetics
- Global Context
- Personal and Cultural Expression
- Statement of Inquiry
- The web works because form (design) and function (code) cooperate within shared standards.
- Inquiry Questions
- Factual: What is HTML, CSS, HTTP? What is the DOM? Conceptual: How do constraints of the medium shape what can be expressed? Debatable: Is a website a document or a building?
- Skills / Tools
- HTML structure, CSS styling, basic responsive techniques. View-source of real sites. Comparative analysis of portfolio websites. VS Code or an online editor. Git concepts (optional introduction).
- AI Integration
- AI as code tutor and reference. Students use DeepSeek to: (1) explain HTML and CSS concepts when stuck ("what does display: flex actually do?"), (2) debug broken code by pasting it in and asking what's wrong, (3) suggest CSS for a specific visual effect they want. The rule: students must write the initial version themselves, AI can help fix or explain. Students must be able to verbally explain any code in their final site — teacher spot-checks this. Discussion: AI will sometimes give code that works but uses patterns you haven't learned yet; that's a flag to either learn the pattern or find a simpler way.
- Summative Assessment
- Hand-coded multi-page personal website + design folder emphasis on A (analysis of 3+ existing personal sites, user needs research, brief) and B (specification, 3 design directions with mockups, justified choice with wireframes) + AI Use Log.
- Budget Note
- 0 RMB. Free editors; hosting on GitHub Pages or Netlify (VPN may be needed — have a local fallback plan).