Yes, my background isn’t in design at all. My educational background is literature and dead languages.
Did you learn javascript and jquery also? Was it easy for you to pick up?
I have a very basic understanding of both, but it’s definitely not (yet) at an intermediate level. I’m currently learning Javascript again from the ground up because all I’ve used lately was jQuery and it feels wrong to me to use a framework without understanding the underlying language properly. I really like Dom Scripting by [URL=“http://adactio.com/”]Jeremy Keith. He has a fantastic way of explaining things so that even I understand it. 
It’s the one I started out with and am currently working through again.
Also any good articles or anything you could recommend on building my own framework?
A framework is just a set of styles you use over and over again in your sites. You basically create a CSS stylesheet with basic rules that you know you’ll almost always need, e.g. like resetting margins, padding, borders, etc. Then you define basic layout containers, e.g. #container (to wrap all of your content), a basic #nav (for main navigation), a standard sidebar, heading levels, p, a set of columns you know you’ll always be needing on your pages, form elements, and so on. That’s all a CSS framework does. For the HTML documents, I’d create a basic markup document that contains the DOCTYPE, meta tags, document title, etc.
My basic HTML template for a standard two-column layout looks something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Site Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="style.css" type="text/css" media="all">
</head>
<body>
<div id="header">
<h1 id="logo"><a href="#">Title</a></h1>
<ul id="nav">
<li><a href="#">About</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="container">
<div id="main">
<h2>2nd Level Heading</h2>
<p>paragraph</p>
</div>
<div id="sidebar">
<p>sidebar content</p>
</div>
</div>
<div id="footer">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Contact</a></li>
</ul>
<p>company name ©2010 - all rights reserved.</p>
</div>
</body>
</html>
I have a standard template for various layouts, e.g. a three-column fluid layout, a three column elastic layout, and a three column fixed layout. Rinse and repeat for two columns, four columns, etc. For each of these different layouts, I have a standard homepage, about, blog, contact, and generic styles pages where I include all elements such as headings, paragraph styles, links, forms, tables, lists, and so on.
To make life easier, I use PHP includes in order to not having to type in the basic markup over and over again. My standard PHP includes consist of a header.php, footer.php, nav.php, and forms.php.
In addition to that, I have a collection of HTML and CSS snippets for more complex markup/styles that I just paste into my HTML or CSS documents when needed, e.g. an HTML form, a full-fledged table, drop down nav, and the like to save time.
I really do love lean and clean code. Then also how did you focus your learning especially in recent years with learning responsive web design.
Responsive Web Design is just a term for something that’s existed forever. Fluid and elastic (or hybrid) layouts have always existed. The only new(ish) thing are @media-queries and I admit I haven’t used them much myself yet. On my site, I use a very simple fluid layout. Actually, my site really isn’t all that well designed. It’s a few years old now and I’ve learned a lot since that time. My new design will definitely be less cluttered and much leaner in terms of code and visuals. The times are a changin’.
But yes, I’d keep up-to-date with the quality web design blogs/magazines out there such as A List Apart, [URL=“http://456bereastreet.com/”]456bereastreet, [URL=“http://css-tricks.com/”]CSS Tricks, [URL=“http://filamentgroup.com/lab”]The Filament Group, and [URL=“http://webstandardssherpa.com/”]Web Standards Sherpa. And then there is the mandatory reading such as [URL=“http://www.w3.org/”]W3C (important for HTML and CSS specs), and the invaluable references for [URL=“http://reference.sitepoint.com/css”]CSS and [URL=“http://reference.sitepoint.com/html”]HTML, all three which give us the skeleton on which we base everything we do.
And how do you continue learning now. Do you set aside time for reading current articles? Do you focus your time on design or typography or mostly new coding techniques? I’m sure you’re also learning constantly as you work on your client’s projects as well?
Yes, I do learn a few hours per week, sometimes more, sometimes less, depending on my workload. I don’t read all that much articles, I admit. I’m more of a book person and buy new books of interest as they are released. There is such an information exuberance that I need to to set myself a limit as I’d otherwise go crazy, plus, the more I contain the amount of new information intake, the more likely I’ll actually remember it the next day and not end up like a goldfish.
As for the kind of information… that really depends on my mood. When I have my creative phase, I tend to concentrate on visual design, typography, colors, iconography, sketching and the like. Right now I’m more in a coding mood (HTML, CSS, Javascript, PHP), so it’s only those type of topics that I pursue at the moment.
I’m also currently reading up on Accessibility, a topic I’ve neglected for way too long, I admit to my shame.
It changes on a monthly, weekly, and sometimes, daily basis.