get legit

Day 1, Part C: Exploring Sites with browser tools and sublime text


Ashley Williams, NYCDA

Tuesday, 5 March 2013

where do i develop

  • Dreamweaver
  • Eclipse
  • Text-Editors
  • Terminal

Sublime text



WHY?
  • Live. Currently and consistently updated and supported
  • Large Community
  • Lots of plug-ins

In Browser Code editors

BrowserS and Browser Tools


  • Firefox and Firebug
  • Chrome and Chrome Developer Tools
  • Safari


ASSIGNMENT #1

Twitter Bootstrap Examples


TO-DO:
  • Download 1 or more of these examples
  • Open the example files in Sublime
  • Open the example in multiple browsers locally from your machine
  • Read the Twitter Bootstrap Documents
  • Change one of the examples to include new content and apply some features of twitter bootstrap

ASsignment #2

EVERY F*CKING WEBSITE


TO-DO:
  • View the page source
  • Use Inspect Element on multiple DOM elements in multiple browsers. Note the differences
  • Play with changing styles in the browser, take a screen shot that includes your changes both in the inspector and in the browser window

CHALLENGE: Acquire all the docs and get a local version of the website running

Assignment #3 

EMBROIDERY TROUBLESHOOTING GUIDE


TO-DO:
  • There are a lot of things wrong with this website. Based on what you've learned today, identify what is causing the text-sizing issue.
  • Identify 3 issues with how HTML, CSS, or JS are being used on the page. How would you fix it?

CHALLENGE: Get a local copy of the site running on your machine and fix the site.

ASSIGNMENT #4

STANDARD EXPOSURE


TO-DO
  • Find a HTML5 or CSS3 standard that is not yet supported by all browsers that you think should be. Explain why.

Some inspiration:

...and a great resource: http://html5readiness.com
Made with Slides.com