• Like
learning to love html and css
Upcoming SlideShare
Loading in...5

learning to love html and css

Uploaded on

Presented at NDC 2012. Video: http://vimeo.com/43548698

Presented at NDC 2012. Video: http://vimeo.com/43548698

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. learning to love html(for grumpy developers) @jongalloway
  • 2. hi!http://weblogs.asp.net/jgalloway
  • 3. why? falling in love the honeymoonmarriage counseling
  • 4. why?lessons from javascript
  • 5. falling in lovewhat does a document offer? structured content not design not logic
  • 6. why?it’s what we share with designers with our usersthe only code you write that the world sees
  • 7. falling in loveavoiding the cheap floozycode smells difficult to maintain trapped supporting browsers (and versions) reliance on grids / frameworks / tools
  • 8. falling in lovelove it for what it is… a document format
  • 9. falling in lovedocument vs. application tools developersbut you deliver documents
  • 10. true love♥ html
  • 11. the honeymoonjoy!clean code (occupy your codebase!)
  • 12. the honeymoonjoy!clean code is flexible (story time)
  • 13. the honeymoonjoy!adaptive layout
  • 14. the honeymoonjoy!seo: a structured document is machine readable
  • 15. the honeymoonclear communicationsemantic markup is easier, cleaner asp.net templates
  • 16. the honeymoonselectors get so easy! css jquery testing$(section.mentions header img).hide()
  • 17. marriage counseling
  • 18. marriage counselingyour html as an api separation of concerns smoothly factored pieces agree
  • 19. marriage counselingbrowsersstop fixating on browsers you are not your browser your browser doesn’t matter to users land of a thousand browserscommon ground resets? okay… normalize is better! http://necolas.github.com/normalize.css/
  • 20. marriage counselingprogressive enhancementbuild for your main use case enhance using feature detection
  • 21. marriage counselingprogressive enhancementshim for downlevel modernizr conditional comments content fallback
  • 22. marrige counseling… let’s talk ie quirks mode! (watch doctype)
  • 23. marrige counseling… let’s talk iedeveloper tools document mode (rendering) browser mode (requesting)
  • 24. marriage counselingpixel hellusers don’t count pixels
  • 25. marriage counselingpixel hellavoiding pixel hell get there first get out of mockup mode photoshop is not a web standard
  • 26. marriage counselingpositioning and layoutfloats http://css.maxdesign.com.au/floatutorial/
  • 27. marriage counselingpositioning and layoutfloats float one way
  • 28. marriage counselingpositioning and layoutpadding / margins use developer tools use page inspector
  • 29. marriage counselingfocus on a structured documentstart with an outline – like writingkeep things structuredrefactor (?!)
  • 30. learning to love html(for grumpy developers) @jongalloway