So... you want to be a web developer?

I had the most interesting conversation with one of my friends the other day.

Adam: "Whew... finally finished with my latest web project!"

Friend (in awe): "Whoa! That's awesome! How did you make that?"

Now, of course, this project of mine was a full-fledged ASP.NET web application; a simple question like "how did you make that" could easily end up with me not only explaining what I did, but how I did it, and which tools and technologies I used. That way, instead of wondering about the magic that makes all those fancy programs out there on the internet work, my friend could understand exactly what goes on to make that happen.

Well, that couldn't hurt, right?

Adam: "Do you really want to know? I'm warning you... this could get messy."

Now, at this point, my friend gives me one of those funny looks like I'm completely crazy. But being a web developer, I'm already used to that.

Friend: "Well, sure..."

And so it begins.


Step 1: Tools of the Trade

Adam: "Well, the first thing we need to is to pimp yo' browser."

Friend: "Did you just say pim--"

Adam: "Forget it. What browser are you using right now?"

Friend: "Well, Internet Explorer. Just like everyone else, right?"

Adam: "...right. And it's a good thing you know that, too. But we're going to need a little more firepower for this. Here's what I have in mind:"

• Mozilla Firefox. Firefox is one of the most extensible browsers available, which means we can load it up with add-ons that make development much easier. Speaking of plugins:
  
  • Firebug. I blogged about this one before; it's one of the most useful utilities around for web development; it lets you play with the content and style of your pages, debug your scripts, and watch the network activity between your browser and the server it's talking to.
  • Web Developer Toolbar. This handy little set of tools provides some extra features and information during the development process. It can do things like turn off stylesheets, to show how your website will appear on mobile browsers or browsers that don't support CSS.
  • HTML Validator. The subject of valid XHTML will come up later, but suffice it to say, this plugin is a good way to keep yourself in check during the development process.
• Safari. As a general rule, Firefox and Safari render pages very similarly. Of course, it's always a good idea to have Safari around as well, just to make sure you're not leaving Mac users out of your web development goodness. Safari also comes with its own robust development tools.
  
• Internet Explorer Developer Toolbar. One can always trust Internet Explorer to decide to do something out of the ordinary; for that reason, it's good to have the Web Developer Tools installed, so you can figure out what's going through Internet Explorer's mind when it decides not to play nice with everyone else.

Friend: "Wow. Am I really going to use all of that?"

Adam: "Yep. And all of these tools and add-ons are completely free!"

Friend: "That's good. I still have to have some money left over to pay for my World of Warcraft subscription."

I chose to ignore that comment.

Step 2: Know your Roots

Adam: "Now it's time for the fun part. You're going to have some reading to do after today."

Friend: "Reading? I was never very good at that..."

Adam: "That's okay; I'll start you off with some easy references so you can start learning XHTML and CSS."

• W3Schools XHTML Tutorial and W3Schools CSS Tutorial. These guys wrote some killer walkthroughs for XHTML and CSS. Better yet, their website offers sandboxes through the tutorial process that allow you to try out what you're learning without having to break out the big guns we'll be talking about a little later.

Friend: "That's a lot of reading! Do I really need to know all of this?"

Adam: "You betcha'. No matter what kind of web development you end up doing, you'll need to know about XHTML and CSS."

Friend: "Oh, okay. But do I really have to memorize all of this? There's a lot here!"

Step 3: Eight Bits at a Time

Adam: "Lucky for you, there's tons of tools out there that will make your life easier while you're writing your markup and stylesheets. Here are the ones I like."

• Microsoft Visual Web Developer 2008 Express Edition (Windows). Starting with the 2005 lineup of Visual Studio products, Microsoft has made "Express" versions available for users that don't want to break the bank buying the full-fledged Visual Studio suite. The free Express edition is just as robust as Visual Studio when it comes to working with XHTML, CSS, and JavaScript, and it's free.

Friend: "Hey, this is just for Windows. What if I want to develop on my new Mac?"

Adam: "Let's see here..."

• Coda (Mac). Coda seems to be the most full-featured package for web development on the Mac platform. It does cost $99, but that cost seems to more than justify the power that Coda offers. It offers features that rival (or in some cases go beyond) what's offered by Adobe Dreamweaver or Visual Studio on the Windows platform.
• Smultron (Mac). If you're not quite ready to shell out the money for Coda, Smultron seems to be the best free alternative. It doesn't offer the WYSIWYG features that Coda packs, but it does offer you some of the simple luxuries like code coloring and tabbed/paned editing.

Adam: "Of course, there are quite a few other nice pieces of software out there, such as the aforementioned Adobe Dreamweaver, or TextMate for Mac. It's up to you to try them out and pick the one you feel the most comfortable using."

Friend: "Wow, okay. Well, that shouldn't be a problem. But, really, what can I make with XHTML and CSS?"

Step 4: Ooooh, Shiny

Adam: "I'm glad you asked. Check these out."

• CSS Remix. This is a "mashup" site; it links to user-submitted sites that have good coding and styling. It also lets you vote for your favorite sites, and will show you the highest-rated sites or a random set of sites, in addition to the most-recently-added ones.
• eduStyle. Another mashup, eduStyle focuses on websites for college campuses.

Friend: "Uhh... why on earth would college websites be that interesting?"

Adam: "Simple; websites for colleges have to be functional so people can do what they need to do, and beautiful to invite people to stay and click around a little longer. Colleges are good role models when it comes to websites; lot of students research higher educating online these days, so colleges have quite the motivation to make their sites incredible. Just look at MIT's website!"

Friend: "Hey... are you trying to tell me that I can make something like any of these sites with just what you've given me so far?"

Adam: "Weeeellll... not quite. You can make the designs of any of these sites with these tools... plus one thing."

Step 5: Eye for an Eye, Pixel for a Pixel

Friend: "Wait- let me guess! I need to have an awesome graphics editor so I can make the visual elements that are too advanced for XHTML and CSS."

Adam: "You've been reading ahead in this post, haven't you? Alright, Mr. Smarty-pants; what do you recommend in the way of image editors?"

Friend: "Simple."

• GIMP (Windows, Mac, Linux, everything else...). Both free and cross-platform-compatible, the GNU Image Manipulation Program is about as close to the industry standard Adobe Photoshop as you're going to get without shelling out the big bucks. It has a relatively straightforward interface, and a slew of tools that can help turn your blank canvas into a masterpiece.
• Paint.NET (Windows). This one's a Windows-only application; it's a little more light-weight than GIMP, but still powerful. If GIMP looks a little too intimidating to start out with, give Paint.NET a spin.

Friend: "Oh, and your friend Lee took another free alternative called ArtWeaver out for a spin."

Adam: "Well, you certainly seem to know what's going on. Want to venture a guess as to what's coming up next?"

Friend: "No... but I have a feeling I won't like it."

Adam: "Oh, you won't."

Step 6: Throwing a Wrench in the Works

Adam: "The tools and resources I've told you about will indeed help you become a great web designer..."

Friend: "...but you italicized designer, which means..."

Adam: "...that web design is only half the battle. Listen, you could design anything from the next big social networking site to an online encyclopedia if you wanted to. But without learning about the programming that makes sites like that actually do something, you'll never level up to web developer."

Friend: "Oh no... programming makes me queasy. And it's almost time for my WoW raid!"

Adam: "Alright, fine, go do your raid. We'll talk about programming later."

So, I managed to get the basics of web design across to him. Of course, I think I did...

To be continued...

Tags: browser tools, BrowserTools, css, image editors, ImageEditors, tweet-this, web developer, web development, WebDeveloper, WebDevelopment, xhtml