69 Comments

Portfolio Design Part 2

September 26, 2008

This is the second part of the portfolio design tutorial where we are creating a stylish side-scrolling gallery where we can show of our work. This part will focus on the html/CSS side of things, even though this is a Photoshop website, it’s still important to branch out occasionally and a portfolio is useful for displaying your work anyway. This is a beginner tutorial.

Introduction

If you haven’t already read it then you should check out part one of the tutorial. I’ve not gone into all the basics of html and CSS but if you know some of the basics then this is a good opportunity to put your knowledge to use. This tutorial shows how to code the site using html and CSS only which maybe isn’t that efficient but I’m trying to focus on the layout and the styling so if you know a bit of PHP then you can use that to maybe loop over the images etc. I’m working on developing a CMS for portfolios like this which I’ll release soon and so far it has functions like image upload and resize, an admin dashboard, the ability to create new pages and to add a bio, I’m still working on template integration and a few other things so check back or subscribe so you don’t miss it. You can check out the final portfolio here. And lastly this is not developed for IE, I would need to create a separate stylesheet so if anyone feels like doing that then I would be happy, else I’ll just do it myself then put it available for download. Let’s go!

Step 1

First we need to work out structure of our site; since this is a simple html/CSS only site then it won’t be complicated. We’re going to create everything on our computer then if you want to upload it to a hosting service then you can do that at the end. Since we’re only using html and CSS then you don’t have to worry about installing any programming languages or databases etc. Below I’ve shown a diagram of the structure of the site. The topmost folder, ‘.root’ is the root directory of the site, you only have to worry about this if you are going to put the site online otherwise just create a folder named portfolio then within that create the other folders using the same structure as well as the index.html and the style.css documents.

Step 2

Open up your ‘index.html’ document in a text editor; notepad will do but there are better alternatives like Notepad++. Now type or copy out the code shown below into you document then I’ll explain it.










On line one we specify the type of document, here we’ve set it to ‘Xhtml 1.0 strict’, I’m not going to go into much detail but basically ‘DOCTYPE’ will tell the browser what kind of html we are using (there are a few) and this saves the browser from guessing. Next we have our ‘html’ tag, which begins the html code. After that we have the ‘head’ of the html document which contains some meta info, the title and links to any external stylesheets, javascripts, favicon etc. Here we’ve put the title which you can change then a link to the CSS stylesheet. Lastly we’ve got the ‘body’ opening tag which specifies the start of any content that will be shown in the browser window.

Step 3

Now add this code below that.

  • Image Title

    Client
  • Image Title

    Client

First we’ve got the ‘ul’ tag which specifies the start of an unordered list the ‘class=”scroller”‘ means we can style this element in the stylesheet seperately. Next we have the ‘li’ tag which denotes the start of a list item, this has class named ‘item’ attached to it and contains an image then the title and client of that image. After that we’ve got another list item which contains the lamp. I should also point out that the ‘‘ tags are used to comment out text so we can read them but the browser cant basically. After that we’ve got exactly the same two list items for the second image so you can see how to add more images by just copying and pasting these. Whenever you open a tag you have to also close it so thats why some of the tags start with’/’.

Step 4

Now we’re going to quickly test our code but first you need to put some images in the ‘images’ folder, for each image we add to the portfolio we will have a small version and a large version; so for image 1, the large version will be named 1.jpg and you’ll have to resize it so it has a height of 522px exactly, the small version will be named s_1.jpg and will have dimensions no bigger than 480x360px (so as big as you can get it without going over these limits). Add at least two, if you add more then make sure you edit the code above. You’ll also want to download the image of the lamp here and save that in the ‘css/img’ folder. Now save the html document then open it in any browser except IE. You should get something pretty horible that resembles the image below, If not then recheck your code.

Step 5

Now either type or copy the code below into the index.html document.

Name

Bio

The ‘div’ tag denotes a division in the code and is ussually used as a container we’ve set the id as ‘bio’, the id does exactly the same as the class where it lets you refer to the element in the stylesheet, however id’s are meant to be used when you are only going to have one element with that id whereas the same class can be used multiple times. For example we are only going to have one ‘bio’ on this page but may have multiple ‘lamps’. ‘h2′ is is just a header, ‘h1′ is the largest header and ‘h6′; the smallest but they can be styled anyway. The ‘p’ tag just means paragraph, so insert you or your company’s name where I put ‘Name’ and a short bio where I’ve put ‘Bio’.

Step 6

This goes below again:






You should understand this alright and if you want to add another menu item then just copy the part labeled ‘General menu item’. The ‘br’ tag here just specifies a line break and last of all we are just closing the ‘body’ and ‘html’ tags.

Step 7

CSS code is fairly self explanatory and everything here is fairly simple so look over the code below then copy it into the style.css document. Note that I’ve put the word ‘COLOR’ as a comment beside certain parts of the code, these are the elements that I’ve colored lime green so if you want to go for a red theme then yo would change all these values to reddish hex value or just put in ‘red’. THe background property of the ‘scroller’ element refers to background.gif, this is the pattern that we used in the previous part of this tutorial, you can downlound the one that I used here then make sure you put it in the ‘img’ folder. Some parts of this stylesheet are a bit strange and hard to understand and that’s because we’re making a side-scrolling web page where all browsers automattically wrap text an make thing scroll down so there are a few parts which are edging on CSS hacks. There may be a better way to do this but I haven’t found one yet. Lastly if you’re not familiar then a ‘#’ refers to an id and a ‘.’ refers to a class.

body {
margin:0;
background:#0c0c0c;
color:#ddd;
font-family:"courier new", rockwell, serif;
font-size:12px;
}

ul{
list-style:none;
margin:0;
padding:0;
}

a{
color:#ddd;
text-decoration:none;
}

a:hover{
color:#bfda29; /*COLOR*/
}

a:active{
outline:none;
}

a:focus{
outline:none;
}

h2{
font-size:24px;
margin:5px 0 0;
color:#bfda29; /*COLOR*/
}

h3{
font-size:14px;
letter-spacing:1px;
}

.scroller {
background:url(img/background.gif);
white-space:nowrap;
position:absolute;
padding:50px 200px 30px 400px;
top:80px;
border-top:1px solid #3a3a3a;
border-bottom:1px solid #3a3a3a;
height:440px;
}

.scroller li {
display:table-cell;
}

.scroller li.lamp {
padding:0 80px;
}

.scroller li.item{
text-align:center;
}

.scroller li.item img {
border:2px solid #bfda29; /*COLOR*/
}

.scroller li.item p{
text-transform:uppercase;
letter-spacing : 5px;
font-size:12px;
color:#bfda29; /*COLOR*/
}

#bio{
width:180px;
position:absolute;
padding:50px 15px;
top:80px;
z-index:8;
}

#menu{
position:absolute;
top:80px;
width:150px;
height:522px;
background:#0c0c0c;
border-right:1px solid #3a3a3a;
border-left:1px solid #3a3a3a;
margin-left:220px;
}

#menu ul{
text-align:right;
margin:97px 15px 0 0;
}

#pagetext{
width:200px;
}

#page{
overflow:hidden;
}

Conclusion

If you experiment with the stylesheet you’ll find that it’s very simple to change things about the site like the background color, the font, and even the wallpaper pattern. You can also try substituting the lamp image for something else if you really want to personalise the portfolio. Note that here I haven’t shown how to create pages but basically you just need to copy and paste the index.html file then rename it and substitute the images for text; simple. Hope you found that helpful and feel free to ask any questions in the comments.


Similar Tutorials:

Save and Share this Post

We like people who share our posts! Del.Icio.Us - StumbleUpon - Float - Reddit


Or why not subscribe to the feed? RSS - Email

69 Responses:

  • September 26th, 2008

  • September 27th, 2008

    Grendel:

    Coding made simple!

    Good work Ross!

  • September 27th, 2008

    NaldzGraphics:

    great.a continuation of the last tuts. and now it coded.lol.thanks Ross

  • September 27th, 2008

    Callum:

    Hey , I’ve been following this tutorial but when tested live of Firefox the CSS does not apply properly. Any chance of a source code?

  • September 30th, 2008

    Dylan P:

    I Did Mine In Firefox Worked Fine For Me

    I Need Help How Can I Make It Into An Actual Site Not Just On My Computer?

  • September 30th, 2008

    brother77xx:

    im interested in ur tutorial
    i dont no how add scripting
    if u dont mind can u tell me

    im interested in graphic designing

    hope u ll contact me through e mail

    thanks a lot

  • October 1st, 2008

    Best Design Resources of September 2008 | CrazyLeaf Design Blog:

    [...] a cool portfolio – Part 1 and 2 Tutorial teaching you how to create a side-scrolling portfolio site. If you’re planning to get [...]

  • October 14th, 2008

    Hur Man Skapar Trendiga Webbplats Layouts I Photoshop | Webbrelaterat:

    [...] Se ?ven del 2 av den h?r tutorialen som ocks? inneh?ller hur man kodar in designen i HTML och CSS. [...]

  • October 16th, 2008

    MP3:

    In case you make it work in IE also hit us up with the code. Thanks for the tut.

  • December 11th, 2008

    Portfolio Design Part 1 | Web Design Abyss:

    [...] Check out Part 2 [...]

  • December 29th, 2008

    17 mega-creative side scrolling websites.:

    [...] a side scrolling page effect with Scriptaculous Creating a side scrolling page effect with MooTools Portfolio Design side scrolling Tutorial The Horizontal [...]

  • January 4th, 2009

    Craig:

    Hey Ross

    What are you using to control the width of the page? I couldn’t figure it out from your code. Does it just stretch to fit the content, much like a conventional vertical page (and how do you do this if so) or have you specified a width somewhere??

    Cheers!
    Craig

  • February 2nd, 2009

    Nathan:

    Hey, great tutorial! Although im having trouble making the coding fit together. Everything is going down the page.

  • February 5th, 2009

    @article @lbum » Blog Archive » 40 Useful Photoshop Web Layout Tutorials:

    [...] 20. Portfolio Design Part 1 and Portfolio Design Part 2 [...]

  • February 6th, 2009

    40 Useful Photoshop Web Layout Tutorials:

    [...] 20. Portfolio Design Part 1 and Portfolio Design Part 2 [...]

  • March 30th, 2009

    Ouech.net » Blog Archive » Top 10 Graphic Design Resource Websites:

    [...] only publishes amazing tutorials that range from beginner to expert. They provide coding for their web based content and have some interesting documentation on 3D [...]

  • April 25th, 2009

    Portfolio Design Part 1:

    [...] Check out Part 2 [...]

  • April 28th, 2009

    abissa:

    wash

  • April 30th, 2009

    Umesh thorat:

    its nice

  • May 27th, 2009

    40 Useful Photoshop Web Layout Tutorials | HuTruc's Blog:

    [...] 20. Portfolio Design Part 1 and Portfolio Design Part 2 [...]

  • June 3rd, 2009

    Side-Scrolling Portfolio Layout - Tutorial Collection:

    [...] View Tutorial No Comment var addthis_pub=”izwan00″; BOOKMARK This entry was posted on Thursday, June 4th, 2009 at 1:36 am and is filed under Html Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. [...]

  • June 6th, 2009

    Krob:

    Great tutorial. Got everything working nicely exept from the lightbox.
    Could you explain to me how you made your lightbox work like yours does?

  • June 14th, 2009

    40????PhotoShop?????? | ?????????·:

    [...] 20. Portfolio Design Part 1 and Portfolio Design Part 2 [...]

  • August 11th, 2009

  • August 18th, 2010

    roneybalack:

    Photoshop tutorial, from beginner to advanced. Including Photoshop text effect tutorials, photo manipulation tutorials, give you joomla templates,joomla extensions,wordPress theme,web templates,
    if you think i make a spam please remove this comment.
    You have good tutorials and i had post it on my website. http://download60s.com

  • October 12th, 2010

    Tutorials ??? ?????????? web layout ??? photoshop « Web Resources:

    [...] Portfolio Design Part 1 and Portfolio Design Part 2 [...]

  • November 9th, 2010

    WAY » 40?photoshop??????:

    [...] 20. ???? Part 1 and ???? Part 2 [...]

  • April 6th, 2011

    40 Useful Photoshop Web Layout Tutorials | 32byte:

    [...] 20. Portfolio Design Part 1 and Portfolio Design Part 2 [...]

  • June 15th, 2011

    kala billa:

    nice thanks awesome tutorial

  • August 24th, 2011

    cheap juicy couture handbags:

    You have a cool web site. It is almost the first time I encounter something like that.
    In fact I’m thinking of creating my own one.Google’s results pages are simple,
    and that’s why they work. Simple.So thanks for it.

  • September 4th, 2011

    long white wedding dresses:

    Big Thanks for the article RSS feed added

    Thank you so much for this tutorial. I really learned alot from it. Thank you again.

  • September 4th, 2011

    discount coach:

    I am glad you have posted information on this topic.I hope you will keep this blog up to date with more information

    Big Thanks for the article RSS feed added

    Thank you so much for this tutorial. I really learned alot from it. Thank you again.

  • February 29th, 2012

    best way to make money:

    This is astonishing, thanks for sharing

  • February 29th, 2012

    sobe budva:

    This is amazing…

  • February 29th, 2012

    Apartmani Becici:

    Oh, this is awesome…

  • October 11th, 2012

    cigerxwin:

    hi gya

  • October 20th, 2012

    Suzi uncel:

    wholesalebodyjewelry This is very good post with more inspiration for me and other business solution like top seo company . I got some god factor in this valuable post. I bookmarked your blog for forward to my friend .

  • April 25th, 2013

    study abroad:

    Hi, i think that i noticed you visited my site thus i came to return the prefer?.I’m trying to in finding things to improve my site!I suppose its good enough to use a few of your concepts!!

  • May 1st, 2013

    indiwin.com:

    Your own report features established helpful to me personally.

    It’s really educational and you really are clearly quite experienced in
    this field. You get opened up my face for you
    to numerous thoughts about this specific topic using intriguing,
    notable and strong content material.

  • May 7th, 2013

    How to work at home and earn more money:

    Its like you read my thoughts! You seem to grasp a lot approximately this, such as you wrote the guide in it or something. I think that you can do with some p.c. to pressure the message house a little bit, however other than that, this is magnificent blog. A fantastic read. I’ll certainly be back.

  • May 14th, 2013

    security essentials:

    My brother suggested I might like this website. He was totally right. This post truly made my day. You can not consider just how a lot time I had spent for this information! Thank you!

  • May 17th, 2013

    navigation extension:

    I delight in, cause I found exactly what I used to be taking a look for. You have ended my four day long hunt! God Bless you man. Have a nice day. Bye

  • May 24th, 2013

    Lily:

    A person essentially help to make significantly articles I’d state. That is the first time I frequented your website page and up to now? I amazed with the analysis you made to create this actual put up amazing. Excellent job!

  • June 5th, 2013

    house and building:

    Hi, Neat post. There is an issue with your web site in internet explorer, could test this? IE nonetheless is the marketplace chief and a big portion of other folks will leave out your magnificent writing because of this problem.

  • June 13th, 2013

    cornwall Magento:

    This design is wicked! You definitely know how to keep a reader
    amused. Between your wit and your videos, I was almost moved to start my own blog
    (well, almost…HaHa!) Excellent job. I really enjoyed what
    you had to say, and more than that, how you presented
    it. Too cool!

  • July 8th, 2013

    designer portfolio:

    Valuable info. Lucky me I found your website accidentally, and I am surprised why this accident did not happened earlier! I bookmarked it.

  • July 31st, 2013

    Jeremy:

    Hey there, I think your website might be having browser compatibility issues.
    When I look at your blog site in Chrome, it looks
    fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that, fantastic blog!

  • August 5th, 2013

    saffron extract:

    Hi to all, how is all, I think every one is getting more from this website, and your
    views are nice in support of new visitors.

  • August 6th, 2013

    Photoshop Web Layout Tutorials:

    [...] 20. Portfolio Design Part 1 and Portfolio Design Part 2 [...]

  • August 10th, 2013

    Web Design:

    Big Thanks for the article RSS feed added..
    Thank you so much for this tutorial. I really learned a lot from it. Thank you again.

    From
    Web Design Company Nigeria
    Vibe Web Team

  • October 23rd, 2013

    Professional Courses:

    This is very good post with more inspiration for me and other business solution like top seo company . I got some god factor in this valuable post.

    From
    Larn Edutech

  • November 5th, 2013

    web designing in urdu book free download:

    Everything is very open with a really clear explanation of the issues.
    It was truly informative. Your website is extremely helpful.
    Thank you for sharing!

  • December 26th, 2013

    photoshop:

    So, when changing the image data to a smaller resolution
    and document size we are throwing away data and the file size becomes smaller.
    But in the modern world, most of the images you see are not exactly the same as it is in real.
    Done – This saves your changes to the original file.
    Choose expand from the menu and increase the size of the selection by two pixels.
    There are books that are for the specific program listed and
    when I typed Photoshop into Amazon. The first
    thing you need to do is to bring the foreground
    exposure up to where you want it. Inclusive withinside necessities such as table with
    regard to colour relookup, LZW concretion, dithering, formulas for decreasing shade, transparencies, matte and
    also the reduction regarding aura. If you are in the market to purchase a photo editing
    software program you certainly can’t find anything better
    than Adobe’s digital editing software products.
    Adobe Photoshop Elements may well be one of the most capable and
    popular choices when it comes to image management and editing on the PC next to its big brother, Photoshop.
    While you want to completely remove PHOTOSHOP PLUGINS,
    a special program is necessary.

  • January 7th, 2014

    e cigarette starter kit:

    Every weekend i used to visit this web site, because i want enjoyment, for the reason that this this website conations in
    fact fastidious funny data too.

  • January 11th, 2014

    http://xclip.lv/2013/12/noperc-dekoderi-prieks-sava-tv:

    I’m not sure why but this site is loading very slow for me.

    Is anyone else having this issue or is it a issue on my end?
    I’ll check back later on and see if the problem still exists.

  • March 4th, 2014

    Coca Cola ??????????? ???????:

    It is always interesting to see how many different alcoholic beverages there
    are on the market from various parts of the world. The Grand Opening Celebration will be September 16, 2013, and soon thereafter the Confucius Institute at UC Davis will present public
    lectures and workshops open to the public.
    For many people this simple beverage of water and leaf contains the
    whole world.

  • March 13th, 2014

    cheapest auto insurance:

    If you have multiple cars in your family, you may be eligible for a multiple-car discount.
    keeping a good credit rating could avoid unnecessary additions
    to your own premium. People usually pay off too much thinking that
    they have to because they are taking Indiana full coverage
    auto insurance.

  • March 17th, 2014

    IM System Kenster:

    Hi there this is soewhat of off topic but I was wondering if blogs use WYSIWYG editors or if yyou haave to manually code with HTML.
    I’m tarting a blo soon but have no coding expertise soo I wqnted to gget guidance
    frlm someone with experience. Any hdlp would be greatly appreciated!

  • March 27th, 2014

    safe breast enhancement:

    A? inter?sting discussion ?s worth ?omment. I th?nk that yyou need t? write more oon t?is subject,
    it m?y noot bee ? taboo matter b?t typically folks don’t discuss ?uch subjects.
    ?? the next! Cheers!!

  • April 25th, 2014

    tvrcorin.buzznet.com:

    Likewise if you atgend tradeshows or other events, then
    be sure to focus on additional industries. For instance,
    while there are companies that can give your business the sure advantage.
    For example, if you want all your products featured in your campaign and promises to make
    it as productive as possible, every one of us wants to
    save money.Make sure that the materials are easy to produce and depression kik can easily be implemented.
    They kind of conveniently forget the part where they have to get the
    DMV list.

  • May 6th, 2014

    film cinta pertamaku:

    Hello very cool web site!! Guy .. Excellent .. Amazing ..
    I will bookmark your web site and take the feeds also?

    I’m satisfied to find so many helpful information right here within the post, we want develop extra techniques in this regard, thank you for sharing.
    . . . . .

  • May 18th, 2014

    meow meow star acres hack download:

    If you want to grow your experience simply keep visiting this web
    page and be updated with the latest news update posted here.

  • May 22nd, 2014

    make it rain love of money hack:

    What’s up, its good article about media print, we all know media is a enormous
    source of information.

  • May 22nd, 2014

    smart detox:

    Now I am going to do my breakfast, when having my breakfast coming
    over again to read further news.

  • May 24th, 2014

    ??????????????:

    If you want to obtain a great deal from this paragraph then you have to apply these methods to your
    won web site.

  • July 5th, 2014

    http://albertalderxk.pen.io/:

    By recognizing the behavioor google + of human beings.
    A lot of fun tangs. They lkke to keep pertaining to their work environment.

  • July 10th, 2014

    sinospsis film terbaru:

    What’s up, this weekend is fastidious in favor of me,
    because this occasion i am reading this fantastic educational paragraph
    here at my house.

  • August 21st, 2014

    easy-reglement.com:

    However, this scene changed when more programmers became aware of virus programming and started building viruses that manipulated and destroyed data on infected computers.
    A VPN creates an encrypted connection to a third-party server, and all your Internet traffic is routed through that server.
    For more information visit: security gives you the protection from all kinds of worms,
    viruses and other problems.

  • August 26th, 2014

    me:

    When you have a drying drum which is this size you are able to easily fit countless items or extremely
    large items, for example comforters, with ease. While
    it can be possible to repair some from the mechanical problems yourself, it is definitely an involved process to
    disassemble to washer, particularly the agitator portion. Whirlpool cabrio dryer owners manual If the
    washer went kaput within the middle of the wash cycle,
    you’re going to get to rinse the clothes in the sink or within the tub.

    It offers various benefits in terms of marina dock
    and boats and cleans these in the fast and effective manner.
    They’re fairly inexpensive, but you are going to still need to complete your homework,
    to make a decision which model works best for that jobs you have around the house.

Leave a Comment

©PSDlearning 2014. This site is brilliantly hosted by Mediatemple.