Back to Basics<br />Essential HTML and CSS<br />for<br />Bloggers and Business Owners<br />TJ List<br />The Geek Who Speak...
The Most Important Slide<br />Find this presentation at:<br />http://maxim650.com/wcchi-2011<br />The demo sites are at:<b...
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 ...
“I don’t need to learn to swim. <br />I wear a life jacket when I go canoeing.”<br />
WordPress is a Factory<br />
WordPress is a Factory<br />
Tools<br />I can’t get this stuff at Home Depot…<br />
Plugins<br />WordPress FAQ Manager	Andrew Norcross / @norcross<br />http://wordpress.org/extend/plugins/wordpress-faq-mana...
Suggested Tools<br />IDE (Integrated Development Environment)<br />Notepad++ (PC)<br />Coda or Textmate (Mac)<br />
Essential Tools<br />FireFox<br />Firebug extension<br />Patience<br />Attention to Detail<br />Sense of Humor<br />
Resources<br />W3 Schools (http://www.w3schools.com/)<br />http://css-tricks.com/<br />http://www.cssnewbie.com/<br />http...
Let’s get started…<br />WordPress 3.2.1<br />Twenty-Eleven Theme<br />Plugins listed above<br />
CSS Selectors by Precedence<br />Element-specific settings<br />ID (indicated with # in a CSS file)<br />Class (indicated ...
Semantic Markup<br />HTML for Content<br />HyperText Markup Language<br />Tells browser what to display <br />CSS for Appe...
Example 1<br />Which element is the most important on this page?<br />TinyMCE: Your Frenemy<br />Visual vs. HTML Editors<b...
Example 2<br />Typography Test<br />Making your theme make sense<br />
Example 3<br />Same content as example 1<br />Better markup<br />
The Box Model<br />This End Up<br />HTML/CSS<br />
The Box Model*<br />*Image blatanty stolen from http://www.w3schools.com/css/css_boxmodel.asp<br />because I was too lazy ...
Example 4<br />Judicious use of the <div> element<br />The Box Model<br />Background and Border properties<br />Padding an...
Distinctions Reduce Confusion<br />
Are your eyes crossed?<br />Distinctions reduce confusion<br />Practice, practice, practice<br />White space!<br />Use you...
Example 5<br />Widgets!<br />Goodbye, TinyMCE editor<br />Float<br />Element-specific styles<br />
Example 6<br />Highlighting Rows of a list<br />Selecting specific elements by ID<br />Advanced selection techniques<br />
Gotchas<br />Pair tags properly<br />Be careful when nesting tags<br />
“Do MORE of what WORKS.<br />Do less of <br />what doesn’t.”<br />-Rebecca Jehorek<br />
Thank you, WordCamp Chicago!<br />Image Credits<br />Slide 4: Canoe by Khotzy<br />http://www.flickr.com/photos/43334017@N...
Upcoming SlideShare
Loading in …5
×

Back to Basics WordCamp Chicago 2011 TJList

3,586
-1

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
3,586
On Slideshare
0
From Embeds
0
Number of Embeds
0
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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×