Technics

So you wanna make websites huh?

Hmm that’s nice but web sites are soo over… its all about web applications these days. Whats the difference you ask? Well one is a program the other is a document. That said, its a great time to become a web developer, the skill set is becoming more valuable and important every day and if you’re a self starter the education is completely free for the taking.  But before you dive in ask yourself why you want to jump into the world of the web as yet one more of its makers, of which there are legion…. is it Fame? Fortune? The perks? Dreams of changing the world? Lets break it down…

Money? Well the money can be great if you’re good and it can be equally pathetic if you don’t find a niche or you’re slow to pick up the material. Like anything I suppose I wouldn’t buy into any advice that says its better or worse than any other profession like lawyer, nurse, architect, sales rep etc. I would also advise staying away if you don’t like staring at a computer all day or think you’ll get rich working from home 4 hrs a day.

Fame? Its available to some degree… lets face it you are most likely not going to become the creator of the next Facebook (and how famous is that guy anyway?) but there are always innovators and productive creators gaining admiration of their peers. That could be you too! That kind of community recognition is fun to strive for and certainly not out of reach.

Perks? What perks? The work can be mentally stimulating if you have a the mind for it, and it provides great opportunity for pretty wide open creativity. On the down side it can be very monotonous, tedious and down right infuriating. If anything you’ll become the go-to person for anyone you know for their web-centric ambitions. This can be a burden… before you start taking on such work you’ll have to learn how to  properly price your services to fend off the people with big ideas and meager budgets, or you could be in for serious frustration.

Changing the world? Well here we finally get to dig in deep don’t we? The web is pervasive, it touches so many lives and its quickly becoming the basis for all modern software. The web has become the playground, testing grounds and proving-grounds of modern user interfaces and complex, networked, multi-user applications. It has been so successful that the world has certainly been and is still under swift change because of it. The web as a platform is fertile ground for innovation… That said many argue that the web has reached its plateau in terms of true innovation and that the rest of the change we see happen on the web will be incremental not transformative. I don’t dispute that, however I would argue that there are plenty of problems that lie in wait to be solved in a more effective and efficient way, the trick is to find the problems that need solving and that has little do with coding web pages.

OK so that’s a pathetic review of a pretty broad concept… “web developer” is a catchall term, it encompass a whole professional sector, but nonetheless it is an intro.  So what am I talking about if not a whole professional sector? Specifically client-side web application development. The stuff that actually gets sent over the inter-tubes, loaded into your web browser and seen and used by the end user. That leads to a bevy of technologies,  many with acronyms…. HTML, PNG, CSS, Flash, AJAX, JavaScript. “Client” refers to the Client in the traditional Client-Server architecture of the web and specifically the web browser software is generally the client we most often deal with. Other clients could for example be widget platforms that use the same technologies as web browsers to create their interface ie. HTML, CSS, JS. Sorry to say however, you won’t get off that easy, to really do the work you’ll most likely need to familiarize yourself with the server end of things which brings in more programming and databases as well.

So now it looks like you’ll basically need to be a jack of all trades, a graphic designer, a copy writer (often overlooked), a programmer, and a database manager. You’ll need to know many different applications, many languages of different flavors, markup, scripting and programming. That, for the most-part, is true but you’ll eventually find out what you’re really good at and specialize in that. There are generally a couple directions to go, I generally think of them as “the design guru”, “the engineer”, and “the coder”.

The design guru is basically a graphic arts nut that would be just as happy designing magazine spreads, drawing comics or designing web sites . This is someone who brings their unique creative flair to the process of designing for the web. That generally means they spend most of thier time producing mock-ups in Photoshop and or Illustrator and turning them into HTML + CSS. The more experienced become proficient with JavaScript or Flash and know enough about the server end of things to modify a Wordpress or Drupal template.

The engineer is someone who has pursued Computer Science as a career path, learned Java in school, is well versed in Object Oriented Programming and has focused on developing the “backend” of  web applications, the account management, database queries, serving up the content and processing data submitted from forms. They understand HTML, CSS and JavaScript but tend to look at it with derision as its a loose and messy jumble of technologies as compared to “real” programming. Update: I just read this and honestly that is how it used to be but now with the advent of real applications in the browser the code for things like Google maps and Docs require serious engineering skills. Point is, weather on the client in the form of JavaScript or on the server in the form of some other language, most of the effort is directed at advanced Object Oriented Programming.

The coder is someone who has their feet firmly planted in both the design and programming worlds finding a zen-like balance in every aspect of their work, “I could program this awesome new feature or just fake it with Photoshop and a couple CSS tricks… hmm.” Here the coder would debate the immediate time-savings of an effect vs. the beauty of  a programmatic solution that could be re-used. These are often challenging decisions to the coder because they embrace the yin and the yang.  The coder is skilled with Photoshop but cares little for Illustrator, knows Javascript and PHP front-words and back but avoids the world of Java for the most-part. These preferences stem from the coders need for expedience. They cover so much territory and must economize by learning one server-side language so they learn the most common. They don’t have time to pick up Illustrator and since Photoshop is ideal for creating web graphics and site mock-ups why bother?

So what kind of web developer do you think you will become?

Alright, enough chit-chat! Lets dive in and get prepared to start making this stuff.

Here’s an overview of what you’ll need.

• A quick preview of what it is that were talking about
• The confidence and ability to learn on your own
• A firm grasp of the core concepts and all the software it implies
• A collection of top notch resources
• A good code editor
• Photoshop
• Familiarity with industry best practices
• Knowledge of the pitfalls so you don’t fall into them

I will provide some details for each of the above as a starting point with a mind toward the coders middle way approach, throwing all aspects of the process from back-end to front-end, from code to design, all roughly at the same time. Insane you say? No, this is just the reality of it, you will always need to grow your skills incrementally all at once. If you don’t learn how to do that now you’ll have a much harder time in the future learning whatever new combination of technologies it will take to get your job done 5, 10, 15 years from now. Learning many integrated technologies all at once is in itself a key skill for the web developer and is exemplified by the coder’s middle way. May the force be with you young padawan learner.

First a quick preview

Before we get into more conceptual bits lets take a quick look at the actual subject matter in light-form, so we are all on the same page. Lets say we have some text and a few pictures we want to turn into a basic web page.

This is the text:

A view from above

Atlantis astronauts carried out five back-to-back spacewalks to fix and upgrade the 19-year-old Hubble Space Telescope, adding five to 10 years to Hubble’s the observatory’s lifetime. Scientists hope to begin beaming back the results by early September.

Here are the pictures:

Lets see what the html looks like.

<html>
	<head>
		<title>A view from above</title>
	</head>
	<body>
		<h1>A view from above</h1>
		<p>Atlantis astronauts carried out five back-to-back spacewalks to fix and upgrade the 19-year-old Hubble Space Telescope, adding five to 10 years to Hubble's the observatory's lifetime. Scientists hope to begin beaming back the results by early September. <a href="http://www.komonews.com/news/photos/45855337.html">Full article</a></p>
		<img src="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_1-150x150.jpg" />
		<img src="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_2-150x150.jpg" />
		<img src="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_4-150x150.jpg" />
		<img src="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_5-150x150.jpg" />
		<img src="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_7-150x150.jpg" />
		<img src="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_20-150x150.jpg" />
	</body>
</html>

now load up the page to see how it renders.

OK now lets style it up a bit with some simple CSS.

/* remove browser default padding */
html, body, h1, p, img {
	padding: 0;
	margin: 0;
}

/* use a reversed color style with arial fonts */
body {
	background: #000;
	padding: 24px;
	font-family: arial, sans-serif;
	color: #ddd;
}

h1 {
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	margin-bottom: 1em;
}

/* put the text in a box */
p {
	border: solid 1px #555;
	background: #333;
	padding: 1.5em;
	margin-bottom: 1.5em;
}

img {
	padding: 0;
	margin-right: 1.5em;
	margin-bottom: 1.5em;
	border: solid 1px #333;
}

The CSS can be written right into the page using a style tag but in this case I’ll save it as a separate file and add in a link to it by adding the following line to the head section of the HTML.

<link type="text/css" rel="stylesheet" href="simplepage2.css">

Take a look at the new page to see the CSS do its thing.

Lets make this page more interactive by adding in links to the high resolution versions. Ill do this by wrapping the images in “a” or anchor tags. These are the things we commonly call links. For this example we have to style the image links differently than the text links. To facilitate this we wrap the group of images in a div with an id, then in the CSS we can key off that id to style just those links.

<html>
	<head>
		<title>this is the title</title>
		<link type="text/css" rel="stylesheet" href="simplepage3.css">

	</head>
	<body>
		<h1>A view from above</h1>
		<p>Atlantis astronauts carried out five back-to-back spacewalks to fix and upgrade the 19-year-old Hubble Space Telescope, adding five to 10 years to Hubble's the observatory's lifetime. Scientists hope to begin beaming back the results by early September. <a href="http://www.komonews.com/news/photos/45855337.html">Full article.</a></p>

		<div id="imageLinks">
			<a href="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_1.jpg" target="_blank">
				<img src="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_1-150x150.jpg" />
			</a>

			<a href="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_2.jpg" target="_blank">
				<img src="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_2-150x150.jpg" />
			</a>

			<a href="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_4.jpg" target="_blank">
				<img src="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_4-150x150.jpg" />
			</a>

			<a href="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_5.jpg" target="_blank">
				<img src="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_5-150x150.jpg" />
			</a>

			<a href="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_7.jpg" target="_blank">
				<img src="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_7-150x150.jpg" />
			</a>

			<a href="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_20.jpg" target="_blank">
				<img src="http://www.andrewluetgers.com/wp-content/uploads/2010/02/090522_shuttle_large_20-150x150.jpg" />
			</a>
		</div>

	</body>
</html>

The css gets modified slightly the following code replaces the existing rule for img.

/*================= rules for the imageLinks section ==================*/
/*
 now that we have the images wraped in a div with the "imageLinks" id
 we can easily style just the elements within.
*/

#imageLinks a {
	/*
	 "a" is an "inline" element (treated like text) by default and images
	 are "block" element so for proper rendering of images as links we tell
	 the a to be like an image, not text, this also solves some rendering
	 oddities but we also have to float the images left so they line up
	 like before rather than stack on top of each other in a single column.
	*/
	display: block;
	float: left;

	/*
	 moved the margin here to the a instead of the img becasue the margins on
	 the img became clickable which was odd.
	*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

#imageLinks img {
	border: solid 1px #333;
}

Version three with links to high-res images.

This is a very simple web page but now you have an idea of what we’re dealing with.

The confidence and ability to learn on your own

Remember I said that the education was free… well that all depends on what type of learner you are and how good you are a finding the right materials. Trust me its out there and I’ll point you in the right directions but you’ll eventually have to be careful to avoid outdated or altogether bad advice. Buyer beware. Furthermore If you can’t thrive in this type of learning environment… by the seat of your pants, grab it off the web and try it right now… then I would question your interest in web development. The field changes so fast you have to learn new things this way, every day. Its key.

A firm grasp of the concepts and software, Ok here we go…

Think of the stack of technologies it takes to get a situation where a user can log into a site like Facebook. That stack begins with servers usually in a data-center managed remotely by Information Tech dudes. Those servers run some key software you’ll need to be familiar with, namely the Linux operating system running Apache HTTP server, MySQL server and PHP. This is the most common server configuration and it is often called the LAMP stack. Thankfully you can get the stack setup on your own computer for development and learning purposes with ease. On the mac go get MAMP in Windows go get XAMP. Note that I will not tell you how to set up software and configure it. RTFM. Look it up.

Get that installed and working and you have the server stuff done for now :-)

Next think about what you actually are looking at in a web browser, pictures, text, links, a page that has some sort of layout and design to it. It all gets sent over the internet as text files and image files. That’s it! human readable text files and pictures. Well I’m leaving out things like flash which is more complicated but for now that’s all you care about, readable text documents and pictures. The web is wide open for all to see that’s why its been so successful and that why its awesome. You could get by with notepad and a free image editor… you’d be better off with other software but it would suffice.

Right about now you’re thinking wow this is really simple… well hang on.

So the web browsers like Internet Explorer, Firefox or Safari for instance all follow the specs (more or less) of the W3C which specifies how all this stuff works namely HTML, CSS, and JavaScript is specd out by ECMA. By the way don’t follow those links and expect to learn much, the W3C docs, just like any spec, are painful to read. So when a user clicks a link to a website from Google the server serves up just the HTML document, the browser reads that document and goes through an amazing series of file requests and contortions until plain text and some images turn into, Facebook, Flickr, Google Maps, CNN etc.

How all that happens is what books are written about, it takes many years to understand all the intricacies of it all but I believe I can explain the concepts concisely… lets see. Imagine four parts of a web site, the textual information or content, the pictures, the arrangement and design of the text and pictures and the interactive behavior of the site. The text/content is the HTML, think of that as the page. When you select “view -> Page Source” in Firefox what you see is the HTML source code. The page requests resources it needs and the browser goes and gets those individual documents to help produce the final product. It will load images, and something called a Cascading Style Sheet. The CSS file defines how the page should look, it also can cause other images to get loaded. Finally external files that contain programmatic code, JavaScript, that defines interactive behavior of the page is loaded. Once loaded in the browser the JavaScript code is executed and it has access to everything, it can change the document by adjusting the style, changing content, adding in new content from other servers and much more. All of this happens within a couple seconds.

How does the HTML define such complex pages as are on the web, how does the CSS style the page, how does the JavaScript produce applications like Google maps…  Its all about the browser and the thing it turns all these files into, the DOM or Document Object Model. At this point you should Install Firefox and the Firebug plugin. Familiarize yourself with Firebug and the DOM, use the Firebug debugger to browse the HTML CSS and JS, then look at it the way the browser looks at it, browse the DOM structure of the site in the DOM tab. Take a look at document -> childNodes -> 1 -> childNodes ->2 etc. Keep following childNodes deeper and deeper in. You’ll see it reflects the structure of the HTML. In the programmatic world of JavaScript everything you see in the DOM tab of Firebug  is available for use. Because the browser turns the text files into these objects, code can be written to modify the page and the attributes of its content. To get a really good handle on it take a look at the “Theory of the Dom” videos by Douglas Crockford over at the YUI Theater.

That’s basically it for core concepts… what I have not covered are the bulk of what you will be learning and that is Object Oriented Programming (OOP), syntax and APIs. Object Oriented Programming is not so complex as you may think, especially since we’re dealing with JavaScript in the browser which is much simpler than say C++ or even Java on the server. Syntax is the rules for how to write a functional HTML, CSS or JavaScript document. Put a comma or an angle bracket or a quote in the wrong place and the page breaks, that’s Syntax. API stands for Application Programming Interface, this is arguably the most common day to day knowledge a coder can have and is often not fully retained but understood through documentation and convention. Everything has an API they are essentially the features available for use. The DOM provides a vast API for programming in JavaScript. Its important to make the distinction between the API and the language. JavaScript is the language, “document.childNodes” is part of the JavaScript DOM API exposed to the JavaScript code thanks to the browsers implementation of the W3C Spec that defines the DOM.

So how about we see some of this JavaScript I keep talking about? Getting back to our example code lets make the page more dynamic using JavaScript. How about loading the the high-res image into the page rather than redirecting the browser to the file. First we’ll modify how the links work by causing the browser to run our code and prevent the default link behavior. That new code will need to create a new image tag using href from the clicked link as the src arrtibute of the new image. We then put that new image into the page. The JavaScript is similar to the CSS in that you can put the code right into the html itself but again I will save it out to a separate file and load it in by adding the following line just before the closing body tag.

<script language="javascript" type="text/javascript" src="simplepage4.js"></script>

First I’ll show you just the code without comments or log messages. Then we’ll go through the actual file that gets run in the browser, it has lots of comments and several logging messages for firebug. If you don’t follow it completely that’s alright this is just a preview but the comments should explain things pretty well.

var imageLinksLoader = {

	init: function(imageLinksDivID) {
		imageLinksDiv.onclick = function(event) {
			event = event || window.event;
			var target = event.target || event.srcElement;

			if(target.tagName == "IMG") {
				imageLinksLoader.loadLargeImage(target.parentNode.href, imageLinksDivID);
			}

			return false;
		};
	},

	loadLargeImage: function(url, id) {
		var myImg = document.getElementById("largeImage");

		if(!myImg) {
			myImg = document.createElement("img");
			myImg.id = "largeImage";
			myImg.src = url;
			document.getElementById(id).appendChild(myImg);
		} else {
			myImg.src = url;
		}
	}
};

imageLinksLoader.init("imageLinks");

Alright now lets go through it, below I’ve added in comments and logging messages for firebug so you can see how the code runs in the browser.

/*
 I'll be placing several log messages throughout this code so that you can see how things happen by
 looking at the firebug console. If a user does not have firebug installed calling the console.log
 command will cause an error to prevent that from happening we will check to see if console exists,
 if not we will make a fake log function that does nothing.
*/
if(!window.console) {
	window.console = {
		log: function() {
			return false;
		}
	};
}

console.log("the javascript is being initially evaluated (run) by the browser");

/*
 grouping chunks of code:
 lets creat our "namespace", thats a fancy name for saying the container for our code.
 This is not a requirement of the language just a good thing to do.
*/

var imageLinksLoader = {

	/*
	 init is the first bit of code we will run, it is a function that will make the links
	 (when clicked) run our code and will also prevent their default behavior.
	*/

	init: function(imageLinksDivID) {

		console.log('imageLinksLoader.init was called with the parameter "' + imageLinksDivID + '" passed in');

		// grab the item with the provided id, save it in a temporary variable
		var imageLinksDiv = document.getElementById(imageLinksDivID);

		/*
		 a note about assumptions:
		 our code will assume that there are only links that link to other images inside that div.
		 This is an important assumption and right now its obvious but at some point months later
		 you will be editing your html and forget, so document it. Its very important to document
		 your code. Its best to write code that is insulated from such assumptions but you can
		 never totally avoid them.
		*/

		/*
		 adding the event handler:
		 using a nice trick called event delegation we will attatch an event listener to the
		 div it will listen for click events that happen inside it, the oldschool way to do
		 this would be to attatch an event handler to each link, boo too mucch work.
		*/

		// the browser passes an event object as the first parameter we will call it "event"
		imageLinksDiv.onclick = function(event) {

			// with event delegation you can get at the thing that was clicked through event.target
			// that is true except for in Internet Explorer so first we jump thourgh a couple hoops

			// IE doesn't pass in the event object
			event = event || window.event;

			//IE uses srcElement as the target
			var target = event.target || event.srcElement;

			console.log("saw a click on " + target.tagName);

			/*
			 if we clicked an image grab the href from its parent link then call our loadLargeImage
			 function passing it the value of the href which should be the lare image url and the id
			 of the div we want to put it in
			*/
			if(target.tagName == "IMG") {
				console.log("imageLinksDiv.onclick fired");
				imageLinksLoader.loadLargeImage(target.parentNode.href, imageLinksDivID);
			}

			return false; // this line prevents the browser default click behavior
		};
	},

	/*
	 pass in the url of an image and the id of a div and it will get appended to that div
	*/
	loadLargeImage: function(url, id) {
		console.log("load large image from " + url + " into the div " + id);

		// if we already have an image loaded that is the image to use if not create a new image object
		var myImg = document.getElementById("largeImage"); // returns false if we have not loaded a large image yet

		if(!myImg) {
			// looks like no large image added yet creat it and add it to the DOM
			console.log("creating new image object");
			myImg = document.createElement("img");
			myImg.id = "largeImage";

			// set the src of the image object... it will begin loading immediately
			myImg.src = url;

			// and append it to the div
			document.getElementById(id).appendChild(myImg);
		} else {
			console.log("loading a different large image");
			// looks like image was already created so just update its src
			myImg.src = url;
		}
	}
};

// little will happen until we call our init function and tell it what div to work with by passing in the id
console.log("calling the imageLinksLoader.init function to kick everything off");
imageLinksLoader.init("imageLinks");

Actually pretty simple but it encapsulates many principals that are fairly advanced. But enough talk go try it out and don’t forget to turn on firebug and pull up the console tab to see the logs.

Now that I have you thoroughly scared

Let me assure you this is insanely easy to get started with. You’re editing text files not calculating rocket trajectories. Remember the HTML and CSS examples, its pretty damn simple stuff. When it comes to syntax this is going to become obvious because you’ll be working from example and will quickly pick up how to write HTML, CSS and JS simply by looking at a few examples. Then once you get the syntactical pattern you have to know what you have available in your toolkit, the API. Great news on that front as well, it is all very clearly laid out in simple descriptions all over the web called “API Documentation” and I’ll provide several such resources. Finally when you use a proper code editor it holds your hand the entire time, helping you learn by telling you the instant your syntax gets messed up or showing you all the appropriate API features you could use at any given point. It is almost too easy to dive into web development. Lets not forget there have been so may that had to learn all this without the benefit of the now accumulated wisdom of the professional community, the amazingly helpful tools like Firebug and the Safari Inspector, real coding tools or the amazing panoply of educational resources or understanding of the bugs or the help of libraries like jQuery that simplify the JavaScript to an unbelievable level. You benefit from millions of man hours of hair pulling and painful development and documentation. Basically you’re standing on the shoulders of giants.

Develop a collection of top-notch resources

I’ll get you started but you should always be on the lookout for new sources of examples, tutorials, best practices, industry trends, reference material, inspiration and good ideas with a strong eye towards exceptional quality vs quantity. Finally there are tons of advanced tutorials and examples of new “better” ways to do this or that, you’re just starting out, stick to the basics to begin with and when you have a firm grasp on them then slowly branch out to try something more complex and interesting.

The Basics

• w3schools.com – “Because time is valuable, we deliver quick and easy learning. At W3Schools, you can study everything you need to learn, in an accessible and handy format.”
• developer.mozilla.org/en/Web_Development – When it comes to reference material you can’t do any better than Mozilla’s Developer center. Got a question about a specific feature of html, css or javascript? Just Google it followed by MDC for quick access to Mozilla’s documentation. eg. “javascript array mdc”, “css background mdc”
• csszengarden.com – The  one and only, classic, learn by example, temple of “separation of content and design”. From the site: “There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really.”

JavaScript:

• en.wikipedia.org/wiki/JSON – I can think of no better way of beginning to understand JavaScript than to first understand JSON.
• JavaScript: The Good Parts – If you get one book about JavaScript this is the one you want. Don’t want to spend the money?… see next item.
• developer.yahoo.com/yui/theater – watch all the videos from Douglas Crockford the official Yoda of JavaScript. The others are very good as well :-)
  
  Douglas Crockford: “The JavaScript Programming Language”/1 of 4 @ Yahoo! Video
• jslint.com & jsonlint.com – Use this to check your code often and follow its guidelines.
• docs.jquery.com – you’ll probably end up using it sooner or later.

PHP:

• w3schools.com/php – w3 schools also has very helpful information on PHP.
• php.net/manual – The official docs for PHP, an essential resource.
• PHP 101: PHP for the Absolute Beginner – A highly recommended set articles introducing the PHP language.

Photoshop:

• 22 Screencasts to Teach You Photoshop Basics – This is a great blog post I ran across that was better than wading through the pile of videos over at adobe tv.
  
• adobetutorialz.com/categories/Adobe-Photoshop – a great collection of tutorials for Photoshop.

Becoming a Master:

• alistapart.com – “A List Apart explores the design, development, and meaning of web content, with a special focus on web standards and best practices.”
• boagworld.com – “Boagworld is the web design blog of Paul (the Wurzel) Boag who lives in the heart of rural Dorset. He produces a weekly podcast with Marcus (pop star) Lillington on all things relating to building and running websites. They also run web design agency- Headscape.”
• net.tutsplus.com – A great collection of tutorials, screencasts and articles covering a wide range of web development topics.
• smashingmagazine.com – Graphics, Inspiration, Coding, Design, Photoshop, Wordpress, Tutorials, Wallpapers, Icons, CSS.
• css-tricks.com – Another excellent web design community, a great resource for, tutorials, screen-casts and code samples.
• ajaxian.com – keep up with the latest and greatest in web application development

The above represents a minuscule cross section of the best resources available yet alone they open up a huge world. Keep looking and learning every day. It’s a good idea to set up a feed reader like Google Reader to more efficiently scan through all your resources every day.

Your IDE is your best friend

IDE stands for Integrated Development Environment. Why waste time learning an IDE that is not going to grow with you… Go ahead and dive into the real thing right away. Go get Aptana Studio which is based on the amazing Ecliplse IDE. Like it says, its “the leading IDE for web development” and its FREE! Once you have it installed get to know your new home, kick the tires, wade through all the preferences and menus. Then go watch some of the training videos (avoid the ones about plugins.) Some day someone will tell you to switch to a different IDE for x, y and z reasons. This is fine but start out here with a real IDE and when that time comes around you’ll have a better idea of what features you care about.

Intro to Aptana Studio from Aptana, Inc. on Vimeo.

Photoshop, just get it already…

One of the tools that you absolutely can not skimp on is Photoshop. Now there are proponents of GIMP and other free software, a search for “Photoshop alternative” will expose many such would-be replacements of this essential tool. But they don’t come close, not by a million miles. That applies especially to anything with Photoshop in its name that is not Photoshop CS or later, that means no Photoshop Elements, no Photoshop.com. By hook or by crook you gotta get the real thing. Some people are content to scour the web for hacked downloads through bittorrent. I’m sure you could find it but I’m sure you’ll probably contract a virus in the process… I suggest AVG for that (virus protection) but better yet get your hands on the real thing, yup just pony up, then there is no concern about viruses or breaking the law.