{"id":72,"date":"2025-11-07T12:40:18","date_gmt":"2025-11-07T12:40:18","guid":{"rendered":"https:\/\/brig-tart-ols.xyz\/product\/web-starter-kit-build-a-class-website-with-html-css-grades-6-9\/"},"modified":"2025-11-07T12:49:58","modified_gmt":"2025-11-07T12:49:58","slug":"web-starter-kit-build-a-class-website-with-html-css-grades-6-9","status":"publish","type":"product","link":"https:\/\/learn-visionacademy.online\/en_za\/product\/web-starter-kit-build-a-class-website-with-html-css-grades-6-9\/","title":{"rendered":"Web Starter Kit: Build a Class Website with HTML &#038; CSS"},"content":{"rendered":"<p>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.<\/p>\n<p>Format: Short screencasts + starter code + design checklist + publishing guide<br \/>\nDuration: 3 weeks (two 60-minute lessons per week)<br \/>\nWhat You\u2019ll Learn: Semantic HTML, CSS basics, responsive layouts, accessibility, image optimization, safe publishing<br \/>\nTarget Audience: Upper elementary and middle school students who want a friendly intro to the web<\/p>","protected":false},"excerpt":{"rendered":"<p>Description: Students learn how the web works by building a small class website that showcases projects, photos, and announcements. They [&hellip;]<\/p>\n","protected":false},"featured_media":94,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"product_brand":[],"product_cat":[15],"product_tag":[],"class_list":["post-72","product","type-product","status-publish","has-post-thumbnail","product_cat-products","first","instock","virtual","purchasable","product-type-simple"],"_links":{"self":[{"href":"https:\/\/learn-visionacademy.online\/en_za\/wp-json\/wp\/v2\/product\/72","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/learn-visionacademy.online\/en_za\/wp-json\/wp\/v2\/product"}],"about":[{"href":"https:\/\/learn-visionacademy.online\/en_za\/wp-json\/wp\/v2\/types\/product"}],"replies":[{"embeddable":true,"href":"https:\/\/learn-visionacademy.online\/en_za\/wp-json\/wp\/v2\/comments?post=72"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/learn-visionacademy.online\/en_za\/wp-json\/wp\/v2\/media\/94"}],"wp:attachment":[{"href":"https:\/\/learn-visionacademy.online\/en_za\/wp-json\/wp\/v2\/media?parent=72"}],"wp:term":[{"taxonomy":"product_brand","embeddable":true,"href":"https:\/\/learn-visionacademy.online\/en_za\/wp-json\/wp\/v2\/product_brand?post=72"},{"taxonomy":"product_cat","embeddable":true,"href":"https:\/\/learn-visionacademy.online\/en_za\/wp-json\/wp\/v2\/product_cat?post=72"},{"taxonomy":"product_tag","embeddable":true,"href":"https:\/\/learn-visionacademy.online\/en_za\/wp-json\/wp\/v2\/product_tag?post=72"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}