Styling the Web for Fun and Profit: 5 things about CSS that every web developer needs to know
I just finished my first of two presentations at the Prairie Developer Conference here in Regina! It went really well, and a big thank you to all who attended.
As promised, here are my slides and some links to online resources, some of which were mentioned during my session other which I just find really useful for front-end engineering.
Cheers, and enjoy!
Presentation slides
- Styling the Web for Fun and Profit [ZIP: 14.9 MB]
Links mentioned during the session
- Firebug
- The firebug plugin for Firefox has changed the way that I develop web pages. This tool does adds so much interactivity to developing and debugging CSS-based pages it is unreal. Open the HTML tab, hover over HTML tags, and watch the content, padding, and margin areas light up on the page. This is a real-time, dynamic version of the background-color layout debugging technique I mentioned this morning. Incedentally, both Firebug and myself prefer changing background-color over adding borders when debugging CSS layouts because borders have width and break your layout!
- Position Is Everything
- Bless the folks who run and write for this site - they have saved me and many other web developers countless hours of frustration by compiling and maintaining this treasure trove of documentation on wierd, bizarre, corner-case rendering bugs across a variety of browsers; not a surprise that most of the articles cover IE quirks.
- A List Apart
- This site has been around a long time. Published generally as a two-article-a-month kind of online magazine, they cover the gambit of topics related to web development, mostly from the perspective of content authors, editors, and front-end engineers.
- Doctype
- A StackOverflow-inspired Q&A site devoted entirely to the wonders of HTML, CSS, and JavaScript.
- Stuff and Nonsense
- Andy Clarke works here...
- Transcending CSS
- ...and this is that beautiful book that he wrote.
- Super Awesome Buttons with CSS3 and RGBA
- This is the tutorial for crafting the CSS3 buttons that I referenced in my session. Check it out in IE8, nice beautiful, functional, square-cornered links. Life is to short to hack complex rounded corners for IE<9. You don't get the time back.
- YUI CSS Reset
- Version 2 and Version 3 of the YUI developer CSS libraries at Yahoo. YUI is a fascinating framework for Javascript development as well as CSS work. I used Version 1 of YUI's Javascript bits before I discovered jQuery, and I still use their CSS Reset, Fonts, and even Grids framework for my CSS work.
Other useful sites
You might also find these sites useful; they were helpful resources for me while preparing this presentation.
- Selectutorial
- A great resource on CSS selectors from the ground up.
- Floatutorial
- The same thing for floats.
- Why Containers Don't Clear Themselves
- Another useful post on the beautiful complexity that is clearing and containing floats.
I enjoyed prepping and running this session.
Many thanks to all of you who attended.
Regina rocks!
PS. to any of you who peek at the markup for my blog, have mercy. One of these days I'll find the time to tune up this blog, so look for a complete markup and style overhaul with the next release of Spin the Moose!