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

Like this? Share it with your network


learning to love html and css



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

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



Total Views
Views on SlideShare
Embed Views



28 Embeds 18,752

http://weblogs.asp.net 17239
http://feeds.feedburner.com 496
http://feeds2.feedburner.com 389
http://flavors.me 228
http://combmaker5.rssing.com 139
http://es.flavors.me 66
http://planetcsharp.com 51
http://jp.flavors.me 46
http://pt.flavors.me 18
http://gazette.kygeek.com 14
http://webcache.googleusercontent.com 11
http://www.newsblur.com 11
http://de.flavors.me 8
http://translate.googleusercontent.com 6
http://wrwpf.codeplex.com 6
http://fr.flavors.me 4
http://xianguo.com 3
http://newsblur.com 3
http://cc.bingj.com 2
http://localhost 2
http://dev.newsblur.com 2
http://www.5z5.com 2
http://www.loudfeeds.com 1
http://cache.baidu.com 1 1
http://www.linkedin.com 1
http://weblogs.aspnet05.orcsweb.com 1
https://www.linkedin.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

learning to love html and css Presentation Transcript

  • 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