How to Design a Portfolio Site, Part 2

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.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

0 comments on “How to Design a Portfolio Site, Part 2

  1. Pingback: Elliot Jay Stocks » ‘How to design a portfolio site’ screencast

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

  3. 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…

    Sean

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

  5. 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… ;)

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

  7. Pingback: Daily Links for Tuesday, July 21th, 2009

  8. 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.
    cheers

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

  10. 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 :)

  11. 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!

  12. Pingback: Carsonified » How to Design a Portfolio Site, Part 2 | Squico

  13. Pingback: Friday Fix July 27 - 31 | Inspiredology

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

  16. 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;-)

  17. Pingback: by Skought » Blog Archive » I Think I See Light

  18. 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!

  19. 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!

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

  21. Pingback: This Making of a Portfolio Site « TWhite Design

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

  23. 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!

    -J