Assignments

• 1. Create your HTML Signature
• 2. Read about CSS
• 3. Style your HTML Signature
• 4. Design a layout for csszengarden.com
• 5. Design and develop an index for your projects
• 6. Publish your zengarden design as a mockup
• 7. Zengarden CSS
• 8. Refine/complete your zengarden HTML/CSS
• 9. Free Apartment promotion — process diagram
• 10. Free Apartment promotion — “Donut” mockup
• 11. Free Apartment promotion — refine your process diagram
• 12. Free Apartment promotion — script document
• 13. Free Apartment promotion — sequenced prototypes
• 14. Product Finder — research
• 15. Product Finder — wireframe
• 16. Product Finder — wireframe refinement
• 17. Product Finder — clickable prototype
• 18. Restaurant website — research
• 19. Restaurant website — content structure
• 20. Restaurant website — content html
• 21. Restaurant website — mobile styles
• 22. Restaurant website — responsive

• 1. Create your HTML Signature

  • Description
    Make a personalized HTML footer/signature to be used for future assignments and exercises in this class.
  • Folder
    s2013/(student name)/signature
  • Assigned
    Jan 14
  • Due
    Jan 14 (in class)
  • References
    • Mozilla Developer Network
    • HTML Dog HTML and CSS guides
    • W3 Schools HTML Intro
    • HTML5doctor.com
  • burke
  • kressin
  • mclear
  • newton
  • roth
  • spector
  • woo
  • xu
  • yang
  • zagorski
  • zandi
  • zuckerman

• 2. Read about CSS

  • Description
    Do some research to familiarize yourself with the basics of what CSS is and how it works.
  • Assigned
    Jan 14
  • Due
    Jan 16
  • References
    • Mozilla Developer Network
    • HTML Dog HTML and CSS guides
    • W3 Schools CSS Intro
    • alistapart.com CSS articles

• 3. Style your HTML Signature

  • Description
    Use CSS to style your personalized HTML footer/signature.
  • Folder
    s2013/(student name)/signature
  • Assigned
    Jan 16
  • Due
    Jan 16 (in class)
  • References
    • Mozilla Developer Network
    • HTML Dog HTML and CSS guides
    • W3 Schools CSS Intro
    • alistapart.com CSS articles
  • burke
  • kressin
  • mclear
  • newton
  • roth
  • spector
  • woo
  • xu
  • yang
  • zagorski
  • zandi
  • zuckerman

• 4. Design a layout for csszengarden.com

  • Description
    CSS Zen Garden is a site intended to showcase the power of css. Designers may submit stylesheets to customize the look of the site, but the HTML source code never changes. Look through the site, note how different designers have interpreted the content, and develop your own theme and layout. Don't worry about actually writing the css code yet — just create an Illustrator or Photoshop file mockup that shows how you intend the page to look.
  • Assigned
    Jan 16
  • Due
    Jan 23
  • References
    • CSS Zen Garden

• 5. Design and develop an index for your projects

  • Description
    Use HTML and CSS to create a simple index page for the assignments you turn in for this class, and post it on the class website.
  • Folder
    s2013/(student name)/
  • Assigned
    Jan 16
  • Due
    Jan 23