My portfolio: 4. Coding
So this is the actual “nitty gritty” part! On this step, I bring together all the previous steps and work to make the site look right. Here again, the first thing I do is take out my notebook. Looking at the design, I break down all the possible sections that could be DIVs, name them, and then start to write out some preliminary HTML to determine how it can work.
In my notebook, I rough sketch some initial HTML code.
Notice my note: “Sidebar is only for home page.” I make little reminders like that all over my notebooks.
You can also see some sketches for the About Me page along the bottom. Apparently, I liked the layout of the third one since there is a star drawn on it. I haven’t gotten to create this design yet as of this posting (April 8, 2009) because I can’t find a good landscape picture of me. I know the one that’s on the site now looks like a mugshot!
So my workstation consists of my laptop, my notebook full of sketches / scribblings, and a cup of coffee. As I mentioned in the article on free tools, I set my Pandora station to the type of music that I think “goes” with the design. Because this was my personal project, I listened to my 80s music like Duran Duran, INXS, OMD, Real Life, etc. On my desktop, I have Notepad++ opened to a blank HTML document tab and a blank CSS document tab. Then I use Firefox to check out my updates as I change the coding.
And then it’s a series of typing XHTML, typing CSS, F5 refresh in the browser, XHTML, CSS, F5, HTML, CSS… you get the idea. Then I smile at a job well done when it all works well. Or investigate why the hell that sidebar div won’t line up to the footer! But that’s just me.
Once I reach a point that I’m comfortable with the design code, I’ll open the other browsers that I test with to make sure the site doesn’t break in them: Internet Explorer, Opera, Safari for Windows, and Chrome. (Yes, you might have guessed that I work on a PC. I haven’t the budget or energy to get a Mac, right now. I will some day.) I’m sure there is a way to test my site on the Safari browser on the iPhone, but I haven”t looked into it.
After I get all the coding done, I make a checklist to follow as I test the site on my laptop. I test all the important links to make sure everything is linking incorrectly among all the pages. I use this same checklist on the live site, but that is the next step: uploading to the server.
Tags: coding, CSS, design, layout, Methodology, process, structure, XHTML