This document is a presentation about essential HTML and CSS skills for bloggers and business owners. It discusses how WordPress alone is not enough and basic coding skills are still needed. It encourages learning HTML semantics and CSS properties like the box model. It provides examples of improving markup and styling with CSS. Resources for learning HTML and CSS are also included.

1. Back to Basics Essential HTML and CSS for Bloggers and Business Owners TJ List The Geek Who Speaks People Twitter: @TJList http://maxim650.com

2. The Most Important Slide Find this presentation at: http://maxim650.com/wcchi-2011 The demo sites are at: http://wcchi-before.maxim650.com/ http://wcchi-after.maxim650.com/

3. I don’t need to learn code because… “I use WordPress!” “It handles the code for me.” “My theme has all the controls I need.”

4. “I don’t need to learn to swim. I wear a life jacket when I go canoeing.”

5. WordPress is a Factory

6. WordPress is a Factory

7. Tools I can’t get this stuff at Home Depot…

8. Plugins WordPress FAQ Manager Andrew Norcross / @norcross http://wordpress.org/extend/plugins/wordpress-faq-manager/ WordPress.com Custom CSS Automattic http://wordpress.org/extend/plugins/safecss/ Widget Classes aizatto http://wordpress.org/extend/plugins/widget-classes/ TinyMCE Advanced Andrew Ozz http://wordpress.org/extend/plugins/tinymce-advanced/

9. Suggested Tools IDE (Integrated Development Environment) Notepad++ (PC) Coda or Textmate (Mac)

10. Essential Tools FireFox Firebug extension Patience Attention to Detail Sense of Humor

11. Resources W3 Schools (http://www.w3schools.com/) http://css-tricks.com/ http://www.cssnewbie.com/ http://meyerweb.com/eric/tools/css/reset/ http://positioniseverything.net/index.php

12. Let’s get started… WordPress 3.2.1 Twenty-Eleven Theme Plugins listed above

13. CSS Selectors by Precedence Element-specific settings ID (indicated with # in a CSS file) Class (indicated with . in a CSS file) Browser Default

14. Semantic Markup HTML for Content HyperText Markup Language Tells browser what to display CSS for Appearance Cascading Style Sheet Tells browser how to display the HTML

15. Example 1 Which element is the most important on this page? TinyMCE: Your Frenemy Visual vs. HTML Editors

16. Example 2 Typography Test Making your theme make sense

17. Example 3 Same content as example 1 Better markup

18. The Box Model This End Up HTML/CSS

19. The Box Model* *Image blatanty stolen from http://www.w3schools.com/css/css_boxmodel.asp because I was too lazy to make my own at 3:30 AM.

20. Example 4 Judicious use of the <div> element The Box Model Background and Border properties Padding and Margins

21. Distinctions Reduce Confusion

22. Are your eyes crossed? Distinctions reduce confusion Practice, practice, practice White space! Use your IDE

23. Example 5 Widgets! Goodbye, TinyMCE editor Float Element-specific styles

24. Example 6 Highlighting Rows of a list Selecting specific elements by ID Advanced selection techniques

25. Gotchas Pair tags properly Be careful when nesting tags

26. “Do MORE of what WORKS. Do less of what doesn’t.” -Rebecca Jehorek

27. Thank you, WordCamp Chicago! Image Credits Slide 4: Canoe by Khotzy http://www.flickr.com/photos/43334017@N00/2510410170/ Slide 5: Factory by harry_nl http://www.flickr.com/photos/23363966@N02/3030267182/ Slide 18: Cardboard Box by Ahhyeah http://www.flickr.com/photos/87622946@N00/454494396/ Slide 19: Box Model by W3Schools http://www.w3schools.com/css/css_boxmodel.asp Slide 21: Tying Shoes by nlnnet http://www.flickr.com/photos/39727414@N00/1467545266/ Slide 26: Car Door Lock by ilmungo http://www.flickr.com/photos/48094050@N00/155746502/ All images are Creative Commons (except the CSS Box Model on slide 19 ) TJ List The Geek Who Speaks People @TJList TJ@maxim650.com http://maxim650.com