As a graphic designer with 8 years design experience, you would think I would have learned web design long ago. Think again. I, like so many other designers, went through courses in college that, for the most part, make you choose between web and print. I chose the latter. My focus became branding, print and logo design with a very limited knowledge of web development. In the past, I have done some front end design work for web, but it never involved coding. When I decided to launch the Digital Yard Sale, I saw it as my chance to change this.
I began looking for resources and tutorials on the basics of current web development. Then I focused on how to transfer that knowledge to create a WordPress theme. In just 2 weeks, I was able to learn the basics of HTML, CSS and PHP and create a complete WordPress template from scratch. This is a list of the tutorials and resources that helped me the most. Keep in mind that I am still relatively a newbie and have not even scratched the surface of what most professional web developers know.
This tutorial by Tutvid.com teaches some of the very basics of using Divs and CSS. It was a great starting point to help me understand the foundations of web design.
NetTuts Plus is probably one of the best friends a web designer could ask for. You will stay on this site…a lot! This list of 30 HTML best practices is perfect for beginners and a vital tool in learning proper formatting.
This article should be married to the one above (HTML Best Practices). Both are equally important.
This is actually an amazine 11 part video tutorial series by Pixel for Life. I probably learned more from these tutorials than any other resource on this list. This is the point where I learned to fully rely on coding instead of that annoying WYSIWYG interface. If you have never developed a WordPress theme from a PSD before, watch these tutorials and I promise you will learn something.
If you have done any type of web development and you are not using Firebug, go download it….NOW! It is an amazing tool that allows you to inspect HTML, Scripts, CSS, etc. and modify the style and layout of your page in REAL TIME! How much more useful can you get?!
This resource helped teach me about CSS3. I used it for the rounded corners on the Digital Yard Sale. I’ve also been doing a lot of research on the transitions and animations made possible by CSS3. I plan on using them on an upcoming redesign of my personal portfolio.
Last, but certainly not least, is PHP.net. Everything you need to know about PHP packed into this awesome resource.
This is just a short list of tutorials and resources I used while learning web design and development. If you have any other suggestions, please feel free to leave them in the comments sections.