Tutorial: Create A Minimal Single Page Portfolio With HTML5/CSS3

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

DesignWoop Newsletter

Sign up to the DW newsletter, occasionally we send design & development related freebies, offers and exclusive deals.

15 Comments

Comments are now closed.