LearnHow to Design a Portfolio Site, Part 2


writes on July 20, 2009

Elliot talking about portfolio design

Editor’s Note: Elliot will be doing a talk called “The Perfect Portfolio Site” on the FOWD Tour.

This is the second video in our two-part series focusing on how to design a killer portfolio site (feel free to check out Part One).

In Part Two you’ll learn …

  1. How to ‘design in the browser’
  2. How to take your design from Photoshop to HTML and CSS
  3. How to integrate your design into a CMS like WordPress
  4. How to structure your CSS files
  5. How to enrich your design with CSS3
  6. How to use ‘custom fields’ in WordPress to make powerful templates
  7. How to use Webkit Transistions to add extra beauty to your site

30-Minute Screencast

You can also download the hi-res video if you have a Vimeo account.


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

42 Responses to “How to Design a Portfolio Site, Part 2”

  1. Thanks, Elliot! It’s great to see how you take the research and apply it to an actual design. Also great to see how you use some of those custom fields in WP. Much appreciated!


  2. Some great tips there Elliot, thank you.

  3. excellent work, thank you very much

  4. Awesome video. I have been working on my portfolio site for a while but I’m never really sure the best way to set it up. I see a lot of web sites that are putting a lot of very work on the front page of there site. That’s probably because they want people to see their work since they know people leave web sites quickly.

  5. Wow, great tips article, very helpful because I am starting on psd to css/html..great points..

  6. What perfect timing coming across this just as I’m redesigning my web site! Thanks for the very useful information. I’m thoroughly inspired to use these helpful tips in creating my own WordPress portfolio site.

  7. This is by far one of the best tutorials I’ve seen, yet! Nice work Elliot! I really enjoyed the first part more, because I enjoy the research stage and consider it a very important part of the entire process. The second part lost me a bit, seeing that it was a bit more technical, but I’m excited to dive in and see what I can create. Thanks again!

  8. Wow, this is so well done! Really thank you for sharing information at this level, and with this quality.

    Looking at a lot of really great designs this weekend, I really started to wonder, “when you are doing something so beautiful with typography, how do you do that in Photoshop?” So, this helps a lot.

    And seeing the way you’re using WordPress. I am used to preparing it for clients, but you’re using it as an expert system, so you can do expedient things, like just use the custom fields, and conform to your own standards.

    Really, there is so much smart stuff going on here — thanks!

  9. This is extremely useful to me, as I am also working on a portfolio as I write this.

  10. Great video! I really liked the steady pace and your teaching style.

  11. awesome work Elliot!
    Nice tips ๐Ÿ™‚
    cheers from Portugal

  12. Thank you Elliot, some really great tips in this one, I’ll copy your design right away;-)

    Thanks to Carsonified for bringing this on as well;-)

  13. Hi. Id appreciate some help. I try to download the video but it freezes up at some point (68%). Can you please re upload it in flv format for download Eliot or Jason? My internet connection is slow, so i cant watch it online and have to download it. Looking forward to learning from the tutorial.

    > James.

  14. inteltone on July 25, 2009 at 6:22 pm said:

    Elliot, thanks a lot for this informative and helpful video and your book, Sexy Web Design. I’ve read the latter also and I have to say that it’s a good helper for beginners and useful reminder for pros ๐Ÿ™‚ Cool stuff!

  15. Your site is absolutely stunning.
    Very nice screencast. Cheers!

  16. Wow, Elliot does a nice job of taking you from point A to point B. Thanks for producing this content, it is always good to see another web designer’s process. Elliot, thank you for the detailed design walk through, the grid portion was insightful.

    Great vid!

  17. Useful stuff!

    thanks a lot,


  18. Brilliant mini-series of videos, thank you. I’m going to be setting up a new portfolio and promoting myself after finishing my design HNC and this have been a world of help and insight, especially Elliot showing us how he sets up his WordPress and the custom fields on the portfolio posts, which are so much better explained than in some of the WP books.

    Now I can’t wait to get started on promoting myself once I’ve set up my site as I have so many ideas, thank you again ๐Ÿ™‚

  19. I’ve recently dived into WordPress and these videos have provided much insight… Overall its been great to hear how you step through from concept to completion and the approach you described in your book.

  20. One of the things that makes this tutorial stand out (from a beginner point of view) is the fact that a specific skillset is introduced. Focusing on developing these skills and not on the gazillion other possibilities (with the exception of jquery & fam) narrows the road for new designers/developers.

  21. Great Vid, Elliot. Just in time, currently working on my portfolio redesign.

  22. Great stuff Elliot. Thank for sharing

  23. This was awesome! Thanks Elliot!

  24. Really enjoyed that – cheers!

  25. Thanks for that. It was valuable to me as a developer to get a run through from start to finish of how a designer goes about this process. And the CMS integration has given me some ideas. I’ll have to see if I can apply some of then to my business web site

  26. Great insight, thanks for sharing, it was a great experience watching it.

    On a sidenote, priceless seeing Xtorrent running in the background. The latest Linux distribution, I guess… ๐Ÿ˜‰

  27. I’d be really interested in seeing how Elliot sets up his pages, categories for posting, permalinks, etc. for his WordPress portfolio. I think that will also help people understand what he’s demonstrating.

  28. Ryan Carson on July 20, 2009 at 1:30 pm said:

    @ Sean

    You can download the video source file here ๐Ÿ™‚ http://vimeo.com/5666504


  29. Will these video’s be available to download at full size? I really enjoyed listening to Elliot explain how to build a great portfolio site, it was just a pity the videos are blurred, especially the WordPress section in video two where Elliot explains about custom fields…. I’d like to have seen a full size version for this section. I think it would designer and developers and especially me, to see how Elliot has tweaked WordPress to address his portfolio design.

    If the videos are available full size please let me know as I would be very interested.

    Great talk in both videos though. It has inspired me to change my current portfolio from a “hard coded” solution to WordPress solution…


  30. You definitely need to avoid flash. All those flash portfolios/galleries are just so terribly slow it’s not worth visiting.

  31. Some great tips. I am using wordpress to make my portfolio site, so this should prove very useful.

  32. Great tips, actually working on my own site and was considering using the PODS plugin but this has inspired me to keep it simple and just use the custom fields.

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop