As a frontend developer I am often tasked with taking a Design from a Web Designer or a User Experience Designer and turning it into a webpage/site.  They often provide me a Layered Photoshop PSD file and I go in and get all the elements I need and turn it into code.

I thought I’d download a free PSD from the internet and do a screencast of me converting it into HTML and CSS.

This is what the Image looked like:

 

And this is the page I built. http://mobiusweb.com.au/playtime/

I did notice that I missed a few things. I forgot to add the author’s picture. Also there are line numbers in the article. I did miss this. I find it weird so I don’t want to add it in.

Finally I added a hover state for the bottom to articles. This looks weird and I don’t actually want it there. I decided to leave the code with all it’s flaws as it reflects the screencast. Normally I would test this in all browsers and make additional changes. I have only tested in chrome.