Back to Basics WordCamp Chicago 2011 TJList

4,085 views

Published on

People who manage their own websites (especially bloggers and small business owners) really should know some basic HTML and CSS. In this interactive presentation, @TJList gives some tips on performing some basic tasks.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,085
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Back to Basics WordCamp Chicago 2011 TJList

  1. 1. Back to Basics<br />Essential HTML and CSS<br />for<br />Bloggers and Business Owners<br />TJ List<br />The Geek Who Speaks People<br />Twitter: @TJList<br />http://maxim650.com<br />
  2. 2. The Most Important Slide<br />Find this presentation at:<br />http://maxim650.com/wcchi-2011<br />The demo sites are at:<br />http://wcchi-before.maxim650.com/<br />http://wcchi-after.maxim650.com/<br />
  3. 3. I don’t need to learn code because…<br />“I use WordPress!”<br />“It handles the code for me.”<br />“My theme has all the controls I need.”<br />
  4. 4. “I don’t need to learn to swim. <br />I wear a life jacket when I go canoeing.”<br />
  5. 5. WordPress is a Factory<br />
  6. 6. WordPress is a Factory<br />
  7. 7. Tools<br />I can’t get this stuff at Home Depot…<br />
  8. 8. Plugins<br />WordPress FAQ Manager Andrew Norcross / @norcross<br />http://wordpress.org/extend/plugins/wordpress-faq-manager/<br />WordPress.com Custom CSS Automattic<br />http://wordpress.org/extend/plugins/safecss/<br />Widget Classes aizatto<br />http://wordpress.org/extend/plugins/widget-classes/<br />TinyMCE Advanced Andrew Ozz<br />http://wordpress.org/extend/plugins/tinymce-advanced/<br />
  9. 9. Suggested Tools<br />IDE (Integrated Development Environment)<br />Notepad++ (PC)<br />Coda or Textmate (Mac)<br />
  10. 10. Essential Tools<br />FireFox<br />Firebug extension<br />Patience<br />Attention to Detail<br />Sense of Humor<br />
  11. 11. Resources<br />W3 Schools (http://www.w3schools.com/)<br />http://css-tricks.com/<br />http://www.cssnewbie.com/<br />http://meyerweb.com/eric/tools/css/reset/<br />http://positioniseverything.net/index.php<br />
  12. 12. Let’s get started…<br />WordPress 3.2.1<br />Twenty-Eleven Theme<br />Plugins listed above<br />
  13. 13. CSS Selectors by Precedence<br />Element-specific settings<br />ID (indicated with # in a CSS file)<br />Class (indicated with . in a CSS file)<br />Browser Default<br />
  14. 14. Semantic Markup<br />HTML for Content<br />HyperText Markup Language<br />Tells browser what to display <br />CSS for Appearance<br />Cascading Style Sheet<br />Tells browser how to display the HTML<br />
  15. 15. Example 1<br />Which element is the most important on this page?<br />TinyMCE: Your Frenemy<br />Visual vs. HTML Editors<br />
  16. 16. Example 2<br />Typography Test<br />Making your theme make sense<br />
  17. 17. Example 3<br />Same content as example 1<br />Better markup<br />
  18. 18. The Box Model<br />This End Up<br />HTML/CSS<br />
  19. 19. The Box Model*<br />*Image blatanty stolen from http://www.w3schools.com/css/css_boxmodel.asp<br />because I was too lazy to make my own at 3:30 AM.<br />
  20. 20. Example 4<br />Judicious use of the <div> element<br />The Box Model<br />Background and Border properties<br />Padding and Margins<br />
  21. 21. Distinctions Reduce Confusion<br />
  22. 22. Are your eyes crossed?<br />Distinctions reduce confusion<br />Practice, practice, practice<br />White space!<br />Use your IDE<br />
  23. 23. Example 5<br />Widgets!<br />Goodbye, TinyMCE editor<br />Float<br />Element-specific styles<br />
  24. 24. Example 6<br />Highlighting Rows of a list<br />Selecting specific elements by ID<br />Advanced selection techniques<br />
  25. 25. Gotchas<br />Pair tags properly<br />Be careful when nesting tags<br />
  26. 26. “Do MORE of what WORKS.<br />Do less of <br />what doesn’t.”<br />-Rebecca Jehorek<br />
  27. 27. Thank you, WordCamp Chicago!<br />Image Credits<br />Slide 4: Canoe by Khotzy<br />http://www.flickr.com/photos/43334017@N00/2510410170/<br />Slide 5: Factory by harry_nl<br />http://www.flickr.com/photos/23363966@N02/3030267182/<br />Slide 18: Cardboard Box by Ahhyeah<br />http://www.flickr.com/photos/87622946@N00/454494396/<br />Slide 19: Box Model by W3Schools<br />http://www.w3schools.com/css/css_boxmodel.asp<br />Slide 21: Tying Shoes by nlnnet<br />http://www.flickr.com/photos/39727414@N00/1467545266/<br />Slide 26: Car Door Lock by ilmungo<br />http://www.flickr.com/photos/48094050@N00/155746502/<br />All images are Creative Commons <br />(except the CSS Box Model on slide 19 )<br />TJ List<br />The Geek Who Speaks People<br />@TJList<br />TJ@maxim650.com<br />http://maxim650.com<br />

×