01 - Building A Portfolio Site with ExpressionEngine 2x

So hey, how about a new Building A…. series all fresh and shiny for ExpressionEngine 2?

Yea yea, I know. About time, right? And I agree. But I would ask that you cut me some slack - since last actively writing a ExpressionEngine tutorial series here on Train-ee my family and I traveled for a year, then came home, sold our house, gave away most of our possessions, and are just now getting back into full-time travel mode.  While that sentence was pretty quick to write (and read), lurking behind it is completely re-learning how to live day to day from finding power to grocery shopping to wardrobes and technology.

Excuses - good ones even - aside, during the past year to 18 months we weren’t the only ones experiencing change.  The ExpressionEngine scene has changed radically as well, between the core product and the aftermarket.  I’m feeling the need to take a fresh stab at working through the implementation of a site using some of the new functionality and new add-ons.

Sound good? 

Cool, let’s get rolling.


First, I want to be clear on what the goals for this tutorial series are:

  • Start fresh with EE 2x, mainly to provide some free content for people new to EE rather than requiring them to refactor code written for EE1.
  • Choose front-end code that’s more current using HTML5 & CSS3.
  • Choose front-end code that’s Responsive, adapting itself to different screen sizes used on different devices.
  • Take an implementation approach that’s closer to what I would do on an actual client project, vs. the heavier focus on native functionality in past series.
  • Choose a new type of site to complement the existing Small Business and Church series.
  • Cover enough EE functionality during the series to help you implement an entire site, even if it’s not a portfolio site.

The overall process will be the same as in the past. I’ll start with existing front-end code and work through the process of implementing the site in ExpressionEngine. I will give no predictions of how long it will take overall or how many chapters it will require. At each step I’ll talk through why I chose a particular implementation approach. I may also cover alternatives. I’ll provide as much source code as I can - basically anything I can do to help you along in your learning. 

And When It’s Done?
When the series is all said and done, I may polish it up and publish it in book form. Or not. We’ll see. 

ExpressionEngine Version?
While I’ll be using the same Commercial version as I do on all client work, everything in this tutorial series should work using any of the three different Expression Engine licenses. Since we will be creating a portfolio site it would make a nice way to implement a EE Freelancer license.

Get Started by Installing EE
First things first.  EE needs to be installed somewhere.  For our purposes here it won’t matter if it’s installed locally on your laptop or on a hosted server somewhere.  I don’t like to re-create wheels, so best to just follow the installation instructions from EllisLab. I’d also suggest following the best practices for securing your ExpressionEngine installation.

The only specific input I have is don’t install the Agile Records Theme that is available during the install process.  If you did, best to just wipe your install and start over.  Otherwise you are in for deleting a bunch of things in the EE Control Panel and that ends up being more work than doing a fresh install.  Yes, I speak from experience here.

Check out Folder
We’ll be implementing the “Folder” portfolio design available for free from LuisZuno.com.  You can get a feel for the site by visiting the Folder Demo.

The Folder theme features:

  • HTML 5
  • Unlimited colors in a exclusive stylesheet
  • Responsive Design
  • Flexible slider and Image lof slider
  • jQuery enhanced
  • Easily customizable
  • Drop down menus
  • 5 different page layouts
  • Isotope image gallery
  • Working Contact Form
  • LESS files included
  • Adaptive Navigation
  • Post Formats
  • Audio Player
  • Extensive Documentation

To download the code you can download it from Luis’ site. While Luis’ license specifies “no attribution necessary” I am glad to give him attribution here.  Thanks Luis.

With those two things done I’d suggest some noodling.  Click around the EE Control Panel and look at the different menu items.  Unzip the front-end code and run through the HTML & CSS files to get familiar with what’s there.  View the source code to see how it goes together. 

What’s Next?
In the next installment I’ll give you a conceptual overview of EE and how it works.  From there we’ll start to rough in the implementation plan for the site.

Thanks to everyone on Twitter who responded to my plea for pointers to a responsive theme to use.  I believe Folder was suggested by fellow EE’r Natetronn.

Writing about ExpressionEngine again - feels good!

Category Navigation

Next Entry >>


Previous Comments

Picture of Jake Chapman

by Jake Chapman

Date: Saturday, May 26th, 2012
Comment: #1

Looking forward to reading through this. Thank God for a EE 2.+ tutorial.

Picture of Dave Scholten

by Dave Scholten

Date: Wednesday, May 30th, 2012
Comment: #2

Mike, looking forward to the tutorial! Is the link for Need a Jump broken or is there nothing to download yet?

Mike Boyink

by Mike Boyink (Author)

Date: Wednesday, May 30th, 2012
Comment: #3


Picture of Elliot

by Elliot

Date: Sunday, June 17th, 2012
Comment: #4

Awesome… I’ve been working through your book but am finding that I need something that uses a structure better suited to a portfolio than the business site… hoping this will fill in the gaps!

Picture of Chris

by Chris

Date: Wednesday, November 7th, 2012
Comment: #5

Probably this is an off-topic but one sentence really astonished me. “... then came home, sold our house, gave away most of our possessions”
What inspired you to do this? Is there any religious reason?

Picture of Boyink

by Boyink

Date: Wednesday, November 7th, 2012
Comment: #6

Hey Chris -

No, no religious reasons. We just loved full-time travel and wanted to continue doing it. The house - and related stuff - was a financial and emotional boat-anchor and we wanted to sever the anchor lines to be freer to travel.

In the process we were able to become completely debt-free and start to spend that former mortgage money on experiences instead (horseback riding in the Smokeys, a houseboat on the Mississippi, herding Alpacas in Texas).

You can read more at http://b4a.us or http://www.deliberatism.com/featured/the-family-that-sold-it-all-for-a-life-on-the-road/.

Picture of Tom

by Tom

Date: Tuesday, November 13th, 2012
Comment: #7

Hi Mike,

Thanks for doing this. It is really appreciated! I’ve bought your book, and have used it for reference, but after building EE sites for a few years now, it’s great to basically sit down with you and see another person’s thought process.
You should put a donation button on the sidebar on these free tutorials. I can imagine how much time and effort can be put into something like this. I’m sure lots of us would slip you a few bucks. It would be worth it. Because of this tutorial, I discovered Mountee, and some really great tricks.

Eagerly awaiting your next instalments…

Picture of Boyink

by Boyink

Date: Tuesday, November 13th, 2012
Comment: #8

Thanks Tom!  I actually had a donate button for awhile and I think I got all of $50 over 2 years.  I started to wonder if it devalued the site more - but then again I used to make affiliate money through my work here and that program is now dead. 

I don’t know - lots to think about..:)

I should be posting some new content later this week - we’re settled into a spot for 6 weeks so I shouldn’t be driving so much.

Picture of Tom

by Tom

Date: Tuesday, November 13th, 2012
Comment: #9

Well if you are ever in Victoria, BC, in your travels, drop me a line & I’ll buy you a dinner. :-)

Picture of Boyink

by Boyink

Date: Tuesday, November 13th, 2012
Comment: #10

Heh - we spent most of a summer looking across the water at Victoria.  We camp-hosted at an RV park just west of Port Angeles.  We wanted to go over but at the time it was just too costly with the ferries and all. But we’ve heard great things about it - hope to get back there someday!

Picture of Rick

by Rick

Date: Friday, January 18th, 2013
Comment: #11

I downloaded the theme to prep for this tutorial. How do I install it in EE2?

Picture of Rick

by Rick

Date: Friday, January 18th, 2013
Comment: #12

Nevermind. I see now where you are going with this, using the downloaded “template” as a model for building a site in EE from scratch. Got it. Sorry.

Picture of Robert

by Robert

Date: Tuesday, November 3rd, 2015
Comment: #13

Ive never used Express Engine before, so I am eager to get stuck into these tutorials.

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...