Eivind Bårdsen | Graphic and logo design from the Sunshine Coast

In my last post, I showed a few headers I designed for this blog. As with many things, trying and failing is the best way to learn. That is why I will talk about how I designed this blog, coding and all, from scratch with no previous knowledge of CSS, PHP, HTML and WWW.

I knew I wanted a blog. I also knew I wanted to learn how design a blog.

First, I set up a server for a Wordpress installation on my mac. This is also possible on a Windows or Linux PC. I used MAMP. The tutorial I used to help me is no longer online, but I found it in google’s cache. Installing Wordpress on my local computer was as simple as a couple of clicks.

I found an excellent tutorial on the basics of Wordpress design over at WPdesigner. The 16-part tutorial covers everything from template files to the Loop and CSS styling. The author stresses that you code everything by hand and don’t copy and paste anything. I found this extremely helpful, as there are a lot of small mistakes a fledgling coder can make. (such as using ‘(’ in stead of ‘{’, and not finding it until hours after).

Remember, type every code. DO NOT copy and paste the codes that I give you. The whole point is to get you to remember what you learn.

When I had gone through the tutorial, I found myself with a frame for a website. A frame I built upon to create this one. I sketched a few layout ideas, and settled on a two-column layout (what I had made in the tutorial).

After that, it was all a matter of running into problems and finding solutions in the Wordpress Codex. The search engines are also your friends, as there are lots of tutorials written on webdesign. If you have a problem, chances are someone else also had it and wrote about it.

Another thing I found helpful was to look at the code of other sites and Wordpress themes. I used Firebug, a Firefox extension that lets you view any website’s HTML and CSS code. It comes with an inspect mode, so you can hover your mouse over an element to see its code. This really helped me understand some of the ins and outs of coding.

When most of the website was up, I spent some time tweaking positions and sizes. Hours of fun! Then I had even more hours of fun making the site work in Internet Explorer 6. Then I changed the design to a three-column layout.

In conclusion, it’s important to try and fail. Run into problems, but be patient and solve them. That is the best way to learn.

How did you learn about web design? Are there any other tutorial jewels out there for us newbies to learn from?