I never went to school for anything related to computers. The only class for computing I ever attended was “Computer Essentials,” and that was because it was required.

I don’t tell you that so you can think, “Wow, Josiah must be Mr. Smarty pants.” I tell you that to encourage you in the pursuit of what you want to learn and do. Particularly in the field of web development and design, you can really take hold of the information available to the public and make major strides towards becoming a practitioner without spending anything more than your time.

One of the best things about the web, outside of Vader getting his Christmas wish, is the proliferation of information.

With the amount of accessible and well-organized information available on the web today, if you want to learn something, you usually can.

There’s my intro / buildup / preface / whatever. What I really want to share with you today are some extremely valuable resources for web development and design education. These sites have been extremely instrumental in my development as a web nerd.

That said; In the areas of development and design, here are some of the places online that have brought me to where I am today. This is by no means a comprehensive list, or even a well-organized one. Think of it more as a kick-start:

Development

I’m a believer in standards-compliant XHTML & CSS development for front-end (visual) development, and PHP for anything and everything back end (functionality). If you want to learn the ways of evil, and go with ASP.NET (Microsuck development stuffs), you’ll have to go somewhere else. Here you will be pointed to the free world.

XHTML: What is it? XHTML stands for: “Extensible Hypertext Markup Language;” a reformulation of HTML to conform to the XML specification. Just think of it as a new and shiny specification of HTML. Don’t let the acronyms scare you. XHTML is an easy to understand and easy to use code. To put it [very] simply:  XHTML is what you write to display your content in a web browser.

XHTML Tutorial
http://jessey.net/

Simon Jessey, of jessey.net, has provided a 5-step tutorial covering the basics of XHTML 1.0 (this stuff comes in specifications). If you go there, and learn something, think about donating some change to him for his efforts (you can do that on his home page).

A side-note here: this tutorial is the perfect example of why the web is such a great place to learn; a freely-offered, community-created tutorial to get you on your way. : happy sigh : Sometimes the interwebs are just win.

W3Schools (HTML)
http://www.w3schools.com/html/html_intro.asp

This might arguably be considered the more legit place to learn web stuffs, and I recommend browsing through the W3 Schools for almost everything you want to learn. I lean more towards personal tutorials, as they often have an easier-to-understand feel about them. That’s not to take away from professional stuff at all. There are a ton of hot resources out there. Pick and choose as you see fit.

HTML Validator
http://validator.w3.org/

As you learn to develop, start with standards. Don’t learn to code incorrectly and then go fix it. The HTML Validator offered by the W3C (World Wide Web Consortium) will tell you what’s wrong with your code, and help you become a better developer as you begin to get an idea of why your code sucks so much. If you want to be a punk (and/or test my word), go ahead and run this site through the Validator. It validates XHTML 1.0 strict.

“But Why?” You might ask. Firstly, because I say so, and I’m awesome, but secondly, because as more and more people work with standards, and comply with standards, crappy browsers will die horrifically deserved deaths, and the world will rejoice, as stuff starts to look the same no matter what platform you’re viewing it on.

XHTML Character Entities
http://www.intuitive.com/coolweb/entities.html

Sometimes when you’re writing out your code, you need to implement weird characters and such. This is one of about a million places you can go to find the code to write out these little weirdos.

Those are some pretty solid places to go for the basics of HTML, and beyond, but don’t forget to use your friend google.com to find more. The interweb is your oyster, whatever the crunk that means. We’ll move on from HTML for now, and on to making it look pretty.

CSS: What is it? CSS stands for “Cascading Style Sheets,” and they are what you write and attach to your XHTML documents to make them look pretty. Style sheets are one of my happy-giggle-favorite things about modern web development. Gone are the days of ridiculous embedded styling. Now, with CSS, you can say, “Hey document, use this font.” And it will. And you only have to say it once.

W3Schools (CSS)
http://www.w3schools.com/css/css_intro.asp

Just like the HTML tutorial above, this is the W3C’s offering to the world on the basics of CSS. It’s a great place to start, and a solid place to learn all about the magical enchantment that CSS can be.

CSS Basics
http://www.cssbasics.com/

CSS Basics is exactly what it sounds like. If you keep hearing about this “weird interwebs voodoo stylesheet” stuff, and want to know more, bookmark CSS Basics. It’s the perfect place for a measured approach to CSS.

I know this is a nerdy statement, but CSS is fun. Once you start writing it, and seeing it alter your content, if your heart isn’t filled with some measure of joy, I submit that you are a Nazi zombie.

Creating a CSS Layout From Scratch
http://www.subcide.com/tutorials/csslayout

This resource will actually guide you through building out a website from a pre-made design, including the basic HTML and CSS layout stuffs. Delicious. This is a really great place to go once you have a basic understanding of both HTML and CSS.

Design

I really have to be careful with this one, as not only does “design” imply a million things, but some of the most amazing designers the world-round are hardcore university-educated ninjas. Design encompasses so much more than just something pretty to look at. You’ve got color psychology, typography, spacing, alignment, blah, bleh, and bloo, just to name a few. If you think you have a good eye for design, give it a shot, but please, for the love of humanity, ask someone you trust if your work sucks.

If you hear, “Yes. Yes it does suck. In fact, that design makes me want to dig my eyes out with a spoon.” Please, stop trying to implement your own designs until you’ve got some proven skill. I say this from experience. I hurt the world of actual design for years with my painful to look at, cringe-worthy “designs.”

Thankfully, my pal Charles Williams came along side me, gave me some delicious stuff to code out, and at the same time, inspired me in my pursuit of actual design understanding. I’m by no means good at it, but I at least know how to avoid the suicide-inducing crap that I used to throw around.

That said, and with caution to the wind; here goes nothin’.

Master Photoshop in Just One Week
http://elitebydesign.com/how-to-master-photoshop-in-just-one-week/

Once again, the web shows it’s often amazing colors and offers up the basics of Photoshop that really are essential to using the most popular design software out there. Elite By Design is one of the many really awesome, and really free, resources out there for picking up some major knowledge with nothing more than your time. Here you will learn how to navigate the software, understand the interface, and do more than drop a color in the background like you usually do with MS Paint.

Photoshop Hero
http://pshero.com/

Once you have the basics of Photoshop down (a behemoth of an application), it’s time to start learning what you can actually do with all those bells, whistles, tools and goodies. This is one of a few tutorial sites that I’ll list here. I put PS Hero first, as the tutorials often lean towards the practical, and that’s generally a good way for me to learn.

You Suck at Photoshop
http://laughingsquid.com/you-suck-at-photoshop-by-donnie-hoyle/

This guy is both educational and hilarious. I’m sharing this one primarily because you do suck at photoshop, and additionally because the humorous approach can help take away from the monotony of all this learning. Good techniques, and hilarious videos. I haven’t watched them all myself, so I apologize for any content that offends your mother.

PSD Tuts
http://psd.tutsplus.com/

This is a great place to go for tutorials and design news. I’ve listed this one, as they have some added bonuses for those of you willing to drop a little cash ($9 a month or $22 for 3 months), including exclusive tutorials, and most importantly the Photoshop files used in the tutorials themselves. Delicious.

Designers Toolbox
http://www.designerstoolbox.com/designresources/

This is where I push you into something practical. The Designers Toolbox is a great place for dimensions of browsers, standard advertisements, and even business cards. Additionally, it has a ton of handy little Photoshop files containing web elements from different browsers. These can help make your otherwise crappy designs look pretty legit. Ok, I’m sorry for the continued mockery, I’m just assuming that if you’re actually new, you’re going to suck for awhile. Live with. Ok, I’m not really sorry.

I think I’ll end this little adventure with this; if you can discipline yourself and actually take the time to learn this information, you can honestly give yourself an excellent education with practical results. Those results are mostly in the form of cash from your future employers, who love all your 1337 web skillz.

Just remember me when you’re picking your teeth with diamond tipped toothpicks. I’m sorry for the slightly scattered nature of this post. There are a million other things I could say, and a million other places I could send you. Remember Google, remember coffee, and remember that you can genuinely become a ninja with just a little time and effort.

Also of note, I need to give a special shout-out to one Caleb White, best friend, and the man responsible for giving me my first push into the wide world of the web. When I was but 13 years of age, he came over and taught me the basics of HTML. Without that push, I would most likely be a gifted surgeon or famous actor. Thank you friend, for helping me become the man I am today.

Update: I forgot to add that if anyone has any specific questions, or any specific areas of interest. Let me know. I really only scratched the surface on this stuff. There are too many good resources out there to post in a thousand entries, let alone one. I’m not an expert in every area of the web by any means, but I can most likely point you in the right direction, no matter where you’re headed.

The new design might look a lot like the old, with refreshing little touches here and there, but the primary reason I’m rebuilding is the markup. I was getting sick of the mess that was my homepage. I have a lot going on right now, but you can expect to see changes whenever I can find a few minutes here and there. Cleaner code cometh.

Boom. No input highlights. : huggle :

P.S. Universal (*) selectors are sometimes considered bad form, so use them at the risk of losing industry respect. Just specify the field you want to fix up and you’ll still be cool. I don’t give a flying crap about it personally, so I * away.

An important note here, for those of you that don’t know, I’m a tried and true Mac user. OS X makes my heart sing, and ever will. I am not abandoning my true love here, just waiting for the rumored new Macbook Pro’s that are hopefully coming out soon.

I’ve been curious about Linux for a long time, and with the quasi hype that’s been surrounding Ubuntu of late, I thought to give it a shot. At the time of this writing, I’m nearing the end of my second week of working with it. I’ve been through two distros, including the fully supported Gutsy Gibbon 7.10, and the Beta (and now thankfully full RC) Hardy Heron 8.04. Though this is no surprise, both versions have better out-of-the-box driver support for the laptop I’m using than Windows Vista Ultimate.

First thing I suppose I should say, if this is any sort of a review, and take it from a die-hard PC man of 10+ years, and a die-hard Mac loyalist of 3+ years (No, not Steve Balmer, me.), Linux is not for the faint of heart [read: n00b].

If you don’t know what “command line” means, or aren’t willing to delve into an often much-more complex realm of computing required to make some of this goodness work, I recommend either staying away from Linux altogether, or snagging a machine that comes pre-loaded with Linux, such as those offered by Dell.

I will say that as a designer, some of the visual interaction that you can configure in Linux are just shy of 100% hotness:

I have everything that you see in this video running at the time of this typing and more. It’s amazing how smoothly the system runs when doing insane things like wrapping an HD video around the 3D cube of your desktop switcher… mmm… nerdy goodness.. I know some of the stuff you see there seems a bit over the top, and I’ll be the first to admit that it is, but a large portion of the added glory that is Compiz-Fusion (native to Hardy Heron) not only increases the quality of my user experience but the effeciency as well.

All that flashy crap aside, the best part of Ubuntu that I’ve run into thus-far is that it’s completely free, and extremely extensible. The Add/Remove Programs option in the Linux “Start Menu” is nothing short of mind blowing to anyone that’s used just about any computer in the world in the past decade or so. You need something? Open Add/Remove programs and search for it. E.G.: I needed an FTP program. I searched for, found, and installed an excellent (and completely free) FTP app in less than a minute.

The obvious downsides are a lack of official support for high-end development software (Photoshop/Flash/Etc.), and the difficulty required to get around said lack. I will say that I have Photoshop CS2 and CS3 running perfectly on my machine, but not without overcoming the aforementioned fear of command lines and embracing my advanced computer-hacker-ninja-magic skills.

I suppose I could continue with an in-and-out detailed review, but I think I’ll just go ahead and end it with a brief summary:

Ubuntu is great. It’s not for everyone. It’s fast, effecient, and excellent for your everyday computing needs. For more advanced usage, I recommend advanced skillz. It has extremely advanced visuals for those willing to figure them out, and some really good out-of-the-box hardware support that is downright impressive for an open source project. But that said, it’s still not ready for the mainstream, or the everyday user. I’ve done more hacking and tweaking these past two weeks than Ghengis Khan during a weekend village raid.

Final verdict: Buy yourself a Mac + Textmate + Transmit + Photoshop and never look back.

You would think that an endless sea of options and choices would be a good thing when trying to create something, but as I’ve been aboard a leaky vessel on just such a sea over the past week or so, my problems have been many.

I’m now at the point where I’m trying to step back from my design and really decide what I want to present as “me.”

It’s been difficult. There are just too many things that could be done. Trying to decide what to include and what to put on the drawing board for a future revision, or what to just completely throw away is the real challenge with a new design, especially a personal one.

I think the primary issue I have with personal projects is a lack of planning. I often approach a new personal design purely from the creative side, and almost never with a practical site map or feature list that I would have if I were working for an actual client.

That said, I’m taking a step back, narrowing my focus to a simple set of lists (“Must Have”, “Would Like to Have”, “Would Love to Have But Is Ridiculously Impractical”), and proceeding with a measured, goal-driven pace.

The hope is that I will achieve what I want, that is a complete website design, and avoid taking the 4.2 bazillion years that these open-ended personal projects of mine usually take.

Further up and further in.

Random wikipedia links for the win!

Image Credit – Luke Chueh

Also of note; the previously mentioned pending design is highly inspired by one Daniel Mall, who’s most recent words have inspired me to embrace the design I love.