Content Structure/Priorities for Learning Area

"Minimum Viable Product" - the base content and features required for the new Learning Area to be meaningful for learners.

MVP content "Textbook" for Web Literacy Skills including links out to active learning pieces (e.g. "makes") from Webmaker or around the web)

1. Web Mechanics skills

• Define what do you want to do/say
• How the Internet works
• 1 page ≠ 1 site ≠ server ≠ Google
• Glossary of terms

2. Infrastructure skills

• What is a web server
• What is a link
• What is a URL
• Basic URL structure
• What is a domain name and do I need one?

3. Coding/scripting skills

• Anatomy of a web page
• A Web site is more that design
• What software do I need
• How much does it cost (do I need to pay anything)
• Install an editor
• Set up a text editor and browser
• Open a file in a browser
• Write a simple page in HTML
• HTML tags & how to use
• Upload a site to a web server
• Checking your new site
• Do people need anything to see my site?

4. Design and Accessibility skills

• What is a11y
• How to code for all types of users
• Basic text styling in CSS
• Common pitfalls to avoid in design
• CSS
• Block vs. inline
• Understand the bloody box model
• Learn about the DOM & the purpose of HTML, CSS & JS
• CSS Properties
• Adding media
• Adding images and video
• Can I use any image on my web site (IP)
• Basic UX

5. Composing for the Web skills

• Create a navigation menu
• What is a dev tool
• Live editing
• Testing on other devices
• Cross browser support
• Cross-device support
• Creating sites that run well on mobile

Proposed Learning Page Structure

"Skill textbook" pages will include:

• Title
• One-liner
• Summary (including why does this matter)
• You need to know: (Required Knowledge)
• What you'll learn
• Embedded Active Learning (projects, tutorials, something to do)
  • Write use cases, particularly around user experience
  • Clear set of requirements for a coherent, embedded experience
  • Examples: School of WebCraft, CodeAcademy, mentored learning
• Deeper Dive
  • How do you use it
  • Full fledged possibilities
  • Syntax/Usage
  • Further Resources (link to full ref)