Since, March 2007 I started working on my blog where I learned a lot of things about Django. I could get the blog app running in few days. After that I started writing my templates, I realized the importance of design for a webpage. I have never designed a page from scratch. This was my experiment with design. Though it is a fact that I suck at CSS, I decieded to give a fight. I am big fan of Jeffcroft.

My first lessons of design began by observing jeffcroft.com. Yes, I used to observe his semantic markup, design, accessibility and various issues. To me it was the perfect design with all the web standards.

i learnt a lot through his posts. He has truely been an inspiration for my passion towards webdesign. After a through observation I realized that Jeffcroft design was built on Blueprint CSS. I immediately started off with blueprint. I observed jeffcroft’s markup where he made use of blueprint’s classes. At that moment, I believed that I can design a page. With the help of some good tutorials I was able to design this site. As time went by I began to understand semantic markup and webstandards. This entire journey of building a blog gave me immense amount of pleasure and experience.

For a starter it is certainly advisable to start off with some good css layouts. Here are some good layouts to get started with. Just start off with a 950 px layout and observe the css classes (base.css) and try to understand what each class is doing.

For example

caption {
/*coordinated margin to match cell's padding*/
margin-bottom:.5em;
/*centered so it doesn't blend in to other content*/
text-align:center;
}

This css class caption aligns the text to center and created a bottom margin of .5em (half of the current font size). We can use this class in our HTML markup to center align the text.

<p class="caption other">Text to be center aligned</p>

Note that we have 2 classes for the current paragraph. This means that paragrpah is going to possess the styles specified in both the classes. In this way we can reuse number of classes in CSS to achieve a perfect design. It’s also a good convention of coding. (DRY principle). I will discuss some more CSS techniques in my upcoming posts. Stay tuned.