Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  1. Web Design
  2. Complete Websites

ShutterPress: Design & Code A Photo Portfolio Site (Day 3: HTML/CSS)

Read Time:18 minsLanguages:

Today we're continuing the tutorial series for creating the ShutterPress design by converting it from a raw PSD to a functional website using HTML and CSS. By now, we've created the initial site design and gathered the required assets for coding. Now we're going to actually code it so it'll work in all major browsers!

Intro: Day 3, HTML/CSS Conversion

Today is all about converting our PSD design into a fully working HTML site! We'll walk you through the markup step by step, until we have a site that looks great on all major browsers. We'll be approaching this from an intermediate level of understanding, so if we move too quickly past any of the basic steps, feel free to ask any specific questions in the Comments section below.

A special shoutout goes to CodeMyConcept, who has graciously provided the code and tutorial for this day of the series!

If you missed the previous two days of this series, check them out here:

Ok, with our goals now clearly defined, let's begin!

Step 1 Basic Folder Structure and Layout

First, we start out by creating the basic folder structure for our project, which we definitely need to have to keep assets well structured and organized.

In this case, we're going to need a "css" folder with our main css file, an "images" folder and a "js" (Javascript) folder once the HTML and CSS is complete so we can add the slider, lightbox and accordion plugins. Also the index.html file in the root folder

name of tut

Then we create the Basic HTML structure of the layout with the Left and Right sections. We're going to be using a wrapper div to contain and center everything and our Left and Right containers inside, as well as a div at the top and bottom of the wrapper to help us with the rounded corners while keeping the layout flexible.

We actually prefer to create the HTML before writing any CSS, although some people do a section of HTML and CSS at the same time and then move on to the next section. We have found that doing the whole HTML first helps us think of the CSS in advance and everything else that might be needed, such as Javascript or PHP includes. All I add at this point is my CSS Reset.

Step 2 Left Menu HTML

So we start by coding the left side menu. Here, we're going to need an h1 tag and a link for our logo, and an unordered list for our menu items. We also need to nest another unordered list on the third li tag fo our submenu, and do the same with some dummy items on the second li tag just so we can see our javascript accordion working later on.

We also need to add some "opened" and "closed" classes to the links and the submenu so we can control the icons and which submenu is opened by default, and the active class to highlight the page we're currently viewing.

Now, right after that come the social icons and search field in our Left section located at the bottom. So, we'll be creating a container div for the bottom section and separate [divs] for each of the two parts inside that container.

For the Social icons we'll need a span for the text and a list for the icons, each with a class to help get the correct icon image and its respective hover state.

For the Search section, we'll create a form and divs containing the corresponding inputs to help float them and add the backgrounds and icons. Doing this rather than applying the styles directly to the inputs works a lot better to avoid cross-browsing issues with line heights and text indentation.

So here's how it looks in our browser along with the CSS Reset

Step 3 Right Content HTML

Now that we have completed our left menu, we can start coding the Right content part for the thumbnail gallery.

So first we create an unordered list of images inside links so they're click-able for our lightbox plugin, and after that we create a div to contain our previous and next buttons.

At this point, we need to start slicing the thumbnails and saving them with their corresponding name from the HTML so we can have some inline images showing.

Here's how all our HTML should be looking in Firefox

Step 4 CSS Reset and Wrapper

Now for some styling we set up some general settings for the fonts, text and links colors and background image

Then we set up the wrapper styles so we can build the base of our layout, which we begin todo by defining the width of our wrapper and center it with a margin: 0 auto;

For the top and bottom divs that we defined earlier, we set up background images and the required dimensions to create our top and bottom rounded corners, and for the wrapper we set up a background image repeated in the Y axis that will cover our content containing the division line between the Left and Right Content.

For the wrapper-bottom div we need to set up a clear:both; because once I float my Right and Left containers the wrapper is going to collapse, so we need to prevent this by clearing the floats.

Here's the result in our browser:

Step 5 Left Menu CSS

Now that we have our wrapper ready we can move on with the content: first, we set up the width of both the Right and Left containers so we can float them to the right position.

Now we start styling the navigation by creating a sprite image for the logo, buttons and icons on the design.

This particular layout doesn't seem like it's going to grow in height, but we still want to keep things flexible just in case there's a future need of adding more elements to the navigation.

So we set up the Left container with a minimum height so the left-bottom div can be absolutely positioned without having to use a huge margin to push it down, this way if new elements are added the layout will still keep its original dimensions.

We also set up the links in the navigation to be displayed as blocks so the whole area can be clickable and not just the text and add the open and close backgrounds using their respective clases and adjusting the position of our sprite.

The sub-menu with a class 'closed' is set to display: none; so only the default one is showing.

For the bottom social icons we set up the images using the respective clasess and setting up the background images using postions, this goes as well for the hover status.

And for the search part, we're basically floating the input container divs and setting the syles to them rather than to the input.

So here's what we have right now in firefox

Step 6 Right Content CSS

Here we're just floating the list items to get a grid display, we add padding, background color and borders to get a frame for each thubmnail and also add margins for separation.

Finally. we have our buttons with a container div that is centered and both links are floated.

Heres our first page finished in firefox!

Step 7 Second Page HTML

Moving on to our subpage, what we do is duplicate our index.html and name it something like subpage.html or inner.html, then we take out all the content in our #right container and start building the html needed for our slider gallery and the 3 modules below.

We need a div to hold the entire markup for my slideshow, a list of images that will be the slides and we'll also be using 3 diferent versions of the images so we can see some action later on with the jQuery Cycle plugin.

We're also setting a blank div that will be absolutely positioned on top of the images to function as a frame in case this layout ever needs to be implemented into a CMS to get some dynamic content. If this happens, we can just add any image without having to photoshop the rounded corners and shadows before hand.

And finally for the slideshow we need to create a navigation div with a couple of links for our "previous" and "next" gallery navigation.

Our last block of content has our 3 modules set in their own container, each module being a div on its own that I will float so they're next to one another. Inside I have and h2 tag for the title and a paragraph for the text.

Step 8 Second Page CSS

In this particular design, getting the frame for the slides was a bit tricky, so here's what we did:

We took the layer called "Shape 90" and dropped the fill to 0%. Then right-clicked the layer called "1720729_high", selected release clipping mask and then hid the layer.

Went back to the layer "Shape 90" and set the opacity to 50%. Right clicked the layer and made a duplicate, selected both "Shape 90" layers and merged them.

Now you can save the frame as a separate transparent .png and just add some white background in the corners so it covers the images on the back.

We set the dimensions for the modules and floated them to get them inline; after that we set up the styles along with the sprite as background image for the icons.

We set the list items from the slider to have a position: absolute; with relation to the ul so they'll collapse and look as just one image so we can get the real look of the layout, we will add the functionality after the whole thing is ready.

The previous and next buttons are also positioned absolutely so we can get them centered vertically.

After all this, we can see that the module titles have a Museo font on them which is not a web-safe font, so we're going to need to set this up with @font-face. So we ran the font through Font Squirrel (http://www.fontsquirrel.com/fontface/generator) and placed the fonts in their own fonts folder in the root of our Project and set up the CSS in our general settings using the right paths for the fonts.

So all we need to do now is set the font family to our h2 tags, and now our second page is complete.

Step 9 jQuery Magic

Now to add some functionality and animation to our Project we're going to be using two plugins: jQuery Cycle for our slideshow (http://jquery.malsup.com/cycle/ ) and prettyPhoto for our lightbox gallery ( http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ ) and then weÕll create a custom function for our menu accordion.

Make sure you download the prettyPhoto plugin and copy the necessary assets to their respective folders (javascript in the "js" folder, stylesheets to the "css" folder, etc. ), the cycle plugin can be linked from Github and jQuery can be linked from Google APIs.

We'll also create a main.js file in our JS folder where we can put our custom function and plugin configuration.

So, we reference our stylesheet in the header of the html files

We also reference our javascript files at the bottom of our document just before the closing html tag.

Now we go back to our thumbnail list and set up the links with the rel attribute for our lightbox gallery to work. We also have the links pointing at a place holder 500x500 image so we can display something on our lightbox

And finally, we go over to our main.js file and start configuring our plugins. Make sure you read the plugins' documentation so you can find out exactly how they work and what options you have to customize them.

For our accordion we need to set up a click function that checks if the link has a class of "opened" or "closed". If it's "closed", then it opens the respective submenu and collapses all others and changes the class of the links so the right icon is displayed. If the one that's being clicked has a class of "open", then it just closes it and changes the icon.

End of Day 3: Review

And now we have a 100% finished Project with working galleries and submenu animations. Enjoy!

In the final day of our tutorial series, we're going to walk you through how to create your own custom variations of this template using just a couple quick edits. From dark, grungy styles to modern metallic effects, you won't want to miss the final day!

Oh! And we mentioned this on the first day of the tutorial, but if you're interested in having a WordPress version of this template made available at ThemeForest, let me know in the comments section!

Coding Credits

The coding and tutorial for this phase of the series was all provided by CodeMyConcept, which offers a wide range of coding services for designers - from PSD>HTML conversions to Email templates and WordPress theme conversions. Check out their site at CodeMyConcept.com!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.