Google U: You Can Be a Web Ninja

Jul.02.2009

I’ve been a front-end web designer/developer for 12 years now, and though “web developer” has most often meant “stupid kid trying to build a website,” I think I’ve had the opportunity to pick up some really solid snippets here and there along the way.

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.

Tags: become a web ninja, design tutorials, development tutorials, Google U, Google University, josiah, Josiah Platt, learn to be a web developer, learn web design, learn web development, old cheese is great, web design educatio, web development education, web ninjosity