Description
Description: Students learn how the web works by building a small class website that showcases projects, photos, and announcements. They begin with semantic HTML to structure headings, paragraphs, lists, and accessible links. Next, they apply CSS to control color, spacing, and layout so pages look clean on tablets and phones. A responsive grid demonstrates how columns collapse nicely on narrow screens without breaking content. Students add image optimization patterns to keep pages fast even on slow connections. They learn to write alt text for accessibility and use contrast checkers for readability. A mini style guide teaches consistent typography and button states that match school branding. Versioned checkpoints explain how to save work safely and roll back if something breaks. Optional extensions cover simple navigation menus and a contact form UI (front-end only, no servers required). By the final lesson, learners publish their site to a free static host and share a portfolio link with teachers.
Format: Short screencasts + starter code + design checklist + publishing guide
Duration: 3 weeks (two 60-minute lessons per week)
What You’ll Learn: Semantic HTML, CSS basics, responsive layouts, accessibility, image optimization, safe publishing
Target Audience: Upper elementary and middle school students who want a friendly intro to the web
