This weekend I’ll be blogging from WordCamp Phoenix, a three-day event for web designers, web developers and the public to learn about WordPress.
Yesterday was the first day with free workshops open to the public.
I attended the full-day WordPress 301 workshop led by Ptah Dunbar, core contributor of WordPress, BuddyPress, bbPress and founder of WP Dev Agency.
Ptah is a natural speaker, and I enjoyed how he frequently stopped throughout the workshop to ask if anyone had questions. I spoke with him during break, he’s a very personable, gracious and generous person.
The workshop began with attendees learning how to install a local version of WordPress using MAMP for the Mac or WAMP for Windows, progressed to creating a basic page, styling the page with CSS, then learning some PHP basics.
I loved that Ptah taught the importance of a strong markup foundation, highlighting the HTML5 outline as he progressed through the workshop. I was honored to be a volunteer at the workshop, helping where I could to troubleshoot HTML5 and CSS. Made some new friends including Quinn Whissen, Josh Nichols and Kristie Taylor.
Top Takeaways and Resources
- Browsers read CSS selectors from right to left
- More info from Chris Coyier about how browsers read CSS selectors
- Proper markup structure is important in a page
- Check the HTML5 outline of your pages using the HTML5 Outliner Chrome extension or enter your markup/URL at HTML Outliner
- Know your CSS specificity to determine how your content will be styled
- IDs carry a weight of 100, classes have a weight of 10, elements have a weight of 1.
- Use Lorem Pixel or Dummy Image Generator to create placeholder images for your pages
- Lorem Pixel is a great timesaver. Just enter your dimensions for an image in the URL and it creates an image for you on the fly. For example, entering the markup <img src=”https://lorempixel.com/400/200″ alt=”image placeholder” /> will create a 400px x 200px photographic image for you
- Mid-day snapshot of the files created at the workshop (Dropbox zipfile download) – to get everyone on track for the afternoon
- PHP can streamline your coding and code maintenance efforts
- Conditional logic in your code makes your development life much easier.
- Use the PHP site to learn syntax
If you’re interested, check out the social conversation and images from the workshop.
Heads down entering markup in @ptahdunbar‘s workshop. #wcphx pic.twitter.com/fdqcPE9R
— Deborah Edwards-Onoro (@redcrew) February 24, 2012
@ptahdunbar is leading the WP301 class in manually coding their HTML. No wysiwyg’s here! #wcphx #howthingsshouldbedone
— Josh Nichols (@joshknichols) February 24, 2012
Specificity in CSS: id, class and element have different weights. – @ptahdunbar #wcphx pic.twitter.com/0ppAWiJs
— Deborah Edwards-Onoro (@redcrew) February 24, 2012
I’m at #wcphx brushing up on HTML and CSS… loving it, loving hours and hours of it, but not as much as @JenPinnerAZ is loving it.
— David Despain (@daviddespain) February 24, 2012
My brain is exploding from all the HTML and CSS that @ptahdunbar is teaching us. Thank you Ptah and @PhxWordCamp #wcphx
— Ahmad Taleb (@ataleb52) February 24, 2012
what a day in WP 301 at #wcphx! I’m glad everyone learned alot from the workshop, Ill be sending you guys the updated files after some rest!
— Ptah Dunbar (@ptahdunbar) February 25, 2012
Great info from @ptahdunbar in 301 today left with so much knowledge. Can’t wait for day two of #wcphx
— The Stacey Harris (@TheStaceyHarris) February 25, 2012