Diving back into Designing, HTML and CSS

HTML codeI have been more of a programmer in the past couple of years with my focus on open source languages (PHP, Ruby). I have been writing code and leading programming teams. In fact, my very first job after graduation was as a Software Engineer in Visual Basic.

But there’s a creative side to me as well, which I haven’t let gather dust in all these years that I have been a programmer. I kept my creative side active – be it with photography or be it by studying music, or be it by practicing and improving upon Photoshop skills; creativity never left me. In fact, even in programming I make sure that the code I write is ‘beautiful’ (which doesn’t mean that one has to do anything extra – just proper indentation, meaningful variables, proper white-spaces, following conventions, etc, makes the code beautiful).

Although I have always been able to design in Photoshop, but I have never been able to make an HTML out of that design! This has remained a challenge for me since I’m very much of a hand coder (I loved Allaire’s HomeSite – R.I.P. – more than I would ever love the bloatware called Dreamweaver)!

I always thought that slicing a design and generating HTML/CSS out of it would be easy (or should be). I have tried Photoshop’s slicing and exporting tools to generate HTML, but it leaves a lot to be desired. For example, when saving as DIV-based HTML, Photoshop makes everything absolute positioned (is it bad? I just feel that it’s bad, but I’m not sure)!

But finally, I have learned and applied the skill of creating HTML out of a Photoshop design, and that too a DIV-and-CSS-based-design. All hand-coded, mind you.

So now I’m having fun all over again with designing, as now I can bring my designs out of Photoshop and into the real world, for everyone to see. I already loved playing with HTML and CSS (and soon JavaScript/Jquery too hopefully), and with my new favorite text editor, E – TextEditor (with Notepad++ as a reliable side-kick), I’m writing code that is beautiful; as WordPress’ dictum goes: “Code is Poetry”!

The first of my designs, which I have successfully exported out of Photoshop and on to the web, will be revealed in my next post. So stay tuned.


One thought on “Diving back into Designing, HTML and CSS

  1. gazi karim

    congratulation for your success as a coder at the same time a designer.
    i want to learn code, i did not have any experience i HTML or CSS, where from I will start and how much time it will take?

Leave a Reply

Your email address will not be published. Required fields are marked *