For all the interested MooToolers in the making out there, I have compiled a list of resources which should give you everything you need to know to get started in client-side development.

These are the prerequisites of Web development.

Firefox: You'll want to use Firefox for development. But you'll also need to have all the browsers you can manage to install on your machine (and other machines) in order to check cross browser support.

• Firebug: The best plugin ever, Firebug is the difference between bashing your head against the keyboard and knowing what's going on with the browser.
• Web Developer Toolbar: Gives you awesome power over websites. Turn off JavaScript, see it without CSS, disable referrers, enable strict warnings, and more. The good times never end.

Don't let not knowing HTML put you off Web development!

This place is pretty nice. Not only touching on the gritty details but touches on topics such as semantics and better practices. A nice human-readable overview.

• HTML
• CSS
• JavaScript

Probably the most inclusive information available on the Web, especially for developing for Firefox or Mozilla. This should probably be your main reference guide.

• HTML
• CSS
• JavaScript
• Bonus Points: DOM

W3 Schools is basically just your one-stop-shop for quick reference on the Web technologies. Much, much, easier to read than the raw spec sheets straight from the W3C. MDC is better, but it's always a good idea to have a few reference sources to work with.

• HTML
• CSS
• JavaScript

Don't let the name throw you off---JScript is the same as JavaScript. I think Microsoft actually won a usability award or two with this sites. You should hit this site often during your battles against Internet Explorer.

• HTML & CSS
• JavaScript

The curious can read A List Apart for some inspiration and sly tricks.

Also note that Mootools works best with a strict doctype.

JavaScript, the world's coolest programming language. The first thing you have to do to be good at JavaScript is to realize that JavaScript is nothing like <insert your favorite programming language here>. After you're done grasping that fact, you'll want to read some of these tutorials.

Now to the fun bit. The awesome people at Yahoo uploaded their training session videos to the world in general. Great deal for us, since learning JavaScript is as easy as spending four hours watching these smart guys talk.

• The JavaScript Programming Language
  • Part 1
  • Part 2
  • Part 3
  • Part 4
• Theory of the DOM
  • Part 1
  • Part 2
  • Part 3
• Advanced JavaScript
  • Part 1
  • Part 2
  • Part 3

• Nicholas Zakas talks about maintainable code.
• Joe Hewitt talks about Firebug.

Once you're done doing these things, try to Google around a bit until you can write a basic cross-browser AJAX application with a few fun effects in raw JavaScript. Nothing too fancy, you'll be throwing it away in a bit. I think doing this in raw JavaScript on your own will help you appreciate the things that a framework brings to the table, and also understand the underlying mechanics of what's provided to you.

You might also find The JavaScript Knowledge Gap an interesting read.

If you're really looking to become a good JavaScript coder, the best way to do so is by looking at examples done by people who understand the craft. That said, you might want to browse the MooTools source for some inspiration. Not only will you soak up a lot of good ideas, you'll also get to know the framework on a more intimate level.

Then it's time to download MooTools! If you've honestly done most of the things I've listed above, we'd love to have you post your questions on the forum, lurk the IRC room, and contribute to the MooTools community.

Try downloading the full, unpacked source and using it in your development. See what happens if you change something. Try to spot some bugs and submit a few tickets. Make a few plugins. Just make sure you include some sort of Moo-related pun in all your plugin names.

Coming up on the blog, all you need to know about debugging and some advanced reading to have you dreaming in Fx.

comments powered byDisqus