Grow your CSS skills. Land your dream job.

#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.

In this series:

Comments

  1. 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. 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. 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. 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. 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. 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. 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. Permalink to comment#

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

  9. valmir junior
    Permalink to comment#

    Thanks a lot my friend!!!

    Now I’ll start seeing the other videos.

  10. 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. 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. 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. 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. 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. Pooh
    Permalink to comment#

    Awesome! Thank you very much.

  16. 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. S. Rampley
    Permalink to comment#

    Nice straightforward presentation. Well done.

  18. 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. 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. Permalink to comment#

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

  21. A/P Diego Diez
    Permalink to comment#

    Muchas gracias, a lot ;)

  22. 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. Ryan
    Permalink to comment#

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

  24. P
    Permalink to comment#

    Thx for the vids.

  25. Gentleman
    Permalink to comment#

    Awesome tutorial.

  26. 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. 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. 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. 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. 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. 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. Ashish Negi
    Permalink to comment#

    Thank ….Chris Coyier

  33. Permalink to comment#

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

  34. sumanta
    Permalink to comment#

    Nice video….really helpful. Thanks a lot.

  35. 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. 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. Pradeep
    Permalink to comment#

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

  38. Permalink to comment#

    this was fantastic, thanks chris

  39. 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. Marius
    Permalink to comment#

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

  41. 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. 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. Jimmy

    Awesome… Love your work and the way you teach!

  44. 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. 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. 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. Permalink to comment#

    Amazing! Thank you for the video :)

  48. 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. Bayu Putra
    Permalink to comment#

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

  50. 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???

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".