Back to Basics WordCamp Chicago 2011 TJList

7/30 – 7/31/2011 #wcchicago

Back to BasicsEssential HTML and CSS

forBloggers and Business Owners

TJ ListThe Geek Who Speaks People

Twitter: @TJListhttp://maxim650.com

7/30 – 7/31/2011 #wcchicago

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/

7/30 – 7/31/2011 #wcchicago

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.”

7/30 – 7/31/2011 #wcchicago

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

7/30 – 7/31/2011 #wcchicago

WordPress is a Factory

7/30 – 7/31/2011 #wcchicago

WordPress is a FactoryInputs Processing Equipment Outputs

Blog Posts WordPress Software HTMLPages Theme CSS

Images Plugins JavaScriptLinks Images, videos, etc.

7/30 – 7/31/2011 #wcchicago

Tools

• I can’t get this stuff at Home Depot…

7/30 – 7/31/2011 #wcchicago

PluginsWordPress FAQ Manager Andrew Norcross / @norcrosshttp://wordpress.org/extend/plugins/wordpress-faq-manager/

WordPress.com Custom CSS Automattichttp://wordpress.org/extend/plugins/safecss/

Widget Classes aizattohttp://wordpress.org/extend/plugins/widget-classes/

TinyMCE Advanced Andrew Ozzhttp://wordpress.org/extend/plugins/tinymce-advanced/

7/30 – 7/31/2011 #wcchicago

Suggested Tools

• IDE (Integrated Development Environment)– Notepad++ (PC)– Coda or Textmate (Mac)

7/30 – 7/31/2011 #wcchicago

Essential Tools

• FireFox• Firebug extension• Patience• Attention to Detail• Sense of Humor

7/30 – 7/31/2011 #wcchicago

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

7/30 – 7/31/2011 #wcchicago

Let’s get started…

• WordPress 3.2.1• Twenty-Eleven Theme• Plugins listed above

7/30 – 7/31/2011 #wcchicago

CSS Selectors by Precedence

1. Element-specific settings2. ID (indicated with # in a CSS file)3. Class (indicated with . in a CSS file)4. Browser Default

7/30 – 7/31/2011 #wcchicago

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

7/30 – 7/31/2011 #wcchicago

Example 1

• Which element is the most important on this page?

• TinyMCE: Your Frenemy• Visual vs. HTML Editors

7/30 – 7/31/2011 #wcchicago

Example 2

• Typography Test• Making your theme make sense

7/30 – 7/31/2011 #wcchicago

Example 3

• Same content as example 1• Better markup

7/30 – 7/31/2011 #wcchicago

The Box Model This End Up

HTML/CSS

7/30 – 7/31/2011 #wcchicago

The Box Model*

*Image blatanty stolen from http://www.w3schools.com/css/css_boxmodel.aspbecause I was too lazy to make my own at 3:30 AM.

7/30 – 7/31/2011 #wcchicago

Example 4

• Judicious use of the <div> element• The Box Model• Background and Border properties• Padding and Margins

7/30 – 7/31/2011 #wcchicago

Distinctions Reduce

Confusion

7/30 – 7/31/2011 #wcchicago

Are your eyes crossed?

• Distinctions reduce confusion• Practice, practice, practice• White space!• Use your IDE

7/30 – 7/31/2011 #wcchicago

Example 5

• Widgets!– Goodbye, TinyMCE editor

• Float• Element-specific styles

7/30 – 7/31/2011 #wcchicago

Example 6

• Highlighting Rows of a list• Selecting specific elements by ID• Advanced selection techniques

7/30 – 7/31/2011 #wcchicago

Gotchas

• Pair tags properly• Be careful when nesting tags

7/30 – 7/31/2011 #wcchicago

“Do MORE of what WORKS.

Do less of what doesn’t.”

-Rebecca Jehorek

7/30 – 7/31/2011 #wcchicago

Thank you, WordCamp Chicago!Image Credits

Slide 4: Canoe by Khotzyhttp://www.flickr.com/photos/43334017@N00/2510410170/

Slide 5: Factory by harry_nlhttp://www.flickr.com/photos/23363966@N02/3030267182/

Slide 18: Cardboard Box by Ahhyeahhttp://www.flickr.com/photos/87622946@N00/454494396/

Slide 19: Box Model by W3Schoolshttp://www.w3schools.com/css/css_boxmodel.asp

Slide 21: Tying Shoes by nlnnethttp://www.flickr.com/photos/39727414@N00/1467545266/

Slide 26: Car Door Lock by ilmungohttp://www.flickr.com/photos/48094050@N00/155746502/

All images are Creative Commons (except the CSS Box Model on slide 19 )

TJ ListThe Geek Who Speaks People

@[email protected]

http://maxim650.com