Screen Shot 2015-10-17 at 12.39.13 pm

How To Create A Portfolio Page

Portfolio pages are a must these days, and as such are needed to portray your various projects. Portfolios are useful not only in the corporate world, but also in developing inspiration amongst the various people looking through your projects.

Today, I will take you through the process of designing a simple and elegant portfolio page in HTML and CSS. I will focus mainly on UI and UX in this series. Backend coding may depend on how you want to manage your content, so I will leave the backend implementation up to you.

So, let’s get started!

Prerequisites

  • Install some form of local server on your system that supports PHP, Apache and SQL. This will make testing our pages a lot more easier. I recommend LAMP/MAMP/WAMP
  • If you are following along on a Windows or OS X system, I’d recommend you to get a good third party text editor for easier editing. I recommend Notepad++ for Windows and TextMate for OS X. For Linux, Gedit, Vim and SublimeText are great options. Of course, you can use Vim in OS X too, but why simply complicate things?

Setting up the project directory

For this project, I am going to follow the structure below:

Screen Shot 2015-10-17 at 12.54.37 pm

  1. The index.html is going to contain our main layout for the portfolio page.
  2. The styles.css will be the external stylesheet we’ll be using to make our portfolio page look prettier.

Setting up the index.html

Before we go any further, let us set up the skeleton of the index.html file.

As you can see, our index.html file looks basic and empty. The <!DOCTYPE html> at the top of the page is a browser declaration that tells the browser that it should expect a HTML page for rendering. It’s always a good practice to set the declaration before the start of any HTML document. The  line in our index.html is how we are linking the external cascading stylesheet to our HTML document.

Great! So now that we have set that up, let us begin by setting up a basic header for the page. To do this, I have used a <div> tag. Of course, you might need to add a navigation bar to either perhaps link your other pages for easy navigation, so I leave that up to you.

As you might have noticed from the above code, we are using classes and ids from CSS to define how the header is going to look. I will show you what the CSS classes are that define the style for this later, but for now, let us finish setting up the rest of the index.html.

The next thing that we need to take care of is the padding for the page. For a good user experience, the pages’ content should have padding on either side especially for large screen devices so that people don’t have trouble distinguishing and identifying the main content of the page. We shall solve this by adding a class called container to a <div> that wraps the main content of our portfolio.

After the container, we also need to make sure that people that visit our portfolio can easily browse through and find our content faster. For this purpose, we shall set up a <div> tag with a class called categories.

What the class category-wrapper in the above block of code does is pretty simple. It is the main styling for our list of different categories that we add. We shall come to the CSS part of it later on in this post.

Sweet! Now that we have added categories as well, we need to add our different projects that we have worked on. For that purpose, I shall be using a <div> tag with a similar set up that we used for the categories.

I have added a list of eight Green Day albums to be our dummy portfolios. All the images are stored in the “dummy-images” folder in our project path.

Now, putting everything together, our index.html should look like this now.

Setting up the styles.css

Now the stylesheet is where all the magic happens. We shall be creating the layout below with the help of our various CSS classes.

This is what we are going to replicate for this post

This is what we are going to replicate for this post

Before we start off though, we need to reset our style sheet. This is so that we can start off with a clean slate and set up the various needed styles ourselves to get the result we desire. I am using Meyer Web‘s CSS reset to make the job easier for us. Let us begin by adding it to our styles.css.

Okay, now that that’s done, let us move on and style the header that we set up in our index.html earlier. Classes in CSS are defined in the .class-name {} syntax, and the code block for the header will look like this:

Now, I have used #8BC34A as the color for my header background. I chose from Google’s Material Design color pallet, and all the colors used in this example are all from there. Of course, you can choose your own color to make it look better. I suggest that you limit your color pallet for this project to at most 3 colors. One, a 500, the other a 700, and the last an A200 or A400. You can refer to the Material Design guidelines for more info on why this is a good idea from an UX perspective.

From the code above, you can also see that we have a new declaration. The #header-text {} is the syntax for the CSS id element. We use this to give the page a heading. As you can see, the #header-text > h1 will only affect the h1 tag that is inside of the <div> tag that has an id of header-text assigned to it. The line-height attribute makes sure that the text is vertically centered within the header class. Note that the height attribute of the header is the same as the line-height attribute of the #header-text {}.

Reloading the browser should now give you the following result:

Screen Shot 2015-10-17 at 11.34.34 am

The next segment that we have to look at is the <body> tag’s container class. This CSS class will help you to give padding to the main content of the site and the code for that is as below:

I have used the shorthand for the padding element here. This means that the top and bottom will have a padding of 20px, while the right and left will have a padding of 60px. The thing of interest here though, is the margins that we have specified. Setting the margin-left: auto and margin-right: auto will basically center the content in the middle of the container.

Okay, so now, we have a really neat layout set up to work on our portfolio. We need to add the CSS classes for the categories and the portfolio. We shall start off by adding the class for the category.

There are two elements here; the .category-wrapper and the .category classes. The .category-wrapper will basically give the layout for the category items to sit so that you can easily add a <div> tag and use the .category class on it to quickly create category items.

I have given the left and right padding for .category-wrapper as 160px so that we can differentiate the main content and the categories. The height is set to a modest 40px so that it is not too small, and yet visible enough for people to notice it. I have also aligned the text to the center to make it more visually pleasing.

The next thing we need to do is make sure that the <div> tags inside of the .category-wrapper display horizontally instead of one below the other. To achieve this, I have used display: inline-block. But if you run the script now, you might notice that the <div> tags aren’t being centered horizontally.

To rectify this behaviour, let us take a look at the .category class itself. This is the class that we apply to individual <div> tags to create a category element. We have assigned the width property to 160px, and while this is generally not a preferable case scenario, this should explain the basic logic behind the design for this post. We shall change it to a wrap-around-the-content and adjust the width dynamically according to the category name a little later on in this series. The text-align: center is the piece of code that makes the entire categories to be centered within the .category-wrapper.

I have also defined a separate class for an active or currently selected category, and we shall see how to switch the class using JavaScript later on in the series. Running the script now, you should see this output:

Screen Shot 2015-10-17 at 12.18.36 pm

Okay, sweet! Now, let us define the .portfolio-wrapper and the .portfolio classes. These are pretty similar in function to what we tried to achieve with the .category and the .category-wrapper classes.

When we use a text-align: center with a display: inline-block, remember that it always centers content horizontally. In the .portfolio class, we are setting the overflow: hidden so that the content always sticks to the height and width that we have mentioned.

The entire completed styles.css should look like this:

This should pretty much complete the basic portfolio layout that we set out to create. Running the script now, you should see the completed result:

Screen Shot 2015-10-17 at 12.39.13 pm

In further posts in the series, we shall look at making things more dynamic and adding categories and projects dynamically. We shall create a sample CMS for doing so and add a few animations and transitions to the site as well. Subscribe to the blog for notifications on when I add the next part to this series!

The entire source code is available at Github. Clone it locally and import it into your project root if you’re too lazy to type! 😛

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s