Update: Wordpress ate some of my code on the original post, which is now fixed. Thanks to Josh for pointing it out!

I recently installed WAMP on my Windows laptop and wanted to run multiple virtual sites on it, so I could develop locally as if I was on the live web server.

I searched Google and found lots of tutorials, but none of them worked for me (probably because I’m a newbie at this server stuff!) After lots of trial and error, I discovered a solution.

So, here’s how to create a few new dev sites you can browse on your local computer, as if they were live:

Step 1: Site directories

Add new development site directories to your web root (i.e., inside c:\wamp\www\).

For our example, we’ll add the following 3 directories for our projects:

1. devsite1
2. devsite2
3. devsite3

Step 2: Update Apache’s httpd.conf file

Open the httpd.conf file. (If you’re using WAMP, look for the icon in the task bar, click it, select Apache and then “httpd.conf” to open the file.)

Search for this line:
NameVirtualHost 127.0.0.1

If it doesn’t exist, scroll down and add that line to the bottom of the file.

Step 3: add your site(s) to Apache

Note: I use a .dev extension for my development sites, inspired by the many tutorials I’ve seen around the web.

Now add your new sites to the bottom of the httpd.conf file:

 <VirtualHost 127.0.0.1>
   ServerName devsite1.dev
   DocumentRoot c:/wamp/www/devsite1
 </virtualHost>

 <VirtualHost 127.0.0.1>
   ServerName devsite2.dev
   DocumentRoot c:/wamp/www/devsite2
 </virtualHost>

 <VirtualHost 127.0.0.1>
   ServerName devsite3.dev
   DocumentRoot c:/wamp/www/devsite3
 </virtualHost>

Step 4: Update your hosts file (Windows)

Your hosts file is most likely located here: C:\WINDOWS\system32\drivers\etc

Open it in your text editor, and find this line:

 127.0.0.1       localhost

On the next line, add your dev sites:

 127.0.0.1    devsite1.dev
 127.0.0.1    devsite2.dev
 127.0.0.1    devsite3.dev

That should do it!

I had to build a page on a tight deadline recently. The comp called for several rows of square, 100 by 100 pixel thumbnail images. The problem is we have a bunch of consistent width, variable height images.

Our images:

Here’s the comp:

I started looking at Javascript- and PHP-based cropping tools and found them too complicated to figure out and build the page on time. I decided to use a little CSS instead.

Since our page is generated dynamically and pulls randomly from set of images, I had to break a rule and resort to using inline CSS in my HTML. If you don’t have the same requirement, you can replace my solution with unique classes for each item.

Each photo is set as a background image, inside a 100 pixel square box, with the position set to center.

I used a div for this layout, due to some other requirements for text and borders, but you can easily use a UL instead. There’s text inside the DIV, but I hide that with CSS since it is not required in the screen view.

Here’s the HTML:

<div class="thumb">
 <a style="background:url(images/image01.jpg) no-repeat center;" href="#">some title</a>
</div>


And the CSS:

.thumb { margin: 4px; display: block; float: left; background-color:#fff; padding: 10px; }
.thumb a { display: block; width: 100px; height: 100px; text-indent: -999em; text-decoration: none; }

That’s pretty much it. Download the example files, including HTML, CSS and example images.

I’d love to see alternative solutions!

Kayla is my ten year old daughter, and she’s working on her web strategy.

Way back when Kayla was eight, she invented a character named Fat Boy and wrote a story about him. We scanned and converted the story into a PDF, and it has since been mailed and emailed all over the country and getting rave reviews. The response inspired Kayla to try to get published.

Thanks to some great publishing advice from Megan, Kayla wants to build an audience of new Fat Boy fans while she works on her book and decided creating a web site was the way to go.

So, Kayla listed her ideas and goals on her whiteboard a couple of nights ago, with no help or influence. It was one of those proud parent moments in our house (whiteboarding, to do lists, user experience, loving your job, testing!)

I thought I had a lot to teach Kayla, and she ended up teaching me a thing or two. I’m going to try her lunch tip (#4, second list), soon.

Kayla’s lists, with permission from the author:

Web Site Solutions

1. Make sections that say “Books by Me”, “Games”, “Drawing”, “Store”, “Home Page” or more!
2. Organize web site
3. Try to make it like it is your job
4. Come up with at least 4 new Fat Boy stories
5. Work hard
6. After the web site is done, see if it looks okay when you go on
7. Tell your friends to tell their friends about my web site before and after it is launched
8. Try to make so many books by yourself that there can be a whole book store full of ‘em
9. Buy a Fat Boy store so people can get their books signed
10. Try to make Fat Boy games so popular that you can put it on TV, and make it into a TV show too!

Plans to make it fun!

1. Have a launch party at the end!
2. Draw and color pictures in book
3. Get teddy bears involved
4. Try to have a long, fun lunch break
5. Try to put a little clip that shows people how to draw Fat Boy
6. Have fun with it too!
7. Try to make the stories better. Try to make Fat Boy look better too
8. Try to make the web site so fun that people won’t want to get off!
9. Keep adding more games onto the web site to make it extra fun!
10. Try to come up with new games when each holiday comes by and keep the games there even if the holiday has passed.

You can visit the Fat Boy web site, but Kayla asked me to mention this is the just a basic starting point. Thankfully, she never learned the “Coming Soon” thing.