HTML, CSS & More for Beginners

A BASIC introduction to HTML & CSS, including "best practices" for modifying your own CSS; when to outsource; how to work with tehcnical support, and more!

Transcript

1. Wordpress 101 February 4, 2014 1 Karen McCamy http://freelancetechnologyreview.com/
2. WP Resources for Beginners • W3Schools (w3schools.org) • Google search (google.com) • CSS-Tricks, Chris Coyier (css-tricks.com) • Yoast, Joost de Valk (yoast.com) (WP SEO) • WP Official Site (wp.org) • For us..."Learn How to Use WP" in "Documentation" • The rest of the "Codex" is very cryptic & for developers 2 http://freelancetechnologyreview.com / Karen McCamy
3. Intro to HTML & CSS • Remember: every piece of content you create in WP is an HTML document • Who knows how a browser "presents" a web page? • HTML provides the structure of your document • Structure is essential to SEO! (remember: only "bots" are crawling your content) 3 Karen McCamy http://freelancetechnologyreview.com /
4. HTML/CSS Intro (cont'd.) • CSS provides the styling & aesthetics • Examples will help you see the difference • 1st: HTML-only with no CSS applied • Next: CSS Zen Garden! (csszengarden.com) • Here you can play with CSS styling... • Check out the examples for yourself... 4 Karen McCamy http://freelancetechnologyreview.com /
5. HTML/CSS Intro (cont'd.) • WHY Should We Care??? • In order to DIY minor styling, you MUST know some basic HTML -- at least be able to read it, even if you can't write it on your own... • I'll show you why in a few minutes! • Otherwise...you'll need to pay someone to do these minor changes for you! $$$ 5 Karen McCamy http://freelancetechnologyreview.com /
6. Modifying CSS "Inspect Element" • This "tool" lives in most browsers • for Chrome & Firefox, right-click to get the menu • Safari: not activated by default; you must turn it on in Preferences --> Advanced --> Show Develop Menu in Menu Bar (it's a check-box) • After activating, it will show when you right-click 6 Karen McCamy http://freelancetechnologyreview.com
7. Hands-On Demo: "Inspect Element" 7 Karen McCamy http://freelancetechnologyreview.com
8. Some CSS Caveats! • CSS is "tricky!" because... • The 1st "C" is for "Cascading" • The Rule of 'Specificity' is KING! • Make 1 change at a time! • It's an iterative process..."trial-and-retry" (...even for the seasoned designer/developer!) 8 Karen McCamy http://freelancetechnologyreview.com /
9. More CSS Tips! • Consider "outsourcing" for major or sweeping changes... • If you don't know if it's "major" ask me! (this is probably NOT something I can answer in email) • Your current theme controls how easy it is to modify...your theme support personnel should become your best friends! 9 Karen McCamy http://freelancetechnologyreview.com /
10. Keys to Working Productively with Theme's Tech Support • Make it easy for them to help you! • Search for your problem on their support site before submitting a support request • Respect their time! • Show them you have tried to help yourself...it will go a long way in gaining their respect! 10 Karen McCamy http://freelancetechnologyreview.com /
11. Working with Tech Support (cont'd) • Describe in detail: • Your theme & version # • Your WordPress version # • ***Always make sure you're running the latest versions of both WordPress & your theme!!!! • Include a screenshot of the area/element you're trying to change, for example... • Tell them what changes you have already tried...in detail • Don't forget to say thanks! 11 Karen McCamy http://freelancetechnologyreview.com
12. Questions or Comments??? 12 Karen McCamy http://freelancetechnologyreview.com / You now have more ways to contact me with questions or group feedback between meetings (listed in order of my preference): email: kmccamy@freelancetechnologyreview.com on Facebook: https://www.facebook.com/FTReview on our Meetup page: http://www.meetup.com/Los-Angeles-WordPress-101/