back to basics wordcamp chicago 2011 tjlist
DESCRIPTION
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.TRANSCRIPT
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
http://maxim650.com