For beginners: next steps

Now, assuming you've already read “Designing Web Usability: The Practice of Simplicity” and studied all of HTML Dog tutorials and examples. Assuming that you've read at least 30% of what is available at Web Design From Scratch (by the way, it's been beautifully redesigned since the last time I linked to it), these are the next things you ought to do:

Read “Prioritizing Web Usability” (by Jakob Nielsen and Hoa Loranger) and “Don't Make Me Think - A Common Sense Approach to Web Usability” (by Steve Krug).

Learn to touch-type, it will pay off before you notice! There are plenty of tools around that will help you to learn it in no time, some are even web based!

Study these resources that will help you to master CSS layout techniques and other key web concepts and technologies:

• Dev.Opera lovely Introduction to The Web Standards Curriculum - It's a comprehensive course on the basics and a definitive can't miss for beginners.
• CSS TRICKS All about Floats - Read it and you'll "get it".
• Matthew James Taylor wonderful Website layouts - Those are pure gold, study them with care, take them apart, build them again.
• BlueRobot's Layout Reservoir - Those are a bit old, but they are great nonetheless, study them and feel free to ignore the references to browsers no-longer used.
• Alessandro's Layout Gala - Old too, study them, don't forget to test them with care in newer browsers before using one of them.
• Blueprint.CSS and 960.gs CSS Frameworks - Take your time to study those two very carefully, even if you don't plan to use them at all, since you can learn a lot by figuring out how they work. I'll be posting a list of the best available CSS Frameworks along with some commentary about each one of them, I just don't know yet when I'll do it, so keep an eye out!
• Dave Shea famous CSS Zen Garden - There's a lot to learn here!

Don't simply copy & paste from the layout galleries and tutorials! Study them thoroughly and then try to redo them without looking at their code! Be careful with the temptation to keep using pre-made CSS Frameworks indefinitely, you'll never be a pro if you don't bite the bullet and go all the way through CSS layout techniques learning curve!

Study these resources about design principles and start learning to use a Vector Imaging tool, I recommend Inkscape and it's on-line tutorials are an excellent place to start! Inkscape is available for Mac OS X, Linux and Windows!

Have fun with what you're doing! If you should become bored then probably this area is not for you, since you'll be competing against lots of people which are very enthusiastic about what they are doing.

And don't forget to come back here (preferably subscribe to my feed) to discover what to do once you have completed these steps!

Making the Template

Designing the Template for this blog was a nice experience and I want to share with you some of the details from the process I used.

The first thing I did was a sketch of how it should look like with paper and pencil. This is great because it allows us the freedom to come up with said sketches quick and to scrap them even quicker if they don't come out quite as we expected, or if we just changed our mind in the middle of it. Afterwards, I did a mock-up design on Inkscape, which I used to test the colour scheme I choose and the general sizing of things. Then I moved to the actual coding and image crafting taking these steps:

1. I selected the classic Template type on Blogger dashboard and downloaded a copy of the default template, which I then stripped bare of all Blogger tags(such as BlogItemTitle ) and everything between the curly brackets of the CSS rules.
2. I pasted the usual Lorem Ipsum placeholder content and self-referencing links on the code so that I would have something to apply style to.
3. Then I started writing the CSS rules and debugging them on the fly with Firebug(lovely tool, by the way; consider getting it if you don't use it already).
4. Every once in a while I checked the layout on a stack of browsers(including, of course, IE from 5.0 to 7) and made sure it validated on the W3C Validator.
5. I decided which images were needed and began work on them.
6. When I had a working prototype which validated both XHTML/CSS-wise I began work on replacing the placeholder content and links with the appropriate Blogger tags.
7. As a final step, I uploaded my design back to Blogger and ironed out the last few bugs that showed up at this stage.

Sounds easy huh? Well, not quite so. For starters, there is the Blogger generated code validation problem. Up until the part where I was making the images for this blog, everything was fine validation-wise. Then, as soon as I had inserted the Blogger tags and made the first test by URL on the W3C Validator, it stopped validating. It seems that most of the code that Blogger inserts into the template is non-standard. There's not much I can do about it, so I've decided to just live with this. There's also a few details I rather talk about in another post, since this one has become quite big already.

So now, what?

I'm thinking about using what I learned by doing this template for creating free Blogger custom templates. So expect me to eventually be posting a link to my new Templates blog!