Inspiration / Roundups : July 15th: 2010

Tutorials and Resources That Helped Me Learn Web Design

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.

1. Understanding Divs and CSS Basics


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.

2. HTML Best Practices for Beginners

html best practices

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.

3. CSS Best Practices for Beginners

css best practices

This article should be married to the one above (HTML Best Practices). Both are equally important.

4. Coding a WordPress Theme from Scratch

Pixel For Life

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.

5. Firebug


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?!

6. CSS Three – Connecting the Dots


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.

7. PHP.net


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.

Share the Goodness!


  1. PixelForLife says:

    Very good collection of resources. Firebug is an amazing plugin. I have learned so much from just inspecting other people’s websites to see how they do things.

    Thanks for the shout out!

  2. Stphn says:

    I haven’t coded for 6 months, so this was such a good refresher!

  3. Jan says:

    Excellent list, K! and nice work with this place!

  4. Jan says:

    You should really stop with all of the comment moderation though 😉

  5. Julie says:

    RT @puglypixel: Tutorials and Resources That Helped Me Learn Web Design http://j.mp/hxGWpN

Leave a Reply