Resources
I have a constantly growing list of potentially helpful tools, tutorials, guides, and articles. Generally, I bookmark websites that I find helpful. I hope you'll find some of these really helpful, and that you'll simply ignore those that aren't doing it for you. I'm always looking to add to the list, so send me good resources you find in your travels.
Resources are broken into categories. Select the category label to jump down to resources in that category.
- Screencasts (Video Tuts)
- Other Tutorials & Web Templates
- Blog Help
- Design Ideas & Inspiration
- Color, Graphics & Images
- Coding Goodies (guides & scripts)
- CSS Tricks & Hacks
- Validation & Accessibility
- Writing
Screencasts
All screencasts have moved to a Password Protected Website
- Creating Your Blog
- Create a Blog I - Get a Google Account
- Create a Blog II - Get a Blogger Blog & Post
- Feeds & Subscriptions
- Feed Your Blog Posts
- Feed Subscriptions with Google Reader
- Styling Your Blog
- Blogger Templates
- Blogger Page Elements
- Blogger Fonts & Colors
- Dreamweaver
- Photoshop
- Mediawiki
Other Tutorials & Web Templates
- 15 Little Things to Know about HTML
- Webpage Templates in Common Layouts (valid XHTML & CSS)
Blog Help
- Tips for New Bloggers - a Blog - go here, find something neat you can do with your blog, do it, and write about it in the course blog.
- Pro Blogger's Blog Post Tips - struggling to get the blog genre? Check out this brief top ten list. While you're there, surf around a bit. Be careful. You might learn something.
- Pulsed's Blogger Layout Tutorial - a solid text-based tutorial for making many mods to your Blogger theme, complete with screencaps.
- Some Blogger Templates - by Blogspot Templates of all places!
Design Ideas & Inspiration
- Cool Home Pages - a great place to see good designs of all stripes, divided into categories.
- CSS Zen Garden - a great place to see just how far one can take web design using CSS.
- Web Pages That Suck - a great place to see bad designs of all stripes, including a daily sucker. (Quiz: What is MMN?)
- Worst Websites - these guys aren't as dedicated to the mission as Web Pages That Suck, but you'll see some good, er, bad ones here.
- The World's Worst Website - this horrid website is actually intentionally bad. It is a very effective demonstration of many of the major design mistakes you might make, so you won't make them. An intriguing little public service by a free web hosting company.
Color, Graphics, & Images
- Web Monkey's Color Codes - a great resource all around, but this link goes to the Hex color chart.
- WellStyled.com's Color Scheme Designer - great if you want help on the color palette, for your website or your livingroom.
- Good-tutorials.com's Photoshop Tutorials - I'd be surprised if a more comprehensive set of Photoshop tuts exists. You NEED this!
- Freefoto.com's Stock Photos - with royalty-free photos on almost any subject, this is a good resource when you need a photo.
Coding Goodies (guides and scripts)
- W3Schools.com - a great resource when you need help with some piece of HTML, CSS, or W3C Standards. Somewhat dry, but easily navigable. Great little online tools for trying out the code. I use this site all the time.
- HTML Dog - another good (X)HTML and CSS reference. Like W3Schools, but with a British accent that makes it oddly less formal and more authoritarian in its treatment of coding practice.
- Hotscripts.com - if you're looking to add a drop-down menu or a calendar of events to your website and don't know javascript from Jabba the Hutt, visit HotScripts.com
- DHTML Central - here's another nice site for those interested in adding dynamic navigation to their websites. Thomas Brattli does some really cool stuff with dynamic HTML!
- Web Design From Scratch - this site is a kind of one-stop-shop for web development guidance. It's got some good stuff, though it doesn't specialize so you don't get as much depth in each area. If you feel like you're flying blind on some aspect of your web development, land here for 10 minutes and get your bearings.
CSS Tricks & Hacks
- Position is Everything - This is a key resource for help when a browser bug messes with your CSS layout.
- Tantek Hack (box model) - Tantek Çelik is likely famous for a number of things. I know his work through the now superceded "Tantek Hack" for IE's mishandling of the "box model" layout. The Tantek hack exploits a bug in IE's handling of CSS to send IE-only browsers a corrected box width. To compensate for the fact that Opera sometimes behaves like IE, the hack also includes the "be nice to Opera 5" rule. As I understand it, this entire hack is rendered obsolete by the Tan Hack.
- Tan Hack (aka * HTML Hack or SBMH for Simplified Box Model Hack) - a powerful patch promulgated by Edwardson Tan and often used to help adjust for IE's misunderstanding of the W3C's "box model" for content, padding, and margin. The modified version of the SBMH re-serves a correct box model value to versions of IE that correctly understand the box model. IE 7 doesn't get the * HTML hack but it does correctly handle the box model, making this hack useful over the long haul. (This change in IE 7 messes with another often used hack, the Holly Hack. (See Position is Everything if you're having troubleWe're using it in our layout templates.
- Improved Footer Stick (The Man in Blue) - an important challenge in CSS layouts involves vertical space and alignment. Cool websites often have site or contact information in a footer area at the bottom of the page, a huge pain in the a$$ in a CSS layout. Cameron Adams, in a significant alteration of a trick first disseminated by Craig Erskine and solarDreamStudios (now at qrayg.com), has provided the world with a leaner version that works on pages with a lot or a little content on them. We use a version of the footerStickalt trick in our layout templates for this course because it works!
- Three Column CSS Layout Help - Alex Robinson's One True Layout article in Position is Everything shows you how you can use creative floats and negative margins to order your markup for maximum device flexibility and still put your columns in any order you like. Caution: This tutorial is not for novices in a hurry, or unwilling to invest some serious time.
- More Three Column CSS Layout Help - This one's by Paul O'Brien and it includes some kind of footer stick. (I haven't knowingly used this layout, so I'm not sure if he's using Man in Blue's version.)
- Fahrner Image Replacement (FIR) - OK. If you want to do this web development stuff in any serious way, you should get to know this IR technique. Basically, it lets you use text in your markup and substitute images for that text via background images and CSS. You can use it for headers, roll-over images that don't use javascript, and a lot more. CSS Zen Garden is not possible without FIR. But FIR isn't perfect: as Dave Shea explains in the article, it has some (serious) issues with some screen readers, requires a smidgen of extra markup, and the 6 people browsing with CSS on and images off won't see text or image when they browse your site. But there are even fixes to some of these problems, and it is an active area of innovation in CSS.
Validation and Accessibility
- W3C HTML Validator - you should always use valid HTML markup, and this little tool tests your code and shows you where you've got problems (if you have them).
- W3C CSS Validator - if you're checking the validity of your source code, you really ought to take a minute to look for errror in the CSS. W3C to the rescue!
- Cynthia Says 508 Accessibility Engine - websites should be accessible to people with disabilities. At a minimum, all images should have ALTERNATE Text descriptions. Cynthia Says is a nice little program that gives you a report on your compliance with federal Section 508 accessibility guidelines. Check it out!
Writing
- A List Apart - this site is a like an online journal for web developers. It has lots of great resources on writing, on coding tricks, and even on design. We'll be reading some of the articles here.
- Useit.com - Jakob Nielsen's usability website. Nielsen wrote the book (ok, many of them) on usability, and this site is a treasure trove of goodies on productivity, usability, and writing. Though the site has little design sense, it is an important resource. The link here takes you to some important information about how people "read" webpages.
- Quality Web Content - here is another resource like A List Apart. This one casts a wider net, and it is run by a company that does "training" for web writing. Hey, the articles are free, and there are some good tips in there. Check out the advice about composing e-mail.
- Dartmouth Tips - Dartmouth has a brief guide to writing for the web. It covers some very important basics for the genre, and takes only a couple minutes to read. They have more to offer, but I think this little gem belongs in our writing category.
- Purdue's OWL - this site is a great resource for many things writing. They'll help out on the APA documentation style, and many others as well.
- Landmark's Son of Citation Machine - a more robust, complete, and accurate automated citation generator for APA, MLA, Chicago. Need a little help on your References page? This has to be about the coolest free thing going!
- Daily Grammar - I'm not saying you need help with grammar, or suggesting that grammar lessons outside the context of actual writing really help. But this is an interesting little site. They used to send you a daily grammar lesson by email, but not any more. I think they should serve up the lessons with RSS, but they're not doing that. (Here's a project for someone!) Try it if you're not confident about your writing. What do you have to lose? A few minutes a day, I suppose.
- Merriam-Webster's Dictionary & Thesaurus - here's a nice little tool all writers can use, myself included. I especially like the thesaurus feature because keeps me from having to walk across my office for the thesaurus on my bookcase.
Don't like the look? Restyle!
Dr. Reid | Produce | Wikiwiki | Escher
| Cloisonne | The
Blues | Negative | Skinless