How I Learned Web Development
Three years ago I was a TERRIBLE web developer! Check out my first site, built proudly with Microsoft Publisher! (Yeah, that’s right… I’m not afraid to post my bad stuff! NOTE- This was done for a FRIEND. It was not a ‘professional’ job and I wasn’t paid.) I knew some HTML because I used to build websites for myself and for friends way back in the mid 90′s on my AOL dial-up connection, but I’d never dreamed of doing it for a living. After spending 5 years learning Visual Communication, or Graphic Design, I came to the conclusion that I didn’t care much for printing presses and process cameras. I wanted to be a web designer!
It didn’t take me long to realize that a) just because you could design a website didn’t mean that you could build one, and b) I SUCKED as a designer. I had a design education and a firm grasp on the principles of design, and I really had no trouble understanding how to apply those principles to the web… but, I’m not an artist. I would spend hours looking at designs on sites like CSS Mania and CSS Remix and then duplicating parts of them in Fireworks. Not to copy them and use their designs, but to learn how things like subtle gradients, or 1-pixel lines were used to enhance a website’s design. Although I learned a lot, I quickly began to see that I could never put out those kinds of designs. I knew how to now, I could look at a design and totally re-create it, but I didn’t have the artistic creativity it took to think up those designs in the first place. But I still wanted to build websites for a living! So I decided to focus on web development.
Now, I don’t want you to get confused on the time-line here. During the that period of time, I was also learning to code websites, so it’s not like I gave up on design and then switched to development. I was doing both, however while I struggled with design, I soaked up code like a sponge. I could go through a tutorial one or two times and get it. I had a knack for it and it seemed to come naturally. It didn’t start out that way though. Remember, the last time I had ‘built a website’ was around 1995. It was now 2008! I had no idea what CSS was, or web-standards, or cross-browser compliance, or 1-pixel jog bugs, or the box model. In short… I knew NOTHING! But I’m not the kind of guy that lets a little thing like that stop me. I was going to build websites. I just needed to learn how. So, I went to my ALL TIME MOST VALUABLE TOOL- Google.
The following sites, blogs, podcasts are a just a few of the resources I found over the years that have helped me learn my craft. These are the sites that I visited daily, and because I’m still learning and still trying to improve and add more skills to my toolkit, I’m still visiting them regularly.
Nettuts
This is an EXCELLENT resource with high-quality tutorials and screen-casts about everything, for FREE! Part of the Envato network. I They have a premium membership available for $9 a month, which I’d highly recommend if you can afford it, but don’t worry if you can’t. There’s more than enough information in the free sections to keep you busy. The screen-casts are awesome, and Jeffrey Way is by far my favorite ‘screen-cast guy’. He’s upbeat and extremely knowledgeable and really knows what he’s doing. There are screen-casts and tutorials from other developers as well, and they keep right in line with the standards I’ve come to expect from Envato.
If design is your thing, they’ve got PSDtuts, Vectortuts, and much more.
CSS Tricks
I can’t believe all the sites I see and ‘professional web designers/developers’ that are still using tables! I can understand why (CSS can be a little frustrating to learn), but a ‘professional’… I’ll just stop right there.
Chris Coyier of CSS tricks is the man! He’s extremely knowledgeable when it comes to web development, and WordPress and he breaks CSS down and makes it understandable. There are plenty of tutorials on the website, and he also puts out a podcast. You’ll be amazed at the wealth of information available on his site!
Boagworld
This is where I learned about ‘web standards’ and a lot of the other bits about the business of web design and development that people may not think about at first. They used to put out a weekly podcast (up until a month or two ago), but it’s currently not in production. There are 200+ episodes available on iTunes that are chock-full of information that will bring you up to speed with the ‘industry’. The also have a forum and post articles on their website.
W3Schools
This site is awesome! They’re slug-line says it all:
“THE LARGEST WEB DEVELOPER SITE ON THE NET
Full Web Building Tutorials
- ALL FREE!”
W3Schools offers excellent tutorials about almost everything. I’m not even going to try to list everything you can learn there, just go check it out and see for yourself!
CSS Globe
I love this site! The tag line says it’s “your daily source of css news”, which it is, but there’s also great information on other areas of front-end development and best-practices.
The Blog of Soh Tanaka
I’m not really sure how I found this blog, but I’ve found some really great tutorials here. Soh Tanaka is a designer and front-end developer based in Los Angeles. His tutorials are great and easy to understand, and I also like his design style.
<!DOCTYPE>
These guys get an honorable mention because they weren’t around at the beginning. However, they put out a great screencast and I’ve found it to be very informational and up to date. They do a segment on design and then a segment on development, so it provides good information for both.
Yep, Twitter! Follow good designers and developers and you’ll learn. See Quick Tips below.
Quick Tips:
- Subscribe to RSS feeds. There are all kinds of feed readers out there. I use Google Reader and FeedDemon, both free and synchronized with each other. On my iPhone I use NetNewsWire which also syncs with my Google Reader account. It’s not free, but there are several feed readers for the iPhone that are free and more than sufficient. You can download an OPML file with all of my subscriptions here if you want it.
- When you come across blogs that you like and are informative, take a moment to follow them on Twitter. I’ve gotten TONS of information as a result of tweets or re-tweets from developers that I follow that pointed me to articles that I might never have read otherwise. New articles mean new writers, which means new subscriptions, which means new sources of information! Your feed reader is your friend!
- Practice! Don’t just download the source code from tutorials and copy and paste them into your projects. Take the time to read and understand the tutorial. One thing I used to do is type out everything myself. Even if I was just doing the tutorial for practice and it wasn’t something I was trying to learn for a project, I would print out the source code and type it out myself. I believe this really helped me when it came to learning clean coding practices and understanding syntax.
So there you have it! I hope this has been a good source of information for budding developers. There are tons of sites and blogs and podcasts out there that can help you learn web development, this is not a complete list by far. What it IS, is a list of the sources of information that helped me the most. I hope they’ll help you as well.
My next post is going to give you even MORE resources… forums! Forums are a great way to plug in to your industry and I’ll give you a list of the forums I go to regularly to get great information on web development.
About the author
Related Posts
Add A Dynamic Nivo Slider to A Business Catalyst Site
Sliders are pretty popular these days. Almost every WordPress theme comes with some kind of slider that’s easy to manage in the back-end, but how do you add a slider to an Adobe Business Catalyst site and make it simple for your clients to update? Read on… Nivo Slider For this tutorial, we’re going to [...]
Read story
Build a Custom Photo Gallery in Business Catalyst with jQuery, XML and Pirobox
If you’ve had the opportunity to work with Adobe Business Catalyst, you’ve no doubt found that it’s definitely got it’s pros and cons. One of the drawbacks I’ve come across pertains to the Photo Gallery module. I haven’t seen a way within the system to style the gallery so that all of the thumbnails are [...]
Read story
By Marisa August 18, 2010 - 11:44 pm
Great post! We’re the opposite; we can come up with designs all day long but code makes our heads explode!
By web Designing December 29, 2010 - 4:26 am
very nice to see about the to learn about the web development
i really get a wast knowledge from this article
very good
thank u