Ready for Day Two? Did you get your "hello world" app running on your host?
Where We Stand
Yesterday we nailed down our concept, bought a domain name and hosting, set up our toolkit, and deployed a practice app on the host.Here's what I'm going to build: a web app to keep track of job applications, cover letters, and resumes. The working name for the project is "resuman". Unfortunately, that obvious domain name was already registered and I'm not up for buying from the current owner. So after trying a bunch of more-or-less obvious combinations, I grabbed "yresu.me", and I'll deploy the app at "trackm.yresu.me".
Notes on Domain Registration
It's worth making a couple of notes here on the domain registration process. I use GoDaddy for my registrations. In the past I've done registration with my preferred host, but if you end up switching hosts it's a hassle to move the domain registrations. Another complication: hosting services like DreamHost only support registrations on the major TLDs (.com, .org, .net, .info), while a full-service registrar like GoDaddy supports alternatives like .me.Lastly, I like the bulk domain search service from Dotster. You can search for up to 50 names at a time. So if your first choice is unavailable, use Dotster's bulk search tool to enter a whole mess of variations and see what's available. This is the process I used to find yresu.me — the search included resu.me, esu.me, su.me, and myresu.me, all of which were taken.
Make Some Mockups
Before we commit any design ideas to HTML, let's take some great advice from 37signals: sketch a bunch of drafts on paper first. To back up this idea, check out this story posted by Jeff Atwood about quantity vs. quality:
The ceramics teacher announced on opening day that he was dividing the class into two groups. All those on the left side of the studio, he said, would be graded solely on the quantity of work they produced, all those on the right solely on its quality. His procedure was simple: on the final day of class he would bring in his bathroom scales and weigh the work of the "quantity" group: fifty pound of pots rated an "A", forty pounds a "B", and so on. Those being graded on "quality", however, needed to produce only one pot - albeit a perfect one - to get an "A".
Well, came grading time and a curious fact emerged: the works of highest quality were all produced by the group being graded for quantity. It seems that while the "quantity" group was busily churning out piles of work - and learning from their mistakes - the "quality" group had sat theorizing about perfection, and in the end had little more to show for their efforts than grandiose theories and a pile of dead clay.
So my advice to you is to produce no fewer than five different designs on paper. It only takes a few minutes to sketch something out and see what it looks like. I did a handful of drawings on paper with my kids' crayons, and then some refinements on my whiteboard once I had chosen the general design. So use whatever media you have handy, and don't worry about getting it perfect. Run your sketches by a couple of innocent bystanders for some feedback.
Once you've got a good design on paper, make mockups in HTML and CSS. Steve Dennis at subcide.com has a great walkthrough on creating a CSS layout from scratch. If you don't have an established process for building up a design, follow his tutorial. Putting together the HTML+CSS takes a little more time than sketches on paper, but it's still worth doing a couple of different designs to see what grabs you. I worked up two different CSS layouts on top of the same HTML. Run these designs by some people — now that you've got some code, you can upload it to your site and email a link to some friends. Pick the better of the two (or three).
Better yet, upload the mockups to your host and leave a comment here with a link to them. Traffic here is low enough that I should be able to reply with feedback. (Although feel free to circulate a link to this series to a hundred of your friends, or post it to digg. I'll at least reply to the first 50 comments...)
Tomorrow we'll start writing some code.