#3: Converting a Photoshop Mockup (part 3 of 3)

I finish up the design in part three of this series on coverting an Adobe Photoshop website mockup into an actual HTML/CSS website. This one focuses on the main content area. I create the the columns including the "quick links" section. I also talk a little bit about typography.

Links from video:

In this series:

Comments

  1. User Avatar
    Manuel Minino
    Permalink to comment#

    Hey!!
    THANKS!! good set of video tutorials!

    but, the navigation never worked for me!! … well.. until i found this piece of code NOT METIONED in the videos, that fixed the bug right away

    ul#nav li {
    display: inline;
    font-size: 1.3em;
    }

    I'm sending u screen caps to your gmail.
    I'll apreciate further information about this, please…
    THANX AGAIN, excellent work!!

  2. User Avatar
    Jake Dillon
    Permalink to comment#

    Hi Chris!
    Thanks a ton for making this tutorial. I learned more by watching this than I could by doing anything else. You saved me a lot of time and explained it all in a way that agrees with my thinking (this is not an easy task, mind you). Keep up the awesome work!

  3. User Avatar
    Crystal
    Permalink to comment#

    I can't tell you enough how helpful this set of tutorials have been!! Keep up the good work and thanks a lot Chris!

  4. User Avatar
    DS
    Permalink to comment#

    Hey Chris! Before I run off to try this out as soon as possible, I just want to take a moment to thank you for this wonderful tutorial. The presentation was superb. The content was to the point. And the explanation of each and every small thing really helped a lot. I’m sure any web design novice looking for some good pointers to start off would find this tutorial immensely helpful!

    Thanks again!

  5. User Avatar
    Shawn
    Permalink to comment#

    Damn. Great tutorial. I agree 1000% with what everyone else has said and I can’t wait to try all of this out for myself. Thanks again. Really, well done.

  6. User Avatar
    Mark
    Permalink to comment#

    I learned more from you in an hour than I have in 3 years of trying to figure stuff out myself. Truly excellent work, sir…

  7. User Avatar
    joeyk
    Permalink to comment#

    Manuel Minino!!!!!!! Thank you so much for your comment woow, i was having such a big problem with internet xploder because the nav kept falling down thank you so much for posting the bug fix..WOOW Appreciate it.

  8. User Avatar
    joeyk
    Permalink to comment#

    btw thanks for the vid i totally learned alot..appreciate it!

  9. User Avatar
    valmir junior
    Permalink to comment#

    Thanks a lot my friend!!!

    Now I’ll start seeing the other videos.

  10. User Avatar
    saki
    Permalink to comment#

    Very nice & detailed Tutorial very helpful for a newbie like me Pls Don’t stop the good work Good WIshes & Happy New Year

  11. User Avatar
    Karl
    Permalink to comment#

    Great tutorials, Chris. Very interesting to listen and watch. By the way, I also enjoyed the baloons that kept popping up in the first part, kind of added some humorous squib to it. I really enjoy such stuff (ie the organisation=everything part). Anyways, really good tutorials, great site also.
    Thanks!

  12. User Avatar
    Tory
    Permalink to comment#

    Awesome tutorials! I’ve learned so much by watching you’re workflow with Textmate.

    I also loved this part…at 25:14….”e9bc3d…..uh, ya”

    Priceless man, loved it.

  13. User Avatar
    Batyr
    Permalink to comment#

    Great work, Chris. I’ve been hustling for a while trying to get my confidence going that web design is something worth pursuing in spare time. You did it for me. Keep it going. Thanks.

  14. User Avatar
    Wouter
    Permalink to comment#

    Thanks a lot for these amazing video’s! I also learned a lot! One question though: what if you would want this footer to always extend all the way to the bottom of the screen? Some people have those 30″ Apple screens and even with a lot of content, the footer would still not be at the bottom of the page. How would you solve that?

  15. User Avatar
    Pooh
    Permalink to comment#

    Awesome! Thank you very much.

  16. User Avatar
    Mike
    Permalink to comment#

    Yup, your website is awesome! I want to become a web designer and am trying to learn on my own. I have been visiting your site on and off for about a month and am going to start a CSS-Tricks marathon! I’m going to watch every video you have and take notes! First series down…woohoo! BTW, my site is crazy right now because I am trying to design my own wordpress theme… disclaimed!

  17. User Avatar
    S. Rampley
    Permalink to comment#

    Nice straightforward presentation. Well done.

  18. User Avatar
    clint
    Permalink to comment#

    Thanks so much! so clear and learned enough to go build my own site! best video tutorial ive ever watched

  19. User Avatar
    Prateek
    Permalink to comment#

    It would be an absolute waste of your webspace with my words in it as no adjectives can possibly describe the gratefulness of web design amateurs like me.
    Your videos really help
    THANK YOU
    Keep up the good work

  20. User Avatar
    didi
    Permalink to comment#

    thanks for your sharing, i allready download the file above.

  21. User Avatar
    A/P Diego Diez
    Permalink to comment#

    Muchas gracias, a lot ;)

  22. User Avatar
    Sanjay
    Permalink to comment#

    I’m just about to redesign my website and learn a lot about html and css along the way. Your webcasts are just fab. Thank you for sharing your knowledge. I really appreciate your very straightforward and clear style.

  23. User Avatar
    Ryan
    Permalink to comment#

    Learned more from your vids then 3 weeks with books. Thanks for being so free with the sharing.

  24. User Avatar
    P
    Permalink to comment#

    Thx for the vids.

  25. User Avatar
    Gentleman
    Permalink to comment#

    Awesome tutorial.

  26. User Avatar
    Daranivasa
    Permalink to comment#

    That was a superb task done. No words. Even a layman can now do his website. Way to go. Once I do my website, you can have a look into it and pass in your comments. Thank You very much Chris.

  27. User Avatar
    paola
    Permalink to comment#

    Great tutorials thanks…!!
    I just have a question, is anyone getting the UL li in different lines? how can I solve this?

    THANKS AGAIN!

  28. User Avatar
    Vit Karpov
    Permalink to comment#

    Hi, Cris!

    An awesome screencasts, but i’ve got a question: what’s the difference between px and em? I read somewhere that em is typography measure. So why do you use it, why not px?

    Best regards, Vit.

  29. User Avatar
    Patrick
    Permalink to comment#

    Outstanding! People like you who take the time to share your knowledge to those of us in the learning process are very appreciated. It saves us time, money, headache, and is a great motivator. Keep up the great work!

    – Patrick

  30. User Avatar
    Ehmad
    Permalink to comment#

    Now I’ve learned a lot and able to create a css file to every design.
    Thanks for sharing these videos.

  31. User Avatar
    Joshua
    Permalink to comment#

    Fantastic Tutorial, I have a Media Arts Minor couple with Business and have just got into designing my own web sites. For knowing hardly anything at all I feel like I can look at code and at least know what is going on now!

  32. User Avatar
    Ashish Negi
    Permalink to comment#

    Thank ….Chris Coyier

  33. User Avatar
    Sergey
    Permalink to comment#

    great video! if you test it in chrome, the quick jumps links are underlined.

  34. User Avatar
    sumanta
    Permalink to comment#

    Nice video….really helpful. Thanks a lot.

  35. User Avatar
    Irving Villanueva
    Permalink to comment#

    Good job, this has to be one of the best tutorials i’ve seen. Keep up the good work and thanks for the help.

  36. User Avatar
    Emily Young
    Permalink to comment#

    Just watched this and wish to repeat most of the previous comments — just learned a ton of tricks from watching! Am lone design/web person at my job — appreciate the outside help very much. Can’t wait to watch them all. Thank you!

  37. User Avatar
    Pradeep
    Permalink to comment#

    Thanks chris for this nice video lesson for css. You are best.

  38. User Avatar
    Will H
    Permalink to comment#

    this was fantastic, thanks chris

  39. User Avatar
    Cheyma
    Permalink to comment#

    Thank you sooo much for this, it’s just what I needed for!!!
    I’m a beginner and I learn more from your videos than I do with hours and hours of classes!!

    Ps: excuse my english I’m French.

  40. User Avatar
    Marius
    Permalink to comment#

    Thank you Chris, for your excellent tutorials! Keep up the good work and share!

  41. User Avatar
    Casey Dennison
    Permalink to comment#

    Thank you so much Chris! I followed this tutorial/screen cast about a year ago and was just so behind on current CSS and HTML. I finally got around to brushing up on my knowledge and was able to follow this all the way through and it came out really. I tried a lot of things on my own before you mentioned what to do so that I could learn on my own and see what works and it was all right on point.

    Thank you!

  42. User Avatar
    Just Jones
    Permalink to comment#

    Thank you for an informative, well thought out pad cast. Your tutorial has provided me with a much better understanding of the process needed to convert PSD to HTML.

  43. User Avatar
    Jimmy

    Awesome… Love your work and the way you teach!

  44. User Avatar
    Tushar

    Whoa!! That was awesome. This was just the thing I needed to get my brain working. Looking forward to watching all the episodes.
    Thanks a lot Chris.

  45. User Avatar
    Sarah
    Permalink to comment#

    Awesome, awesome! This has been so helpful. I am just learning this stuff for my job and have been all over the world-wide-web looking for an intuitive, comprehensive tool…this is it. Thank you for sharing!

  46. User Avatar
    Lenin d'C
    Permalink to comment#

    After all this time, your video is still so useful. I learnt so many practical solutions to basic problems I’ve been having in coding through this last video.

    Thanks again!

  47. User Avatar
    Pol
    Permalink to comment#

    Amazing! Thank you for the video :)

  48. User Avatar
    Vien
    Permalink to comment#

    Hi Chris,

    thanks for a great tutorial. I remember this site 5 years ago, but lost interests in CSS. Now I want to learn it from scratch again and the new CSS3.

    Thanks and keep up the awesome work!

  49. User Avatar
    Bayu Putra
    Permalink to comment#

    Thanks a lot, this tutorial so easy to understand..and it’s help me so much…
    thanks

  50. User Avatar
    Vishal
    Permalink to comment#

    I have started to learn css. This website is a good place to learn designing. Thanks for these videos. I would like to learn designing by performing practicals after watching videos. So, can you provide a link to download photoshop mockup???

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag