web design Designing your own portfolio website with html & css

[Jelmer]

Why do I need a portfolio site?

If you ever want to get a job in the CG industry people will need to know about you (and your work) before they will hire you, and a proffesional looking portfolio is a great way to get to know you! You might already have a simple site, but looks are important, so it's a good idea to invest some time in making a great looking site, which will attract more jobs, or at least increase the chances of getting one. So what are you waiting for, don't miss your chance of a (better) job! let's get started...



Where do I start?

Web design isn't as complicated as 3ds max, that's my opinion at least, all you need is a simple text editing application, and photoshop or a similar application for the graphics. So which application should you use? This is quite a personal choice, if you have money to spend and code a lot you can buy specialised software, some examples: Coffeecup, Coda (mac) but usually I stick with notepad (standard on windows).

So, before I start designing I usually draw out some ideas, mainly concerning the layout, so sit down take a piece of paper and pencil and get started, this doesn't need to look nice, it's just a general guideline for your site design, you might want to add sizes/dimensions here as well, so what size should you use?

Layout and Dimensions

First of all, you can use a fluid or fixed layout (percentage vs pixels), or even a combination of both (eg. a fixed sidebar of 200 px and a fluid main content area). I prefer pixels because they're easier to control and will make your layout more consistent. Of course, you can do whatever you want here, but in this tutorial we'll use a fixed layout, if you want to know more about the fixed vs fluid debate take a look at this article.

So, we've decided to go for a fixed layout, now we need to determine what size we want, the main thing to keep in mind here is the screen resolution of your visitors, you can get a impression of that via free stat services like google analytics (also very useful to see where your traffic is coming from). So, let's say the minimum resolution to view our site (properly) needs to be 800x600 pixels, ok ok, some people might still have 640x480 but they'll just have to live with a horizontal scrollbar, anyway, most designers/cg artists have large monitors so this is no big issue. so, the width can be 800 max, but remember that there might be a little space used by the browser window and scrollbar, so to keep things safe we use a 700 px wide layout, which also leaves some space on the side for a nice background.

We can divide the 700 pixels into parts as well, the header will be 700 px wide, the side bar 200px and the main content area 500 px, finally the footer is 700px again. So we've decided on our layout, let's get started.

Step 1: The basic HTML layout

We'll dive right in by doing the layout, which is pretty simple, and controlled by CSS (cascading style sheets) w3schools has some good basic tutorials if you've never heard of CSS before.

First a little bit of web design history . Ages ago people used to design websites with tables, but tables are not meant for that, they're meant to show data, so they don't work very well. They're larger to load, are not very semantic (correct code, better for SEO (search engine optimization)) and make your code complicated to edit.

Tip: Try to keep things simple, fewer and less code is (almost) always better, lighter and better looking.

So, you might ask yourself, how will this ever display the page I want? With all the settings I want (width, position, etc.), well, right now it won't, but this is were CSS comes in.

Every has an "id" property, which we can define in the css part of our file, id's can be used only once, so if you want to apply the same css to multiple parts of content, use classes instead.

HTML Code:

class="my_class"

Even though our layout might be missing, our content is displayed, it's even in order of importance, which is impossible with table layouts. For example, after the header, we see the main content, instead of the sidebar first, remember, a search engine doesn't care about layout, it will "see" the page like this, so that means our page is quite well optimized for SEO so far, but we're far from done of course..

Doctype

Doctype is another important part of html you need to create proper, standards compliant pages, they are quite simple, you just need to make sure you have the right doctype you need, and put that on the first line of your document, this useful article explains doctype well.

Step 2: Cascading Style Sheets (css)

We're done with the html so far, let's continue with CSS. This is where the fun begins, right now our site looks really, really bad, and in a few minutes it will look... ok, not great yet, but a lot better.

CSS is the modern way to style your pages, it's better because it divides content and design, is more efficient and also easier to read (so anybody who needs to change your design will be able to do so easily, which is relevant if you work in a design company.) There are probably many other reasons, but that's not the point of the tutorial.

The basic font settings:

HTML Code:

body{
    font: 80% arial,sans-serif; 
    text-align:center; 
    color: #000;
}

body refers to the html tag, so that means our entire page (since everything is inside that body tag) will be affected by the CSS we produce between the { parentheses }.

font sets the font size and type, you can choose other fonts that you like, but be careful, few of them are supported by all browsers, here's a useful list(add link here) if you're wondering if your font is recommended.

You should be aware of the fact that CSS uses a different syntax than html, for instance, ":" is used instead of "=" and each line ends with a line break: ";".

we use % fonts here, because they are scalable in all modern browsers, pixels are not recommended, they do not scale in Internet explorer, readers with bad eyes won't be happy.. Later on we can adjust certain headings by using 'em' sizing, 1 em is the standard size, for a larger header we could use 1.4em for instance.

Also notice we have specified 2 fonts, arial and sans-serif, so our first choice is arial, but if for whatever reason it's not available on someone's browser/computer our site will automatically fall back to 'sans-serif', which is a standard font, so it should be available for anybody.

text-align: center is used here to align our content container, so does not really affect the text, but is useful to align your entire page.

color: simply sets the color of our font, #000 is a hexadecimal value for black, hexa what? here's a useful list of hex colors, or you can also find any color's hex value with your photoshop color picker.

If you see some CSS and don't know what it means, you can find out a lot by browsing useful sites listed here:

• A list apart
• w3schools
• gotAPI

HTML Code:

p{line-height:150%}

p affects every which stands for paragraph, the line-height of 150% adds more space between every line, try to experiment with this, more line height will give your site a professional, clean look and is easier to read.

You should understand the basics of css by now, if not, just have a look at the links above, especially w3schools is useful for beginners, gotAPI is the best reference (with search function) and A list Apart is more advanced, but of high quality.

Tip: add your css as an external stylesheet, this will make side wide changes easier since you only need to edit one file, it's better for SEO and performance as well. This is the code you need, link it to your stylesheet (simple text document with css declarations in it, saved as .css)

Be sure to rename "portfolio_style.css" to your stylesheet's name, if it's online you can also include full (http://example.com/stylesheet.css) urls.

Step 3: Changing style with CSS

What follows is the rest of the css which determines the look of our page, the layout will be covered after this part. some /* comments */ have been added to explain the css down here:

HTML Code:

h1,h2,h3,h4 {
margin:        15px;
color:         #8b5d26; 
font:         1.3em trebuchet ms, arial,sans-serif;
}

p{line-height:150%}  
div#content ul{margin:10px 10px 10px 30px} 
.padding{padding:15px} 
img {margin:5px} 
div#sidebar p {
text-align:     justify;
margin:        15px;
}

/* URL style */
a:link {color: #5d9e9b; text-decoration: none; border-bottom: 1px dotted #c8dbbf;}
a:active {color: #69bfde; text-decoration: underline}
a:visited {color: #393a3d; text-decoration: none; border-bottom: 1px dotted #c8dbbf;}
a:hover {color: ##5d9e9b; text-decoration: none; border-bottom: 1px dotted #5d9e9b;}

Tip: Organize your stylesheet by separating parts with comments, for instance I use /* main navigation */ as a comment before the corresponding css, this will make changes done later on much easier for you or somebody else.

Step 4: Setting up the Layout CSS

HTML Code:

/* Layout style */
div#header {background: url(top_bg.jpg) no-repeat top right}
div#footer{background:url("footer_bg.gif") no-repeat left top; color: #FFF; height:50px;}
div#footer p{margin:0;padding:5px 10px}
div#content{border-left: 2px solid #e0fceb; border-right: 2px solid #e0fceb;}
div#container{background: url(side_border_bg.gif) repeat-y top left;}

/* Layout */
div#header {height: 227px;}
div#container{text-align: left; width: 700px; margin: 10px auto;}
div#content{float:right; width:496px;}
div#sidebar{float:left;width:200px}
div#extra{float:left;clear:left;width:198px}
div#footer{clear:both;width:100%}

Here we have separated the layout style, and layout itself, by style we mean colours and background images for instance, layout determines the size and position of elements, this makes editing easier later on. The Header Image is a simple render done with 3ds max, set as a background iamge via css, it's 227px high so we also set that as the header height. The footer also requires a simple background images with a rounded corner, clear:both is used so we won't have any problems with the floated elements above.

Furthermore, we've changed some settings slightly, div#content is now 496 wide, because we've added 2px borders as well (496+2+2 = 500) if you're layout is broken up, make sure it fits in it's parent element - div#container in this particular case - Remember, padding and margin also add to the overall width. It's also important to set the margin: auto property for the container, this centers the content on our page. float right and left is pretty self explanatory, if you want to learn more about it read this extensive tutorial about the float property.


step 5: Designing the navigation or menu

HTML Code:

/* menu style */

div#nav {
float:        right;
}

div#nav li {
float:         left;
list-style-type: none;
}

div#nav li a {
margin:     10px 4px 10px 0;
padding:    5px 8px;
font:         bold 1em trebuchet ms, arial, sans-serif;
display:     block;
background:    #92b681;
color:        #fff;
border:        none;
}

div#nav li a:hover {
background:     #fff;
color:        #594d24;
border:        none;
}

body#home #nav-home a {text-decoration: underline}
body#news #nav-news a {text-decoration: underline}
body#gallery #nav-gallery a {text-decoration: underline}
body#home #nav-home a {text-decoration: underline}
body#home #nav-home a {text-decoration: underline}

This is another very important element of your portfolio, a simple yet elegant horizontal menu, scalable, and with a background hover applied, another important feature is the ability underline the current page!

the html part is really simple:

HTML Code:

    
      Home
      News
      Gallery
      About
      Contact
    

Let's have a look at the basic principles of this menu which also includes the header. First of all we have the #nav div which positions the menu properly by floating it to the right. then we use an ul tag (unordered list) with(list item) tags, without css this will show up as a regular, vertical list:

• We can easily adjust the light code into a menu with css, we float the li's to put them onto a single line (horizontally) and then get rid of the list style type "bullet" look. Then we style the links by adding padding, margin colors and :hover settings.
  
  Finally we add another important function of the menu, it shows us which page we're browsing, a simple, convenient and user friendly technique you should always try to apply on your site. So how does this work? First of all we add a different id to the of every page, 'home' on this first page, then we use body#home to make sure this style is only used when the specific id is used, then we select the #nav-home id a and underline it, simple but effective.
  
  Hopefully you've got a basic working layout and site now, if not please check it with the final html code and css to see what's wrong. It's only one page, we'll cover more soon, but most of the work is done. All we need to now is adjust the main content of each page, if you have any comments on the tutorial so far or encounter problems, do post them below, thanks!
  
  The final HTML code without content in .txt format
  
  View and download the final CSS file
  
  Step 5: Graphics design with photoshop
  
  We've kept our site as simple and light as possible, which has many advantages, visitors won't leave your site because it loads faster, is better compatible and simple designs done right look a lot better at the same time. Still, without any graphics the site is just too plain, certainly because this is supposed to be a portfolio of a Graphics designer, so here are basic steps to create the graphics, all made with photoshop. Obviously, you can get really creative here, have fun .
  
  Step 1:
  Create a new document, 700 px wide, and 50 px high, although you might want to change the height value, depending on the design of your footer.
  
  
  
  Step 2:
  Pick the rounded rectangle tool (hidden under rectangle tool, bottom right of your tools palette), set the radius to 10px and then create a rectangle filling the entire canvas, like in the image below. Then go to 'paths', right click 'work path' and make selection.
  
  
  
  Step 3:
  use the rectangular marque tool (top left of tools palette) to get rid of the rounded edges at the top, or leave them if you prefer that, to finish it off pick a colour and press 'ctrl-f' to fill your selection.
  
  
  
  
  Step 4:
  
  This final simple step is very important, instead of using 'file>save' you should always optimize your images with 'file>save for web' for decreased file size, and better compatibility at the same time.
  
  Choosing a file format
  
  jpg: good for photos and complex images, obvious decrease in quality when set to 'medium', so for important images like logos, use 'high' settings, compression is pretty good.
  
  gif: Excellent compression and quality for plain images like our footer, not recommended for complex images like 3d renders and photos, adjust file size and quality by changing the number of colours. Also supports (Limited quality) transparency.
  
  png: Warning: limited browser support, IE seems to screw up (as always ), has better quality transparency compared to gif, but since it's not well supported be careful when using it for websites.
  
  So obviously we pick .gif in this case, we don't need transparency so won't suffer aliasing, select 16 colours to get rid of any aliasing near the rounded corners, and we're done.
  
  
  If you want to have a look at the final source you can download a package with all the files, or download the page via your browser at portfolio.enjoycg.com
  
  If you enjoyed this tutorial, please share it, digg it, stumble it, mail it too a friend or just add a comment here. If you spot any problems or don't agree with points made during this tutorial also please post a comment below.

[CU441ES]

Awesomeness!!! Another great tut jelmer!

[the programmer]

good job

i was working for it and i was missing some steps but know i got every thing

thanks

[Shay]

thanks a lot but oh no,,,,I cant!!!!

[Jelmer]

Thanks for the comments so far, it's not 100% complete yet, I will be adding some bits and pieces, the design you see is final though, so is the code, some small parts aren't explained in the tutorial yet, but i'm working on that.

[mukhtar]

hi..
very very thanks i am looking for this one......

thanks

[robinmitra1]

wow...nice work man..im a programmer myself and loved the way u put that tute...real easy for newbies to follow...cheers...

[ExTaZ]

having a bit of problem does it make any diffrence where you put it?

I can upload my html file nad css so you can see if there is any problem

ScoutiiStar Profile, ScoutiiStar Details - FileFront.com

and download the 2 files

[ExTaZ]

i got a bit longer now and i would like to know how to write when you whant to go to like gallery...

[Marlboroman]

Cool, its been a long time since ive been doin the maxin and such, but i have recently wanted to get into css and html for just this reason, you are once again as usual a star m8, i look forward to completing this tut at some point, just as soon as ive completed some of the modelling ones first