/cyoa-tutorial

Primary LanguageCSS

Welcome to Choose Your Own Adventure Tutorial!

  1. Set up
    • main html file
      • doctype
      • html
        • head
        • body
  2. Create the first page of your story
    • introduce html static tags
      • headers
      • paragraphs
      • divs
      • imgs
        • width and height
    • show how to view result in browser
  3. Add style
    • add css file
    • link css file in html
    • css selectors
      • add classes vs ids
    • attributes
      • background
      • text: font / color / size
      • box model: border / margin / padding
  4. Add your story
    • Add pages
    • More tags
      • button
      • inputs
    • CSS
      • pseudo classes / alt states
    • Link between pages
  5. Best practices + more?
    • img alt attr
    • file organization
      • relative paths
    • css animation
  6. Extra stuff students can do?
    • add to scene
      • finish line
      • tree
      • another page for story's end
      • give rabbit choice to sleep to change story's ending