Get our posts emailed to you with our monthly newsletter, subscribe here.

This tutorial is the second installment of how to create a minimal single page portfolio using HTML5 and CSS3, take a look at part one where I initially designed the single page portfolio concept. In this tutorial I will walk you through the basic front-end build and what resources I used to rapidly build the page.

The Design

Resources Used

Titillium Text – Using @font-face for heading typography.

Form Producer – Used for basic form demo.

Apple iOS Linen Texture – Used for the background texture.

Jribbble – A jQuery plugin to pull in some dribbble shots.

HTML5 Boilerplate – A HTML5 framework to build our design on.

960 Grid System – A CSS framework to provide pixel perfect from design to code.

Basic HTML5 Layout

Our basic layout section starts with the HTML5 doctype and the usual stuff such as the title/meta tags and the CSS links to two stylesheets. One is the 960 grid frame work which will allow me to quickly and easily code up the site from my previous design, the other stylesheet is where I place the styles for the page. I have kept these separate for demonstration purposes. I lastly use the HTML5 Autocorrect form attribute in the message text area, this is again useful for mobile users who may have fat or clumsy fingers ;).

[php]

<!doctype html>
<head>
<meta charset="utf-8">
<title>David Martin – A Web Designer &amp; Developer – Tunbridge Wells, Kent.</title>
<meta name="description" content="David Martin – Web Design Tunbridge Wells">
<meta name="author" content="David Martin @webadelic">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/grid/960_12_col.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>

[/php]

Header

The page concept is pretty simply so semantically dividing the sections up is easy. I use HTML5 elements such as <header> to markup the intro block as this is the introduction to the section and <hrgroup> to markup the intro text for the current section.

[php] <div id="header-line"></div>

<div class="container_12">

<header>

<div class="grid_3 push_1">

<img src="img/webadelic-logo.png" alt="Webadelic – Web Design Tunbridge Wells" border="0" width="140" height="94" />

</div>

<hgroup class="grid_7 push_1 intro">

<h1>Hello! My name is David!</h1>

<h2>A web developer &amp; designer from Tunbridge Wells, UK.</h2>

<hgroup>

</header>

<div class="clear"></div>

[/php]

Body

I group the body contents of the page using the HTML5 elements <section> and <article>. I use the <section> element to group the small ‘About’ left column and the right side ‘Contact’ form.

Notice I also nest both the left and right columns using the <article> element. I used the <article> element to markup the left and right content areas as two separate pieces of content inside the main <section> element.

When constructing the form you can see I was able to use some new HTML5 form elements to improve the form functionality. Notice for the text inputs I use the Placeholder attribute, this displays text in the field until the field is focused.

A useful HTML5 form attribute is Auto capitalization, this is useful for mobile users who may not want their phones to add capital letters to their email fields.

I lastly used the HTML5 form attribute Autocorrect on the message textarea to help mobile users who may have clumsy fingers ;).

There are more HTML5 form elements you could add to this form, but for now this is simply a demo.  I would recommend also using the Required attribute to improve your form validation. Have a play around and enjoy!

The Dribbble shot feed is pulled in using the jQuery plugin, for now I simply add <ul id=”feed”></ul> to the page, this is where the feed will be pulled in. There are some configuration options you will need to amend in the plugin, you can read up on this here or simply view the demo.

[php]

<div id="horizontal-line-full" class="push_1"></div>

<div id="main" role="main" class="grid_10 push_1">
<section>

<article class="grid_4 about">

<header>

<h3>About</h3>

</header>

<p>Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.</p>

<p>Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.</p>

<p>Maurizzle tellivizzle nibh bling bling for sure. Ghetto izzle sheezy. Pellentesque yo mamma rhoncus owned. Gangster hac nizzle platea dictumst.</p>

</article>

</section>

<div class="grid_2 column"></div>

<section>

<article class="grid_4 contact">

<header>

<h3>Contact</h3>

</header>

<section class="contact-me">

<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Your name" autocapitalize="on" autocorrect="on" />

<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="Your email" autocapitalize="off" autocorrect="on" />

<label for="website">Message</label>
<textarea name="message" id="message" placeholder="Your message" autocorrect="on"></textarea>

<button class="button" name="submit" id="submit">Send</button>

</section>

</form>

</article>

</section>

<section>

<article class="grid_10 projects">

<header>

<h3>Projects</h3>

</header>

<p>You can check out some of the designs I am working on which are being fed from my <a href="http://dribbble.com/webadelic" rel="nofollow">Dribbble feed</a>, one day when I have some spare time I’ll develop this site a little further to actually show some full project details…<em>I promise</em>.</p>

<ul id="feed"></ul>

</article>

</section>

[/php]

Footer

I can once again use more HTML5 elements to semantically divide the footer section up,  I first wrap the entire footer with the <footer> attribute.

The <footer> attribute can be used at the end of documents and sections and typically are used to provide the author information or other miscellaneous text.

Inside the <footer> attribute I divide the left and right links into two separate sections using <section>, this allows me to separate the grouping of content in more semantic way.

[php]

<footer class="grid_10 footer">

<section id="social-procrastination" class="grid_6">

<ul>
<li id="twitter">
<a href="http://twitter.com/#!webadelic" rel="nofollow" title="David Martin (@webadelic) on Twitter">
<span>David Martin (@webadelic) on Twitter</span>
</a>
</li>
<li id="gplus">
<a href="https://plus.google.com/108725634593324907312/posts" rel="nofollow">
<span>David Martin (@webadelic) on Google Plus</span>
</a>
</li>
<li id="dribbble">
<a href="http://dribbble.com/webadelic" rel="nofollow">
<span>David Martin (@webadelic) on Dribbble</span>
</a>
</li>
</ul>

</section>

<section id="footer-email" class="grid_2 push_2">

<p><a href="mailto:david@webadelic.co.uk" rel="nofollow">david@webadelic.co.uk</a></p>

</section>

</footer>

</div> <!– end of #container –>

</body>
</html>

[/php]

Using CSS

Now we have created the basic HTML5 layout, we are ready to add the CSS. Here I will walk you through a few basics of the CSS I used to code up the design. To see the full CSS I used to achieve the exact layout view the demo and have a snoop around.

I use the 960.gs grid with some custom styles in order to match the site with the design, if you take a look at the source code you will see my references to the grid columns in the code, a good write up on using the 960 grid is available from Six Revisions. If you would like to explore the CSS code better, its all available in the demo.

Before I add the CSS:

Header

First off I am setting the background texture to the downloaded and modified Apple iOS Linen Texture. Next I am setting the body fonts, I want the fonts to show as Helvetica Neue if possible but if this font is not available I will roll back to either Helvetica or Arial respectively.

[php] body {
margin: 0;
background-image: url(../img/bg.png);
font: 11px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
line-height: 1.231;
}
[/php]

Heading Fonts

As stated I wanted to use Titillium text on the heading fonts, as the font is available in various different formats and is font-face compatible I can use @font-face. I download the fonts and place them in a folder in the site directory and call them using the below @font-face code:

[php]</pre>
<pre id="line1">h1 {font: 35px/15px ‘TitilliumText22LXBold’, Arial, sans-serif;letter-spacing: 2px;}
h2 {font: 20px/15px ‘TitilliumText22LThin’, Arial, sans-serif;letter-spacing: 1px; color:#8a8989;}
h3 {font: 28px/15px ‘TitilliumText22LThin’, Arial, sans-serif;letter-spacing: 1px;}
p{color:#8a8989;}

@font-face {
font-family: ‘TitilliumText22LThin’;
src: url(‘../fonts/TitilliumText22L001-webfont.eot’);
src: url(‘../fonts/TitilliumText22L001-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/TitilliumText22L001-webfont.woff’) format(‘woff’),
url(‘../fonts/TitilliumText22L001-webfont.ttf’) format(‘truetype’),
url(‘../fonts/TitilliumText22L001-webfont.svg#TitilliumText22LThin’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘TitilliumText22LRegular’;
src: url(‘../fonts/TitilliumText22L003-webfont.eot’);
src: url(‘../fonts/TitilliumText22L003-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/TitilliumText22L003-webfont.woff’) format(‘woff’),
url(‘../fonts/TitilliumText22L003-webfont.ttf’) format(‘truetype’),
url(‘../fonts/TitilliumText22L003-webfont.svg#TitilliumText22LRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘TitilliumText22LBold’;
src: url(‘../fonts/TitilliumText22L005-webfont.eot’);
src: url(‘../fonts/TitilliumText22L005-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/TitilliumText22L005-webfont.woff’) format(‘woff’),
url(‘../fonts/TitilliumText22L005-webfont.ttf’) format(‘truetype’),
url(‘../fonts/TitilliumText22L005-webfont.svg#TitilliumText22LBold’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

@font-face {
font-family: ‘TitilliumText22LXBold’;
src: url(‘../fonts/TitilliumText22L006-webfont.eot’);
src: url(‘../fonts/TitilliumText22L006-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘../fonts/TitilliumText22L006-webfont.woff’) format(‘woff’),
url(‘../fonts/TitilliumText22L006-webfont.ttf’) format(‘truetype’),
url(‘../fonts/TitilliumText22L006-webfont.svg#TitilliumText22LXBold’) format(‘svg’);
font-weight: normal;
font-style: normal;

}
[/php]

Form

Styling the form allows me to use some nice CSS3 effects to match up with the design without having to use images.

I use the following CSS3 to achieve an indented effect on the form inputs, I think this is a pleasant and simple way of making the form inputs. I achieve the indented textfield using the CSS box shadow technique and using a -1px black line:  0 -1px 0 0px which has its opacity set to 0.1: rgba(0,0,0,0.1). See below:

[php] -moz-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
[/php]

The Complete Form CSS

[php]</pre>
<pre id="line1">/* Contact Form */

label {
margin: 0 0 10px 0;
display: block;
font-weight: normal;
}

.error{color:red;}

#form_producer input[type="text"], .contact-me input[type="email"] {
float:left;
clear:both;
margin:0 0 15px 0;
padding:3px 6px;
width:300px;
height:24px;
border:none;
color:#8a8989;
background:#f9f9f9;
-moz-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
}

#form_producer textarea{
float:left;
clear:both;
margin:0 0 15px 0;
padding:3px;
width:305px;
height:90px;
border:none;
color:#8a8989;
background:#f9f9f9;
-moz-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
box-shadow: 0 -1px 0 0px rgba(0,0,0,0.1);
}

.button{
float:left;
clear:both;
background-color:#ebe9e9;
border:solid 1px #ebe9e9;
width:140px;
height:30px;
text-transform:uppercase;
font-size: 0.9em;
letter-spacing:1px;
background-image: linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
background-image: -o-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
background-image: -moz-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
background-image: -webkit-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);
background-image: -ms-linear-gradient(top, rgb(241,241,241) 50%, rgb(235,233,233) 50%);

background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.5, rgb(241,241,241)),
color-stop(0.5, rgb(235,233,233))
);
}

.button:hover{
opacity: 0.8;
}

.button:active{
opacity: 0.4;
}
[/php]

The Dribbble Feed

The dribbble shot feed is styled using some simple CSS to remove the list bullets and to get each image to sit next to the next correctly. See below:

[php] ul#feed{
list-style-type: none;
margin: 60px 0;
padding: 0;
}

#feed li{
float: left;
margin: 0 45px 45px 0;
padding:5px;
width: 200px;
height: 150px;
border: solid 1px #dedbdb;
background: #fff;
}
[/php]

Footer

To give the social icons a little hover effect, we can use the CSS3 opacity attribute. When a user hovers over, the opacity is changed to o.8.

[php]

#twitter a:hover, #gplus a:hover, #dribbble a:hover{
opacity:0.8;
}
[/php]

Demo: View the demo – Single Page HTML5 Portfolio

Posted by David Martin

David Martin is a Web Developer & Designer from the UK with a love for minimal design, coffee and WordPress - catch up with David on Twitter.

15 Comments

  1. Awesome tutorial on HTML5/css3 portfolio, just adding one more to it. A simple CSS3 portfolio template using no jquery

    [www.webstutorial.com/css3-portfolio-menu/css3]

  2. Dear David,
    Thanks for responding to my call for assistance.
    I copied and pasted my html and css page but it didn’t reproduce the mark up. I have 2 screen shots but I don’t see a way to attach them to this post so I’ll look for an email address.

    Kind regards
    Bill Watters

    1. You will need to post your code so we can see what is happening. You can copy it into here (http://snippi.com/) and provide a link to us.

  3. Hello, I’d be grateful if anyone can point out to me why my stylesheet isn’t linking? I’ve been everywhere on the web without success.
    My site is named Bill Watters Inc (which will eventually become http://www.BillWattersInc.co.uk) and this is the index.html page:

    Bill Watters Inc

    Creative design for print, packaging and websites
    Bill Watters

    I am extremely passionate about good design.
    In my opinion the very best design results from research and rational thinking
    that combines function and useability with appearance

    About me

    Mob: 07729904080. http://www.billwattersinc.co.uk. info@billwattersinc.co.uk.

    The stylesheet is named billwattersinc.css
    all I’ve done to it is enter:
    body {
    background-color:#ffffcc;
    }

    1. Can you post a link to your page in question so we can see your code?

      Thanks.

  4. Hi, This looks like the most useful explanation of creating a single page website that I’ve seen so far. I am struggling to code my portfolio site using CoffeeCup as my text editor as if get a problem they refer me back to W3C which appears to me to be a bit outdated – IMO.
    From this tutorial I realised that the css3 info didn’t have to be on a separate page.
    It’s been driving me crazy trying to get the index.html to recognise the CSS stylesheet that I put on a separate page. But I’ll probably get round to that later as well as all the other stuff like jquery etc.
    I’d like a tutorial on positioning and colouring side-panels; incidentally is it best practice to use the US spelling in HTML5?

  5. I would love to see a mobile version of this simple template! Nice work!

  6. can you put a Zip with the files, please??

  7. I am exicited about HTML5 but Flash can do all these things html5 can do in a better way.Creating slideshow in HTML5! wow! what, flash did that 10 years ago! It is very easy to create a flash animation, for example a ball bouncing in flash professional in less than am minute. Javascript is a mess when compared to AS3.

    1. The point is the HTML5 + Javascript is faster and can be accessed via screenreaders. Well, not faster – almost instantaneous. That’s why it’s a big improvement over the old, slow Flash videos which were inaccessible to anyone who uses the web in a different way.

  8. nice work!!!

  9. Great stuff and many thanks. Btw you have a LOVELY design and layout. Love the fabrics, fanatic on that one :)

  10. This tutorial is really gonna very useful for the designer. thanks for sharing :)

  11. really enjoyed it! keep up the awesome work

  12. really useful and information tutorial. thanks for sharing

Comments are closed.