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