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.