1,047 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.






Portfolio of Ross Aitken | PSDlearning




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

1,047 Responses:

  • March 7th, 2016

    wordpress temalar? tema:

    iyiwp wordpress temalar? üreten bir firmad?r wordpress tema,wordpress kurumsal temalar?,wordpress haber temas?,wordpress dernek temas? http://www.iyiwp.com

  • March 7th, 2016

    gaziantep web tasarim:

    Gaziantep web tasar?m | Gaziantep web tasar?m firmalar? | Antep web tasar?m | Gaziantep web site tasar?m | Antep tasar?m | Gaziantep tasar?m | WordPress temalar? | WordPress tema | Haber wordpress temalar | Kurumsal WordPress Temalar? | WordPress Haber | Gaziantep Haber | Gaziantep Havaland?rma | Gaziantep firma . http://www.gazianteptasarim.com

  • March 7th, 2016

    gaziantep haber:

    Gaziantep haber,gaziantep haber tarafs?z ve do?ru haberin merkezidir gaziantep haberler http://www.gaziantephaber.info

  • March 7th, 2016

    gaziantep firma:

    Gaziantep firma tan?t?m sitesi olan gaziantepfirma firmalar?n?z?n tan?t?m?n? yapman?z içindir http://www.gaziantepfirma.com

  • March 7th, 2016

    gaziantep insaat:

    antepinsaatyapi sizlere hizmet vermektedir antep insaat yap? http://www.antepinsaatyapi.com

  • March 7th, 2016

    ücretli temalar:

    ucretli temalar?n bulundu?u bir sitedir ihtiyac?n?z olan bütün ücretli temalar? http://www.ucretlitemalar.com bulabilirsniz

  • March 11th, 2016

    shoes:

    I’m gone to tell my little brother, that he should also visit this web site on regular basis to take updated
    from newest reports.

  • March 21st, 2016

    Xtra Booster:

    Piece of writing writing is also a excitement, if you be familiar with afterward you can write
    if not it is difficult too write.

  • March 24th, 2016

    free cougars on cam:

    Everyone loves what you guys tend to be up too. This kind of clever work and reporting!
    Keep up the excellent works guys I’ve you guys
    to blogroll.

  • March 29th, 2016

    Greg Shamus:

    Your tax return can be done in about thirty minutes, http://realtorbusinesscards.info/item/pixdezines_trendy_realtor_business_cards_240475132478898040 don’t skip it You’ve likely been missing out on free I’ve found the iRS to be shockingly ok to work with, I had some money I forgot to claim twice! and they let me work out payment

  • March 30th, 2016

    Fibroids:

    Were moving into the world in which a huge selection of illnesses include been emerged by transferring time and we deep breathing between those illnesses.
    Most of them are life-taking that may easily consider anybody’s life and several of them
    associated with persistent illness that can’t acquire cured.
    But we will be going to discuss regarding the disease which is normally doesn’t cause death.

    We all are going to talk about about the disease called fibroids.
    So, what carry out you know about the fibroids? Do you feel that fibroids can get treated through natural therapy?

    Fibroids has becomes one of the most frequent a significant front side of the complete world because millions of woman experiencing this life-threatening illnesses.
    Fibroids have become one of the major health problems facing the complete
    human getting and also for the medical science.
    Fibroids as well known as uterine fibroids really are a
    benign tumor which will usually remains non-cancerous nevertheless occasionally you might develop the
    cancer. So that is very important to find the everlasting fibroids cure.
    We will speak about fibroids cure afterward; it is very
    time to understand regarding fibroids. Fibroids are
    normal harmless non-cancerous tumor all over the world.
    Generally there are 175 million from the women around the globe suffering via fibroids.
    Most of the women get Uterine Fibroids during the middle sometimes later it
    was reproductive system year of child delivery.

  • March 30th, 2016

    Nicolas:

    Superb pos however , Iwaas wondering if you could write a litte more on this subject?
    I’d be very grateful if you could ekaborate a
    little bit more. Bless you!

  • April 19th, 2016

    Musik Hits 2016:

    Aw, this was an extremely nice post. Finding the time and actual effort to generate
    a very good article… but what can I say…
    I put things off a whole lot and don’t seem to get nearly anything done.

  • April 20th, 2016

    My Blog:

    of course like your website however you need to take a look at
    the spelling on quite a few of your posts. Many of them are rife with spelling issues
    and I to find it very troublesome to tell the truth nevertheless I’ll certainly come again again.

  • April 25th, 2016

    Get More Information:

    Hi there, You’ve performed a fantastic job. I’ll definitely digg it and for my part suggest to my friends. I’m sure they’ll be benefited from this web site.

  • April 26th, 2016

    porno:

    Excellent site you have got here.. It’s difficult to find excellent
    writing like yours these days. I seriously appreciate individuals like you!
    Take care!!

  • May 2nd, 2016

    car hpi:

    I never thought I would find such an everyday topic so enthralling!

  • May 4th, 2016

    I Love You More Than I Can Say:

    In his bestselling transformational book, The Bait of Satan, John Bevere exposes a diabolical and deadly
    tactic that Satan uses to disrupt and sever one’s blessings from God.
    ) Most of us have an entire lifetime of negative beliefs, thoughts and attitudes that we carry around with us like useless baggage that we’ve simply gotten used
    to and don’t even notice anymore. Not all girls are the same, and if you treat them all the same, then you
    can end up not showing her that you love her.

  • May 6th, 2016

    Ira Andros:

    Menos mal que he encontrado esta información. Hacia mucho tiempo que llevaba buscandola. Muchas Gracias!!!

  • May 6th, 2016

    Eustolia Egerton:

    Menos mal que he encontrado esta información. Hacia mucho tiempo que llevaba buscandola. Muchas Gracias!!!

  • May 6th, 2016

    Alina Lauritsen:

    Menos mal que he encontrado esta información. Hacia mucho tiempo que llevaba buscandola. Muchas Gracias!!!

  • May 6th, 2016

    Audrea Colsch:

    Menos mal que he encontrado esta información. Hacia mucho tiempo que llevaba buscandola. Muchas Gracias!!!

  • May 13th, 2016

    report magento 2 extension:

    This is my first time visit at here and i am really pleassant to read everthing at alone place.

  • May 18th, 2016

    www.antenistasalzira.es:

    Hola!! estuve rebuscando asi como unas 5 horas en online esta tarde y no he visto nada tan increible como tu escrito.
    Me ha llamado la atencion mucho el modo que gastas al escribir creo que
    es lo que me ha llegado. A mi parecer, si muchos de los los propietarios de webs tuvieran este tipo de textos, Internet seria mucho mas practico.
    Espero que sigas asi y siga disfrutando comentarios de la fuerza que tiene
    este.

  • May 19th, 2016

    Anthony:

    Ireally like reading a post that can make men and women think.
    Also, thanks for allowing forr me to comment!

  • May 24th, 2016

    Gutscheincode:

    Please let me know if you’re looking for a author for your
    blog. You have some really good posts and I feel I would be a good asset.
    If you ever want to take some of the load off, I’d really like to
    write some content for your blog in exchange for a link
    back to mine. Please send me an email if
    interested. Cheers!

  • May 24th, 2016

    musicians friend draper:

    In addition, most North American and European universities have some types of musical ensembles that college students in arts and humanities are capable of take part in, comparable to choirs, marching bands,
    live performance bands, or orchestras.

  • May 30th, 2016

    sucos detox para emagrecer:

    Os sucos detox são cheios de vitaminas A, C e complexo B, e minerais como ferro, cálcio, magnésio,
    zinco, potássio, fibras e clorofila, Eles agem limpando
    organismo das toxinas, fornecem energia, melhoram sistema imunológico e são excelentes para a pele
    , unha e cabelos.

  • May 31st, 2016

    craft:

    It’s going to be ending of mine day, except
    before ending I am reading this fantastic paragraph to increase
    my knowledge.

  • June 2nd, 2016

    akcesoria golfowe:

    Tanie ziemia ogrodowa wroc?aw tanie ziemia ogrodowa
    pozna? cmentarna To czas rosn? niektórzy organiczne i naturalne z?bki czosnku.

  • June 2nd, 2016

    Michaela:

    Thank you a bunch for sharing this with all folks you actually recognise what yoou are speaking
    about! Bookmarked. Please also talk over with my
    web site =). We will have a hyperlink alternate arrangement between us

  • June 3rd, 2016

    ????:

    thank u

  • June 3rd, 2016

    haraj:

    thank yoi

  • June 3rd, 2016

    asos contact phone number uk:

    Simply wish to say your article is as astonishing.
    The clearness in your post iss simply nice and i could assume youu are an expert
    on this subject. Fine with your permission let me to grab your feed to keep up to date with forthcoming post.
    Thanks a million and please continue the enjoyable work.

  • June 4th, 2016

    vodafone new customer service number:

    After looking over a number of the articles on your web site, I truly appreciate
    your technique of writing a blog. I book-marked it to my bookmark website list and will be checking
    back soon. Please visit my web site as well
    and tell me your opinion.

  • June 4th, 2016

    Tradeonix:

    My partner and I absolutely love your blog and
    find many of your post’s to be exactly I’m looking
    for. Would you offer guest writers to write content for you personally?

    I wouldn’t mind publishing a post or elaborating on most of
    the subjects you write in relation to here. Again, awesome blog!

  • June 4th, 2016

    suco detox para emagrecer:

    Vou te mostrar passo a passo como as fibras vão agir
    no seu organismo para melhorar a sua saúde e ajudar no seu emagrecimento.

  • June 5th, 2016

    No Man's Sky New:

    Good info. Lucky me I ran across your blog by chance (stumbleupon).
    I have saved as a favorite for later!

  • June 13th, 2016

    Angelina veronica:

    Step by step tutorial is always helpful and easy to understand. its really so great that you have shared such nice things here.

  • June 15th, 2016

    Premium Magento 2 Extensions:

    Great post. Thanks for sharing. Will be back again to read more.

  • June 16th, 2016

    tempur:

    Aw, this was an incredibly good post. Taking a few minutes and actual effort to make a great article… but what can I
    say… I hesitate a whole lot and don’t seem to get anything done.

  • June 20th, 2016

    Margherita:

    Many SEO experts are people who can help site you to come though
    the door! Missing out on the respective web pages. That is the most part in order to do this yourself in the first page of the search engines, think
    about of the necessary ideas.

  • June 22nd, 2016

    coupon réduc:

    Pratique importante à savoir : Ces mutualisés permettent la renforcement
    du de manière plus fragile, c’est bon à savoir.
    Sur intégraux les produits Exclus Web retirables parmi magasin, profitez du escale offert grâce à cette promotion en conforama.
    La généralisation d’un tel mécanisme faciliterait tant un larme davantage
    l’économie flagrants jeux freemium, néanmoins elle pourrait
    autant profiter aux contenus distribués dans le Kiosque,
    lequel sont techniquement irrécusables achats in-app.
    Tous les indispensables nonobstant s’équiper au contraire la rentrée sont sur Boulanger !

  • July 4th, 2016

    http://noforalone.ga/index.php?do=/profile-15157/info/:

    When you ?ike offering ??ur viewpoint ?nd ?ave
    ? c?mputer, y?u m?y need to tr? performing surveys t??t ?r? online from yo?r ?ome t? ma?e
    a litt?e extra cash whil? seeking services.

  • August 4th, 2016

    pinjaman tanpa jaminan:

    Hi, everything is going fine here and ofcourse every one is sharing data,
    that’s in fact excellent, keep up writing.

  • August 11th, 2016

    ?????????:

    ????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

  • August 12th, 2016

Leave a Comment

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