#72: Building a Website (2 of 3): HTML/CSS Conversion

In part 2 of this series, we begin the HTML/CSS conversion of the Photoshop mockup we created in part one. We start with a very skeletal project framework. Then we take a look at the Photoshop file layer organization. Then we start from the bottom up, creating the pieces we need from the Photoshop file and writing the HTML and CSS we need to get the job done. Much of the work isn't actually "slicing" the Photoshop file, but looking closely at it and trying to mimic what is done there with correct markup and CSS techniques.


  1. Tom Rogers
    Permalink to comment#

    Have been looking forward to this all week and it didn’t disappoint.

  2. Forrest
    Permalink to comment#

    Thanks for taking the time to share. Always appreciate it.

  3. Sumeet Chawla
    Permalink to comment#

    Ah.. I was waiting for this for since you released the part one of this series :P I use to check the site every 12 hours lol…

    Wow, you added a comment edit thingy.. what plug-in did u use for it? Anyway, gonna sit back, get a glass of pepsi and enjoy this screencast now :)

  4. Brandon
    Permalink to comment#

    Chris, I say your tweet that you were having trouble with iShowU last night… glad to see that you got the video done and up today! 1 step closer to getting my blog and future client blogs workin’ well because of you!

    You really don’t need to wait till next week…hint hint… I’m ready to watch the 3 part right now…!

  5. Brandon
    Permalink to comment#

    Chris, saw your tweet last night that you were having some trouble with iShowU… lame… I’m super glad you got it working and out for us today! Thanks to you I’m now 1 step closer to becoming a wordpress ninja! ;-)

    That said… you really don’t have to wait till next week to get the part 3 out – hint hint – I’m ready to watch it right now…

  6. Nutt
    Permalink to comment#

    These videos have been a huge help in understanding how css works. Anyways can’t wait for #3 and the conversion to wordpress. Keep up the awesome work.

  7. Carlos G.
    Permalink to comment#

    Thanks Chris….Very helpful

  8. Lewis
    Permalink to comment#

    Hi Chris, your videos are just great. Thank you so much for all the effort and great creativity I have learned so much.

    I wanted to note something. In photoshop while selecting the layers that are not it. You can also alt+click and it will “inverse the hide” showing you only the one you clicked on. (I hope its a good hint/tip)

    Again thank you so much for this great community of resources that you have built.

  9. Matt
    Permalink to comment#

    Grid-u-lar, best new word. Print it.

  10. Mark Roberts
    Permalink to comment#

    Hi Chris, great screencast, I notice on the live site you’ve got rid of the horizontal scrolling on the main content so it just scrolls vertically, I’d be interested to know how you achieved this?

    • Chris Coyier
      Permalink to comment#

      I didn’t actually. The problem just only crops up when you squeeze the browser down really narrow and horizontally scroll. It’s really not that big of a deal though so I just left it.

    • Mark Roberts
      Permalink to comment#

      That’s interesting because on my browser no matter how narrow you make the window the main content block stays fixed in position horizontally

    • DougS
      Permalink to comment#

      This may work for you, Mark….

      body style=”overflow-x:hidden”

      …to disable the horizontal scroll bar.

      great video, thanks.

  11. Rosell
    Permalink to comment#

    I am trying to understand it all. You have changed it.

  12. Brandon
    Permalink to comment#

    Chris, would you be be up for doing some wordpress tips sometime? I’m specifically interested to see how you keep your blog backed up in case something bad happens… And how to restore from the backup if you did ever lose your blog or needed to migrate to another host.

  13. Greg McAusland
    Permalink to comment#

    regarding the frillies, since the headers will usually be permalinks in wordpress, surely you could give a background to the h2, with left padding for the left frill, background to the a tag with right padding for the right hand frill, full css solution ?

    instead of using a blank span, i’d just display:block; the a tag and use that for the other side

    Either way, loved the screencast.. There’s something calming about watching another designer marking up a site. I enjoy the process on too many levels, I think that makes me a little bit of an oddity.

    • Chris Coyier
      Permalink to comment#

      In order for that to work, both elements would have to be inline elements not block, otherwise the width would always be 100% and the frills would be aligned left and aligned right instead of on either side of the title snug. Still doable with CSS, but would require yet another wrapping tag, making 3 instead of just the 1 with JS.

    • Greg McAusland
      Permalink to comment#

      ah, right you are.. I guess you don’t always see these things from the observers chair!

      I started using more JS to solve design flaws after watching your little presentation on jquery, but I guess the challenge of being css pure while often daft is still fun to try hehe :)

      You’d think we were trying to solve the laws of time and space the amount of thought that goes in to these things, but no.. it’s all for the frillies.

      love it!

  14. Ben
    Permalink to comment#

    Dude! Best screencast yet. Please continue to include the rambling. That sort of freeform thought process is exactly how I work and it’s very helpful to see how another designer with the same brain patterns does his thing. Thanks so much!

  15. Dor
    Permalink to comment#

    Very cool screencast.
    But I was screaming for you (from my side of the screen) to make the logo image fading at the bottom, position fixed and higher z-index, and then the text will neatly go under it when scrolled.

    Very nice though. That negative margin + text-indent trick was new to me. It will solve many of my problems XD. Thanks, awesome screencast.

  16. mizwo
    Permalink to comment#

    I do agree with Ben, the rambling is not only really entertaining but also very helpful. I watched this screen cast this moring at almost 2 am (Germany). Although I had to get up early today I watched it the whole way through. Loved it very much.
    Keep it up!

    something OT:
    I don’t know if this was mentioned before somewhre else, but your poll doesn’t seem to work for me that well on FF 3.5 Win. When I vote, the vote gets counted and all but I instantly get to a white unstyled site with only the results. I guess that’s not supposed to be that way, is it? JS is enabled of course.

    • Chris Coyier
      Permalink to comment#

      That poll thing has been like that forever. Never been able to fix it. Only happens to about 1% of visitors. My thinking is it’s some kind of plugin conflict.

  17. max
    Permalink to comment#

    As always really great stuff!
    But I would I love if you would please elaborate a bit more on Positioning, I am pretty new in the game and your website is of great help to me, So if you don’t mind maybe do a short post explaning basic Positioning.
    Thanks again for your great work

  18. Joan
    Permalink to comment#

    Really cool to see someone else doing a HTML/CSS conversion. Although the markup and styling isn’t that difficult I picked up a few things that I’m going to use in my own markup. Thanks for sharing!

  19. Eire32
    Permalink to comment#

    I now you were a little annoyed that it cut off on you, but you didn’t say your usual “See you later , bye!” line. Another good screencast! Thanks Chris!

    • TeMc
      Permalink to comment#

      Hehe, true. It’s a subtle, but very recognizing ending..

      I kinda unconsiously missed it aswell, :D

  20. Mike
    Permalink to comment#

    Anyone have trouble with the direct download? The video stops playing right when Chris is talking about the current navigation background.

  21. Henry
    Permalink to comment#

    Hey Chris,

    Great Job, I would like to know if this is your normal work flow. Meaning if you code a psd->html or do you do psd -> wordpress? Just curious of the benefits or waste of time of either work flow.

    • Chris Coyier
      Permalink to comment#

      It depends…. going from PSD to HTML is ALWAYS going to be useful no matter what CMS you choose, so that it what I recommend. If you have already settled on a CMS and you are good at themeing already and know that you can keep everything in your head markup-wise as you build the different parts, then I don’t see any problem with going straight to themeing.

  22. Caitlin Reynolds
    Permalink to comment#

    Awesome Chris! I can’t wait to dive into this :)

  23. tonyp
    Permalink to comment#


    I noticed while watching that around 47:30 that you manually turn off layers in psd.

    An easier way to turn off all layers other than the current layer (also known as Soloing a layer in After Effects) is to Option-Click the eyeball on the layer you would like to solo. This is a toggle so Option-Clicking the eyeball again on the currently solo’d layer will bring your document back to its original state. The nicest part is that it honors the visibility state of all layers in the document thru both toggles.

    Love the site, hope this will save you some time in future photoshop sessions! :)


  24. Steven Couper
    Permalink to comment#

    Great Chris, thanks so much!!

    Your the Best!!!

  25. Andrew
    Permalink to comment#


    That was a great screen cast. The rambling made things entertaining and made me feel better about the way I do things too. This was definitely a learning experience. Keep up the great work and I’m looking forward to the WordPress tutorial. Thanks

  26. Baylor Rae'
    Permalink to comment#

    I know it’s difficult to break a habit, but an easier way to measure the pixel difference in Photoshop is to use the marque tool and under the information tab it will show you the width and height of your selection.

    I wonder if Snow Leopard is causing iShowU to stop recording suddenly. Perhaps you should report the problem to Shiny White Box.

  27. Bobby Orr
    Permalink to comment#

    Great screencast, very useful tip for the all-caps styling.

  28. Gus
    Permalink to comment#

    Great Screencast. I saw you do something I’ve been going nuts trying to figure out. How do you copy to clipboard a specific text via button/script? like the way you did the Lorem Ipsum thing. Thanks again, and keep up the awsome work!!!

  29. Martin
    Permalink to comment#

    Excellent screen cast Chris, full of wonderful tips. I have been waiting for this 2nd part all week, now cant wait for the 3rd.

    The rambling is brilliant, please keep that up. It is wonderful to hear what you are actually thinking, and the processes you go through before finally arriving at the end result.

    I would love to see this cast series extended to show how you manage a project from start to finish. So concept, sketches, how you manage artwork and files, versioning and maintining/supporting a finished site.

    Great site, excellent tips. Thanks

  30. Scott
    Permalink to comment#

    Thank you so much for your hard work on this site. It is an excellent source of new inspiration – in both design ideas and css styles.

    The web is a better place because of you!

    Thanks again!

  31. Jacob Bixler
    Permalink to comment#

    I was just wondering what video player you use on the final site. I have seen it before but have been unsuccessful at finding it.

  32. Brian
    Permalink to comment#

    Excellent screen cast. I too enjoy the rambling. It is nice to know what you are thinking while you are working. It would be boring if everything went perfectly.

  33. Bego
    Permalink to comment#

    Hi Chris,

    thank you for the insight into your work.

    The layout is simple but yet efficient (but still took approx. 2 hours to work out so far). — I’m glad to see that even with lots of practice, good things need their time.

    What I was wondering about: You mentioned, that you target this website to a younger audience that uses modern euipment (especially browsers). So … forget about all the workarounds and conditionnal tags we use for Internet Explorer??? (Kailin Yong’s site looks awful in IE6.) Is that a common approach by now?

    Best regards,


  34. Lehnhard
    Permalink to comment#

    Hello Chris
    I like your Screencast videos and watched all and work on it. Normally your solutions work very nice.
    Unfortually the Internetexplorer is not well supported by this website… And the other question is, why you change the screenresolution to somthing higher than 1024? Have all people a higher resolution?

  35. Art Webb
    Permalink to comment#

    Hi Chris,

    Love the screencast.

    FYI – you were turning layers on and off to trim them down. An easier way is just to duplicate the layer that you want into a new file and then trim is down. Works for me.

  36. Adrian
    Permalink to comment#

    Hey Chris,

    You mentioned in your video that you like the shortcuts in textmate to wrap text with html as you said using CMD+L wraps it in an list element.

    There is also a shortcut to wrap multiple lines in tags.

    The shortcut for it is CMD+CTRL+SHIFT+W
    This will wrap every line in your selection with a list element, once its wrapped you can also change it to any tag just by changing the “li” to something else like a div or p tag, it will change all of them, beginning and end tags.

    Hope this is helpful.

    • David Clark
      Permalink to comment#

      Great webcast – thanks much.

      Adrian beat me to part of my feedback regarding Textmate tricks. The other part is using the OPTION key while dragging – this selects text BY COLUMN and then anything typed will go into every line in the selection.

      My question — I am a coder, not a graphics guy – but I can see the need for psd slicing/manipulation/info. Are there any economical alternatives to photoshop?

    • Adrian
      Permalink to comment#

      By economical alternatives, I assume you don’t want to spend large amounts of money on Adobes Products.

      There are a few cheaper solutions for the mac.. the first being:

      GIMP (Free) – http://www.gimp.org/macintosh/
      Pixelmater ($59) – http://www.pixelmator.com/
      Acorn ($49) – http://flyingmeat.com/acorn/

      My favourite alternative is Pixelmator, it has a very slick interface and is very similar to Photoshop

      If you need to find alternatives to other software check out this site

      you can find alternatives to almost any application, its very helpful.

  37. Nick
    Permalink to comment#

    Great screen cast! Like Brian said, I enjoy the rambling and like hearing the decision making that takes place.

    Great job again…

  38. Donna
    Permalink to comment#

    Chris, you are in a class of your own! I find your screencasts the most useful on the web! As others have said, hearing your decision making and your train of thought along the way is extremely valuable. I love your honest and down-to-earth approach. Thanks so much! I look forward to part 3.

  39. Tim
    Permalink to comment#


    I don’t say thank you enough for you sharing so freely your knowledge with so many. You don’t know how much of a blessing you’ve been to me!

    Your work is so inspiring and you are so gifted!

    Thanks again for giving so freely!


  40. Brandon
    Permalink to comment#

    Hey Chris,

    You can option click on the “eyeball” hide/show button for Photoshop layers to hide every other layer except that layer. This can shed precious seconds, and mouse clicks, when trying to get elements by themselves so you can “trim” and export them. Keep up the AMAZING work!!!

  41. Nicolas
    Permalink to comment#

    Hi Chris,

    great 2nd part of this tutorial series. You’re doing once again a great job! Those little tips and tricks here and there are what make this screen cast invaluable to any website developer.

    Looking forward to part 3.

  42. Steve
    Permalink to comment#

    Great tutorial Chris, many thanks. Looking forward to the final instalment! Thanks be to the gods of Stumbleupon I found your site.

  43. Sathish
    Permalink to comment#

    Hey Chris,

    Awesome work. I see you disabling layers one by one. If you want, only one layer to be active, you can alt-click on the eye icon of the respective layer, to see just that layer, and again alt-click on the eye icon to restore back to the layer states before alt-clicking first time. (Alt-clicking on the layer won’t work, Alt-click on the eye icon in the layer palatte)

    Hope that saves u some time :)

  44. Alexandros
    Permalink to comment#

    An awesome screencast, once again.

    Thank you for sharing!!!

  45. Daquan Wright
    Permalink to comment#

    Lovely screencast, sorry about the cut off bro. =P

    Always enjoy seeing you work within different text editors and how you’re going about the implementation from photoshop to html/css.

    I have E text editor, supposedly a windows version of textmate or something close and I like it.

    • Josh
      Permalink to comment#

      I went and checked out E Text Editor – I think I’m in love. Really, thanks for the reference. I’ve never heard of it before but it’s got everything I’ve been looking for!

  46. John Grinde
    Permalink to comment#


    Although his website visitors may have more recent computers, I still do not think that designing a website for a resolution greater than 1024 wide is a good idea. Even on a 1680×1050 screen, I only have my browser about 1024 wide anyways.

    Just sharing my thoughts,

  47. Josh
    Permalink to comment#

    LOL – it just dawned on me watching your screencast to keep .js code in separate files rather than dump it into the header… *slaps face*

  48. Baharak
    Permalink to comment#

    Thanks for everything.

  49. tkhobbes
    Permalink to comment#

    Hey dude, this was one of the best screencasts on webdesign I EVER watched (…and I watch a lot, currently). It was terrific to actually follow your thinking (the rambling, as you called it), and to understand how you approached this task.
    Very, very useful – keep up the good work, man!

  50. Damon
    Permalink to comment#

    Chris Coyier, Screencast #72:

    “Turning on stuff, turning on stuff. Its the life I’ve chosen to live.”

    LOL Comforting, pixel-centric, and extremely helpful. Chicken soup for the web designer. Thanks!

  51. Jenet
    Permalink to comment#

    Thanks for the great series, love seeing your process

  52. Barb
    Permalink to comment#


    Your stuff is totally awesome! I love the informal way you integrate your thinking methodology into each video tutorial. I am learning an incredible amount of practical workflow from you that I have never picked up in college classes. Thank you so very much for offering not only fabulous development/design insights but also your particular style of implementing them. Huge!

  53. Brian
    Permalink to comment#

    I REALLY like the way you do things…. Just wanted to tell you that. And if it is working for you GO WITH IT…. IS IT? JUST CHECKING…? BTW… these tuts you have been posting have been a HUMUNGOUS HELP! PLEASE keep it up cause it is what makes me go back to your site/blog! Keep up the amazing work!

  54. John
    Permalink to comment#

    You might want to thing about changing the favicon on the current site from ‘KY’ to something else. A certain brand association comes to mind. If one person thought about it, you know others will.

    ; )

  55. Ahmed El Gabri
    Permalink to comment#

    Hey Chris, if you want to add some of textmate functionality into coda maybe you can try this


    awesome screencast as usual.

  56. micfromny
    Permalink to comment#

    Hello. I have learned CSS from this site not my school. This is the best tutorial!! ;-) Thank Cris!

  57. Josh
    Permalink to comment#

    Chris another great screencast. I don’t see you working through issues as rambling at all. I find myself learning MORE by watching your approach to trouble shooting your own ideas. Thanks for another great tutorial!

  58. Christopher
    Permalink to comment#

    “Did I say h2 and then make a big deal about it and then type h1? Jeeesh…”
    I love it. I didn’t notice it in this one, but I love how you type ‘wrap’ – it’s always warp (factor 7), backspace wrap. ;)

  59. Derrick
    Permalink to comment#

    Excellent Videos Chris!, This has helped me understand and extend my knowledge of CSS. Keep up the great work.

  60. Alicia
    Permalink to comment#

    I thank you so much for this screen cast. I have been trying to learn how to build websites by book and I understand everything. But sometimes there are the smallest things i need help with. Like positioning, and etc. Watching you figure things out and go along is very helpful.

  61. Dan
    Permalink to comment#

    Great stuff, Chris. I really appreciate the work you’ve done with this so far. The best part for me is seeing what other people do with their CSS/Markup.

    One thing I tend to struggle with is something you mentioned – which H-tag to use where. I realize H1 is typically reserved for the header/logo.

    Thanks again!

  62. Chris
    Permalink to comment#

    Can’t wait for part 3

  63. Don
    Permalink to comment#

    Hello Chris,

    I realy do enjoy the screencast, in particular the jquerry frills :).
    But I tend to use “em’s” for all the font and margins – but this is just of state Oktober 2009

    greetings from hamburg/germany

  64. Hank Rearden
    Permalink to comment#

    Chris, thank you for the time you invest in these screencasts. I was clueless until I watched your first PSD to HTML series, at which point I had my AHA! moment.

    Your work is greatly appreciated! Keep up the great work.

  65. suman
    Permalink to comment#

    hi chris
    nice screencast and thank for this. it’s always seems easy when i see your work hehehe. always looking for psd to xhtml conversion becuase it helps me a lot. thanks again.

  66. Artis
    Permalink to comment#

    Thanks for the entertaining lesson. Now I now my CSS.

  67. Stephanie
    Permalink to comment#

    Dying for the next one! I love your screenies so much! You give me the confidence to go out and do it!

  68. dh_
    Permalink to comment#

    Learned a lot!!! Can’t waite for the next one. I’m really new to word press, and web development in general. I’ve been trying to create themes for drupal. It would be awesome if you did a video on drupal theming.

    Thanks for the lessons!

  69. Mark
    Permalink to comment#

    Chris you ROCK… Thanks soo much for the screencaste, I love the ramblings .. please don’t change your organic style.. thanks again!

  70. Brian
    Permalink to comment#

    I love learning the little things by watching these screencast, like PSD trim option…WOW. How did I not know about that…

  71. Antonio
    Permalink to comment#

    I want to know name of the tool you use under firefox… with cockroach that you edit html code and then you fixed on textmate… it’s awesome

  72. Marcos
    Permalink to comment#

    Hi Chris, I have a question, how do you bring up the meassure tool like you do in the screencast? Im a PC guy, this is perhaps a Mac feature? can you tell me the shortchut keyboard to use it?
    Thank you

    • Chris Coyier
      Permalink to comment#

      Command Shift 4 on a Mac (screenshot tool). Not going to help you on a PC.

  73. mark
    Permalink to comment#

    “turning on stuff, turning off stuff, this is the life we have chosen to lead…” hahaha awesome!!!

  74. silvers
    Permalink to comment#

    Chris another video of dope shizzle! i like the way you went back and forth with your idea of the scrolling logo and the decision to stuck with was sweet.

    if there is one thing i can give back right now, it’s that i have noticed when you use photoshop and you want to go back, you use the history (and history is all good) although as a lover of short-keys you can do ctrl+alt+z to undo the steps you have done, which saves you finding the history pallette and then clicking around.

    (i noticed that you do this for example when you crop a pic and then save for web, and then use history to go back to where you were before. obviously ctrl+z on it’s own just toggles between what you last did and what you currently have, but if you add alt in to the mix, it works like most other programs would)

    ok cool. i hope this helps, it’s a nice trick, and if you already knew it, i hope someone else reading this benefits from it.

    p.s i think you’re rambling is amusing so feel free to do it whenever you feel like it.


  75. silvers
    Permalink to comment#

    oh and another great photoshop technique when you want to turn off the view of everything but one layer (like you were doing in the tutorial)… instead of clicking on each one to turn it off, you just alt-click the layer you want to see, and it turns off all other except for that one. alt-clicking it again turns them all on again.

    again, hope i am not preaching to the choir here!

    • Alexia
      Permalink to comment#

      Thanks for the heads-up about those PS keyboard shortcuts. ;) It’s those kinds of things I forget about when I develop bad habits and routines.

  76. Gregor
    Permalink to comment#

    Hey Chris,

    thanks for sharing this tutorial.
    Just a quick tip:

    If you want to set a padding or margin for top or bottom only, you don’t need to set the 4th value.

    Instead of:

    #sidebar { margin: 0 0 20px 0; }

    you can do

    #sidebar { margin: 0 0 20px; }

    keep up the good work!

  77. Religiously Secular
    Permalink to comment#

    Wow great screencast! I learned a ton, thank you.

  78. Michael
    Permalink to comment#

    Hi Chris,

    Great screencast!! I have a question about embedding videos. What options do I have that will allow me to embed my personal vids, youtube, metacafe…etc (all video site videos). Also, sites like natgeo (http://channel.nationalgeographic.com/channel/videos/).

    I find one and then find there are too many steps involved. I am looking for the easy way to include these in my post (we have users who need to post both a mp3 Podcast and/or video – uploaded or shared from youtube..etc.).

    Also, how do I embed code in the post and page text editors? I have a mix of HTML and PHP and I tried both the Visual and HTML editors. Any ideas?


  79. AtiKuSDesign
    Permalink to comment#

    That’s a lot of comments!

    I just wanted to say that this is a great series of screencasts! Really nice stuff that you make look super simple and easy to follow.

    Thanks for posting this

  80. Alexia
    Permalink to comment#

    Haha!… “Let’s try it out this way… then you can all laugh at me and then we’ll come up with a better way.” If only all lessons were taught with such confidence. :)

    As someone who self-taught herself coding and how to butcher/workaround to make it work, I’m learning so much from these screencasts. Your narrative is really fun to listen to, like the voice we all hear in our heads when working through a project and trying things out.

    Thanks for posting this and keep up the great work! :)

  81. Martin
    Permalink to comment#

    Hi Chris,

    Super great tutorial. Pleas don´t leave out the “rambling” in future tutorials. That´s what makes it real and that´s how you let us inside your head a bit. I hope that didn´t sound too spooky. :-)

    Great job, looking forward to future screencasts.

  82. Dany
    Permalink to comment#

    thanks a lot, it’s very helpful

  83. bobbi
    Permalink to comment#

    I really love these screencasts!
    Being totally self taught by online forums and tutorials, this is just wonderful to ‘see’ the coding in action and here your thought process.
    I have learned so much from watching you work.
    Please keep doing these!
    Actually I think I am just ditto-ing what Alexia said..but it really is true.
    Thank you so much!

  84. Terje
    Permalink to comment#

    This is the best tutorial-series of designing and building website I have ever seen on internet.

    It’s very educational, and I like how you show this step by step, without going too fast forward. And you do not skip over details that so many others do. This is very impressive and inspiring. I have added your site to my favorites.

  85. Ian
    Permalink to comment#

    Awesome tutorial! I learned a lot and you kept my attention… you got a new fan!

  86. Kathy
    Permalink to comment#

    I am loving this series! Web design work is so solitary, it is great to see another person’s process. As a self-taught person, I have so many holes in what I know and it’s just great to have your narration as you go along. I’m learning all kinds of little tips and tricks.

    For me the video is disappearing at around the 36 or 37 minute mark. At that point all I can see is the initial graphic for your video series. I would LOVE to see the rest of the video.

    Thanks so much for sharing your knowledge!

  87. Kathy
    Permalink to comment#

    Scratch that….I reloaded the page and started the video over, and it’s working now. Phew! It had stopped at such a cliff-hanger! Glad I get to see how you solved the issue of what to do with the logo.

    Thanks again!

  88. bhavesh
    Permalink to comment#

    hi. nice site and nice videos. i’ve been following chris from a long time from all his video serious… however i have a question here the download file is actually in a text document format. i downloaded the videos from here which says it has an .mp4 format but when i try to open the videos a text file opens up and then hangs up the whole thing. i’ve media players such as vlc and km player which supports mp4 format but they too aren’t being able to open this video. if chris u can help me out on this it would be great help sir. thanks a lot. keep it up with the good work. looking forward to hear soon from u . u rock !!!

  89. Robin
    Permalink to comment#

    I love this tutorial! It is SO HELPFUL to see the work done from scratch and to hear you think out loud. Not only have I learned a ton of new stuff, but by thinking out loud, you have also confirmed things I have been doing that I thought were unacceptable. Now I know they’re not. :)

    Love, love, love this!

    Thank you!

  90. mohsin
    Permalink to comment#

    Amazing Tut it help me a lot in improving my Html/CSS skills after watching your tutorial now i feel i have enough knowledge about Html/CSS

    Thanks very much

  91. Luke
    Permalink to comment#

    Great screencast. It’s too bad that I’ve only recently discovered your site, I could have used this look into a real web guy’s brain several times over the last year.

    That noise you made right when you realized the recording was going to cut off was priceless. I’d bet we all make similar noises when a program crashes and we realize we haven’t saved for the last half hour…(not that any of us would ever forget to save early and often. I’m just sayin’).

  92. Sana
    Permalink to comment#

    wounderfull sharing of CSS i have never seen this…

  93. Lökis
    Permalink to comment#

    Very nice guide helped me alot.

  94. Jeff
    Permalink to comment#

    Chris, first and foremost let me just say the way you go about doing the layout from scratch and showing us exactly how you would do it if it was an actual project is perfect. We need to see the thought process of how and why and what people normally go through to achieve what they want. I really enjoyed watching this series even though it’s from 2009. I was wondering, do you think there is anyway you could do another screen cast like this one from the PSD to the HTML(5)/CSS(3) to WordPress? I would love to watch it and see how you use the new HTML5 and CSS3 features and how we could implement them into our own projects. Thanks again for the great tutorial Chris!

  95. Roy J
    Permalink to comment#

    Awesome Chris! Wish I would have found your website a long time ago!

  96. Jonas
    Permalink to comment#

    Very nice, thanks a lot!

  97. Keith

    This is really interesting walkthrough, with some great tips along the way. Thanks. BTW your comment form is awkward to use. It took me a while to find the fields. I’m in IE8 for my sins.

    What’s happend to Kailin’s site? It’s a far cry for the nice design you’ve got in your vid. Ref the link under the vid.

    Anyway, great tut.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.