March 24

• Talk: Assignment Overview

• Talk: Landscape of web design and development.

• Hacking Session: Hacking the web - using browser's inspect element tool

  • https://processly.io
  • http://penguin.rehanbutt.com

• Breakout: Download and install

  • Brackets (text editor)
  • Github Desktop (version control app)
    • Log in to the app

• Talk: Simple introduction to Github and Github Pages.

  • Dev vs. Live Environments (Branches in this case)
  • Merits of version control

• Hacking Session: Crash course on web development with an introduction to HTML + CSS.

  • Using the editor with Github
  • Local development
  • File structure and naming convention
  • Create a simple single page. (intro.html)
  • Structure: Header, Body, Footer, divs
  • Content: Links, Images
  • Styling: Basic styling, Fonts
  • Consider how things look on different browsers and devices
  • Build this site (Vanilla) by end of session

• Talk: Preparing assets

  • Images
    • Image types and use cases: PNG, GIF, SVG (The vector image in this slide is a SVG image)
    • Difference between pixel width and file size.
    • Optimizing images.
  • Videos
    • Upload to Youtube or Vimeo. Embed.
    • Other embeddable content
    • Will cover more Day 6

• Due End of Class:

  • Nothing

• Due Beginning of Next Class:

  • Simple website deployed via Github Pages and all pages on RealtimeBoard in a new frame titled Portfolio 5 — Day 4 using “Capture web page” tool.