1. Techniques for Better Web Development Ben Scheirman ben.scheirman@gmail.com Blog: http://www.flux88.com

2. Show of Hands Favorite Browser? Internet Explorer Firefox Safari Opera

3. Browser Stats

4. HTML Recap Common Tags: Lesser-known Tags: Evil Tags: Do I need a Doctype Header?

5. What is CSS? Purpose Benefits Why? But I’m a Developer!

6. Best Practices No inline styles Minimal page style blocks Reference external CSS file Use a DOCTYPE Validate!

7. Styling Text Use Font fall-backs font-family: Calibri, Lucida, Verdana, Arial em, not px Line-height, not height Text Decoration

8. Styling Links : selector LoVe-Hate  a:link a:visited  a:hover a:active Rollover graphics

9. Styling Forms No tables! Use

10. CSS for Layout What is page flow? Understand float Understand the box model

11. The Box Model Padding Margin Content

12. CSS Demos Box Model CSS Page Layout Prop-Clear Trick Pure CSS Tabs

13. Tips for success Develop in Firefox, not IE Validate! Switch browsers frequently

14. Possibilities CSS Zen Garden http://www.csszengarden.com CSS Layout Templates http://www.intensivstation.com

15. JavaScript Why? Why Not?

16. DOM Manipulation What is the DOM? What can JavaScript do with the DOM? document.getElementById(id); document.getElementsByTagName(tag); document.createElement(tag); element.setAttribute(attr, value) document.removeChildren(); document.appendChild(node); Avoid browser specific syntax such as document.all

17. There’s Help Firefox Tools Firebug Web Developer Toolbar JavaScript Frameworks MochiKit YUI Prototype scrip.taculo.us …more…

18. Meet MochiKit “Makes JavaScript SUCK LESS”

19. What if… JavaScript is disabled? Browser doesn’t support ______ ?

20. Progressive Enhancement ASP.NET Application When JavaScript is Disabled still functions When JavaScript is available, but limited experience improves When XMLHttpRequest is supported Ajax is used

21. Demo:  Forum Registration Page  CSS to style forms  Ajax to enhance the site

22. Questions?

23. References  CSS Mastery by Andy Budd  DOM Scripting by Jeremy Keith www.csszengarden.com www.exploding-boy.com http://www.greywyvern.com/code/min-height- hack.html