Back to Basics WordCamp Chicago 2011 TJList

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

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/

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

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

WordPress is a Factory

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

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/

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

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

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

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

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

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

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

Example 2
Typography Test
Making your theme make sense

Example 3
Same content as example 1
Better markup

The Box Model
This End Up
HTML/CSS

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.

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

Distinctions Reduce Confusion

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

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

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

Gotchas
Pair tags properly
Be careful when nesting tags

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

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
Slide 18: Cardboard Box by Ahhyeah
Slide 19: Box Model by W3Schools
http://www.w3schools.com/css/css_boxmodel.asp
Slide 21: Tying Shoes by nlnnet
Slide 26: Car Door Lock by ilmungo
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

Back to Basics WordCamp Chicago 2011 TJList

by TJList on Jul 31, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Back to Basics WordCamp Chicago 2011 TJList — Presentation Transcript