Coding a Web Design: Step by Step

As I have stated in many posts before, I am still learning how to write HTML and CSS. So all these articles from time to time can be a bit confusing. But it was nice for Chris Spooner in his article: Coding Up a Web Design Concept into HTML & CSS , to provide a step by step process on how to create your own concept design from a PSD file to a fully functioning HTML. I may not get everything at the first try, but after reading it I have a better understanding on how to take one idea and put it online exactly how I want for others to see.

The best thing about this article obviously was providing visuals of each step to creating your own html, both the pictures and screen caps of the CSS. By seeing both side by side I can see how he transcribed what he wanted from his PSD to his HTML. And It’s easier for me to understand and see how it is done. In a way.

I admit again that CSS and HTML is not my strongest suit. So even though the visuals and clear step by step process of making his vision to a reality are helpful, I am still some what lost and confused looking at all the individual codes, divs and such that have gotten him his final product. It makes me appreciate the work effort from web designers even more and respect on how they have to fit everything in HTML and CSS code perfectly, like a 1000 piece puzzle in a sense.  In a way, they kinda are like artists, but for the Internet world.

I recommend for people to take a look at Spooner’s article. It may be a little bit confusing at first is you are new to CSS and HTML coding, but he explains it as clearly as he can along with all his visuals of his CSS and before/after images of his website. It’s definitely something that should be checked out.

This entry was posted in Coding Up a Web Design Concept. Bookmark the permalink.

Leave a Reply