There are an infinite number of ways to start coding a fresh website, but the HTML5 Boilerplate is one of the best. It starts you out with all the HTML, CSS, and JavaScript, that you’ll most likely need to start any website. Exactly one year since the initial release, version 2.0 is now available with a ton of great updates!

Head over to http://html5boilerplate.com/ to read release notes and download the latest and greatest version.

Go to Source

Writing a nifty Chrome Extension honestly isn’t as difficult as you might think. In this tutorial, I’m going to walk you through how I took an API offered by a great domain-name search service, Domai.nr, and created a Chrome extension for them, simply using their API.

Step 00: What We’ll be Creating Today

In this tutorial, I’ll walk you through how I made the Domai.nr Chrome Extension, using simple HTML, CSS, and jQuery. The typical workflow of this extension can be broken down like so:

1. Click the icon
2. Search for a domain
3. Find one that’s available, and click it
4. Purchase it using one of the links on the extension

So, it’s not revolutionary or ground-breaking, but when you’re looking for domains fairly frequently (as I’m sure many of you are), it does actually serve a purpose. I wanted to take this opportunity to not only show you how I made this specific extension, but also, more generally, how to make an extension for the Chrome web browser.

Step 01: What’s in a Chrome Extension

There are a few different kinds of chrome extensions, but we’ll be making a browser action extension that shows a popup when clicked. Google has a great overview of what is in each extension. Essentially, what you need to know is that each extension is a directory of files, much like a website. I’ll be discussing more about each of these files later on in the tutorial, but every extension’s directory contains the following files, and this is taken directly from Google:

• A manifest.json file
• One or more HTML files (unless the extension is a theme)
• Optional: One or more Javascript files
• Optional: Any other files your extension needs, i.e. image files

More on the JSON File

The manifest file provides mostly meta information about the extension. This is where you define things like the name, version, icon, and even permissions.

Step 02: Taking a Look at Domai.nr’s API

Domai.nr’s API can be found here. We’re using the JSON API, which has two methods: Search and Info. It’s called the JSON API because, well, it returns JSON. Both methods respond to a GET request, so we can just concatenate whatever we need to in our request URL, and the rest will fall into place.

Step 03: Digging into the manifest.json File

As you can see, a Chrome extension really isn’t much more than a basic website. The structure we’ll be using is as follows:

• domainr.html – this is equivalent to the index.html page in most websites. I prefer to name the main HTML file the same as the extension itself – that’s just a personal preference.
• icon.png – this 128px by 128px icon is what the user sees in the toolbar. When they click on this icon, it will fire our extension.
• images/ – this directory holds all of the images we will be using, just like a traditional website. I contacted the creators of Domai.nr and got permission to use all of the images they have on their website, just scaled down. So, I just used Chrome’s Web Inspector and downloaded copies of them, and scaled them accordingly.
• manifest.json – the manifest.json file, like explained above, is where we define many properties about our extension. It’s required, but is pretty simple to create.
• script.js – this JavaScript file is where all of our jQuery is held. We will reference it in the domainr.html file, and it will control all of the logic in our extension.
• style.css – finally, here is our stylesheet file. We’ll obviously also reference this in the domainr.html file.

Our manifest.json File

Time to dig into our code and get started! Our manifest.json file is fairly simple. To see a more detailed summary of all of the fields supported in a manifest file, check this out. You can find all of the code used in our manifest.json file below:

{
  "name"            :  "Domai.nr Search",  // the name of the extension
  "version"         :  "1.0"   			   ,   // version number
  "description"     :  "Give your domains a happy ending.", // description used in the Chrome Webstore
  "browser_action"  :  {
      "default_icon"   :  "icon.png",      // specifies the default icon
      "popup"          :  "domainr.html"   // the page to show when the icon is clicked
  },
  "permissions": [
      "http://domai.nr",   // we give the extension permission to access data on these sites.
      "http://domai.nr/*"  // we suffix it with a *, so /api is accessible
  ]
}

As you can tell by the comments, it is fairly straightforward. The permissions section is extremely important in our case. Otherwise we’ll get an XHR error because the extension can’t access domains you don’t give it permission to. Hence, the importance of the “permissions” section.

Step 04: Getting Started

For our extension, there will basically be three parts:

• The <form> element, with an <input>, which is where the user types in the query they’re looking for. This is what this step of the tutorial will focus on.
• A <ul> with several <li> elements inside of it, that gets populated based on their request in part 1.
• Information regarding the option they select, based on the list items presented to them in part 2.

So, I think it’s fair to say that the extension gains complexity as the user progresses through those parts, or stages described above. With that being said, let’s dig into the HTML I used to structure this.

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <title>Domai.nr Chrome Extension</title>
      <link rel="stylesheet" href="style.css" />
  </head>
  <body id="container">
    <div id="left">
      <form>
      <div class="input-wrapper">
        <input type="text" id="query" />
        <img id="loader" src="images/loading.gif" />
      </div>
        <input type="submit" id="button" value="Search" alt="Loading" />
    </form>
    <!-- rest of the code will follow this -->
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script src="script.js"></script>
</html>

Alright – that’s it, as far as getting the input from the user is concerned (well, on the HTML side, at least). To be a bit more descriptive, that code is what the user will see when they click on the icon to trigger the extension. It’s just an input box that we’ll style to look like domai.nr’s site has it. You’ll notice that I merely have a <form> element – no method or action has been defined. I didn’t need to use those, as jQuery’s $.getJson method takes care of that for us. This would be a great time to test out the extension, wouldn’t it?

How to Test Local Extensions

To test an extension in development that is on your local machine, simply follow these steps, and then you’ll be up and running with it in no time:

1. Click Window and select Extensions.
2. On the right, towards the top of the page, you’ll see a link that toggles the Developer Mode. Click that.
3. Select Load unpacked extension..., and navigate to the directory the extension is in. Select that directory, and that’s all!

You’ll want to keep the extensions page up in a tab, though, because every time you make a change to the extension and want to test it, you’ll need to click “Reload” in the extensions page for that specific one.

We’ve got it installed locally, but let’s be honest – it’s looking pretty hideous. Let’s pretty it up so the Domai.nr guys would be proud to have an extension like this. You’ll want to download the images I use here, and place them in an /images directory inside of your extension folder, because I reference some of them eventually in the CSS (and in the HTML above, too).

body{overflow-x:hidden;font: normal 14px/18px helvetica, arial, sans-serif; color: #414240;}
  .input-wrapper{overflow: hidden; display: block; position: relative;}
    #query{height: 19px; float:left; display: inline-block; border: 3px solid #A9ADA8; width:220px; padding: 6px 12px 5px 12px; font: normal 14px/18px helvetica, arial, sans-serif; color: #414240; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; border-radius: 18px; }
    #query:focus{outline: none;}
    #loader{width:16px; height:16px; position: absolute; right:18px; top: 10px; visibility: hidden;}
  #button{display: none;}

Okay – we’ve got the first part all coded up and looking good. In the next section, we’ll focus on taking the user’s query and pulling some data from Domai.nr’s API.

Step 05: Show the User Some Domains!

In this section, we’ll take what the user typed in the <input>, and query it against Domai.nr’s API. Based on those results, we’ll display a list of all the results returned, as well as an icon indicating the status of that domain. So, let’s jump right in!

Before we get into some of the jQuery behind the extension, I think this would be a good time to bring up how to inspect an extension, just like a regular website. Instead of right-clicking somewhere on the page and selecting “Inspect Element”, you’ll simply right-click on the extension, and select “Inspect popup”. That’s all there is to it!

This section is a bit more interactive, so it’s the starting point for our Javascript. I’ll be using jQuery for simplicity’s sake.

$(document).ready(function(){
  $("#query").focus();  // focuses the input when the extension is triggered
  var url     = "http://domai.nr/api/json/search?q=",  // base URL for search request
      infoURL = "http://domai.nr/api/json/info?q=",    // base URL for info request
      query;  // will use this later
  $("form").submit(function(){
    if ($("#query").val() != ""){
      // execute the code below if the user typed something in...
      $("body").width(250);
      $("#loader").css("visibility", "visible");
      $("#results-list li").remove();  // removes any previous results, if there are any...
      $("#search-query").remove();  // more on this in a few lines...
      $(".extension a").remove();
      $("#results-info").hide();  // hides the larger panel if it's shown...
      query = $("#query").val();
      // ... code below ...

In the chunk above, we do a number of things:

• First, we focus the input box by default
• Next, we set some variables (as per the Domai.nr API)
• Then, on the form submit, we do the following:
  • Check to make sure the query is not blank
  • Assuming that passes, we then set the body width, and show an AJAX loader icon
  • We then clear out the previous (if there is one) list of domains, and remove the previous search query from the view
  • Finally, we remove some information that we’ll get to more below

So, it’s a good start. Some of the code above won’t make sense because it’s not in our HTML yet. It will be shortly, just go with it for now.

      // ... code above ...
      $.getJSON(url + query, null, function(json){
        $('<p id="search-query">' + json.query + '</p>').insertBefore("#results");
        $.each(json.results, function(i, result){
          if (result.availability === "available")
            $("#results-list").append('<li class="available"><a href="#"><span class="bg">&nbsp;</span><span class="domain">' + result.domain + '</span><span class="path">' + result.path + '</span></a><img class="loader-sub" src="images/loading-blue.gif" style="visibility:hidden;" /></li>');
          else if (result.availability === "maybe")
            $("#results-list").append('<li class="maybe"><a href="#"><span class="bg">&nbsp;</span><span class="domain">' + result.domain + '</span><span class="path">' + result.path + '</span></a><img class="loader-sub" src="images/loading-blue.gif" style="visibility:hidden;" /></li>');
          else
            $("#results-list").append('<li class="nothing"><a href="#"><span class="bg">&nbsp;</span><span class="domain">' + result.domain + '</span><span class="path">' + result.path + '</span></a><img class="loader-sub" src="images/loading-blue.gif" style="visibility:hidden;" /></li>');
        }); // end $.each
        $("#loader").css('visibility', 'hidden');
      });  // end $.getJSON
      $(this).find('#query').focus();
      return false;
    } else {
      // will describe these later...
      $(".extension a").first().remove();
      $(".registrars ul li").remove();
      $("body").width(250);
    }
  });  // end of .submit
  // ...and more to come in the next section!
});

That section above, while only a few dozen lines, gets quite a bit done:

• We utilize jQuery’s getJSON method, and use it against the Domai.nr’s API.
• Within that function, we simply iterate over all of the results it returns.
• On each result, we check its availability status, and return the correct <li> based on that conditional.
• Once we’ve gone through all of the results, we hide the AJAX loader.
• That else statement in there – that’s used when the query is blank. It just resets a few things that may not be blank, or may need to be reset to their default state.

And we’re not quite ready to test it just yet. You’ll see that in the jQuery code above, we’re targeting a list element with an id of results-list that’s not yet in the DOM. So, let’s go ahead and add that just after the <form> element in domainr.html.

<!-- other code above -->
  <div id="results">
    <ul id="results-list">
      <!-- this gets populated -->
    </ul>
  </div>
</div> <!-- end #left -->

And now it’s time to test. Don’t get your hopes up though, becase it’s going to look pretty ugly…

Assuming all’s well, you should now see a list of all the domains related to a query the user types in (like above). While it is indeed pretty ugly-looking, we have our extension now correctly hooked into the Domai.nr API’s search method, and are retreiving the results correctly. Congrats!

Before we move on to the final section of the tutorial, though, we’ve got some cleaning up to do. We need to display the icon that shows whether the domain is available, maybe available, or taken, and also just clean up the look of the list. Some simple CSS will take care of that with no problem.

ul{display: block; clear:both; margin:0; padding:0;}
  ul li{font-size:15px; color:#333333; display: block; width:100%; line-height:24px; margin-left:10px; width:100%; position:relative;}
  ul li .bg{width:15px; height:15px; display: block; float:left;}
  ul .available .bg{background: url("images/available.png")  0 7px no-repeat; width: 15px; height:19px; display: block; float:left; margin-left:10px;}
  ul .nothing .bg{width: 15px; height:19px; display: block; float:left; margin-left:10px;}
  ul .maybe .bg{background: url("images/maybe.png") 0 7px no-repeat; width: 15px; height:19px; display: block; float: left; margin-left:10px;}
    ul li a{color:#2870B0; text-decoration: none; width:100%; display: block;}
    .loader-sub{position:absolute; right: 38px; top:4px;}
    ul li a:hover{background: url("images/grey.png") no-repeat left top; cursor: pointer;}
    #results-info a:hover{background: none; text-decoration: underline; cursor: pointer;}
    #results-info h3{margin-top: 11px; text-align: center; display: block; width: 340px;}
      #results-info .available{color:#23B000 !important; text-shadow: rgba(100%, 100%, 100%, 1.0) 0 1px 2px; font-size: 24px;}
    ul li a.active{background: url("images/blue.png") no-repeat left top; color:#ffffff;}

Great – now it’s looking all nice and clean – just like the real Domai.nr site! Finally, it’s time to get to the good stuff.

Step 06: They’ve Selected a Domain

This last section changes the extension’s UI the most, but if we break it down into steps, it really isn’t too bad at all.

Okay – let’s think this through. First, when the user clicks on a doamain, we want the popup to get wider, and display information regarding that specific domain. No problem at all. However, we’ll need to add a bit more structure to our code to get it just right.

<div id="results-info">
  <p id="availability"><!-- Text depends on whether the domain is available or not --></p>
  <div class="register-stuff">
    <ul class="sections">
      <li class="registrars">
        <h4>Register at:</h4>
        <ul>
          <!-- populated with all of the available registrars -->
        </ul>
      </li>

      <li class="tld">
        <h4>
            TLD:<span class="extension"></span>
        </h4>
        <ul>
          <!-- the hrefs here are generated dynamically by the jQuery -->
          <li><a href="#" target="_blank" id="wikipedia">Wikipedia</a></li>
          <li><a href="#" target="_blank" title="Internet Assigned Numbers Authority" id="iana">IANA</a></li>
        </ul>
      </li>

      <li class="right">
        <h4>Tools:</h4>
        <ul>
          <!-- like above, the links here are generated dynamically -->
          <li class="www"><a href="#" target="_blank" rel="nofollow" data-track-event="Clicked WWW Link">Visit Site (www)</a></li>
          <li class="whois last"><a href="#" target="_blank" rel="nofollow" data-track-event="Clicked WHOIS Link">WHOIS</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div id="footer">
  <p>Powered by <a href="http://www.domai.nr" target="_blank" alt="Domai.nr">Domai.nr</a>.</p>
</div>

So, the comments should be explanatory enough for that HTML structure, however, we won’t really notice much until we give our extension some more interactivity. Now that we’ve got the structure down, let’s go ahead and do that by adding some jQuery.

$("#results-list a").live('click', function(){  // 'live' is required, because the elements populate the DOM after the user searches for something; not onLoad.

   $(this).siblings('.loader-sub').css('visibility', 'visible');  // hide the secondary loader
   $(".extension a").first().remove();  // remove the previous extension (link next to 'TLD').
   $(".registrars ul li").remove();  // hide the previous egistrar's <li&gt; elements.
   $.getJSON(infoURL + $(this).find('.domain').text(), null, function(json){ // ...do some JSON magic again.
     // the $.getJSON line above searches for the currently selected domain
     $("#wikipedia").attr('href', (json.tld['wikipedia_url']));  // adds the correct wikipedia link
     $("#iana").attr('href', (json.tld['iana_url']));  // adds the correct iana link
     $(".whois a").attr('href', (json.whois_url));  // adds the correct whois link
     $(".www a").attr('href', 'http://' + (json.domain));  // adds the correct URL
     $(".extension").append('<a href="http://www.domai.nr/' + (json.domain.split('.')[1]) + '" target="_blank">' + (json.domain.split('.')[1]) + '</a>').show(); // this line adds the correct domain extension to be next to the "TLD" part.

     $('.loader-sub').css('visibility', 'hidden'); // hide the domain-specific loader, because all of the information has been loaded.

    // and the code below goes here...

That code above loaded in all of the information we need for the Wikipedia URL, IANA URL, Whois information, site link, and extension information. Below, we’ll look into how I loaded the registrar information, among other things!

    // the code above...

    if (json.registrars.length < 1){  // if there are no registrars available
      $(".registrars ul").append('<li>(not available)</li>');
      $("#availability h3").text('Not Available.  ');  // sad face.
    } 

    else { // there are registrars available
       for (var i = 0; i <= 5; i++){ // load the first five
           $(".registrars ul").append('<li><a href="' + json.registrars[i].register_url + '" target="_blank">' + json.registrars[i].name + '</a></li>');
       } 

       // show the "More..." link
       $(".registrars ul").append("<li><a href='#' id='load-more'>More...</a></li>");
    }

     // when the user clicks on "more"...
     $("#load-more").click(function(){
       $(this).remove();
       for (var i = 6; i <= json.registrars.length - 1; i++){
         $(".registrars ul").append('<li><a href="' + json.registrars[i].register_url + '" target="_blank">' + json.registrars[i].name + '</a></li>');
       }
     });
     return false;
   });

   $('body').width(800);  // make the dropdown bigger.
   $('#results-list a').removeClass('active');  // remove the siblings' possibility of being .active
   $(this).addClass('active');  // give the clicked item .active
   $("#results-info").show();   // show the cool results stuff
   if ($(this).parent().hasClass('available')){  // ...and some conditionals, based on availability
     $("#availability").html("<h3 class='available'>Available!</h3>");
   } else if ($(this).parent().hasClass('maybe')){
     $("#availability").html("<h3 class='possibly'>Possibly Available</h3>");
   } else {
     $("#availability").html("<h3 class='taken'>This domain is <span>taken</span>.</h3>");
   }

   // populate the Register at link
   $("#results-info").show();
   return false;  // don't link to anything in the dropdown list
 });

Fantastic! The information is now loading, but it’s looking pretty messed up. No worries, just add the following CSS to make it look all pretty and bring an end to today’s exercise.

#left{float:left; width:250px; padding-bottom: 10px;}
  #results-info{float:right; width:510px; display: none;}
    .register-stuff{overflow: hidden;}
    .right{float:right;}
    .extension{float:right; font-size:13px; margin-right: 70px;}
    #load-more{color:#6C9DC9; font-size:12px; line-height: 18px;}
    abbr{float:left;}
    #results-info h4{margin-bottom: 9px; font-size: 16px; font-weight: bold; vertical-align: top; margin-top: 0;}
    #results-info .sections > li{position: relative; float: left; width: 140px; border-left: 1px solid #A9ADA8; padding-left: 9px; margin-right: 10px;}
      #results-info .sections li ul li{margin-left:0; line-height: 20px;}
        #results-info .sections li ul li a{font-size:13px; display: inline;}
  #footer{overflow: hidden; font-size: 11px; color: #666; height:20px; clear:both; margin-right:15px;}
    #footer p{margin:0; padding:0; text-align:right;}
      #footer p a{color:#666;}
      #footer p a:hover{color:#333333;}

All Done!

And there you have it! Congratulations, you just made a nifty Chrome extension using a great service’s API! I built this out while I was in an airport waiting for a layover; that helps to prove how simple and quick making one of these can be. Honestly, a Chrome extension is no more difficult than a regular web page. If you have any questions at all, please leave them in the comments below!

Go to Source

Advertise here with BSA

An option for resizing text is a very good way of helping visitors to read easier.

jFontSize is a jQuery plugin for integrating the popular "A+ and A- buttons with the functionality of resizing text" into web pages.

The buttons are actually inserted with standard HTML-CSS (so any type of buttons can be used) and the plugin controls the resize part.

It is possible to target a specific element (or the <body> for the whole page) and the resizing will be applied only to the contents of that element.

Also, various options can be configured like the "max-min number of resizes" and "how many pixels each command will resize".

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Go to Source

Qipli is the easiest way to create and publish html pages, you can create a page with 1 click, you write your own (HTML/CSS/JAVASCRIPT) code, so your imagination is the limit, and Every page has it’s own subdomain.

view more

Go to Source

I’ve played a number of Roland keyboards over the years (I play only a little piano, and mostly by ear). The touch-sensitivity nearly rivals that of a real piano. And I swoon over their V-Drum kits every time I’m in a music shop, equally matching the sensitivity and touch of a “real” kit.

This is a contract position in Los Angeles and involves work on the company’s web properties, including mobile. jQuery/HTML/CSS know-how a must.

Go to Source

Vendo is a hosted shopping cart with both a free and fully featured paid version (at $49 per month). Suitable for web designers who want full control over HTML, CSS, Javascript and PHP.

view more

Go to Source

Go to Source

What can you use the application for?


Chop is an application that allows users to create a snippet of code, add a note and share it with others. The user can visit the Chop homepage and paste in the code they wish to share. The application displays a list of compatible languages, which include Ruby, Python, JavaScript, HTML, CSS, Java, C/C++, PHP, SQL, XML, ERB and others. The user must click the code type before sending their snippet. Users can also grab code from a webpage or Git raw page using the link provided on Chop. Once the user has the code, they can click the Chop It! button to add a note and send it to another user. The application is very simple and offers a basic service, but it is one that can make life easier for anyone who frequently shares snippets of code with friends and colleagues.

What is the history and popularity of the application?


Chopapp.com was designed to give users a better way to share snippets of code quickly. The application was created by the Zurb team. Zurb was founded in June of 1998. The company is based out of Campbell, California and currently includes “Chief Instigator” Bryan Zmijewski and partner Jeremy Britton. The team includes over 10 individuals and is focused on producing products that help others design better products. Chop is just one of many Zurb projects, which include over 100 startups since the company was founded.

What are the differences to other apps?


Chop offers a simple service, but does so in a convenient way. Users can easily create a code snippet, add a quick note to go with it and send it off to someone else. The process takes no time and requires no log in or prerequisite. The user simply visits the Chop homepage and can get started on another code snippet.

How does the application look and feel to use?


The Chop website uses a dark background with a plain white logo. A new user is given access to the snippet tool as soon as they arrive. It can be found within the white box that takes up the center of the homepage. Content on the page is displayed in light grey, which is subtle but still readable. The snippet tool includes language types and the URL grab link in red, which helps spice up the otherwise Spartan appearance of Chop.

How does the registration process work?


Visitors are not required to create an account to use Chop. The user is given access to all current features as soon as they arrive on the homepage. The user can find links to other applications and solutions at the bottom, but these are also available to everyone. The no registration design is a good choice because a login might prove cumbersome for such a simple application.

What does it cost to use the application?


Chop provides a fun, simple service, however it is not one that warrants a fee. All users can try Chop at no cost. There are no subscription fees or other charges. The user is given access to all the applications’ features (there are not many at this point, but many are not needed).

Who would you recommend the application to?


Chopapp.com is a basic tool for users who like to share snippets of code online. Whether the user is sharing just one snippet or frequently passes code on each day, Chop can help. The user can customize the experience with a note before sending the snippet off to the recipient.

Go to Source

Advertise here with BSA

We recently held a giveaway for the excellent jQuery image gallery, TN3 Gallery. In this post, we announce the 5 lucky Six Revisions readers that won a Pro license to TN3 Gallery (value of $37).

The Winners

Here’s the list of winners of TN3 Gallery Pro licenses.

• Joshua Chase
• Abdelhadi Touil
• Peter Steven
• Jeff
• Rachel Shillcock

Congratulations to all the winners! You should’ve already received an email from me with information pertaining to your prize.

Result of the SQL query that selected 5 comments randomly.

About TN3 Gallery

TN3 Gallery is a powerful and customizable jQuery image gallery and slideshow.

TN3 Gallery comes with a Lite version. The Lite version has a pretty robust feature set. Use TN3 Gallery for free by downloading the Lite version.

Follow TN3 Gallery on Twitter @tn3gallery and join them on Facebook.

Related Content

• Creating Focal Points in Your Web Design
• Getting Users to Sign Up: Factors in Design and Content
• 5 Little-Known Web Files That Can Enhance Your Website
• Related categories: Web Design and Web Development

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Go to Source

Initializr will generate for you a clean customizable template based on Boilerplate with just what you need to start. Some functionalities have been removed from Boilerplate to focus on what most people really use.

Requirements: HTML5 Support
Demo: http://initializr.com/
License: License Free

Sponsors

Aactis Shopping Cart: easy, fast and reliable. Check for special offers.

Go to Source

This is a simple design created in Photoshop. The working demo will soon follow, which will involve converting the PSD file to a working HTML/CSS. So, are you excited? Open your Photoshop now and let’s get started!

Here is what we will be making, click on the image for full preview:

Resources for this tutorial

• Social Icons
• Navigation Icons

Step 1: Setting up the Document

Open up Photoshop and create a 1200 px x 1850 px document.

Make sure that you have turn on Rulers and Guides

• Rulers: Ctrl + R
• Guides: Ctrl + ;

This is 960 grid base layout for this tutorial we will not download it. Let’s simply create our own guide. Go to View – New Guide 120px Vertical Repeat the step and change the value to 1080px.

Step 2: Working with Background

Duplicate the the background layer and fill it with #f8f8f8. Next we will create a simple dotted pattern. Create a new document 15px x 15px. Zoom in by pressing Ctrl + . Uncheck the background layer and create another layer, using Pencil Tool create a dot at the top left of our canvas.

Go to Edit – Define Pattern name it dotted. Now back to our layout. Create new layer above the background using the Paint Bucket Tool switch from Foreground to Pattern select the dotted pattern and make the layer Opacity to 15%. Group all the layers we have just created and name it Background.

Using the Rectangle Tool with a fill color of #363636 create a rectangle with a height of 10px starting from the top left of the canvas to the right.

Step 3: Working with Logo

Start by placing a 38pxx 38px using the Rounded Rectangle Tool with a fill of #f7941d. Using Text Tool select Myriad Pro Bold font with a size of 36pt. Place it as shown in the screenshot below.

Add a Layer Mask to the shape we have just created by pressing the button beside the fx button in the layers panel.

Select the Layer Mask then Ctrl + Click to the Text layer to make a selection, fill it with #000000. This will be applied to the layer mask and make the selection transparent into the shape.

Using Text Tool select Myriad Pro.

• Myriad Pro: Font Size 24pt, Color #363636
• Best choice of font: Font Size 12pt, Color #959595

Step 4: Working with Social Icons

Open up the social icons, change the image size to 19px x 19px by pressing Ctrl + Ctrl + I and change the values of height and width. Place the icons in our canvas with in a new folder named, Social Icons, Refer to the screenshot below for the positioning and colors.

Step 5: Working with Navigation

Create a new group and name it Navigation. As you can see in the screenshot above there is a rectangular shape with a stroke, start by using the Rectangle Tool with a height of 90px.

Add this Blending Option:

• Gradient Overlay: #f8f8f8, #fcfcfc

• Stroke: #c2c2c2

Open up the Navigation Icons and resize them to 22px x 22px. Make a new group inside the navigation group, name it Icons and place it there. Now that we have our icons, it’s time to put up our navigation links. Follow the screenshot below for the formatting and color of the text.

Merge all the lines you have made by pressing Ctrl + E. Duplicate the merge layer and move it 1px to the right by pressing the right arrow key on the keyboard.

Step 6: Working with Search

Create a new group above Navigation and name it Search. Using the Rectangle Tool color #ffffff create a shape as shown in the screenshot below.

Add this Blending Option:

• Stroke: #c2c2c2

Let’s create a search button, using the Rectangular Marquee Tool create a 40px x 35px rectangle and fill it with any color.

Add this Blending Option:

• Gradient Overlay: #f8f8f8, #fcfcfc

• Stroke: #ffffff

Add this line with a color #c2c2c2, then place the icon 19 px x 19px.

Using the Text Tool add this text in the search field area.

Step 7: Working with Slider

Select the Rectangle Tool with a fill color #ffffff, create a shape 630px x 340px.

Add this Blending Option:

• Stroke: #c2c2c2

Select the shape by pressing Ctrl + Click on the shape layer. Go to Select – Modify – Contract 10px.

Fill the selection with any color and place a sample image that’s the same size.

Below the shape layer create a new layer and name it Shadow. Using the Pen Tool create a shape as shown in the screenshot below and fill it with #000000.

Apply a Gaussian Blur with a Radius of 2px. Set the Layer Opacity to 40%.

Using the Ellipse Tool create four shapes as shown in the screenshot below. Make sure it is aligned to the center.

Add this Blending Option:

• Color Overlay: #c2c2c2

• Inner Shadow: #000000

The color #c2c2c2 will serve as the normal state of our slider, for our active state change the color to #f7941d

Step 8: Working with Posts

To start, create a new group and name it Posts. Using the Rectangle Tool with a fill color of #ffffff create a 630px x 300px rectangle.

Add this Blending Option:

• Stroke: #c2c2c2

Create another 200px x 200px shape using Rectangle Tool and add the same blending option.

Ctrl + Click the layer to make a selection. Go to Select – Modify – Contract 10px

Fill the selection with any color and place a sample thumbnail image. Using the Text Tool put up the Title of the post, content, author etc.

Lets make a read more button for our post. Create a new group inside Posts and name it more. Using the Rectangle Tool create a 88px x 30px shape.

Add this Blending Option:

• Inner Glow: #ffffff

• Gradient Overlay: #f1f1f1, #fbf9f9

• Stroke: #c2c2c2

I just took a screenshot of Digg, Tweet and Facebook and paste it in the bottom left side of the post.

Duplicate Posts folder and place it as shown in the screenshot below.

Step 9: Working with Pages

Create a new group and name it Pages. Create a 26px x 26px shape using the Rectangle Tool. For the inactive pages apply a blending option with a Stroke of #c2c2c2. For the active page just copy the layer styles we applied on the read more button and apply it to the shape.

Step 10: Working with Advertisements

Create a new group and name it Sidebar. Create another group inside Sidebar and name it Advertisement. Using the Rectangle Tool with a fill color of #ebebeb create a 145px x 145px shape. Then set the Layer Opacity to 50%.

Ctrl + Click the layer to make a selection. Go to Select – Modify – Contract 20px. Fill it with #ffffff and add a 1px #c2c2c2 stroke.

Duplicate it four times as shown in the screenshot below.

Step 11: Working with Tabs

Create new group inside Sidebar and name it Tabs. Now select the Rectangle Tool with a fill color of #ebebeb create a 300px x 500 box with a distance 35px below advertisement. Set the layer Opacity to 50%.

This part is just the same as we did in our advertisement, just refer to Step 10.

Create tabs using Line Tool and Text Tool.

Create a new layer below the tabs layers. Using the Rectangle Tool create a shape as shown in the screenshot below.

Add this Blending Option:

• Gradient Overlay: #f1f1f1, fbf9f9

Time to create a sample post. Start by grabbing a 60px x 60px sample thumbnail. Also, we will add title of the post, when it is published and in what category.

Group all the layers we have created in our sample post and duplicate it four times.

I also added a sample 300px x 300px advertisement.

Step 12: Working with the Footer

Create new group and name it Footer. Using Rectangle Tool with a fill color of #363636 create a 1200px x 485px shape.

Lets create a new pattern. Create a 6px x 6px file. Unlock the background layer and create a new layer. Set the foreground color to #363636, using Pencil Tool create a pattern as shown in the screenshot below.

Using the Rectangular Marquee Tool make a selection about 3px height starting from left to right and fill it with the pattern we made.

Lets create another pattern. Create a 12px x 12px file. Change the foreground color to #303030. Using Pencil Tool create a pattern as shown in the screenshot below.

In a new layer fill the whole footer with the pattern we have made.

In our footer we will be placing our tweets, popular posts and about, so create a group for each. First we will work on in tweets, using the Text Tool fill in with text the same as shown in the screenshot below.

Next in popular just duplicate the sample posts we have made in our tabs, then we will match the color as we did in our tweets.

Lets proceed to about. Grab some Lorem Ipsum text and place it as shown in the screenshot below. Also I merge the layers of our logo and add a color overlay with a fill color of #6d6e71.

For our final step using the Rectangle Tool with a fill color of #252525 create a 40px high shape, then using Text Tool add a copyright text color #616264.

Finally we’re done! I really hope that you followed and learned something from this tutorial. If you have questions feel free to ask them below. Cheers to all!

Go to Source

Advertise here with BSA

Mashi is an open source JavaScript toolkit for creating timeline-based, Flash-like movies and complex animations using HTML, CSS + JS.

It is standalone, modular, object-oriented and lightweight. Additional plugins are only required for advanced usage.

In contrast to other animation tools,  Mashi uses a scene-based timeline. So you are not limited to a timeline divided into dozens of equal frames per second but you can split your timeline into self-contained and independent scenes at will.

The toolkit has an automated preloader which loads images used in advance for a better user experience.

Mashi has a "controls" module which provides buttons like "play" and "pause" with their logics and it works in all major browsers including mobile and tablet.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Go to Source

Advertise here with BSA

Awkward Showcase is a very flexible jQuery content slider plugin that can display any type of HTML content.

The plugin only controls the functionality and design is completely created on the HTML-CSS side.

Slider can have thumbnails that are positioned vertically or horizontally, captions can be displayed for each item and multiple tooltips can be positioned over slides (to provide detailed info about a specific part of the slide).

It can auto-arrange the height according to the content displayed, has multiple transition effects, the interval between each slide can be changed and much more.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Go to Source

Advertise here with BSA

PhotoSwipe is a free and full-featured image gallery for mobile and touch devices.

It is built with HTML, CSS + JavaScript and doesn't depend on any frameworks.

The interface is native-like and offers a similar experience with the ability of swiping items and support for orientation (also, resizes images automatically).

A "start" button can display the images as a slideshow and there are many options for customizing the gallery like the speed of fadeIn-fadeOut effects, enabling zoom, method of image scaling and much more.

PhotoSwipe works in iPhone, iPad, Android, Blackberry + desktop browsers and there is an optional jQuery implementation for the users of this framework.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Go to Source

Regular readers of this site are familiar with my partiality to charity: water. They’re seeking someone with experience developing with an MVC framework (CakePHP is a plus), database design and implementation (RDBMS or NoSQL) and working in test-driven development. Experience with PHP and Java is necessary, as well as HTML/CSS and JavaScript.

It’s a tall order for an organization accustomed to crushing tall orders, i.e. helping nearly a billion people get access to clean drinking water. Forward this opportunity on to your friends and let’s help a great organization find a great developer.

Go to Source

Practical ways that you can apply progressive enhancement principles using HTML, CSS, and JavaScript. Aaron is a fantastic writer and speaker (and just a pleasure to be with in person, I might add). Needless to say, I’ve purchased a copy.

Go to Source

However, every single one of us, beginners, or advanced developers, have committed basic or major mistakes working with both these languages. With this in mind, I believe it is extremely important and always welcome to learn some good tips and practices which I hope will help you improve your skills and experience.

Some of you may be thinking that since you don’t see anything out of place when viewing your web page, you have your HTML and CSS documents built correctly, but you may be wrong. The truth is that you should not trust everything you code. Using the same ID more than once on the same page won’t result in wrong alignments or retrieve any error (unless you try to validate), but it is in fact bad markup and a major flaw in your code.

Doctype

Not so long ago, we had to use those really long Doctypes that were almost impossible to remember. Now, since you just need to use <!DOCTYPE html> on the top of your document, we have a much cleaner and better solution. Nevertheless, some people still forgets to specify it. This is mandatory for a validated and organized HTML document.

How you should do it

Never forget your DOCTYPE.

ID vs Classes

An ID is a unique identifier which allows us to target a specific element on the page and, since it is unique, it can only be used once in a page. On the other hand, we have classes which allow us to do exactly the opposite. Classes are used when you have the same element more than once on a page.

How not to do it:

<div id="block">
   <div id="btn"></div>
   <div id="btn"></div>
</div>

How you should do it:

<div id="block">
   <div class="btn"></div>
   <div class="btn"></div>
</div>

Say no to inline styling

Inline styling is unfortunately a pretty common practice and at the same time a bad one. It has nothing to do with invalid code or bad markup, but with organized code and structure. Imagine you have 30 pages and you need to remove an inline style you have applied to the same div on every single page, it would take you forever and steal precious time.

How not to do it:

<div style="width: 100%; background: #fff;"></div>

How you should do it:

<div id="wrap"></div>

Ove use of divs and CSS Classes

So you started your own project, you know how to use divs, ids, and classes. Inline styling is not your thing (fortunately), and you love to create styles and apply them everywhere. That’s great, but don’t write more than you have to. Having a div with an unordered list inside and a class applied to each li element is unnecessary.

How not to do it:

<div id="navigation">
   <ul>
      <li class="left"></li>
      <li class="left"></li>
      <li class="left"></li>
   </ul>
</div>

How you should do it

<ul id="navigation">
   <li></li>
   <li></li>
   <li></li>
</ul>

And in your stylesheet

#navigation li { float: left; }

Browser Resolution

According to the W3c’s latest statistics (January 2011), 13.8% of internet users have a 1024×768 screen resolution, and 85.1% use a bigger screen resolution. So the question is “What resolution I should design for?” I personally use a maximum width of 960 or 980 pixels for a vertical layout and between 550 and 640 pixels in case of a horizontal layout. Besides, though 13.8% seems to be a fairly low number, it still represents millions of internet users.

How you should do it

Consider everyone’s needs, and especially your target audience.

Block vs Inline elements

Differentiating block from inline elements can be a a delicate matter for beginners. A block element is displayed on a new line taking by default 100% width of the containing element, like divs (<div>) or paragraphs (<p>). An inline element is displayed with no line breaks meaning that it starts on the same line, taking only his own width, like span (<span>) or image (<img>). You can also change the way an element is displayed, this means that you can change an inline element to be display as a block and vice versa.

How you should do it

span { display: block; }

Use comments to organize your code

When I start a project, I try to organize it through commenting as much as possible and you should do the same. This is something purely optional but I highly recommend its use. It not only helps you find the section or element your are looking for, but also makes your life easier when you need to know which div your </div> is closing.

How you should do it

<!-- Begin #header -->
<div id="header">
<!-- End #header -->
</div>

Stylesheet:

/* --------------------------------------------------------------
Header
-------------------------------------------------------------- */
#header { background: #fff; }

Cross-Browser Compatibility

When you decide to make something, you should place yourself in the role of the end-user, and imagine that, even today, some of them still use browsers like IE6. A page in renders differently in Firefox than in Chrome or Internet Explorer. There are some useful tools you can use to check how your page renders in different browsers. Charina wrote a very complete article regarding this topic which I recommend reading – 10 Useful Tools For Cross-Browser Compatibility Check

How you should do it

Do not forget to pay attention to your layout in different browsers, systematically.

Keep it short – Generic classes, properties and CSS files

When you are coding you should always have one thing in mind, plan for the future. You are already using comments and keeping your code organized, so why stop here? The first thing I do when I’m coding CSS is to specify a section of generic classes, then on my HTML I simply use them alongside with other elements.

How not to do it:

Stylesheet

#firstblock { background: #000; float: left; }
.genblock { background: #006699; float: left; }

HTML

<div id="firstblock"</div>
<div class="genblock"></div>

How you should do it

Stylesheet

.left { float: left; }
#firstblock { background: #000; }
.genblock { background: #006699; }

HTML

<div id="firstblock" class="left"></div>

<div class="genblock  left"></div>

This is a simple way of declaring two classes. I like to find the most efficient way to do things, and as you can already guess, I really like keeping things organized, so when it comes down to properties, it’s the same thing. Why should we write the same property over and over again when we just need to write it once?

How not to do it:

#content { margin-top: 10px; margin-right: 12px; margin-bottom: 0; margin-left: 15px; background-color: #000; background-repeat: no-repeat; }

How you should do it:

#content { margin: 10px 12px 0 15px; background: #000 no-repeat; }

The ideal number of CSS files you should have in your project depends entirely on you and the way you work. I have been involved in projects where there was a “generic.css”, “main.css”, “global.css” among others, it took me forever to understand the purpose of each file. I usually have just two CSS files on my projects – style.css and reset.css.

How you should do it
You should make it simple and efficient to edit later on.

Don’t use heading tags randomly

Heading tags are not just there to make it pretty, they establish the importance of your content which makes them valuable for SEO. There are six Heading tags: h1, h2, h3, h4, h5, and h6. H1 is the most important, so you should use it for your web page or business name only. The rest of the tags should be used according to title or content importance. Also, you don’t need to have heading tags everywhere on your document.

How not to do it:

<h6>Post title</h6>

<h1>Text content</h1>

How you should do it:

<h2>Post title</h2>
<p>Text content</p>

Use absolute position only when you have to

When you’re starting out, you can easily become addicted to the use of absolute positioning. This is because it is an easy way of placing elements, however, this property should not be used excessively. Since elements with absolute position lose their normal flow, it is almost impossible to align them with other sections on the page. You simply can’t tell a normal element to be on the left side of an element with absolute position.

How you should do it:

Use absolute position only when you need to, and not because it is easier.

Type fonts

So is there a font you really like and you would love to use it on your page, is it a standard font? What if not? These are are questions you need to ask before you choose your typography. When you choose a font you must always have a backup plan, this means that in case the user does not have the chosen font, the second choice (or third, etc) will appear. Examples of standard fonts are Arial, Georgia, Lucida Sans Code, Times New Roman, Verdana, Tahoma, and some more. Now let’s say you would like to use a font that is non-standard, what would you do? The most obvious answer is @font-face.

How not to do it:

p { font-family: AurulentSansRegular, Arial, Helvetica, sans-serif; }

How you should do it:

@font-face {

font-family: 'AurulentSansRegular';

src: url('AurulentSans-Regular-webfont.ttf') format('truetype');

}

p { font-family: 'AurulentSansRegular', Arial, Helvetica, sans-serif; }

Always validate

The title is pretty self-explanatory, you should always validate your CSS and HTML documents. Why? The answer is why not? You have a way to know if your code has errors and it gives you solutions to fix them, so really, why not? Add CSS Validator and HTML Validator to your favourites.

How you should do it

Validate your CSS, and after that do the same for your HTML.

Conclusion

Some may consider these tips and techniques common sense and simple to understand, others not so much, but the important thing is that every coder make mistakes, and practice makes perfect.

Hope you enjoyed the article and have some fun experimenting, but keep it organized!

Go to Source

How Well Do You Really Know CSS & HTML?

The strength of your grasp of CSS/HTML can affect your design work, either consciously or subconsciously. There are a lot of CSS declarations out there; CSS3 and HTML5 are becoming more applicable and accepted; there are a lot of ways to push the boundaries of what browsers will render. It can be tough to keep on top of these advances, no doubt. However, not knowing what is possible using CSS & HTML means limiting the potential of your design work, or limiting the best practices of your design work.When I speak of best practices, I mean things like using live fonts instead of images; using CSS styling instead of Photoshop slices and so forth. For example, say you wanted to use a letterpress text effect for a new small business website you were contracted to design & develop. If you are not familiar – or confident in your ability to implement – the CSS text-shadow effect, then chances are you will either a) not use this effect at all, or b) use an image instead of live text. Both of these solutions are not optimal compared to the CSS text-shadow effect (assuming using the letterpress text effect is beneficial to the design). Thus, your development skills (or lack thereof) are hindering your design work/choices.

The text-shadow declaration is just one example. There are a large variety of CSS styling techniques that can be swapped out in this example.

Cutting Corners

Another potential situation where development skills can negatively affect design work comes about when time management and/or development speed comes into play. If you’ve taken on one too many projects and have a few stress-inducing deadlines looming, do you really think you’re going to be spending the time to really polish a design? Are you going to design that jQuery slider with love & attention to detail, knowing that by including the slider & all those details, you’ve effectively added an hour or more to your coding time?

Knowing you have to code the fine details of the design you’re creating can lead to justifying why you’re cutting corners. You can start telling yourself that the design doesn’t really benefit from that highlighted border edge, or floating 3D box and the like. Be aware of this; after all, the details are what separates good design from great – and the only way to develop a reputation as a great designer is to put out great work.

Designing for a Content Management System

Knowing that the design you’re working on will be implemented on the web using a CMS, such as WordPress, is another potential pitfall for quality design. Your comfort and understanding of the CMS you’re working with – the limitations of the software, as well as its strengths – can affect your design choices too. The biggest differences between designing for a static HTML/CSS site and designing for a CMS is that a) the content in a CMS is dynamic, and b) the client will be editing site content, potentially with little or no experience doing so. It is imperative that, as the designer, you understand these differences and take them into account.

For example, you’ll see many CMS powered sites that essentially have two layouts – a home page and a sub page. The sub page layout is applied to every single page other than the home page. Why is this? Well, perhaps it was determined that this sub page layout was the optimal layout for every single other page on the site – or, more likely, the fact that the content is dynamic affected the design choices. More layouts means more development time and a steeper learning curve for the client. Knowing that the design will be implemented using a CMS is good; making lazy design choices because of this is not.

Let’s use the jQuery slider & WordPress as another example. Implementing one of the many slider solutions out there on a static HTML/CSS build is simple enough. Implementing the same solution in a WordPress build is slightly more difficult. Implementing the same solution in a WordPress build so that the non-HTML-savvy client can update the images easily is even more difficult. If you’re the designer & the developer – and let’s say you’re a developer who isn’t comfortable proposing a client-editable jQuery slider in a WordPress build – what are the chances of you offering this solution to your client? Not very likely, or in the least, less likely than if you were more dev savvy. Perhaps you’ll even scrap the slider completely, despite knowing deep down that it’s the right solution for the build. That’s a slippery slope that leads to unsatisfied clients, and perhaps to your eventual exit out of the web design/development world.

The Solution(s)

We know now that your development skills can affect the quality your design work; the question now becomes how to combat that. If you’re anything like me, you identify with being a designer first, developer second. I want Paper Leaf to be synonymous with great design; letting my development skills hinder that is something I want to avoid. In order to avoid this, there are a couple of options: focus on bettering your development skills, or subcontract the development work.

Bettering your development skills depends on whether you have the time and desire to do so. There are an abundance of online courses and tutorials out there explaining how to do near anything web-development-wise. My suggestion? Every time you see an effect on a site that you like, Firebug it and figure out how they did it. Then see if you can find a better way to do the same thing. Perhaps have a bookmark folder in your browser for “Development Inspiration”; Google is your friend here.

Subcontracting the development is another option. Subcontracting allows you to focus on making the design as strong as possible, without the above-mentioned development issues you may encounter affecting your work. However, if you’re going to subcontract, it’s still beneficial to know the limitations of the web as well as the CMS you’re using for your clients. Make sure you find a good developer – more difficult than it may sound – and develop a relationship with him/her. Keep in mind that subcontracting will either raise your costs or cut into your margins, so make sure your business is positioned properly for that change. Finally, subcontracting means you still have to manage the project; you can’t just “set it and forget it”.

The most important bit to remember, however, is to always be pushing yourself. Don’t settle in your design work. Always strive to best your last design; always strive towards the best solution for the project. If you do that, the other concerns become moot.

Go to Source

Live.js, once included to a web page, auto-refreshes it automatically if there is an update to the files used.

Simply, when you are editing your HTML, CSS or JS code, your browser will always show the latest version of the page. No more manual refreshes.

Updates to the CSS are applied instantly/dynamically and the ones for HTML + JS will refresh the page.

At the back-end, the script sends consecutive HEAD requests to the server and detects the updates with the help of the responses.

P.S. The same team also has a Firebug extension named Backfire that does a similar job for CSS files being edited via Firebug..

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Go to Source

In this article, Matt will explain HOWTO: Create native-looking iPhone/iPad applications from HTML, CSS and JavaScript, which includes how to strip away the browser chrome (the url bar and button bar); prevent viewport scrolling and scaling; respond to multi-touch and gesture events; use webkit CSS to get the iPhone OS look and feel; cache the app so it runs without internet access; get a custom icon on the home screen; and have a splash screen load at the start.

Source: http://matt.might.net/articles/how-to-native-iphone-ipad-apps…

Sponsors

Using What Font is you can identify the font you are looking for!

Go to Source

This one’s for all the Aussies in the house. A full-time role in Newism’s Newcastle city office. They’re seeking a front-end developer with a solid understanding of HTML, CSS, and JS. The ideal candidate, among other things, “signs up to every new web app known to man, just because they have a nice splash page.”

Go to Source

There is no doubt that the Web has and will continue to evolve. This constant evolution requires that the technologies that power it be flexible. Without flexibility, technologies and standards get left behind to technologies and/or standards that are better suited for the next stage of the Web. Thus, Alexander argues, that WebForms has lost touch with what web applications are now. As an integral part of ASP, where does that leave Microsoft’s web programming language? Will Microsoft maintain ASP in a manner that truly stays with the current technologies and trends? Traditionally, close-sourced projects have failed to be as effective as this as strong community driven open-sourced projects.

The focus on ASP.NET MVC is certainly a positive. Separating the HTML, CSS, and JavaScript (Views) from the ASP (Models and Controllers) will force developers to interact with web technologies. Microsoft’s push to get more acceptance in projects like Drupal will also help ASP programmers. Imagine an ASP version of Drupal or WordPress. Unlikely, yes, but Redmond would certainly desire a large mainstream open source project currently on PHP to also support ASP. Now, the ASP programmers will have to dig deep into web technologies to expand upon these types of tools.

Is ASP.NET developers disease real? Is it curable? Will it get better or worse? You be the doctor, and comment here. No PHD required.

Go to Source

There is no doubt that the Web has and will continue to evolve. This constant evolution requires that the technologies that power it be flexible. Without flexibility, technologies and standards get left behind to technologies and/or standards that are better suited for the next stage of the Web. Thus, Alexander argues, that WebForms has lost touch with what web applications are now. As an integral part of ASP, where does that leave Microsoft’s web programming language? Will Microsoft maintain ASP in a manner that truly stays with the current technologies and trends? Traditionally, close-sourced projects have failed to be as effective as this as strong community driven open-sourced projects.

The focus on ASP.NET MVC is certainly a positive. Separating the HTML, CSS, and JavaScript (Views) from the ASP (Models and Controllers) will force developers to interact with web technologies. Microsoft’s push to get more acceptance in projects like Drupal will also help ASP programmers. Imagine an ASP version of Drupal or WordPress. Unlikely, yes, but Redmond would certainly desire a large mainstream open source project currently on PHP to also support ASP. Now, the ASP programmers will have to dig deep into web technologies to expand upon these types of tools.

Is ASP.NET developers disease real? Is it curable? Will it get better or worse? You be the doctor, and comment here. No PHD required.

Go to Source

Now, let’s get started with this tutorial.

Links you will need to complete this tutorial:

• Burnstudio: Create An Amazing Personal Website From Scratch Using Photoshop
• 960 Grid System
• Slidesjs

Here’s what we’ll be creating (Click on image to view a full working demo).

You can also download this tutorial’s source files here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this landing page you probably noticed that 960gs grid system was used to create guidelines. Well, in this tutorial we will also need the 960gs CSS framework. Using CSS frameworks makes layout and style creation a lot easier and saves time in web development. Now you should download the 960 Grid system source files for usage in this tutorial.

You will also need a code editor; you can use a plain text editor such as Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

During this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know, not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 3.6.

Step 2 – Getting Your Files Ready

The first thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file and the slider JavaScript file. The HTML file goes in the root directory.

Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy 960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the same files but in a bigger and more readable format, I recommend using the compressed CSS files. You also need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory.

In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you’ll find the images I created.

Step 3 – Simple Starter Layout

We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:

1. The body has a background image that repeats horizontally and vertically.
2. The layout has a header section which contains the logo, main menu, search box and latest tweets.
3. The layout has a two sliders one is the content slider which could be used to display featured items and a portfolio slider which displays portfolio items.
4. There’s a content section which contains about, what I do and client testimonials sections.
5. Finally, we have a footer section which will contain footer links, services, latest posts from the blog, social icons and copyright text.

You can follow the notes above by looking at this image.

Now, Based on these notes we create the following HTML layout.

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <span class="hiddenSpellError" pre="">BurnStudio</span> Designs
    css" href="styles/reset.css" rel="stylesheet" media="all" />
    css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
</head>
<body>
    <div class="header_container">
        <div class="container_16">
            header content goes here.
        </div>
    </div>
    <div class="slider_container">
	    slider content goes here.
    </div>
    <div class="container_12 content">
        main content goes here.
    </div>
    <div class="portfolio">
        portfolio items slider goes here.
    </div>
    <div class="footer">
        <div class="container_16">
            footer content goes here.
        </div>
        <div class="container_16 copyrights">
            copyright text goes here.
        </div>
    </div>
</body>
</html>

Notice that I added five divisions for the sections we mentioned above each with a unique class name so we can style it later. The “header_container” has a division inside it with class “container_16″ which is already styled in 960.css file (which supports 16 columns) and we added this division inside it because we want the header section to occupy the full width of the browser and “container_16″ is limited to a width of 960px. This is also used in the footer division as well. The content division has an additional class “container_12″ (which supports 12 columns) and in this we want the style of “container_12″ to be applied to the content container.Now let’s add the CSS as follows (all CSS should be added in style.css file):

body {
    color: #5d5d5d;
    background: #fff url(../images/bg.jpg) repeat;
    font-family: Arial;
    font-size: 12px;
}

a, a:link, a:visited {
    color: #f36622;
    outline: none 0;
}

h2 {
    font-family: Segoe UI;
    font-size: 18px;
    font-weight: normal;
    color: #202020;
    padding: 0 0 12px 0;
    margin: 0 0 12px 0;
    border-bottom: 3px solid #000;
}

    h2 span.highlight {
        color: #f36622;
    }

    h2 span.sub_title {
        font-size: 13px;
        color: #5d5d5d;
    }

.header_container {
    width: 100%;
    height: 168px;
    background: #000 url(../images/header_bg.jpg) no-repeat top center;
    overflow: hidden;
}

.slider_container {
    position: relative;
    height: 400px;
    width: 960px;
    margin: 0 auto;
    margin-top: 43px;
    background: url(../images/slide_bg.jpg) no-repeat bottom center;
    overflow: hidden;
}

.content {
    margin-top: 46px;
    border-bottom: 3px solid #000;
    padding: 0 0 30px 0;
}

.portfolio {
    height: 286px;
    width: 960px;
    margin: 0 auto;
    margin-top: 30px;
    overflow: hidden;
    position: relative;
}

.footer {
    width: 100%;
    height: 287px;
    padding: 35px 0 0 0;
    background: url(../images/footer_bg.jpg) repeat-x;
    overflow: hidden;
    text-shadow: 0px 1px 1px #000000;
    filter: dropshadow(color=#000000, offx=0, offy=1);
}

    .footer .container_16 {
        height: 240px;
        overflow: hidden;
        background: url(../images/footer_seperator.jpg) repeat-x;
        background-position: 0px 30px;
    }

    .footer .copyrights {
        height: 47px;
        line-height: 47px;
        background: transparent;
        color: #b5b5b5;
    }

In the above CSS we styled the body with text color, font family and size, and a background image repeating horizontally and vertically with a white background color. Next, I set links color to #f36622 with no outline. Then I styled h2 with font family, font size, font weight to normal, text color, a bottom margin and padding of 12px and a bottom border. Now I added the style for header 2 highlight and subtitle with text color and font size. Next, I styled the “header_container” with full-page width, a fixed height, a centered none repeating background image with black background color and hidden overflow. The “slider_container” style is set with position relative which will be useful when we go later and add the slider script, a fixed height and width, margin set to “0 auto” which will make the division center horizontally in the page, a hidden overflow, a top margin for the space between the slider and the header and a non-repeating background image. Next, I styled the “content” with top margin to make space between the content and the slider, a bottom border and a bottom padding. The “portfolio” style is set with fixed height and width, a margin set to “0 auto” which will make the division center horizontally in the page, a fixed top margin, a hidden overflow and a relative position which will be useful when we go later and add the slider script.

Finally, the footer has a style with full-page width, a fixed height, a top padding, a horizontally repeating background image, hidden overflow and a text shadow which is a CSS3 feature. The “container_16″ inside the footer has a fixed height with hidden overflow, a horizontally repeating background image which will act as a divider between footer headers and content with a vertical background position of 30px. the “copyrights” division style is set to a fixed height and an equal value of line height to align text vertically to center, a transparent background and a text color of #b5b5b5. The result should be the same as the image below.

Step 4 – Adding Content to Header

Now we need to add the logo, menu items, search text box and latest tweets. Here’s the HTML for the header section.

<div class="header_container">
    <div class="container_16">
        <div class="grid_16 top_header">
            <a href="#" title="Subscribe via RSS">Subscribe via RSS</a>
            |
            <a href="#" title="Follow Me on Twitter">Follow Me on Twitter</a>
            |
            <a href="#" title="My Deviantart">My Deviantart</a>
        </div>
        <div class="grid_10 logo">
            <h1><a title="BurnStudio Designs" href="#">BurnStudio Designs</a>
        </div>
        <div class="grid_6 search">
            <div class="search_fields">
                <input type="text" value="search for something..." />
                <input type="submit" value="Search" />
            </div>
        </div>
        <div class="grid_8 main_menu">
            <a href="#" title="Home" class="active">Home</a>
            <a href="#" title="Services">Services</a>
            <a href="#" title="Portfolio">Portfolio</a>
            <a href="#" title="Blog">Blog</a>
            <a href="#" title="Contact">Contact</a>
        </div>
        <div class="grid_8 tweets">
            <span>Tweet:</span>
            Nullam vitae velit erat, id posuere tellus. Suspendisse potenti.
            Nullam vitae velit erat, id posuere tellus. Suspendisse potenti.
        </div>
    </div>
</div>

I added a division with class “grid_16 top_header” to hold all the links in the top header, then I added a division with class “grid_10 logo” for the logo text contained inside an h1 and a link and a division with class “grid_6 search” to complete the 16 columns and to hold the search text field and submit button. Next, I added a division with class “grid_8 main_menu” to hold the menu items as links with the home link having a class “active”. Finally, I added a division with class “grid_8 tweets” for the latest tweets. Now lets add the CSS for the header content.

.header_container .top_header {
    height: 41px;
    text-align: right;
    font-family: Segoe UI;
    font-size: 11px;
    line-height: 41px;
    text-shadow: 0px 1px 1px #000000;
    filter: dropshadow(color=#000000, offx=0, offy=1);
}

    .header_container .top_header a {
        text-decoration: none;
        color: #5d5d5d;
    }

        .header_container .top_header a:hover {
            color: #6f6f6f;
        }

.header_container .logo, .header_container .search {
    height: 86px;
}

    .header_container .logo h1, .header_container .logo h1 a {
        display: block;
        width: 205px;
        height: 40px;
        background: url(../images/burnstudio_sprite.png) no-repeat;
        background-position: 0px 0px;
        text-indent: -10000px;
        margin: 24px 0 0 0;
    }

    .header_container .search .search_fields {
        background: url(../images/burnstudio_sprite.png) no-repeat;
        background-position: 0px -80px;
        width: 310px;
        height: 41px;
        margin: 24px 0 0 0;
        font-family: Segoe UI;
        float: right;
    }

        .header_container .search .search_fields input[type=text] {
            float: left;
            width: 200px;
            height: 29px;
            line-height: 29px;
            padding: 6px 9px 6px 16px;
            background: transparent;
            border: 0px none;
            font-style: italic;
            color: #5d5d5d;
        }

        .header_container .search .search_fields input[type=submit] {
            float: left;
            width: 80px;
            height: 31px;
            padding: 0px;
            background: transparent;
            border: 0px none;
            text-indent: -10000px;
            cursor: pointer;
            margin: 5px 0 0 0;
        }

.header_container .main_menu, .header_container .tweets {
    height: 41px;
}

    .header_container .main_menu a {
        float: left;
        height: 29px;
        line-height: 29px;
        color: #5d5d5d;
        font-family: Segoe UI;
        font-size: 14px;
        text-decoration: none;
        padding: 0 11px;
        margin: 5px 10px 0 0;
    }

        .header_container .main_menu a:hover, .header_container .main_menu a.active {
            color: #fff;
            -webkit-box-shadow: 0px 1px 0px #060506;
            -moz-box-shadow: 0px 1px 0px #060506;
            box-shadow: 0px 1px 0px #060506;

            background: #E96728; /* old browsers */
            background: -moz-linear-gradient(left, #E96728 0%, #FB824A 50%, #E96728 100%); /* firefox */
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,#E96728), color-stop(50%,#FB824A), color-stop(100%,#E96728)); /* webkit */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E96728', endColorstr='#E96728',GradientType=1 ); /* ie */
        }

.header_container .tweets {
    text-align: right;
    line-height: 65px;
    font-family: Myriad Pro;
    font-size: 13px;
}

    .header_container .tweets span {
        display: block;
        float: left;
        color: #2792c3;
        font-family: Segoe UI;
        font-size: 16px;
        margin: 0 0 0 65px;
    }

The top header division is styled with a fixed height, text alignment to right, a font family and font size, a line height equal to height to center text vertically and a text shadow. Then I styled the top header links both the normal and hover states with text color and no decoration. The logo and search divisions are styled with fixed height. The logo header and link style is set with block display, a fixed height and width, a background image for the logo which is included inside the CSS sprites image and I use background position to show the part I want, a negative text indent of 10000px to make text hidden when viewed in browsers and a top margin of 24px.

Next, I styled the “search_fields” division holding the search text box and submit button with a background image and background position from the CSS sprites image, a fixed height and width, a top margin, a font family and floating to right. The search text field has a left floating with fixed height and width, a line height equal to height to center text vertically, a padding, background set to transparent, no border, a text color and font style set to italic. The search submit button styled with left floating, a fixed height and width, zero padding, transparent background, no border, a negative text indent of 10000px to hide text when viewed in browser, cursor set to pointer and a top margin to position the button correctly. The main menu and tweets division is styled with fixed height.

Now, the main menu links normal state style is set with left floating, a fixed height and an equal line height, text color, a font family and font size, no text decoration, a left and right padding and no top or bottom padding and a top and right margin to make space between menu items. The hover and active state of menu items has a different text color, a box shadow and a gradient background which are both CSS3 features.

Finally, the tweets division is styled to align text to right with a suitable line height, font family and size. The span inside the tweets section style is set with left floating, a block display, a suitable text color, font family and size, and a left margin to position the span correctly. The result should be as the image below.

Step 5 – Adding Slider content, Style and Javascript

Now, we are going to add the slider and for this I am going to use an already implemented script, which is Slidesjs. I modified the script to make it suit our layout and now here’s the HTML for the slider content.

<div id="slides">
    <div class="slides_container">
        <div>
            <img src="images/slide.jpg" alt="" />
            <br />
            <span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</span>
                gravida sem at nisi laoreet placerat.

                Aliquam erat volutpat. Vivamus sagittis.
        </div>
        <div>
            <img src="images/slide.jpg" alt="" />
            <span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</span>
                gravida sem at nisi laoreet placerat.

                Aliquam erat volutpat. Vivamus sagittis.
        </div>
        <div>
            <img src="images/slide.jpg" alt="" />
            <span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</span>
                gravida sem at nisi laoreet placerat.

                Aliquam erat volutpat. Vivamus sagittis.
        </div>
        <div>
            <img src="images/slide.jpg" alt="" />
            <span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</span>
                gravida sem at nisi laoreet placerat.

                Aliquam erat volutpat. Vivamus sagittis.
        </div>
        <div>
            <img src="images/slide.jpg" alt="" />
            <span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</span>
                gravida sem at nisi laoreet placerat.

                Aliquam erat volutpat. Vivamus sagittis.
        </div>
    </div>
</div>

The “slider_container” has two divisions inside it a division with ID “slides” for the script to use and a division with class “slides_container” which will hold all the slides that are represented by a division with the slide content inside it, in this case an image and text contained inside a span element with class “description”. Now let’s add the CSS style for the slider content and script.

.slider_container .slides_container {
	width: 960px;
	display: none;
}

.slider_container .slides_container div {
	width: 960px;
	height: 400px;
	display: block;
    overflow: hidden;
}

    .slider_container .slides_container div span.description {
        color: #fff;
        display: block;
        width: 555px;
        margin: -3px 0 0 10px;
        padding: 15px 0 0 0;
        overflow: hidden;
    }

.slider_container .pagination {
    list-style: none;
	margin: 0;
	padding: 0;
    height: 61px;
    position: absolute;
    top: 339px;
    right: 70px;
    z-index: 100;
}

    .slider_container .pagination li {
        float: left;
        height: 26px;
        width: 26px;
        margin: 18px 5px 0 0;
        text-align: center;
    }

        .slider_container .pagination li a {
            display: block;
            line-height: 26px;
            color: #5d5d5d;
            text-decoration: none;
            font-size: 16px;
            text-shadow: 1px 1px 1px #000000;
            filter: dropshadow(color=#000000, offx=1, offy=1);
        }

        .slider_container .pagination .current a, .slider_container .pagination li a:hover {
	        color: #fff;
            background: url(../images/burnstudio_sprite.png) no-repeat;
            background-position: 0px -50px;
        }

.slider_container a.next {
    position: absolute;
    right: 20px;
    top: 357px;
    z-index: 100;
    display: block;
    height: 28px;
    width: 28px;
    text-indent: -10000px;
    background: url(../images/burnstudio_sprite.png) no-repeat;
    background-position: -35px -50px;
}

.slider_container a.prev {
    display: none;
}

The slides container has a fixed width with display set to none. Each slide division style is set with fixed height and width, a block display and hidden overflow. The description inside each slide is set with white text color, a fixed width, a negative top margin for correct positioning, a left margin for spacing, a top padding and overflow content hidden.

Now, the slider pagination style which is auto generated by the JavaScript is set to be positioned absolutely which will be absolute to the containing relatively positioned element, a top and right values to correctly position it with a z-index value of 100 which acts as a layer value making the pagination on top of other default elements that has a default z-index value of auto and works only on positioned elements. The pagination list element is styled to float to left, fixed height and width and text aligned to the center.

The style of normal state of the link inside each list element is set to display like a block, a line height equal to list element height to center text vertically, a custom text color with no text decoration, a fixed font size and a black text shadow. The hover and current state of the link style is set to have a white text color with a background image and background position to show the part we want from the CSS Sprites image.

Finally, the next and previous elements is styled which is also generated by the JavaScript. I hid the previous link with display none, and styled the next link with a background image with a part from the sprites image set by background position, an absolute position, a top and right values to position link correctly, a z-index of 100, a fixed width and height and a negative text indent to hide the text in browsers.

Now let’s add the required jQuery script in the header. You can find the script file in this tutorial source file or from the jQuery Scrollable script page. The HTML head section should be like this (which will be also used by the portfolio elements slider).

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>BurnStudio Designs</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
    <script type="text/<span class="><!--mce:0--></script>
    <script type="text/<span class="><!--mce:1--></script>
</head>

Finally, we need to add the JavaScript code that will allow the slider to work on our layout. You should add this script just before the closing tag of the body. Here’s the JavaScript.

<script type="text/javascript">
    $(function () {
        $('#slides').slides({
            effect: 'fade',
            preload: true,
            generateNextPrev: true
        });
    });
</script>

Now our layout should look like this.

Step 6 – Adding Main Content and Style

Now let’s add the content for “About Burnstudio”, “What I do?” and “Client Testimonials”, here’s the HTML.

<div class="container_12 content">
    <div class="grid_4 about">
        <h2>About <span class="highlight">Burnstudios</span><br />
        <span class="sub_title">Donec gravida sem at nisi</span></h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sem at nisi laoreet placerat. Aliquam erat volutpat. Vivamus sagittis, erat eget ornare rhoncus, magna leo lobortis.
        </p>
        <a href="#" title="Read More" class="readmore">Read More</a>
    </div>
    <div class="grid_4 what">
        <h2>What <span class="highlight">I Do?</span><br />
        <span class="sub_title">Sed vitae libero diam</span></h2>
        <p>
            Curabitur tristique accumsan urna quis rhoncus. Sed et nisi nec arcu ultricies porttitor. In vehicula ligula a lectus pulvinar aliquet. Mauris vitae leo a sapien malesuada sollicitudin.
        </p>
        <a href="#" title="Read More" class="readmore">Read More</a>
    </div>
    <div class="grid_4 testimonials">
        <h2>Clients <span class="highlight">Testimonials</span><br />
        <span class="sub_title">Pellentesque ut accumsan ibero diam</span>
        <p>
            <img src="images/image.jpg" alt="" />
            Proin luctus sem ut augue luctus hendrerit. Quisque velit felis, gravida feugiat ultrices id, gravida quis enim. Aenean at turpis.
            <br />
            <span>
                Michael,<br />
                <a href="#">www.1stwebdesigner.com</a>
            </span>
        </p>
    </div>
    <div class="clear"></div>
</div>

Notice that the content section contains three divisions with class “grid_4″ and another unique class name for each division. Each division has an <h2> title with two spans inside one for the highlighted text and one for the sub-title text, a paragraph and a read more link with the exception of the last division which has an image and a link inside the paragraph. Then we have a division with class “clear” and it is used to clear floated elements and make the parent container expand to its content. Now let’s add the CSS style for the content.

.content .about {
    margin-left: 0px;
    margin-right: 30px;
}

.content .what {
    margin-left: 0px;
    margin-right: 30px;
}

.content .testimonials {
    margin-left: 0px;
    margin-right: 0px;
}

    .content .grid_4 p {
        text-align: justify;
        margin: 0 0 10px 0;
        line-height: 20px;
    }

        .content .grid_4 p img {
            float: left;
            margin: 0 12px 12px 0;
        }

        .content .grid_4 p span {
            float: right;
            font-style: italic;
            color: #202020;
            text-align: right;
        }

    .content .grid_4 a.readmore {
        width: 81px;
        height: 24px;
        display: block;
        background: url(../images/burnstudio_sprite.png) no-repeat;
        background-position: -225px 0px;
        text-indent: -10000px;
    }

I started by styling the “.about”, “.what” and “.testimonials” classes with zero left margin and a 30px right margin with the testimonials set to zero left and right margins. Now, I styled the paragraph inside each “grid_4″ division with justified text alignment, a bottom margin and a line height of 20px. The image inside the paragraph is styled with left floating and a right and bottom margin to make space between image and text. The span inside the paragraph used in the testimonials text is styled to be italic, float and text aligned to right with a custom color. Finally, the read more link is styled with a background image from the CSS sprites image, a fixed height and width, display set to block and a negative text indent of 10000px to hide text in browsers. Now our layout should look like this.

Step 7 – Adding Portfolio Items, Style and Script

Now let’s add the portfolio items. Here’s the HTML.

<div class="portfolio">
    <h2>
        My <span class="highlight">Portfolio</span></h2>
    <div id="portfolio_slides">
        <div class="slides_container">
            <div>
                <div class="item">
                    <img src="images/portfolio_1.jpg" alt="" />
                    <br />
                    <span>Client: </span>Firstclient.Inc
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
                <div class="item">
                    <img src="images/portfolio_2.jpg" alt="" />
                    <br />
                    Client: Anotherclient
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
                <div class="item">
                    <img src="images/portfolio_3.jpg" alt="" />
                    <br />
                    Client: Anotherclient2
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
                <div class="item">
                    <img src="images/portfolio_4.jpg" alt="" />
                    <br />
                    Client: Anotherclient3
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
            </div>
            <div>
                <div class="item">
                    <img src="images/portfolio_1.jpg" alt="" />
                    <br />
                    <span>Client: </span>Firstclient.Inc
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
                <div class="item">
                    <img src="images/portfolio_2.jpg" alt="" />
                    <br />
                    Client: Anotherclient
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
                <div class="item">
                    <img src="images/portfolio_3.jpg" alt="" />
                    <br />
                    Client: Anotherclient2
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
                <div class="item">
                    <img src="images/portfolio_4.jpg" alt="" />
                    <br />
                    Client: Anotherclient3
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
            </div>
        </div>
    </div>
</div>

The portfolio items slider is the similar in construction as the content slider we used earlier with a few things changed, the ID used is “portfolio_slides” which must be a unique identifier so that we can use in the JavaScript. The division that holds each slide contains four divisions with class “item” each with an image some text and links. Now let’s add the CSS style for the portfolio items.

.portfolio h2 {
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0 none;
    padding: 0;
    margin: 0;
}

.portfolio .slides_container {
	width: 960px;
	display: none;
}

    .portfolio .slides_container div {
	    width: 960px;
        height: 286px;
	    display: block;
        overflow: hidden;
    }

    .portfolio .slides_container div.item {
        float: left;
        width: 210px;
        height: 250px;
        margin: 0 15px;
        margin-top: 36px;
        line-height: 20px;
        overflow: hidden;
    }

        .portfolio .slides_container div.item img {
            border: 3px solid #352e2c;
            margin: 0 0 20px 0;
        }

            .portfolio .slides_container div.item span {
                color: #202020;
            }

        .portfolio .slides_container div.item a {
            font-style: italic;
        }

.portfolio a.next {
    position: absolute;
    right: 15px;
    top: 0px;
    z-index: 100;
    display: block;
    height: 17px;
    width: 16px;
    text-indent: -10000px;
    background: url(../images/burnstudio_sprite.png) no-repeat;
    background-position: -90px -50px;
}

.portfolio a.prev {
    position: absolute;
    right: 50px;
    top: 0px;
    z-index: 100;
    display: block;
    height: 17px;
    width: 16px;
    text-indent: -10000px;
    background: url(../images/burnstudio_sprite.png) no-repeat;
    background-position: -70px -50px;
}

Notice that the header is styled with absolute position so that we can place it any where we want in its container which in this case a zero top and left values, zero border, zero padding and margins. the slides container style is the same as the one in the content slider we implemented above. The division that represents a slide is styled with a fixed height and width and hidden overflow. Now, we style each portfolio item with floating to left, fixed height and width, left and right margins of 15px, a top margin of 36px, a fixed line height and hidden overflow. The image inside each item has a 3px border with a bottom margin. The span has a different color and the links is set to italic. Finally, I added the style for the next and previous links with almost similar styles, different only in right position and background position.

Now we need to make the slider work by adding the JavaScript, we added just after the next script we added above for the content slider. The script block should be like this.

<script type="text/javascript">
    $(function () {
        $('#slides').slides({
            effect: 'fade',
            preload: true,
            generateNextPrev: true
        });
    });
    $(function () {
        $('#portfolio_slides').slides({
            preload: true,
            generateNextPrev: true
        });
    });
</script>

Now our layout should look like this.

Step 8 – Adding Footer Content and Style

Now let’s add the content for the footer, here’s the HTML for the footer.

<div class="container_16">
    <div class="grid_3 explore">
        <h3>
            Explore</h3>
        <ul>
            <li class="first-child"><a href="#" title="Home">Home</a></li>
            <li><a href="#" title="Services">Services</a></li>
            <li><a href="#" title="Blog">Blog</a></li>
            <li><a href="#" title="Portfolio">Portfolio</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
            <li><a href="#" title="Faq's">Faq's</a></li>

	<li class="last-child"><a title="<span class=" href="#">Privasy Policy">Privasy Policy</a></li>
        </ul>
    </div>
    <div class="grid_5 services">
        <h3>
            My Services</h3>
        <ul>

	<li class="first-child">Lorem ipsum dolor sit amet</li>
            <li>Integer vitae purus</li>

	<li>Donec sed velit lacus</li>

	<li>Sed faucibus eros</li>

	<li>Nam hendrerit dui</li>

	<li class="last-child">venenatis non libero</li>
        </ul>
    </div>
    <div class="grid_5 blog">
        <h3>
            Latest From The Blog</h3>
        <p class="first-child">
            01 JLorem ipsum dolor sit amet, consectetur adipiscing.
        </p>
        <p>
            02 Nullam eleifend malesuada ultrices.
        </p>
        <p class="last-child">
            03 Nullam egestas turpis nec eros
        </p>
    </div>
    <div class="grid_3 social">
        <h3>
            Stay Connected</h3>
        <a href="#" title="Facebook">Facebook</a> <a href="#" title="Twitter">Twitter</a>
        <a href="#" title="Linkedin">Linkedin</a>
    </div>
</div>
<div class="container_16 copyrights">
    <div class="grid_16">
        Copyright 2010-2011 <a href="http://www.1stwebdesigner.com" title="1stwebdesigner.com">
            1stwebdesigner.com</a>. All Rights Reserved.
    </div>
</div>

The footer contains four divisions with class names that accumulates to 16 grid each one has an <h3> tag. The first one has an unordered list with links, notice that the first and the last items has a unique class name for later styling. The next one has an unordered list with first and last items having a unique classes. The blog division has paragraphs with the first and last one having a unique classes. The last division has the social links. Finally, the copyrights division has some copyright text with a link inside a “grid_16″ division. Now let’s add the CSS style for the footer content.

.footer a {
    text-decoration: none;
    text-transform: uppercase;
}

.footer h3 {
    color: #fff;
    font-family: Segoe UI;
    font-size: 18px;
    font-weight: normal;
    line-height: 22px;
}

.footer .first-child {
    border-top: 0px none;
}

.footer .last-child {
    border-bottom: 0px none;
}

.footer p {
    font-family: Myriad Pro;
    font-size: 13px;
    text-transform: uppercase;
    color: #b5b5b5;
    height: 42px;
    border-top: 1px solid #353535;
    border-bottom: 1px solid #000;
    margin: 0;
}

    .footer p span {
        font-family: Segoe UI;
        font-size: 24px;
        color: #373737;
        text-shadow: 0px 0px 0px #000000;
        filter: dropshadow(color=#000000, offx=0, offy=0);
        float: left;
        line-height: 42px;
        margin: 0 15px 0 0;
    }

    .footer ul {
        margin: 0;
    }

        .footer ul li {
            list-style: none;
            margin: 0px;
            font-family: Myriad Pro;
            font-size: 13px;
            text-transform: uppercase;
            line-height: 25px;
            border-top: 1px solid #353535;
            border-bottom: 1px solid #000;
        }

            .footer ul li a {
                color: #b5b4b4;
                display: block;
            }

            .footer ul li a:hover {
                color: #d7d5d5;
            }

        .footer .services ul li {
            color: #c3b7a4;
            padding: 0 0 0 21px;
        }

    .footer .social a {
        display: block;
        color: #b5b5b5;
        padding: 0 0 0 50px;
        margin: 0 0 18px 0;
        height: 30px;
        line-height: 30px;
    }

        .footer .social a:hover {
            color: #d7d5d5;
        }

        .footer .social a[title=Facebook] {
            background: url(../images/facebook.png) no-repeat left center;
        }

        .footer .social a[title=Twitter] {
            background: url(../images/twitter.png) no-repeat left center;
        }

        .footer .social a[title=Linkedin] {
            background: url(../images/linkedin.png) no-repeat left center;
        }

I started by styling the links with no text decoration and text transform set to uppercase. Then I styled header 3 with white text color, font family and size, normal font weight and fixed line height. Notice that I styled the general “.first-child” class with zero top border and the general “.last-child” with zero bottom border, although this can be done with CSS3 but it will not work on Internet Explorer 7 or 8 versions. The paragraph is styled with font family and size, uppercase text, a custom color, a fixed height, a top and bottom border with different colors and zero margins.

The span inside the paragraphs is has a different font family and size, different color, has no text shadow, a floating to the left, a line height equal to paragraphs height to center the text vertically and a right margin. Now the unordered list has zero margins, the list items is styled with no list style, zero margins, custom font family and size, uppercase text, a fixed line height, and a top and bottom border with different colors. The links inside list elements has different color and block display, with a hover different hover state text color. The services list item color is changed to #c3b7a4 with a bottom padding.

Finally, the social links is styled with block display, custom text color, a bottom padding to make space for the background image, a bottom margin for space between links and an equal height and line height values to center text vertically. Now, each social link is styled according to its title text with a convenient background image as an icon.

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD that looks exactly like this.

Conclusion

So that’s it. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don’t forget to validate and check for browser compatibility (the layout will not validate because of JavaScript & CSS3 styles, remove both to validate properly). If there is a part of this tutorial you didn’t understand, or you have a better technique, feel free to share with everyone by commenting below.

Go to Source

CSSWARP is a free-to-use web application that enables us to warp text with drag 'n' drops and get the HTML-CSS output.

The text, curve type and font can be customized (fonts can also be selected from Google Fonts).

After the warp effect is created, the HTML-CSS to be used can be instantly generated.

P.S. It is also possible to include/exclude browser-specific CSS rules.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Go to Source

You are welcome if you want to share more useful web apps that our readers/viewers may like. Do you want to be the first one to know the latest happenings at SmashingApps.com, just subscribe to our rss feed and you can follow us on twitter and follow us on Digg as well to get updated.

PDFUnlock

PDF files can have restrictions that prevent you from for example copying text from them or editing, printing or merging them. PDFUnlock can remove these restrictions (a.k.a “owner password”)

ShiftEdit

ShiftEdit is an online IDE for developing PHP, Ruby, HTML, CSS and JavaScript with built-in (S)FTP.

Join.me

Join.me is an impromptu meeting space that happens wherever, whenever. It’s getting a second or third pair of eyes on your presentation from across the hall or across the continent. It’s sharing your screen instantly with anyone or everyone to get stuff done, quickly.

IdentyMe

IdentyMe is a service for making of virtual business cards. You can collect all your contacts in one place and create a portfolio. It will helps you share information with new people, find new friends and business partners.

TitanPad

TitanPad lets people work on one document simultaneously. While working on this app, you may do infinite undo and everyone gets their own color.

dushare

dushare is a simple direct file-file-transfer service. It makes sending unlimited file sizes between two people as simple as clicking a link. You can send you files to your peers directly (P2P) with no server for upload/download.

SmartPointment

SmartPointment is a simple but effective way to schedule appointments online. With this, You can let your customers schedule appointments at their convenience. SmartPointment analytics give you the insight you need so you can direct your efforts into what has the most impact on your business.

Respelt

Respelt is a free online spell checker with a powerful feature set. It help you spell check your documents, web pages and even RSS feeds.

PrintWhatYouLike

Tired of printing web pages only to find your printout is full of ads, empty space and other junk you don’t want? PrintWhatYouLike is a free online editor that lets you format any web page for printing in seconds.

codepaste

CodePaste provides an easy and convenient way to send/share PHP, C++, Javascript, Java, CSS, Actionscript and HTML code with others. Copy and paste the code and enter the email where you want the CodePaste to send it. CodePaste then nicely formats the code and sends it over.

Brought To You By

Do you want to advertise here? Click to get more info…

Go to Source

Now, let’s get started with this tutorial.

Links you will need to complete this tutorial:

• Create a Fantastic Landing Page for Your Next Product Using Photoshop
• 960 Grid System
• Slidesjs

Here’s what we’ll be creating (Click on image to view a full working demo).

You can also download this tutorial’s source files here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this landing page you probably noticed that 960gs grid system was used to create guidelines. Well, in this tutorial we will also need the 960gs CSS framework. Using CSS frameworks makes layout and style creation a lot easier and saves time in web development. Now you should download the 960 Grid system source files for usage in this tutorial.

You will also need a code editor; you can use a plain text editor such as the Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

During this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 3.6.

Step 2 – Getting Your Files Ready

First thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file and the slider JavaScript file. The HTML file goes in the root directory.

Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy 960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the same files but in a bigger and more readable format, I recommend using the compressed CSS files. You also need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory.

In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you’ll find the images I created.

Step 3 – Simple Starter Layout

We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:

1. The layout has a background image for the body that is repeated horizontally.
2. The layout has a header which contains a logo, slogan and menu items.
3. The content of the layout is separated into two columns: the left column contains slider and features, while the right column contains a featured section with two buttons, newsletter sign-up form and about us text.
4. The bottom section of the layout has two sections a footer with latest news, latest tweets and get connected social icons, and a copyright section with copyright text and links.
5. Finally, all divisions have a background color and no background image.

You can follow the notes above by looking at this image.

Now, Based on these notes we create the following HTML layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>3D BOX</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/tut_style.css" rel="stylesheet" media="all" />
</head>
<body>
    <div class="header_container">
        <div class="container_12">
            header content goes here.
        </div>
    </div>
    <div class="container_12">
        <div class="left_column grid_6">
            slider and features content goes here.
        </div>
        <div class="right_column grid_6">
            featured, newsletter sign up form and about us content goes here.
        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        <div class="container_12">
            footer content goes here.
        </div>
    </div>
    <div class="copyright_links">
        <div class="container_12">
            copyright and links goes here.
        </div>
    </div>
</body>
</html>

Notice in this simple layout that we added four main divisions. A division with class “header_container” containing a division with a class “container_12″ which is already styled in 960.css file and we use it to limit the layout width and center it horizontally in the page. Then a division with class “container_12″ that contains two columns a division with class “left_column grid_6″ and another one with class “right_column grid_6″ and we add the “grid_6″ class name because we want our division to have all the styling required to match the containing division and because both columns has nearly the same width which will be reset in the “left_column” and “right_column” classes to match our required widths. Then we added a division with class “footer” containing a division with class “container_12″. Finally, we added a division with class “copyright_links” containing a division with a class “container_12″. Now let’s add the CSS as follows (all CSS should be added in style.css file):

body {
    color: #403f3f;
    background: #fff url(../images/bg.jpg) repeat-x;
    background-position: center 100px;
    font-size: 12px;
    font-family: Arial;
}

a {
    text-decoration: none;
}

.header_container {
    width: 100%;
    background: #191919;
    height: 100px;
    overflow: hidden;
    margin: 0 0 27px 0;
}

.container_12 .left_column {
    width: 500px;
    margin-right: 5px;
}

.container_12 .right_column {
    width: 404px;
    padding: 0 0 0 26px;
    margin-left: 5px;
}

.footer {
    width: 100%;
    height: 215px;
    background: #282828;
    color: #d9d9d9;
    padding: 28px 0 0 0;
}

.copyright_links {
    width: 100%;
    height: 32px;
    background: #191919;
    color: #9e9e9e;
    line-height: 32px;
    font-size: 11px;
}

In the above CSS code we started by styling the body with color set to #403f3f, background color to #fff, background image to “bg.jpg” horizontally repeating, set background vertical position to 100px to start the background just after the header, font size to 12px and font family to Arial. Then we set all links to have no text decoration. Now we set “header_container” style with 100% width to fill all the browser’s visible area, background color to #191919, a fixed height of 100px, overflow to hidden so that all header extra content is hidden and a bottom margin of 27px. Now we need to reset the left and right column widths and margins, we set left column to have 500px width and 5px right margin, and the right column to have 404px width and 5px left margin with an extra left padding of 26px. Now let’s style the footer division with 100% width, a height of 215px, background color to #282828, text color to #d9d9d9 and a top padding of 28px.

Finally, we style the copyright division with 100% width, a fixed height of 32px, background color to #191919, text color to #9e9e9e, line height to the same as height so that the text is aligned to center vertically and font size to 11px. The result should be the same as the image below.

Step 4 – Adding Logo and Menu Items to Header

Now we need to add the logo and menu items, here’s the HTML for the header section.

    <div class="header_container">
        <div class="container_12">
            <div class="grid_5">
                <h1><a href="#" title="3D BOX">3D BOX</a></h1>
                <div class="slogan">The fastest way to create your box</div>
            </div>
            <div class="grid_7">
                <div class="menu">
                    <a href="#" title="HOME" class="active">HOME</a>
                    <a href="#" title="PRODUCTS">PRODUCTS</a>
                    <a href="#" title="SUPPORT">SUPPORT</a>
                    <a href="#" title="ABOUT">ABOUT</a>
                    <a href="#" title="CONTACT">CONTACT</a>
                </div>
            </div>
        </div>
    </div>

Now, we added two divisions one for the logo with class “grid_5″ and one for the menu items with class “grid_7″. The logo text is added inside <h1> with the slogan added inside a division with class “slogan”. The menu item links are added inside a division with class “menu”. Now lets add the CSS for the header content.

.header_container {
    width: 100%;
    background: #191919;
    height: 100px;
    overflow: hidden;
    margin: 0 0 27px 0;
}

    .header_container h1 {
        display: block;
        margin: 20px 0 0 0;
        line-height: 55px;
        width: 150px;
        height: 55px;
        float: left;
        border-right: 1px solid #414141;
    }

        .header_container h1 a {
            color: #e0cf39;
            font-size: 36px;
        }

    .header_container .slogan {
        display: block;
        float: left;
        color: #fff;
        height: 55px;
        line-height: 55px;
        margin: 20px 0 0 15px;
    }

    .header_container .menu {
        float: right;
        display: block;
    }

    .header_container .menu a {
        color: #9e9e9e;
        display: block;
        float: left;
        height: 100px;
        line-height: 100px;
        padding: 0 18px;
        margin: 0 0 0 5px;
    }

        .header_container .menu a:hover, .header_container .menu a.active {
            background: #282828;
            color: #fff;
            border-top: 4px solid #e0cf39;
            height: 96px;
            line-height: 92px;
        }

I started by styling the <h1> by setting display to block, top margin to 20px, line height to 55px, width to 150px, height to 55px, set floating to left and a right border of 1px with a color of #414141 to represent the vertical separator between the logo and the slogan. Then I styled the logo’s link with the color set to #e0cf39 and font size to 36px. Now we style the slogan by setting display to block, floating to the left, text color to white, a fixed height of 55px,  line height similar to height to center text vertically, top margin of 20px and left margin of 15px.

Let’s style the menu items, we start by styling the menu items container by setting float to right and display to block. Now we style the links normal state for menu items by setting text color to #9e9e9e, display to block, float to left, a fixed height and line height similar to the header height, a left and right padding of 18px and a left margin of 5px. Finally, we style the links hover and active states for the menu items by setting background color to #282828, text color to white, a 4px wide solid top border with a color of #e0cf39, height and line height to 96px to compensate for the 4 pixels taken by the top border. The result should be as the image below.

Step 5 – Adding Slider Content, Style and Javascript

Now, we are going to add the slider and for this I am going to use an already implemented script, which is Slidesjs. I did take the script and modified it to make it suit our layout and now here’s the HTML for the slider content which will be included inside the left column.

        <div class="left_column grid_6">
            <div class="slider">
                <div id="slider">
                    <div class="slides_container">
                        <div>
                            <img src="images/image.jpg" alt="" />
                        </div>
                        <div>
                            <img src="images/image.jpg" alt="" />
                        </div>
                        <div>
                            <img src="images/image.jpg" alt="" />
                        </div>
                        <div>
                            <img src="images/image.jpg" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

The script is so easy to use and modify that I only needed to add a division with class “slider” that contains another division with an ID “slider” which will be used by the script to make the slider works. Then the slides is simply a division with an image inside, that I added it 4 times inside the division “slides_container”. Now let’s add the CSS style for the slider content and script.

.container_12 .left_column .slider {
    background: url(../images/slider.png) no-repeat bottom center;
    width: 470px;
    height: 286px;
    margin: 0 0 34px 0;
}

    .slides_container {
        width:460px;
        height: 239px;
        display: none;
        border: 5px solid #fff;
    }

        .slides_container div {
            width: 460px;
            height: 239px;
            display: block;
        }

    .pagination {
        list-style: none;
        display: block;
        padding: 0;
        margin: 26px 0 0 216px;
        float: left;
        width: 60px;
    }

    .pagination li {
        float: left;
        margin: 0;
        padding: 0;
    }

    .pagination li a {
        height: 10px;
        width: 10px;
        float: left;
        text-indent: -10000px;
        background: url(../images/slider_bullets.png) no-repeat;
        background-position: -15px center;
        margin: 0 5px 0 0;
    }

    .pagination li a:hover {
        background-position: 0px center;
    }

    .pagination .current a {
        background-position: 0px center;
    }

The slider division is styled with a background image to represent the shadow underneath the slider, a fixed height and width and a bottom margin of 34px. Then I styled the slides container with fixed height and width, display set to none and a 5px solid white border. Now we style the divisions holding the images with fixed height and width and display set to block. Now you notice that there’s a style for something called pagination, and this style is for a content added by the script after the slides to represent the paging navigation for the slides. I styled it so that it is now represented by a background circle image for normal, hover and current states.

Now let’s add the required jQuery script in the header. You can find the script file in this tutorial source file or from the jQuery Scrollable script page. The HTML head section should be like this.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>3D BOX</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="styles/slides.min.jquery.js"></script>
</head>

Finally, we need to add the Javascript code that will allow the slider to work on our layout. You should add this script just before the closing tag of the body. Here’s the Javascript.

<script type="text/javascript">
    $(function () {
        $('#slider').slides({
            preload: true
        });
    });
</script>

Now our layout should look like this.

Step 6 – Adding Features Content and Style

We are still adding content inside the left column and now we need to add the features content right after the slider content, here’s the HTML.

<div class="features_item">
    <h3>
        <img src="images/radio.png" alt="" />
        Sed accumsan arcu
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="features_item with_margin">
    <h3>
        <img src="images/disk.png" alt="" />
        Fusce eu erat metus
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="clear"></div>
<div class="features_item">
    <h3>
        <img src="images/usb.png" alt="" />
        Cras auctor pharetra
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="features_item with_margin">
    <h3>
        <img src="images/mail.png" alt="" />
        Lorem ipsum dolor
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="clear"></div>
<div class="features_item">
    <h3>
        <img src="images/link.png" alt="" />
        Nullam pharetra males
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="features_item with_margin">
    <h3>
        <img src="images/under_const.png" alt="" />
        Sed accumsan arcu
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>

Now if you take a look at the HTML above you will notice that there’s a pattern of two three divisions repeated three times, a division with class “features_item”, a division with class “features_item with_margin” and a final division with class “clear” for clearing floated elements. Every division has an <h3> tag with the icon image inside it, and then a paragraph. Now let’s add the CSS style for the features content.

.container_12 .left_column .features_item {
    width: 240px;
    float: left;
}

    .container_12 .left_column .features_item.with_margin {
        margin-left: 20px;
    }

    .container_12 .left_column .features_item h3 {
        font-size: 14px;
        margin: 0 0 5px 0;
        line-height: 32px;
    }

        .container_12 .left_column .features_item h3 img {
            float: left;
            margin: 0 30px 0 0;
        }

    .container_12 .left_column .features_item p {
        line-height: 30px;
        text-align: justify;
    }

Notice that for the “features_item” class there’s two styles: “.container_12 .left_column .features_item” and “.container_12 .left_column .features_item.with_margin”, the difference between both styles is that one has no margins and the other one has a left margin of 20px. The features item class has a float to left and a fixed width. The header 3 is styled with 14px for font size, 5px bottom margin and line height of 32px. The image inside the header style is set to floating to left and right margin of 30px for the space between the image and the text. Finally, I styled the paragraph with 30px line height and text align is set to justify. Now our layout should look like this.

Step 7 – Adding Featured Content and Style

Now we need to add the featured content with buttons in the right column section. Here’s the HTML for the featured content.

<h2>3D Box Generator</h2>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum neque eu justo sodales cursus. In nisl turpis, placerat rutrum facilisis in, lacinia nec velit. Vestibulum fermentum felis ut nunc ele mentum adipiscing. Duis eu lacus vel ligula vulputate convallis eu vitae mi. Fusce ut facilisis massa.
</p>
<a href="#" title="GET FREE TRIAL" class="free_trial_button">GET FREE TRIAL</a>
<a href="#" title="PURCHASE NOW" class="purchase_now_button">PURCHASE NOW</a>

We added a <h2> tag with a title inside it, a paragraph and then two links which will represent “Purchase Now” and “Get Free Trial” buttons. Now we need to style the featured content, here’s the CSS styles.

.container_12 .right_column h2 {
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 18px 0;
}

.container_12 .right_column p {
    line-height: 24px;
    margin: 0 0 40px 0;
}

.container_12 .right_column .free_trial_button {
    background: url(../images/buttons_form_bg.png) no-repeat;
    background-position: -26px 0px;
    height: 56px;
    width: 160px;
    float: left;
    text-indent: -10000px;
    margin: 0 20px 0 0;
}

.container_12 .right_column .purchase_now_button {
    background: url(../images/buttons_form_bg.png) no-repeat;
    background-position: -206px 0px;
    height: 56px;
    width: 160px;
    float: left;
    text-indent: -10000px;
}

The style for header 2 is set to have font size of 24px, normal font weight and a bottom margin of 18px. The paragraph is styled to have 24px for line height and 40px as bottom margin. Now, we’ll style the buttons which have almost the same style, but with the free trial button having a right margin and different background position as we are using a CSS technique called CSS Sprites which allows us to choose what to show from a single image using CSS background position properties. The buttons classes style is set with background image that has no repeat, background position, a fixed height and width, floating to left and a text indent set to -10000px which allows the text to be available in the HTML but it is hidden when viewed in browsers and this has some SEO benefits. The result should be as the image below.

Step 8 – Adding Newsletter Sign Up Form HTML and CSS

Now let’s add the HTML for the Newsletter sign up form.

<div class="newsletter">
    <a href="#" title="Sign Up For FREE!" class="sign_up">Sign Up For FREE!</a>
    <div class="clear"></div>
    <input type="text" class="name" />
    <input type="text" class="email" />
    <p>
        Nullam fringilla egestas turpis ac viverra. Ut turpis eros, sus- cipit sit amet dapibus eget, interdum eget ante. Duis cursus metus molestie lectus cursus non blandit velit sagittis. Donec posuere mattis leo in interdum. Aliquam sollicitudin, nulla eget ullamcorper iaculis, felis magna posuere tortor, quis euismod enim lectus ac leo.
    </p>
</div>

I added a division with class “newsletter” which will act as a container for form elements, inside it I added a link for the “Sign Up For FREE” then two text inputs for name and email and finally a paragraph. Now let’s add the CSS style for the newsletter sign up form.

.container_12 .right_column .newsletter {
    background: url(../images/buttons_form_bg.png) no-repeat;
    background-position: 0px -63px;
    height: 384px;
    width: 403px;
    padding: 0 0 0 25px;
    margin: 0 0 29px -25px;
    clear: both;
}

    .container_12 .right_column .newsletter a {
        width: 188px;
        height: 40px;
        float: right;
        text-indent: -10000px;
        margin: 26px 15px 10px 0;
    }

    .container_12 .right_column .newsletter input[type=text] {
        width: 305px;
        height: 20px;
        line-height: 20px;
        background: transparent;
        border: 0px none;
    }

        .container_12 .right_column .newsletter input[type=text].name {
            margin-bottom: 14px;
            margin-left: 82px;
        }

        .container_12 .right_column .newsletter input[type=text].email {
            margin-left: 86px;
        }

    .container_12 .right_column .newsletter p {
        font-family: Georgia;
        line-height: 30px;
        text-align: justify;
        margin: 40px 14px 0 18px;
    }

If you look at the full layout image you’ll probably notice that the sign up form’s background image is not aligned with the content and in order to do this we are going to use negative margins which will allow us to expand the sign up form background image as we like. We styled the newsletter division with a background image, background position, a fixed height and width, positive left padding equal to the negative left margin, bottom margin and clear set to both to clear all floated elements. Now we set the “Sign Up For FREE” link style with fixed width and height, floating to right, negative text indentation to hide the text and some top, right and bottom margins. Let’s style the the text input general style with fixed height and width, line height to a value equal to height to center text vertically, background set to transparent and with no border. for the name and email text inputs style I added some margins to place them right where we need. Finally, I styled the paragraph with font family to Georgia, line height to 30px, text align to justify, top margin to 40px, right margin to 14px and left margin to 18px. The result should be as the image below.

Step 9 – Adding About Us Content and Style

Now let’s add the HTML for About Us content.

<h3>About Us</h3>
<p class="about_us">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan arcu in massa tempor sed pulvinar leo consectetur. Fusce tempor porta cursus. Nullam pharetra malesuada neque eu volutpat. Cras auctor phar- etra ipsum, et ultrices dui dictum a. U erat metus, nibh massa.
</p>

I added a <h3> tag then paragraph with some text, now let’s add the CSS style for About Us content.

.container_12 .right_column h3 {
    font-size: 14px;
    line-height: 28px;
    border-bottom: 1px dotted #666;
    margin: 0 0 5px 0;
}

.container_12 .right_column p.about_us {
    line-height: 30px;
    text-align: justify;
}

I styled the header 3 with font size set to 14px, line height to 28px, 1px dotted border with color set to #666 and a bottom margin of 5px. Finally, I styled the paragraph with class “about_us” to have 30px for line height and text alignment to justify. The result should be as the image below.

Step 10 – Adding Footer Content and Style

Let’s add the HTML for the footer content.

<div class="footer">
    <div class="container_12">
        <div class="grid_4">
            <h3>Latest News</h3>
            <p>
                Nullam mollis arcu sodales mauris interdum ac rhoncus
mi imperdiet.
            </p>
            <p>
                Donec aliquam scelerisque est, a sagittis odio vehicula
Ut facilisis cursus mi.
            </p>
        </div>
        <div class="grid_4">
            <h3>Recent Tweets</h3>
            <p>
                Nullam mollis arcu sodales mauris interdum ac rhoncus
mi imperdiet. <span>12 minutes ago</span>
            </p>
            <p>
                Donec aliquam scelerisque est, a sagittis odio vehicula
Ut facilisis cursus mi. <span>12 minutes ago</span>
            </p>
        </div>
        <div class="grid_4">
            <h3>Get Connected</h3>
            <p class="connected">
                Nullam mollis arcu sodales mauris interdum ac rhoncus
mi imperdiet.
            </p>
            <a href="#"><img src="images/facebook.png" alt="" /></a>
            <a href="#"><img src="images/twitter.png" alt="" /></a>
            <a href="#"><img src="images/contact.png" alt="" /></a>
        </div>
    </div>
</div>

I used three divisions with class “grid_4″ which will divide the footer into three equal sections, the first one has an <h3> tag with two paragraphs. The second one is the same as the first with the exception of a span inside the paragraph and the final division with an <h3> tag, a paragraph and the social icons links and images. Now, let’s add the CSS style for the footer content.

.footer .container_12 h3 {
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    margin: 0 0 20px 0;
}

.footer .container_12 p {
    text-align: justify;
    line-height: 18px;
    border-bottom: 1px dotted #666;
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
}

.footer .container_12 p.connected {
    border: 0px none;
}

    .footer .container_12 p span {
        color: #e0cf39;
        font-size: 10px;
    }

.footer .container_12 a {
    margin: 0 8px 0 0;
}

I styled the header 3 with white font color, font size set to 18px, normal font weight and a bottom margin. I styled the paragraph style with justified text alignment, line height set to 18px, 1px dotted bottom border with color set to #666, a bottom margin and a bottom padding. Then I styled the “connected” paragraph with no border and the span inside the paragraphs with color set to #e0cf39 and font size set to 10px. and then I styled the links to have a right margin. The result should be as the image below.

Step 11 – Adding Copyright Content and Style

Let’s add the HTML content for the Copyright text and links.

<div class="copyright_links">
    <div class="container_12">
        <div class="grid_4">
            Copyright 2010 3D BOX, All Rights Reserved.
        </div>
        <div class="grid_8">
            <a href="#" title="Home" class="active">Home</a>
            <a href="#" title="Privacy Policy">Privacy Policy</a>
            <a href="#" title="Terms">Terms</a>
            <a href="#" title="Help">Help</a>
            <a href="#" title="Contact">Contact</a>
        </div>
    </div>
</div>

I added two divisions with class “grid_4″ for copyright text and “grid_8″ for the links. Now let’s add the CSS style.

.copyright_links .container_12 .grid_4 {
    text-align: left;
}

.copyright_links .container_12 .grid_8 {
    text-align: right;
}

.copyright_links .container_12 .grid_8 a {
    color: #9e9e9e;
    margin: 0 0 0 15px;
}

First I set “grid_4″ text alignment to left and “grid_8″ to right, and then I styled the links with color set to #9e9e9e and a left margin of 15px.

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD that looks exactly like this.

Conclusion

So that’s it. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don’t forget to validate and check for browser compatibility (the layout will not validate because of Javascript & CSS3 styles, remove both to validate properly). If there was a part of this tutorial you didn’t understand, or you have a better technique, please be kind and say something in the comments below.

Go to Source

Now, let’s get started with this tutorial.

Links you will need to complete this tutorial:

• Create a Fantastic Landing Page for Your Next Product Using Photoshop
• 960 Grid System
• Slidesjs

Here’s what we’ll be creating (Click on image to view a full working demo).

You can also download this tutorial’s source files here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this landing page you probably noticed that 960gs grid system was used to create guidelines. Well, in this tutorial we will also need the 960gs CSS framework. Using CSS frameworks makes layout and style creation a lot easier and saves time in web development. Now you should download the 960 Grid system source files for usage in this tutorial.

You will also need a code editor; you can use a plain text editor such as the Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

During this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 3.6.

Step 2 – Getting Your Files Ready

First thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file and the slider JavaScript file. The HTML file goes in the root directory.

Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy 960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the same files but in a bigger and more readable format, I recommend using the compressed CSS files. You also need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory.

In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you’ll find the images I created.

Step 3 – Simple Starter Layout

We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:

1. The layout has a background image for the body that is repeated horizontally.
2. The layout has a header which contains a logo, slogan and menu items.
3. The content of the layout is separated into two columns: the left column contains slider and features, while the right column contains a featured section with two buttons, newsletter sign-up form and about us text.
4. The bottom section of the layout has two sections a footer with latest news, latest tweets and get connected social icons, and a copyright section with copyright text and links.
5. Finally, all divisions have a background color and no background image.

You can follow the notes above by looking at this image.

Now, Based on these notes we create the following HTML layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>3D BOX</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/tut_style.css" rel="stylesheet" media="all" />
</head>
<body>
    <div class="header_container">
        <div class="container_12">
            header content goes here.
        </div>
    </div>
    <div class="container_12">
        <div class="left_column grid_6">
            slider and features content goes here.
        </div>
        <div class="right_column grid_6">
            featured, newsletter sign up form and about us content goes here.
        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        <div class="container_12">
            footer content goes here.
        </div>
    </div>
    <div class="copyright_links">
        <div class="container_12">
            copyright and links goes here.
        </div>
    </div>
</body>
</html>

Notice in this simple layout that we added four main divisions. A division with class “header_container” containing a division with a class “container_12″ which is already styled in 960.css file and we use it to limit the layout width and center it horizontally in the page. Then a division with class “container_12″ that contains two columns a division with class “left_column grid_6″ and another one with class “right_column grid_6″ and we add the “grid_6″ class name because we want our division to have all the styling required to match the containing division and because both columns has nearly the same width which will be reset in the “left_column” and “right_column” classes to match our required widths. Then we added a division with class “footer” containing a division with class “container_12″. Finally, we added a division with class “copyright_links” containing a division with a class “container_12″. Now let’s add the CSS as follows (all CSS should be added in style.css file):

body {
    color: #403f3f;
    background: #fff url(../images/bg.jpg) repeat-x;
    background-position: center 100px;
    font-size: 12px;
    font-family: Arial;
}

a {
    text-decoration: none;
}

.header_container {
    width: 100%;
    background: #191919;
    height: 100px;
    overflow: hidden;
    margin: 0 0 27px 0;
}

.container_12 .left_column {
    width: 500px;
    margin-right: 5px;
}

.container_12 .right_column {
    width: 404px;
    padding: 0 0 0 26px;
    margin-left: 5px;
}

.footer {
    width: 100%;
    height: 215px;
    background: #282828;
    color: #d9d9d9;
    padding: 28px 0 0 0;
}

.copyright_links {
    width: 100%;
    height: 32px;
    background: #191919;
    color: #9e9e9e;
    line-height: 32px;
    font-size: 11px;
}

In the above CSS code we started by styling the body with color set to #403f3f, background color to #fff, background image to “bg.jpg” horizontally repeating, set background vertical position to 100px to start the background just after the header, font size to 12px and font family to Arial. Then we set all links to have no text decoration. Now we set “header_container” style with 100% width to fill all the browser’s visible area, background color to #191919, a fixed height of 100px, overflow to hidden so that all header extra content is hidden and a bottom margin of 27px. Now we need to reset the left and right column widths and margins, we set left column to have 500px width and 5px right margin, and the right column to have 404px width and 5px left margin with an extra left padding of 26px. Now let’s style the footer division with 100% width, a height of 215px, background color to #282828, text color to #d9d9d9 and a top padding of 28px.

Finally, we style the copyright division with 100% width, a fixed height of 32px, background color to #191919, text color to #9e9e9e, line height to the same as height so that the text is aligned to center vertically and font size to 11px. The result should be the same as the image below.

Step 4 – Adding Logo and Menu Items to Header

Now we need to add the logo and menu items, here’s the HTML for the header section.

    <div class="header_container">
        <div class="container_12">
            <div class="grid_5">
                <h1><a href="#" title="3D BOX">3D BOX</a></h1>
                <div class="slogan">The fastest way to create your box</div>
            </div>
            <div class="grid_7">
                <div class="menu">
                    <a href="#" title="HOME" class="active">HOME</a>
                    <a href="#" title="PRODUCTS">PRODUCTS</a>
                    <a href="#" title="SUPPORT">SUPPORT</a>
                    <a href="#" title="ABOUT">ABOUT</a>
                    <a href="#" title="CONTACT">CONTACT</a>
                </div>
            </div>
        </div>
    </div>

Now, we added two divisions one for the logo with class “grid_5″ and one for the menu items with class “grid_7″. The logo text is added inside <h1> with the slogan added inside a division with class “slogan”. The menu item links are added inside a division with class “menu”. Now lets add the CSS for the header content.

.header_container {
    width: 100%;
    background: #191919;
    height: 100px;
    overflow: hidden;
    margin: 0 0 27px 0;
}

    .header_container h1 {
        display: block;
        margin: 20px 0 0 0;
        line-height: 55px;
        width: 150px;
        height: 55px;
        float: left;
        border-right: 1px solid #414141;
    }

        .header_container h1 a {
            color: #e0cf39;
            font-size: 36px;
        }

    .header_container .slogan {
        display: block;
        float: left;
        color: #fff;
        height: 55px;
        line-height: 55px;
        margin: 20px 0 0 15px;
    }

    .header_container .menu {
        float: right;
        display: block;
    }

    .header_container .menu a {
        color: #9e9e9e;
        display: block;
        float: left;
        height: 100px;
        line-height: 100px;
        padding: 0 18px;
        margin: 0 0 0 5px;
    }

        .header_container .menu a:hover, .header_container .menu a.active {
            background: #282828;
            color: #fff;
            border-top: 4px solid #e0cf39;
            height: 96px;
            line-height: 92px;
        }

I started by styling the <h1> by setting display to block, top margin to 20px, line height to 55px, width to 150px, height to 55px, set floating to left and a right border of 1px with a color of #414141 to represent the vertical separator between the logo and the slogan. Then I styled the logo’s link with the color set to #e0cf39 and font size to 36px. Now we style the slogan by setting display to block, floating to the left, text color to white, a fixed height of 55px,  line height similar to height to center text vertically, top margin of 20px and left margin of 15px.

Let’s style the menu items, we start by styling the menu items container by setting float to right and display to block. Now we style the links normal state for menu items by setting text color to #9e9e9e, display to block, float to left, a fixed height and line height similar to the header height, a left and right padding of 18px and a left margin of 5px. Finally, we style the links hover and active states for the menu items by setting background color to #282828, text color to white, a 4px wide solid top border with a color of #e0cf39, height and line height to 96px to compensate for the 4 pixels taken by the top border. The result should be as the image below.

Step 5 – Adding Slider Content, Style and Javascript

Now, we are going to add the slider and for this I am going to use an already implemented script, which is Slidesjs. I did take the script and modified it to make it suit our layout and now here’s the HTML for the slider content which will be included inside the left column.

        <div class="left_column grid_6">
            <div class="slider">
                <div id="slider">
                    <div class="slides_container">
                        <div>
                            <img src="images/image.jpg" alt="" />
                        </div>
                        <div>
                            <img src="images/image.jpg" alt="" />
                        </div>
                        <div>
                            <img src="images/image.jpg" alt="" />
                        </div>
                        <div>
                            <img src="images/image.jpg" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

The script is so easy to use and modify that I only needed to add a division with class “slider” that contains another division with an ID “slider” which will be used by the script to make the slider works. Then the slides is simply a division with an image inside, that I added it 4 times inside the division “slides_container”. Now let’s add the CSS style for the slider content and script.

.container_12 .left_column .slider {
    background: url(../images/slider.png) no-repeat bottom center;
    width: 470px;
    height: 286px;
    margin: 0 0 34px 0;
}

    .slides_container {
        width:460px;
        height: 239px;
        display: none;
        border: 5px solid #fff;
    }

        .slides_container div {
            width: 460px;
            height: 239px;
            display: block;
        }

    .pagination {
        list-style: none;
        display: block;
        padding: 0;
        margin: 26px 0 0 216px;
        float: left;
        width: 60px;
    }

    .pagination li {
        float: left;
        margin: 0;
        padding: 0;
    }

    .pagination li a {
        height: 10px;
        width: 10px;
        float: left;
        text-indent: -10000px;
        background: url(../images/slider_bullets.png) no-repeat;
        background-position: -15px center;
        margin: 0 5px 0 0;
    }

    .pagination li a:hover {
        background-position: 0px center;
    }

    .pagination .current a {
        background-position: 0px center;
    }

The slider division is styled with a background image to represent the shadow underneath the slider, a fixed height and width and a bottom margin of 34px. Then I styled the slides container with fixed height and width, display set to none and a 5px solid white border. Now we style the divisions holding the images with fixed height and width and display set to block. Now you notice that there’s a style for something called pagination, and this style is for a content added by the script after the slides to represent the paging navigation for the slides. I styled it so that it is now represented by a background circle image for normal, hover and current states.

Now let’s add the required jQuery script in the header. You can find the script file in this tutorial source file or from the jQuery Scrollable script page. The HTML head section should be like this.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>3D BOX</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="styles/slides.min.jquery.js"></script>
</head>

Finally, we need to add the Javascript code that will allow the slider to work on our layout. You should add this script just before the closing tag of the body. Here’s the Javascript.

<script type="text/javascript">
    $(function () {
        $('#slider').slides({
            preload: true
        });
    });
</script>

Now our layout should look like this.

Step 6 – Adding Features Content and Style

We are still adding content inside the left column and now we need to add the features content right after the slider content, here’s the HTML.

<div class="features_item">
    <h3>
        <img src="images/radio.png" alt="" />
        Sed accumsan arcu
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="features_item with_margin">
    <h3>
        <img src="images/disk.png" alt="" />
        Fusce eu erat metus
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="clear"></div>
<div class="features_item">
    <h3>
        <img src="images/usb.png" alt="" />
        Cras auctor pharetra
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="features_item with_margin">
    <h3>
        <img src="images/mail.png" alt="" />
        Lorem ipsum dolor
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="clear"></div>
<div class="features_item">
    <h3>
        <img src="images/link.png" alt="" />
        Nullam pharetra males
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="features_item with_margin">
    <h3>
        <img src="images/under_const.png" alt="" />
        Sed accumsan arcu
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>

Now if you take a look at the HTML above you will notice that there’s a pattern of two three divisions repeated three times, a division with class “features_item”, a division with class “features_item with_margin” and a final division with class “clear” for clearing floated elements. Every division has an <h3> tag with the icon image inside it, and then a paragraph. Now let’s add the CSS style for the features content.

.container_12 .left_column .features_item {
    width: 240px;
    float: left;
}

    .container_12 .left_column .features_item.with_margin {
        margin-left: 20px;
    }

    .container_12 .left_column .features_item h3 {
        font-size: 14px;
        margin: 0 0 5px 0;
        line-height: 32px;
    }

        .container_12 .left_column .features_item h3 img {
            float: left;
            margin: 0 30px 0 0;
        }

    .container_12 .left_column .features_item p {
        line-height: 30px;
        text-align: justify;
    }

Notice that for the “features_item” class there’s two styles: “.container_12 .left_column .features_item” and “.container_12 .left_column .features_item.with_margin”, the difference between both styles is that one has no margins and the other one has a left margin of 20px. The features item class has a float to left and a fixed width. The header 3 is styled with 14px for font size, 5px bottom margin and line height of 32px. The image inside the header style is set to floating to left and right margin of 30px for the space between the image and the text. Finally, I styled the paragraph with 30px line height and text align is set to justify. Now our layout should look like this.

Step 7 – Adding Featured Content and Style

Now we need to add the featured content with buttons in the right column section. Here’s the HTML for the featured content.

<h2>3D Box Generator</h2>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum neque eu justo sodales cursus. In nisl turpis, placerat rutrum facilisis in, lacinia nec velit. Vestibulum fermentum felis ut nunc ele mentum adipiscing. Duis eu lacus vel ligula vulputate convallis eu vitae mi. Fusce ut facilisis massa.
</p>
<a href="#" title="GET FREE TRIAL" class="free_trial_button">GET FREE TRIAL</a>
<a href="#" title="PURCHASE NOW" class="purchase_now_button">PURCHASE NOW</a>

We added a <h2> tag with a title inside it, a paragraph and then two links which will represent “Purchase Now” and “Get Free Trial” buttons. Now we need to style the featured content, here’s the CSS styles.

.container_12 .right_column h2 {
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 18px 0;
}

.container_12 .right_column p {
    line-height: 24px;
    margin: 0 0 40px 0;
}

.container_12 .right_column .free_trial_button {
    background: url(../images/buttons_form_bg.png) no-repeat;
    background-position: -26px 0px;
    height: 56px;
    width: 160px;
    float: left;
    text-indent: -10000px;
    margin: 0 20px 0 0;
}

.container_12 .right_column .purchase_now_button {
    background: url(../images/buttons_form_bg.png) no-repeat;
    background-position: -206px 0px;
    height: 56px;
    width: 160px;
    float: left;
    text-indent: -10000px;
}

The style for header 2 is set to have font size of 24px, normal font weight and a bottom margin of 18px. The paragraph is styled to have 24px for line height and 40px as bottom margin. Now, we’ll style the buttons which have almost the same style, but with the free trial button having a right margin and different background position as we are using a CSS technique called CSS Sprites which allows us to choose what to show from a single image using CSS background position properties. The buttons classes style is set with background image that has no repeat, background position, a fixed height and width, floating to left and a text indent set to -10000px which allows the text to be available in the HTML but it is hidden when viewed in browsers and this has some SEO benefits. The result should be as the image below.

Step 8 – Adding Newsletter Sign Up Form HTML and CSS

Now let’s add the HTML for the Newsletter sign up form.

<div class="newsletter">
    <a href="#" title="Sign Up For FREE!" class="sign_up">Sign Up For FREE!</a>
    <div class="clear"></div>
    <input type="text" class="name" />
    <input type="text" class="email" />
    <p>
        Nullam fringilla egestas turpis ac viverra. Ut turpis eros, sus- cipit sit amet dapibus eget, interdum eget ante. Duis cursus metus molestie lectus cursus non blandit velit sagittis. Donec posuere mattis leo in interdum. Aliquam sollicitudin, nulla eget ullamcorper iaculis, felis magna posuere tortor, quis euismod enim lectus ac leo.
    </p>
</div>

I added a division with class “newsletter” which will act as a container for form elements, inside it I added a link for the “Sign Up For FREE” then two text inputs for name and email and finally a paragraph. Now let’s add the CSS style for the newsletter sign up form.

.container_12 .right_column .newsletter {
    background: url(../images/buttons_form_bg.png) no-repeat;
    background-position: 0px -63px;
    height: 384px;
    width: 403px;
    padding: 0 0 0 25px;
    margin: 0 0 29px -25px;
    clear: both;
}

    .container_12 .right_column .newsletter a {
        width: 188px;
        height: 40px;
        float: right;
        text-indent: -10000px;
        margin: 26px 15px 10px 0;
    }

    .container_12 .right_column .newsletter input[type=text] {
        width: 305px;
        height: 20px;
        line-height: 20px;
        background: transparent;
        border: 0px none;
    }

        .container_12 .right_column .newsletter input[type=text].name {
            margin-bottom: 14px;
            margin-left: 82px;
        }

        .container_12 .right_column .newsletter input[type=text].email {
            margin-left: 86px;
        }

    .container_12 .right_column .newsletter p {
        font-family: Georgia;
        line-height: 30px;
        text-align: justify;
        margin: 40px 14px 0 18px;
    }

If you look at the full layout image you’ll probably notice that the sign up form’s background image is not aligned with the content and in order to do this we are going to use negative margins which will allow us to expand the sign up form background image as we like. We styled the newsletter division with a background image, background position, a fixed height and width, positive left padding equal to the negative left margin, bottom margin and clear set to both to clear all floated elements. Now we set the “Sign Up For FREE” link style with fixed width and height, floating to right, negative text indentation to hide the text and some top, right and bottom margins. Let’s style the the text input general style with fixed height and width, line height to a value equal to height to center text vertically, background set to transparent and with no border. for the name and email text inputs style I added some margins to place them right where we need. Finally, I styled the paragraph with font family to Georgia, line height to 30px, text align to justify, top margin to 40px, right margin to 14px and left margin to 18px. The result should be as the image below.

Step 9 – Adding About Us Content and Style

Now let’s add the HTML for About Us content.

<h3>About Us</h3>
<p class="about_us">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan arcu in massa tempor sed pulvinar leo consectetur. Fusce tempor porta cursus. Nullam pharetra malesuada neque eu volutpat. Cras auctor phar- etra ipsum, et ultrices dui dictum a. U erat metus, nibh massa.
</p>

I added a <h3> tag then paragraph with some text, now let’s add the CSS style for About Us content.

.container_12 .right_column h3 {
    font-size: 14px;
    line-height: 28px;
    border-bottom: 1px dotted #666;
    margin: 0 0 5px 0;
}

.container_12 .right_column p.about_us {
    line-height: 30px;
    text-align: justify;
}

I styled the header 3 with font size set to 14px, line height to 28px, 1px dotted border with color set to #666 and a bottom margin of 5px. Finally, I styled the paragraph with class “about_us” to have 30px for line height and text alignment to justify. The result should be as the image below.

Step 10 – Adding Footer Content and Style

Let’s add the HTML for the footer content.

<div class="footer">
    <div class="container_12">
        <div class="grid_4">
            <h3>Latest News</h3>
            <p>
                Nullam mollis arcu sodales mauris interdum ac rhoncus
mi imperdiet.
            </p>
            <p>
                Donec aliquam scelerisque est, a sagittis odio vehicula
Ut facilisis cursus mi.
            </p>
        </div>
        <div class="grid_4">
            <h3>Recent Tweets</h3>
            <p>
                Nullam mollis arcu sodales mauris interdum ac rhoncus
mi imperdiet. <span>12 minutes ago</span>
            </p>
            <p>
                Donec aliquam scelerisque est, a sagittis odio vehicula
Ut facilisis cursus mi. <span>12 minutes ago</span>
            </p>
        </div>
        <div class="grid_4">
            <h3>Get Connected</h3>
            <p class="connected">
                Nullam mollis arcu sodales mauris interdum ac rhoncus
mi imperdiet.
            </p>
            <a href="#"><img src="images/facebook.png" alt="" /></a>
            <a href="#"><img src="images/twitter.png" alt="" /></a>
            <a href="#"><img src="images/contact.png" alt="" /></a>
        </div>
    </div>
</div>

I used three divisions with class “grid_4″ which will divide the footer into three equal sections, the first one has an <h3> tag with two paragraphs. The second one is the same as the first with the exception of a span inside the paragraph and the final division with an <h3> tag, a paragraph and the social icons links and images. Now, let’s add the CSS style for the footer content.

.footer .container_12 h3 {
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    margin: 0 0 20px 0;
}

.footer .container_12 p {
    text-align: justify;
    line-height: 18px;
    border-bottom: 1px dotted #666;
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
}

.footer .container_12 p.connected {
    border: 0px none;
}

    .footer .container_12 p span {
        color: #e0cf39;
        font-size: 10px;
    }

.footer .container_12 a {
    margin: 0 8px 0 0;
}

I styled the header 3 with white font color, font size set to 18px, normal font weight and a bottom margin. I styled the paragraph style with justified text alignment, line height set to 18px, 1px dotted bottom border with color set to #666, a bottom margin and a bottom padding. Then I styled the “connected” paragraph with no border and the span inside the paragraphs with color set to #e0cf39 and font size set to 10px. and then I styled the links to have a right margin. The result should be as the image below.

Step 11 – Adding Copyright Content and Style

Let’s add the HTML content for the Copyright text and links.

<div class="copyright_links">
    <div class="container_12">
        <div class="grid_4">
            Copyright 2010 3D BOX, All Rights Reserved.
        </div>
        <div class="grid_8">
            <a href="#" title="Home" class="active">Home</a>
            <a href="#" title="Privacy Policy">Privacy Policy</a>
            <a href="#" title="Terms">Terms</a>
            <a href="#" title="Help">Help</a>
            <a href="#" title="Contact">Contact</a>
        </div>
    </div>
</div>

I added two divisions with class “grid_4″ for copyright text and “grid_8″ for the links. Now let’s add the CSS style.

.copyright_links .container_12 .grid_4 {
    text-align: left;
}

.copyright_links .container_12 .grid_8 {
    text-align: right;
}

.copyright_links .container_12 .grid_8 a {
    color: #9e9e9e;
    margin: 0 0 0 15px;
}

First I set “grid_4″ text alignment to left and “grid_8″ to right, and then I styled the links with color set to #9e9e9e and a left margin of 15px.

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD that looks exactly like this.

Conclusion

So that’s it. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don’t forget to validate and check for browser compatibility (the layout will not validate because of Javascript & CSS3 styles, remove both to validate properly). If there was a part of this tutorial you didn’t understand, or you have a better technique, please be kind and say something in the comments below.

Go to Source

Now, let’s get started with this tutorial.

Links you will need to complete this tutorial:

• Dezign Folio: Create A Detailed Portfolio Homepage Design In Photoshop
• 960 Grid System
• jQuery Scrollable

Here’s what we’ll be creating (Click on image to view a full working demo).

You can also download this tutorial’s source files here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this layout you probably noticed that 960gs grid system was used for guidelines creation. Well, in this tutorial we will also need the 960gs CSS framework. Using CSS frameworks makes layout and style creation a lot easier and saves time in web development. Now you should download the 960 Grid system source files for usage in this tutorial.

You will also need a code editor; you can use a plain text editor such as the Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

During this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 3.6.

Step 2 – Getting Your Files Ready

First thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file. The HTML file goes in the root directory.

Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy 960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the same files but in a bigger and more readable format, I recommend using the compressed CSS files. You also need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory.

In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you’ll find the images I created.

Step 3 – Simple Starter Layout

We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:

1. The layout has these sections: header, slide show, services, information and a footer.
2. You’ll also notice that we can use a single repeating image as the background for the body that covers header, slide show and services.
3. Both information and footer sections have the same horizontally repeating background image.
4. Finally, notice that header, slide show, information and footer sections have fixed heights.

Based on these points we create the following HTML layout.

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>DezignFolio</title>
    css" href="styles/reset.css" rel="stylesheet" media="all" />
    css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
</head>
<body>
    <div class="header container_12">
        header content goes here.
    </div>

<div class="<span class=">slideshow"></div>
        slide show content goes here.
    </div>
    <div class="services container_12">
        services content goes here.
    </div>
    <div class="information">
        <div class="container_12">
            information content goes here.
        </div>
    </div>
    <div class="footer">
        <div class="container_12">
            <div class="grid_12">
                Copyright 2010 1stwebdesigner.com
            </div>
        </div>
    </div>
</body>
</html>

As you can see in this layout we added links for the CSS files in the header, created five main <div> sections each with a unique class name for styling. I added an extra class “container_12″ to header and services. I also added a <div> with a class “container_12″ inside information and footer sections, this will allow us to style the information and footer sections to take full width of the browser area and to hold the repeating background. Finally, notice that “container_12″ in the footer has a “grid_12″ division, this division will take the whole width of “container_12″ and it is styled in 960.css file. Now let’s add the CSS as follows (all CSS should be added in style.css file):

body {
    color: #696969;
    background: #fff url(../images/bg.jpg) repeat-x top center;
    font-size: 12px;
    line-height: 17px;
    font-family: Verdana;
    padding: 0;
}

a {
    text-decoration: none;
}

.header {
    height: 101px;
    overflow: hidden;
}

.slideshow {
    padding: 30px 0 0 0;
    height: 475px;
    overflow: hidden;
    background: url(../images/message_bg.png) no-repeat;
    background-position: center 348px;
}

.information {
    width: 100%;
    height: 318px;
    display: block;
    overflow: hidden;
    background: url(../images/information_footer_bg.jpg) repeat-x top center;
}

.footer {
    width: 100%;
    height: 59px;
    display: block;
    overflow: hidden;
    background: url(../images/information_footer_bg.jpg) repeat-x bottom center;
    text-align: center;
    font-size: 12px;
    line-height: 59px;
    color: #fff;
}

Now notice that the body color is set to #696969 with white as the background color and a horizontally repeating background image bg.jpg font size is set to 12px, line height to 17px, font set to Verdana with zero padding. Then the links text decoration is set to none so that the links aren’t underlined in normal link state. Now the header height is set to 101px with overflow hidden to hide extra content. Now look at the header style and see that it has a top padding of 30px to maintain a space between header and slide show content, height is set to 475px, with overflow set to hidden and a background image message_bg.png aligned horizontally to center and vertically at 348px. You’ll notice that there’s no style for the services section and that’s because it doesn’t have any special styles to be that will be applied. Now let’s look at information style, notice that the width is set to 100% to fill browsers horizontal space, with a fixed height, overflow set to hidden and a horizontally repeating background image.

Finally, the footer section is going to be styled here entirely and that’s because it has only one copyright sentence. The width is set to 100% to fill browsers horizontal space, with 59px height, hidden overflow, a background image with the same settings as we used in the information section the only change is that its aligned to bottom, text is aligned to center, with 12px font size, white font color and 59px line height similar to footer height value so that the text is aligned vertically to center. The result should be the same as the image below.

Step 4 – Adding Logo and Menu Items to Header

Now we need to add the logo and menu items, here’s the HTML for the header section.

    <div class="header container_12">
        <div class="grid_4">
            <h1>
                <a href="#" title="DesignFolio">DezignFolio</a>
            </h1>
        </div>
        <div class="grid_8">
            <a href="#" title="Home" class="home active">Home</a>
            <a href="#" title="About Us" class="about">About Us</a>
            <a href="#" title="Services" class="services">Services</a>
            <a href="#" title="Blog" class="blog">Blog</a>
            <a href="#" title="Contact" class="contact">Contact</a>
        </div>
    </div>

Notice that we added two divisions with a “grid_4″ and “grid_8″ classes, inside the “grid_4″ division I added the logo content and an <h1> with a link inside it. Next I added links for the menu items each with a unique class name which will help us in styling each menu item inside the “grid_8″ division. Now lets add the CSS for the header content.

.header {
    height: 101px;
    overflow: hidden;
}

    .header .grid_4 h1 a {
        text-indent: -10000px;
        display: block;
        width: 234px;
        height: 45px;
        background: url(../images/logo_menu_bg.png) no-repeat;
        background-position: 0 -38px;
        margin: 36px 0 0 0;
    }

    .header .grid_8 a {
        text-indent: -10000px;
        display: block;
        height: 36px;
        background: url(../images/logo_menu_bg.png) no-repeat;
        margin: 33px 30px 0 0;
        float: left;
    }

        .header .grid_8 a.home {
            background-position: -264px -11px;
            width: 35px;
            margin-left: 250px;
        }

            .header .grid_8 a.home:hover, .header .grid_8 a.home.active {
                background-position: -264px -56px;
            }

        .header .grid_8 a.about {
            background-position: -329px -11px;
            width: 63px;
        }

            .header .grid_8 a.about:hover, .header .grid_8 a.about.active {
                background-position: -329px -56px;
            }

        .header .grid_8 a.services {
            background-position: -422px -11px;
            width: 61px;
        }

            .header .grid_8 a.services:hover, .header .grid_8 a.services.active {
                background-position: -422px -56px;
            }

        .header .grid_8 a.blog {
            background-position: -513px -11px;
            width: 33px;
        }

            .header .grid_8 a.blog:hover, .header .grid_8 a.blog.active {
                background-position: -513px -56px;
            }

        .header .grid_8 a.contact {
            background-position: -572px -11px;
            width: 57px;
            margin-right: 0px;
        }

            .header .grid_8 a.contact:hover, .header .grid_8 a.contact.active {
                background-position: -572px -56px;
            }

Now in styling our header content we are going to use a single image that will contain both the logo image and menu items normal state, hover and active state images. We are using a CSS technique called CSS Sprites which allows us to choose what to show from this single image using CSS background position properties, and that’s why we added a unique class name for each menu item. The image used in the CSS Sprites is “logo_menu_bg.jpg”, now I start by styling the logo link by setting text indentation to -10000px which allows the text to be available in the HTML but it is hidden when viewed in browsers and this has some SEO benefits, a fixed height and width to match the size of the logo image, a top margin of 35px for a space above the logo, a background image with no repeat and then we set the background image position to 0px horizontally and -38px vertically.

Now we move to style the menu items by setting common styles for all menu item links with a text indentation of -10000px to hide the text, a fixed height,  a top margin to make a space above menu items, a right margin to make the space between menu items, a float to left and finally use the same background image for all menu items with no repeat. After we set the common styles for menu items we take each unique class name and style the normal, hover and active states of the link with background position, fixed width. Finally, you should only notice that the first menu item “.home” with a left margin of 250px to make the distance between the logo and the menu items. The result should be as the image below.

Step 5 – Adding Slide Show Content, Style and Javascript

Now, we are going to use an already implemented solution for the slide show script, the script is jQuery Scrollable. I modified it to match what we need here as for style and layout, unfortunately I can’t walk you through every bit of the process for modifying the script and the styles because I would need a full tutorial for this part alone. I am going to tell you what to include in order to make this work. First, here’s the HTML for the slide show content.

<div class="<span class=">slideshow"></div>
        <!-- root element for everything -->
        <div id="scroll">
            <!-- <span class="hiddenSpellError" pre="">scrollable</span> items -->

<div style="left: <span class=;">-1920px;" id="tools"></div>
                <div class="tool">
                    <div class="details">
                        <h2>
                            Usce ac nunc eros, ac suscipit mi.
                        <p>
                            Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula
                            nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.
                            Cum sociis natoque penatibus
                    </div>
                    <img src="images/slideshow_image.png" alt="" />
                </div>
                <div class="tool">
                    <div class="details">
                        <h2>
                            Usce ac nunc eros, ac suscipit mi.
                        <p>
                            Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula
                            nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.
                            Cum sociis natoque penatibus
                    </div>
                    <img src="images/slideshow_image.png" alt="" />
                </div>
                <div class="tool">
                    <div class="details">
                        <h2>
                            Usce ac nunc eros, ac suscipit mi.
                        <p>
                            Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula
                            nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.
                            Cum sociis natoque penatibus
                    </div>
                    <img src="images/slideshow_image.png" alt="" />
                </div>
                <div class="tool">
                    <div class="details">
                        <h2>
                            Usce ac nunc eros, ac suscipit mi.
                        <p>
                            Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula
                            nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.
                            Cum sociis natoque penatibus
                    </div>
                    <img src="images/slideshow_image.png" alt="" />
                </div>
                <div class="tool">
                    <div class="details">
                        <h2>
                            Usce ac nunc eros, ac suscipit mi.
                        <p>
                            Vivamus malesuada convallis fringilla. Sed quam ligula, mattis aliquet vehicula
                            nec, dapibus eu lectus. Nunc mattis egestas arcu, vel ullamcorper enim cursus et.
                            Cum sociis natoque penatibus
                    </div>
                    <img src="images/slideshow_image.png" alt="" />
                </div>
            </div>
            <!-- required for IE6/IE7 -->
            <br clear="all" />
            <!-- thumbnails -->
            <div id="thumbs" class="t">
                <a id="<span class=">t0" class="active">Nunc vulputate</a>
                    <br />
                    tristique nisl quis conse
                <!-- <span class="hiddenSpellError" pre="">scrollable</span> navigator root element -->
                <div class="navi">
                    <a style="display: none;"></a><a id="<span class=">t1">Class aptent</a>
                        <br />
                        Vestibulum tempus orc <a id="<span class=">t2">Lorem ipsum</a>
                            <br />
                            Curabitur pretium vehicula <a id="t3">Cum sociis nat</a>
                                <br />
                                Aenean nec libero <a id="t4">Maecenas pulvinar dignissim</a>
                                    <br />
                                    Vestibulum posuere varius magna
                </div>
            </div>
            <div class="navigation_buttons">
                <a class="prev">Previous</a> <a class="next">Next</a>
            </div>
        </div>
        <div class="message container_12">
            <div class="grid_12">
                <div>
                    Hi we are Dezign Folio, orbi pulvinar, velit vel pulvinar vehicula, nisl purus iaculis orci, condimentum pharetra ligula libero ac sem.
                </div>
            </div>
            <div class="clear"></div>
        </div>
    </div>

You’ll notice a division with an ID parameter “scroll” this will hold all sliding content, inside it is three main divisions a division with ID parameter “tools”, a division with ID parameter “thumbs” and a third division with a class name “navigation_buttons”. The first division holds the slides as divisions with class name “tool” each with the content you want inside it, the thumbs division holds the thumbnails or tabs for the slides and it should equal the number of slides and the last division holds the content for the next and previous buttons or links.

After the slide show slides, I added an extra division which will hold the site welcome message with a class name “message container_12″ with a single division inside it that has the message text. Now let’s add the CSS style for the slide show content and script.

.slideshow {
    padding: 30px 0 0 0;
    height: 475px;
    overflow: hidden;
    background: url(../images/message_bg.png) no-repeat;
    background-position: center 348px;
}

    .slideshow .message {
        color: #fff;
        font-size: 18px;
        line-height: 24px;
        text-align: center;
        text-shadow: 0px -1px 0 #000;
        margin-top: 30px;
    }

        .slideshow .message .grid_12 div {
            padding: 0 78px 0 78px;
        }

            .slideshow .message .grid_12 div span {
                color: #f3ff00;
            }

/*------ SlideShow Script Styles ------*/
#scroll {
    position: relative;
	height: 316px;
	overflow: hidden;
	border: 0px none;
    width: 960px;
	padding: 0;
    margin: 0 auto;
    background: url(../images/slideshow_bg.jpg) repeat-x top center;
}

#tools {
	width: 9999em;
	position: absolute;
	height: 258px;
}

.tool {
	float: left;
	width: 960px;
	height: 258px;
	text-align: left;
    overflow: hidden;
}

    .tool img {
        float: right;
    }

.details {
	float: left;
    color: #252525;
    width: 350px;
    margin: 33px 0 0 70px
}

    .details h2 {
        font-family: Verdana;
        font-size: 24px;
        line-height: 28px;
        font-weight: normal;
        margin: 0 0 40px 0;
    }

    .details p {
        font-family: Verdana;
        font-size: 12px;
        line-height: 18px;
        font-weight: normal;
    }

#thumbs {
	height: 60px;
	position: absolute;
	top: 258px;
	width: 960px;
	left: 0px;
    overflow: hidden;
    background: url(../images/thumbs_bg.jpg) repeat-x top center;
}

.navi {
    width: 960px;
    height: 58px;
}

.t {
	padding: 0 !important;
}

    .t a {
	    display: block;
	    float: left;
	    height: 34px;
	    cursor: pointer;
        border-left: 1px solid #b9b9b9;
        border-right: 1px solid #fff;
        border-top: 1px solid #b9b9b9;
        border-bottom: 1px solid #b9b9b9;
        font-family: Arial;
        font-size: 18px;
        line-height: 20px;
        padding: 8px 15px 14px 10px;
        color: #252525;
    }

        .t a span {
            font-size: 12px;
            line-height: 14px;
        }

    .t a.active {
	    cursor: default !important;
        background: url(../images/thumbs_bg_h.jpg) repeat-x top center;
        color: #fff;
        border-left: 1px solid #2d2d2d;
        border-right: 1px solid #2d2d2d;
        border-top: 1px solid #2d2d2d;
        border-bottom: 1px solid #2d2d2d;
    }

    t. a:hover {
        background: url(../images/thumbs_bg_h.jpg) repeat-x top center;
        color: #fff;
        border-left: 1px solid #2d2d2d;
        border-right: 1px solid #2d2d2d;
        border-top: 1px solid #2d2d2d;
        border-bottom: 1px solid #2d2d2d;
    }

#t0 	{ width: 145px; }

#t1		{ width: 145px; }

#t2		{ width: 145px; }

#t3		{ width: 145px; }

#t4		{ width: 245px; }

.navigation_buttons {
    width: 960px;
    height: 75px;
    position: absolute;
    top: 102px;
}

    .navigation_buttons .prev {
        float: left;
        background: url(../images/prev.png) no-repeat center center;
        height: 75px;
        width: 36px;
        border: 0px none;
        text-indent: -10000px;
        cursor: pointer;
    }

    .navigation_buttons .next {
        float: right;
        background: url(../images/next.png) no-repeat center center;
        height: 75px;
        width: 36px;
        border: 0px none;
        text-indent: -10000px;
        cursor: pointer;
        margin: 0 -1px 0 0;
    }
/*------ End of SlideShow Script Styles ------*/

The CSS styles included in the comments is the original styles from the slider script, I did however modify it a bit by changing some values such as width, height, padding, margin and background images to make it match our layout design. The message division style has a white text color, 18px font size, 24px line height, center aligned text, a text shadow and a top margin. The inner division has a left and right padding values with the <span> element having a yellow text color.

Now let’s add the required jQuery script in the header. You can find the script file in this tutorial source file or from the jQuery Scrollable script page. The HTML head section should be like this.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>DezignFolio</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/tut_style.css" rel="stylesheet" media="all" />
    <script type="text/<span class="><!--mce:0--></script>
</head>

Finally, we need to add the Javascript code that will allow the slide show to work on our layout. You should add this script just before the closing tag of the body. Here’s the Javascript.

    <script type="text/javascript">
        // initialize scrollable and return the programming API
        var api = $("#scroll").scrollable({
            items: '#tools'

            // use the navigator plugin
        }).navigator().data("scrollable");

        // this callback does the special handling of our "intro page"
        api.onBeforeSeek(function (e, i) {

            // when on the first item: hide the intro
            if (i) {
                $("#intro").fadeOut("slow");

                // dirty hack for IE7-. cannot explain
                if ($.browser.msie && $.browser.version <  {
                    $("#intro").hide();
                }

                // otherwise show the intro
            } else {
                $("#intro").fadeIn(1000);
            }

            // toggle activity for the intro thumbnail
            $("#t0").toggleClass("active", i == 0);
        });

        // a dedicated click event for the intro thumbnail
        $("#t0").click(function () {

            // seek to the beginning (the hidden first item)
            $("#scroll").scrollable().begin();

        });

    </script>

Now our layout should look like this.

Step 6 – Adding Services Content

Now let’s add the Services section content. Here’s the HTML content.

    <div class="services container_12">
        <div class="grid_4">
            <h2>
                <img src="images/service_icon_1.png" alt="" />
                <strong>Vivamus</strong> venenatis?
                <br />
                Cras sed ipsum quis nisi pellentesque
            </h2>
            <p>
                Nulla facilisi. Vestibulum metus massa, egestas et porttitor et, venenatis sed felis. Donec elit dolor, placerat eget interdum ac, euismod sit amet tellus. Morbi sit amet hendre- rit ante.
            </p>
        </div>
        <div class="grid_4">
            <h2>
                <img src="images/service_icon_2.png" alt="" />
                <strong>Phasellus</strong> consectetur?
                <br />
                <span>Maecenas pretium diam venenatis</span>
            </h2>
            <p>
                Sed consequat, nisi nec tincidunt feugiat, turpis diam dapibus magna, eget pulvinar lorem nulla nec magna. ed fermentum massa quis nisl condimentum.
            </p>
        </div>
        <div class="grid_4">
            <h2>
                <img src="images/service_icon_3.png" alt="" />
                <strong>Lorem</strong> ipsum dolor?
                <br />
                <span>Sed fermentum massa quis commodo</span>
            </h2>
            <p>
                Vestibulum commodo aliquam condimen- tum. In a libero luctus purus ornare laoreet. Etiam libero nulla, sodales quis tempus posuere, dictum in eros. Nulla facilisi. Vivamus lacinia lacinia lacinia. Nullam vel blandit odio.
            </p>
        </div>
        <div class="clear"></div>
    </div>

Notice that we have three equal sections which means that we need to use three “grid_4″ divisions. Each division has an <h2> tag that includes an image, a title text and text included in a <span> tag and a paragraph as service description. Finally, there’s a division with “clear” class attribute to clear all floated elements. Now let’s add the CSS style for services section.

    .services h2 {
        font-family: Myriad Pro;
        font-size: 23px;
        font-weight: normal;
        line-height: 30px;
        color: #0b070b;
        margin: 0 0 30px 0;
    }

    .services h2 img {
        float: left;
        display: block;
        width: 50px;
        height: 50px;
        overflow: hidden;
        margin: 0 12px 0 0;
    }

    .services h2 span {
        font-size: 14px;
        line-height: 16px;
    }

    .services .grid_4 p {
        text-align: justify;
        text-indent: 38px;
        margin: 0 0 56px 0;
    }

We styled the header element by setting font family to Myriad Pro, font size to 23px, normal font weight, line height to 30px, font color to #0b070b and a bottom margin to 30px to make a space between the header and the paragraphs. Now we style the image inside the header or the service icon by setting float to left, a fixed height and width to match icon dimensions, overflow to hidden and a right margin of 12px for the space between image and text. Then I styled the <span> element inside the header tag to have a smaller font size and line height. Finally, I styled the paragraph and set text alignment to justify, text indent to 38px to make the first line indentation and a bottom margin of 56px to represent the space under the paragraphs. Now our layout should look like this.

Step 7 – Adding Information Content

Now let’s add the HTML content for the Information section.

    <div class="information">
        <div class="container_12">
            <div class="grid_4">

<h2>Donec posuere mi eget justo</h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla id auctor mauris. Pellentesque at quam non massa lobortis sagittis. Donec nisl sapien, eleifend ut bibendum nec, tristique sit amet tortor.
                </p>
                <p>
                    Etiam a quam metus. Fusce luctus adipiscing mauris, id varius metus feugiat quis. Sed mi nisl, euismod eget facilisis id, pulvinar tincidunt lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel faucibus ligula. Etiam
                </p>
            </div>
            <div class="grid_4">

<h2>Curabitur porttitor volutpat</h2>
                <p>
                    Morbi rutrum, risus et iaculis feugiat, urna est mollis nulla, ut ullamcorper lacus mauris et purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras mi tortor, consectetur at interdum vel, viverra eget orci. In at elementum eros.
                </p>
            </div>
            <div class="grid_4">

<h2>Maecenas luctus pharetra</h2>
                <div class="subscribe">
                    <input type="text" />
                    <input type="submit" />
                </div>
                <p>
                    Curabitur adipiscing, velit nec fermentum tempus, lorem sem aliquam ligula, id dignissim metus lectus a magna.
                </p>
            </div>
            <div class="clear"></div>
        </div>
    </div>

In the information section we are using three“grid_4″ divisions the same as we used in the services section. Now each division contains a <h2> and paragraphs with the exception of the third and last divisions which includes also division with a “subscribe” class name which includes two input tags with type “text” and “submit”. Now let’s add the CSS styles for Information section.

.information {
    width: 100%;
    height: 318px;
    display: block;
    overflow: hidden;
    background: url(../images/information_footer_bg.jpg) repeat-x top center;
}

    .information .container_12 {
        padding: 36px 0 30px 0;
    }

    .information .grid_4 h2 {
        font-family: Myriad Pro;
        font-size: 18px;
        font-weight: normal;
        line-height: 20px;
        color: #0b070b;
        margin: 0 0 30px 0;
    }

    .information .grid_4 p {
        text-align: justify;
        text-indent: 38px;
    }

    .information .grid_4 .subscribe {
        display: block;
        height: 37px;
        width: 299px;
        background: url(../images/subscribe.png) no-repeat top center;
        overflow: hidden;
        margin: 0 0 15px 0;
    }

        .information .grid_4 .subscribe input[type=text] {
            background: transparent;
            border: 0px none;
            line-height: 30px;
            height: 30px;
            width: 210px;
            margin: 5px 0 0 5px;
            float: left;
        }

        .information .grid_4 .subscribe input[type=submit] {
            background: transparent;
            border: 0px none;
            text-indent: -10000px;
            height: 31px;
            width: 60px;
            float: right;
            cursor: pointer;
            padding: 0px;
            margin: 0 11px 0 0;
        }

First we style “container_12″ to have a fixed top and bottom padding, then we style h2 with Myriad Pro as font family, 18px font size, normal font weight, 20px line height, text color of #0b070b and a bottom margin to make space between h2 and paragraphs under it. Now we style the paragraphs with a justified text alignment  and first line indentation of 38px.

Finally, we move to style the subscribe text field and button. The subscribe division has a fixed height and width, a background image with no repeat which has the image for the text field and the button, overflow set to hidden and a bottom margin of 15px. Now we style the text field by using this “.information .grid_4 .subscribe input[type=text]” and set background to transparent because all text field have a white background by default, no border, a line height equal to height so that text is aligned to center vertically, a fixed width, float to left and a top and left margin. Now we style the button by using “.information .grid_4 .subscribe input[type=submit]” and set background to transparent, no border,  and a text indentation of -10000px to hide button text, a fixed height and width, a float to the right, set cursor to pointer because submit buttons has a normal pointer by default, zero padding and a right margin of 11px.

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD that looks exactly like this.

Conclusion

So that’s it. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don’t forget to validate and check for browser compatibility (the layout will not validate because of Javascript & CSS3 styles, remove both to validate properly). If there was a part of this tutorial you didn’t understand, or you have a better technique, please be kind and say something in the comments below.

Go to Source

Be sure to check out WeGraphics for more high-quality design resources, like vectors, brushes, textures, icons, and more.

Click on the image for a live demo of the template.

Download Tabletfolio

About this Partner

WeGraphics is the definitive solution for designers who need high-quality resources but don’t want to be obliged to spend hundreds of dollars for them.

Go to Source

Once you have converted a mock-up into a website, just click the bookmarklet and the web page will load inside the Maki application.

The application lets you overlay the mock-up over the website, position it as you wish and change its opacity to make sure the website and the mock-up matches each other.

If they are not pixel-perfect, just make the necessary HTML-CSS changes as much as you want and reload the page within Maki to see if they fit each other or not.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Go to Source

Creating new themes requires only the knowledge of HTML-CSS and with the help of a drag 'n' drop interface, texts, videos, photos (or photo galleries) and even forms can be inserted quickly + positioned as you wish.

The application is SEO friendly with the URLs generated, automated sitemap and ability to edit meta tags for all pages.

Multilanguage websites are handled in a very flexible way; once a new language is added and the content is created, users can be auto-forwarded to the language matching the setting of their browsers.

There is a built-in newsletter module where you can collect e-mails and send good looking newsletters to users.

ImpressPages also has many other features including RSS support, spam protection for contact forms, logging + error-reporting for the administrator and more.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Go to Source

IconDemon, a websites that provides members access to a huge collection of icons, offered up five 1-year subscriptions to their wonderful icon collection. Read on to see the Six Revisions readers who won the giveaway.

The Winners

Here are the winners of the IconDemon unlimited package:

• Canes
• Zoran Juric

Here are the winners of the IconDemon limited package:

• luis garcia
• TJ England
• Becen

Congratulations to the winners! The winners should have already received an email regarding their prize.

Results of SQL query that selected 5 comments randomly.

About IconDemon

IconDemon provides high quality, exclusive icons for revitalizing your website and enhancing the visual quality of your designs. Web icons on IconDemon are categorized into 20 popular topics and 10 styles, which makes it easier to discover the icons for your specific needs.

Related Content

• Ultimate Guide to Website Wireframing
• Important Features All Blogs Should Really Have
• Creating a User Interface That Speaks Your Users’ Language
• Related categories: User Interface and Web Design

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Go to Source

With an ever-growing variety of browsing situations and platforms that must be supported, the concept of progressive enhancement has become a hot topic of conversation. Put simply, progressive enhancement is the technique of building websites with strong foundations so that it’s accessible to the wide range of browsing situations — from mobile devices and netbooks, to desktops and screen-readers.

What Is Progressive Enhancement?

In its simplest conceptualization, progressive enhancement is the separation of HTML, CSS and JavaScript. That’s it, really. If you had to remember one thing about progressive enhancement, it should be that.

Think of these web technologies as being in layers, with HTML as the first layer, CSS being the second, and JavaScript (and other client-side technologies that deal with site interactivity, such as Flash or Java applets) as being the third.

By compartmentalizing these website components, we more easily allow our sites the ability to become enhanced depending on the web browser’s capabilities.

How would we pragmatically carry out progressive enhancement?

• Markup: Start out with semantic and well-structured HTML for flexibility and interoperability.
• Styling: Progressively enhance the look-and-feel of a design by adding support for browsers with greater features (e.g. WebKit browsers, IE9, Firefox and mobile browsers).
• Behavior: Enhance the site with rich, interactive features on web browsers with JavaScript.

Benefits of Applying Progressive Enhancement Techniques

You should keep in mind that pragmatically implementing the separation of the markup, styling, and behavioral layers would give you many benefits in your site projects. These are the major reasons for embracing progressive enhancement:

• Accessibility: Content is within reach to all visitors.
• Portability: Cross-browser and cross-device support.
• Modularity: Having decoupled components with smart boundaries makes site builds easier and more fault-tolerant.
• Site Performance: Improvements in terms of (perceived) page loading times (which affects usability) is more readily implemented.

Let us talk about each one a little bit more.

Accessibility

Accessibility of websites is one of the most important reasons for the separation of the three layers. You can be sure that all browsers and devices at least will be able to render the most important part: the content.

Think of modern browsers, ancient browsers, mobile devices, search engine crawlers and screen readers — at the very least, progressive enhancement’s emphasis on layer separation, universal design, and semantic markup allows all of them to access the content.

This implies, for example, that if there is any hidden content that is revealed by listening to a user event with JavaScript (such a mouse click on a button element), it must still be accessible somehow even when JavaScript is not available. You want that content to be accessible so that Google’s web spider can index it and blind people can read it with their screen-reading software.

Making sure all content is within reach by writing good HTML, CSS and JavaScript has tremendous and wide-ranging beneficial results.

Portability

Progressive enhancement doesn’t code for particular web browsers; it seeks to cater to all browsers as best as it can, taking advantage of a browser feature if it has them.

Smartphones and mobile devices that support media queries, CSS3 and HTML5, under progressive enhancement principles, will have an enhanced user experience because of these browser features. And with proper technique, these enhancements don’t alienate those who don’t have these browser features.

Modularity

When separating a site build into different layers, developers can much better focus on their specific jobs. It is very common in larger projects that different developers have their main tasks in a different layer and/or module, e.g., one works with front-end web development, the other may focus on web design, and another deals with server-side scripting.

Layer separation also makes a website easier to maintain. If patches need to be made in the presentational layer, then you can do so without having to deal with the markup and behavioral layer.

Site Performance

Increased web page performance is a residual benefit of applying progressive enhancement principles. How does progressive enhancement help page-loading times? One could argue that putting all content, styling and scripts in a single HTML document is fastest, since it requires only one HTTP request instead of (a minimum of) three. While this is true, it only goes for the first unprimed browser cache request. Subsequent requests will greatly benefit from browser caching: externally linked CSS and JavaScript files are still available on the client’s side when they navigate to a different web page; only new content and page assets need to be downloaded and rendered. This results in fewer data going across the wire, and thus, quicker response times.

Separating the layers often results in a better perceived performance as well. When loading and executing stylesheets and scripts at the right moment in an HTML document, you can optimize rendering sequence, which in turn makes the web page feel more responsive.

For instance, the user should first see the (styled) content. Putting a script (too) early in the HTML document will block rendering of the content below it until the script is loaded. By decoupling the JavaScript layer from the CSS and HTML layer, we can more easily pick where we load our scripts; for example, we can load it after the stylesheet has been downloaded.

General Principles for Developing with Progressive Enhancement

How do we apply the concept of progressive enhancement in site builds? Let us look at the three layers to see what things we can do to promote progressive enhancement within them.

Markup

About twenty years ago, when there was a need for an internet-based document standard, HTML was invented. And even with the fast-changing nature of the web, HTML is still the fundamental content-structuring mechanism for websites.

We are now lucky enough to have reached exciting times with HTML5 (and web browsers that support it), giving us access to unprecedented semantic and interoperable markup that make our content even more machine-readable.

However, even though the language has witnessed improvements and revisions over the years, the principle purpose is still the same: We use HTML tags to structure our content and use hyperlinks to link to other (HTML) documents.

Progressive enhancement embraces this principle to the fullest — it tells you to mark up your content semantically and make sure all content is accessible through normal hyperlinks. For example, remotely loaded content (through Ajax) must still be accessible when JavaScript (and CSS) is not available on the user agent — and with the appropriate technique, this is possible (and a best practice) with just a little bit more effort.

Styling

Visual design is powerful. On the web, we have CSS, images and fonts to help enhance our message by allowing us to customize the look of our sites.

Coupled with HTML5 is CSS3 — giving designers more possibilities and freedom to express themselves stylistically in the web designs they create.

To translate our visual design to the medium of the web, we use stylesheets. Stylesheets are linked from within HTML documents, and the browser renders the rules we define in it.

The separation of websites into the three layers means that our web designs must be accessible and usable regardless of what browser the user is using. If a user is using IE6, for example, they mustn’t be barred from being able to gain access to a website’s content, even if the site enhances the user experience and visual complexity on CSS3-supporting browsers.

Progressively enhancing the styling of our sites also means that relying on CSS to render content (which is the job of the markup layer) using the content CSS property, for instance, is not a good practice unless the content is not critical to the understanding of the HTML document.

Behavior

In the early days of the web, HTML documents weren’t much more dynamic than normal paper documents. In fact, the original purpose of HTML was to mark up scientific paper documents and make them interlinked for easier referencing and research.

It was about 1996 when JavaScript came into the scene. Since then, and up until more recently, scripts have usually been set up for document manipulation, form input validation and some visual effects like mouseover states on buttons and images (in the so-called DHTML period).

Although JavaScript added complexity and interactivity to the previously static HTML documents, use of JavaScript in general was superficial at best, and abusive at worst (pop-up windows, disabling user inputs such as right-clicking, and so on).

When user-centered design and "Web 2.0" reached fruition, rich internet applications entered the scene, and JavaScript, once an arguably dispensable part of a website, now functions as a critical component.

Some structure and best practices are required to develop and maintain usability and accessibility of robustly featured and highly interactive web applications and websites.

A better understanding of the prototypal nature (and object-oriented uses) of the language and the rise of numerous libraries and frameworks such as jQuery and MooTools have ultimately improved the implementation of JavaScript in standardized ways that promote (and even indirectly impose) JavaScript and progressive enhancement best practices.

To know the language (and its quirks) and to use the right tool for the job is essential to all web developers using JavaScript.

Though it is more and more difficult to create complex applications without the use of JavaScript, web accessibility practices for web applications under WAI-ARIA guidelines is a step in the right direction.

For efficient and robust web development that emphasizes on progressive enhancement, I would absolutely recommend following these guidelines:

• Put all scripts in externally linked files
• Develop unobtrusive JavaScript
• Separate the behavior from the HTML and CSS
• Avoid browser-specific code and use feature detection (not browser detection)
• Test your web application in "JavaScript off" unit tests and determine what can’t be done without JavaScript so that you can present alternative options

Graceful Degradation vs. Progressive Enhancement

Graceful degradation is an older concept that’s the predecessor of progressive enhancement in web design.

Graceful degradation emphasized on fault-tolerance and was more browser-oriented rather accessibility-oriented, allowing websites to degrade when older web browsers are in use.

Progressive enhancement is different in that the philosophy is almost reverse: you enhance a website by taking advantage of features detected within the user’s browser, instead of developing for the lowest common denominator.

The philosophy of progressive enhancement, on the other hand, says that we give user agents what they are capable of handling. For example, we will let web browsers that support CSS3 (like border-radius: 4px;) apply the style rule to our web pages.

Progressive Enhancement: Issues in the Real-World

Here are a couple of important issues of progressive enhancement that you will likely run into when attempting to apply progressive enhancement principles in your site builds.

Web Apps/Rich Internet Apps Will Require Client-side Scripting

In an age where the stuff we are seeing in the browser mimics the functionality and robustness of desktop apps, the behavioral layer is a requirement that can’t be taken away if we want to allow rich and responsive experiences.

The key point to keep in mind here is that you should just be aware of the implications to user agents that don’t have JavaScript (or Flash or Java applets or whatever behavioral web technology you are developing under), so that you may respond accordingly to these less-than-optimal situations. Progressive enhancement takes advantage of features that the browser has, giving users with particular browser features an enhanced experience. In the extreme interpretation of this philosophy, browsers that aren’t capable of rendering JavaScript won’t have as rich of an experience as those that do.

37Signal’s Basecamp project management web app displays a screen-reader accessible message when JavaScript is turned off.

Progressive Enhancement Requires More Development Work

In practice, you will find yourself having to do more work when creating progressively-enhanced websites. Whether it’s learning (like what you’re doing now) or revising markup for semantics and flexibility, or coding extra CSS to take advantage of CSS3 and HTML5 on browsers that support it — progressive enhancement involves more web development time than usual.

Conclusion

Progressive enhancement is a powerful development philosophy for creating universally accessible sites and web apps. It does require some learning, experience and discipline, but the return of investment is high.

Additional Reading on Progressive Enhancement

• Progressive Enhancement: Paving the Way for Future Web Design
• Understanding Progressive Enhancement
• Progressive Enhancement with CSS
• Progressive Enhancement with JavaScript
• Unobtrusive JavaScript for Progressive Enhancement

Related Content

• Mobile Web Design: Best Practices
• 20 HTML Best Practices You Should Follow
• Information Architecture 101: Techniques and Best Practices
• Related categories: Web Development and User Interfaces

About the Author

Lars Kappert is a front-end web developer and IT specialist from the Netherlands. His development style focuses on pragmatism and creating web products for real-world scenarios. Visit his portfolio site: WebPro. Follow him on Twitter as @webprolific and connect with him on LinkedIn.

Go to Source

Both content and design is shaped with standards-compliant HTML + CSS and no JavaScript programming is required.

It simply searches for the <article> tags and displays the content inside them, makes browsing them possible with prev-next buttons and auto-generates a "contents" menu.

The JavaScript is under 25K gzipped (pretty important for mobile) and works with most modern browsers (degrades gracefully for others).

Treesaver is not totally mature yet and works best with simply-formatted text and images.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
Professional XHTML Admin Template ($15 Discount With The Code: WRD.)
Psd to Xhtml
SSLmatic – Cheap SSL Certificates (from $19.99/year)

Go to Source

You are a busy designer that just finished your latest design and are now at the point you need to convert the design to HTML/CSS. While you do not mind doing this, you know that your time is better spent putting all your effort into your design work. At this point you determine your only option is to find a PSD to HTML service and have them take care of the coding.

Now that you have made the decision to outsource the coding phase of your project it is time to find a company that provides a quality service. Doing a search returns many results. You see companies like Markup Service, PSD2HTML, W3 markup. and many, many more. This decision process is going to be much more difficult than you first expected. Do you choose the cheapest? How about the fastest or the one showing several positive testimonials? The choice is going to be tough.

So what should you look for when trying to decide on a PSD to HTML coding service? Keep reading and I will give you the information you need to narrow down your choices and make the decision much easier.

Experience and Expertise

You do not want to trust just anyone with your design, so it is important that the service you choose has coders with experience and expertise in converting designs. Choosing a service that does not may mean sacrificing elements of your design because the people you hire may or may not know how to make it work in HTML and CSS. You can learn a lot about the companies you are interested in by thoroughly researching their websites. Most companies will list their workflow process and answer any questions you may have about how your design will be converted. Can not find the answers you are looking for? Do not hesitate to email them and ask. Emailing them will also help you gauge how responsive they are. If you send them a pre-sales question and do not hear from them for days this is a red flag and a strong indication that you want to avoid doing business with them.

Quality of Code

Quality goes hand in hand with experience and expertise, but there are a few important factors you really need to look at.

The first thing you want to confirm is whether or not the company sticks to web standards. You want clean, semantic code that is easy to read, not something that looks like it was hacked together by someone who does not even know what HTML stands for. Most services should have examples of their code for you to check out some place on their website. Take a look and make sure that their examples meet your quality requirements. If they do not have examples available on their site, email them and ask for a few. Most will be happy to provide them. You can also inspect the HTML and CSS of their actual website, is the code neat and tidy or sloppy? The answer to this question will go a long way with either eliminating said company from your consideration or putting them on your shot list.

After you find the code looks good you want to take a closer look at the examples and see how or if the code is commented. Commenting the code is very important as it will allow you to easily tell what each section does and confidently make any changes to the code you may require in the future. If the company does not comment their code or gives you some story about why it is uneccessary because of their intuitively named classes and IDs, strike them from your list. Frustrations are the last thing you want when modifying the code in the future and that is what you will get if the HTML and CSS are not commented well.

Finally, you want to find out about cross browser compatibility. You know your customers needs, so make sure the company you choose will ensure that your design will work well in the browsers you need it to. As much as we hate to admit it, there are still a lot of people out there who use Internet Exporer 6. If you are told by a conversion service they do not code for IE6 and you need to make sure your design degrades gracefully, scratch them off your list. Do not let another company dictate the needs of your customers. There are plenty of quality services out there that can and will accomodate your request.

Pricing Considerations

Unless you are Bill Gates or Warren Buffett the price of the service is important. Typically you want to avoid the cheapest services in addition to the most expensive, unless these services come with a great reputation and/or recommendations from someone you trust. If that were the case you would not need to read this article though. Anyway, the bottom line is price is important. Some services have overly complex pricing structures, if you have questions about how they price their services make sure you clear these up before placing an order with them. Many other services have a straight forward order page where you know exactly what you are paying for, PSD2HTML’s pricing page is a great example of this with prices for a standard web site as well as many popular content management systmes like WordPress and Joomla.

Turnaround Time

Two questions to ask yourself here are: How fast do you need it; and Is the price for a quick turnaround worth it? Remember the old adage, speed, quality, price, pick two. Most services will have approximate turn around times listed right on their site. Take the company htmlBlender, you can quickly find on their site that they can have you site ready to go in a little as eight hours. Remember, planning ahead will allow you to choose the right conversion service and give them ample time to do their work without having to worry about how quickly they can get the job done.

Technical Support

You run a serious business so the level of technical support you get is very important. Check out what types of support are offered and what the hours are. Ideally the company you choose will have several different ways to offer you support, such as phone and chat support. Do not be afraid to test these support methods before you buy. You do not want to be left high and dry after the company delivers your coded design.

Moneyback Guarantees

In addition to support, make sure the service you purchase is guaranteed. It is important that you are 100% satisfied with the outcome of your design. If you are not satisfied, do not feel bad about exercising the clients guarantee. With that said, it is good practice to try to work with the other party to resolve any issues you may have with their work before you request a refund.

What are other saying?

Finally, and most importantly, find out what others are saying. Do not depend on the testimonials they post on their site, afterall they probably are not posting the thoughts of disatisfied customers. Asking around on your favorite web design/development forum is another way to get some feedback. I just did a little research for each of the services I mentioned in the opening and found that PSD2HTML has 538 reviews on their Google Products page with a majority of them 4 and 5 stars, while I was able to find reviews for the other two it pales in comparison.

Using the information I listed above should give you a good start at finding and narrowing down your list of potential services. It may seem like a daunting task at first but I assure you that you will be rewarded for doing your due dilligence. One last thing I want to stress is that you should never assume something about a service. If you are not sure, contact them. This way you will not get a rude awakening when you award the project and your assumption was wrong.

Good luck in finding the right PSD to HTML company to code your next design. Be thorough in your search and I am confident you will not be disappointed.

Go to Source

The examples on those sites are meant to be ironic, showing what not to do. Some readers have contacted me because they feel that the irony isn’t completely obvious and are worried that people getting started in front-end web development would misinterpret the “tips”. They do have a point, so I thought I’d bring up a few of the examles from the Enterprise CSS/HTML/JS sites and explain why I think they are bad examples.

Read full post

Posted in (X)HTML, CSS, JavaScript.

Go to Source

One of those ways is to use user agent (UA) detection. We ask the browser some information about itself and it tells us. Based on what we know about a browser, we can make certain assumptions. If a browser tells you it is Internet Explorer, chances are you support the HTML, CSS and JavaScript that Internet Explorer supports. This detection could happen on the server-side or client-side.

Another way is feature detection. Feature detection uses JavaScript to test for a feature before using it. If I can access document.getElementById then almost assuredly I can use document.getElementById. Of course, to test for every feature before we use it would be extremely redundant. Generally, we’ll test for a few known scenarios and with that, assume that other features are also available. For example, if I can access document.attachEvent, I’m almost definitely in IE and therefore can expect that all of the other event-related features of IE will work.

Circumvention

What happens when a bunch of web developers decide to use a particular approach to determining the capabilities of the browser? A new browser comes out and now needs to mimic or duplicate that approach to bypass the detection mechanism.

With UA detection, browsers only have one recourse: change the UA to say that it supports the features of another browser by saying it’s another browser.

User agent strings are extremely limited, though, in the amount of information it can convey. They can’t possibly describe the myriad of functionality it does or doesn’t support.

Feature detection excels by being able to provide information at a micro level. Test the feature, use the feature. If a future browser comes out that implements the feature then the test should pass and the developer should (theoretically) not have any more work on their hands.

Sometimes a browser may sidestep feature detection with a partial implementation. For example, Firefox developed a limited implementation of document.all to get around feature detection. It only works in quirks mode and behaves differently than IE: if(document.all){} would fail but if(document.all.maincontent){} (assuming maincontent is an element on the page) would succeed.

At worst, a browser may test positive for the existence of a property, even when it doesn’t really support it. Modernizr, for example, runs into the occasional false positive and has to use alternate methods that test other specific expectations before determining a more accurate true or false. Do a search for “false positive” in the source and you’ll see a few cases where things aren’t always as they seem.

What does it mean?

We need to accept that, as web developers, we cannot test every permutation and, therefore, have to make assumptions somewhere.

While my argument for using UA detection versus feature detection may lean towards feature detection, let it not be the only recourse.

Alex Russell, for example, speaks of using UA detection as a first line of offence. Use it to determine capabilities among a known subset of browsers and then fall back to using feature detection for the unknown browsers. In doing so, you gain the performance advantage of avoiding client-side feature detection (and avoid downloading an additional resource, in the case of Modernizr).

Client-side feature detection also falls victim to environments where JavaScript may not be enabled, which could be as much as 2% of your audience or more. Yes, I understand that 2% may not sound like very much, but it’s another set of users whose user experience you should plan for.

Missing the point

Those wishing to debate user agent detection versus feature detection may be missing the bigger conundrum: At the end of the day, you still have to decide what to do with a user who fails that test.

What happens to users who do not have JavaScript enabled? What happens to users who do not support the feature that you’re testing for? What happens to users on browsers for which you can’t test for?

There are a few options as to how to handle a failed test:

1. Deny the user
2. Warn the user
3. Limit functionality
4. Hope for the best

On Yahoo! Mail, for example, we do a combination of items 1 and 2. For some browsers, we deny them outright. Sorry, Internet Explorer 6. You’re just out of luck. For other browsers, you’ll get a warning page letting you know that you might run into a quirk or two. Yes, we use user agent detection to do this. Once you’re in the application, however, we generally want you to be able to access everything. Feature and UA testing may be used to fork past differing browser implementations. For example, file uploads could use the Flash uploader or the basic POST upload.

For most of us, though, we just hope for the best. When was the last time you tested your project on Firefox 2 or Safari 3?

Relying on UA detection alone isn’t likely to be very resilient in the long run, nor is relying on feature detection likely to solve every problem in every situation for every user. Like much of web development, it’s a series of choices along the way that we have to make to craft the best experience for the most users as possible, even if that means making some assumptions along the way.

Go to Source

OSTraining, a provider of excellent online training for open source projects such as Joomla, Drupal and WordPress, offered to give five lucky Six Revisions readers 6 months access to their Joomla training classes and support. Read on to learn who the winners are.

The Winners

• Noeki
• Sugan
• iulianv
• sajs
• Thorne Bertrand

Congratulations to the winners! You should have already been contacted via email regarding your prize.

Results of SQL query that selected 5 comments randomly.

About OSTraining

OSTraining (short for Open Source Training) are trainers who help people learn Joomla, Drupal and WordPress. They have over 25 teachers who have taught 100s of live classes all over North America and the UK. Check out their blog where they often provide tutorials on WordPress, Drupal and Joomla as well as follow them on Twitter @ostraining.

Related Content

• How to Evaluate What CMS to Use
• What is The Future of Web Development?
• Convincing Your Clients to Use Open Platforms
• Related categories: Web Development and Web Design

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Go to Source

THANKS TO THE WORK of the WHAT WG, the orations of Steve, the acclaim of developers, and a dash of tasteful pamphleteering, the W3C finally has a hit technology on its hands. Indeed, it has a cluster of hot technologies, the latest incarnation of what we’ve been calling “web standards” since we began fighting for them in 1998, when browser support for HTML, CSS, and JavaScript was inconsistent, incomplete, and incompatible, and the kingmakers of the day couldn’t have cared less. Moreover, after 13 years, the W3C has finally learned that it’s okay to market to your constituents—okay to actively encourage standards adoption.

Hence the HTML5 logo effort, intended as an identity system for all the hot new standards technologies—and initially bogged down by a controversy in our circle about theW3C muddying the waters. The actual muddying began when Steve Jobs announced Apple’s support for HTML5 by pointing to web stuff created with CSS3. In other words, the inaccurate use of “HTML5″ to cover HTML and non-HTML technologies coincided with the surge of interest in those technologies under that inaccurate label. Which is why some thought leaders in our community have reckoned that the business community’s confusion about what HTML5 actually means doesn’t matter so much, as long as they are clamoring for great sites, accessibly designed with web standards—and as long as developers know the difference between HTML5 and, say, CSS3.

In any case, soon after the standards digerati declared the HTML5 banner launch a communications fiasco, it emerged that the launch was actually merely a communications snafu.

An updated FAQ makes it clear that HTML5 means HTML5, that CSS3 is not part of the HTML5 specification, and so on. The W3C’s clarification allows the standards organization to have it both ways in a fashion acceptable to all. In times past, the W3C argued passionately within its own walls during the creation of web standards, only to passively release them as “recommendations” to a world that often ignored them—the development of XHTML 2 in the pure absence of worldly interest was probably the culmination of that phase. But today’s W3C has learned better. It has learned to engage its constituents and to seek approval beyond its immediate constituents—i.e. to reach out to the business community, not just to the authors of O’Reilly and Peachpit books. Its “HTML5″ identity effort represents a reasonable and meritorious effort to cash in on, prolong, and extend the world’s already keen interest in HTML5 and related technologies and practices. Meantime, the little FAQ page and other minor editorial clarifications allow the W3C to pacify its knowledgeable critics and duck the charge that it is blurring the lines between HTML, CSS, and other technologies.

Now that the story appears to be heading purposefully in a single direction, a kink in the works was inevitable.

That kink is also not surprising and not entirely unanticipated. Just when the W3C figures out that HTML5 is hot, the WHAT Working Group (the splinter group that created the actual HTML5 specification in the first place) has decided that HTML is the new HTML5:

1. The HTML specification will henceforth just be known as “HTML”, with the URL http://whatwg.org/html. (We will also continue to maintain the Web Applications 1.0 specification that contains HTML and a number of related APIs like Web Storage, Web Workers, and Server-Sent Events.)
2. The WHATWG HTML spec can now be considered a “living standard”. It’s more mature than any version of the HTML specification to date, so it made no sense for us to keep referring to it as merely a draft. We will no longer be following the “snapshot” model of spec development, with the occasional “call for comments”, “call for implementations”, and so forth.

Those who are surprised should remember that the HTML5 doctype references “HTML” with no version number. In the thinking of its creators, HTML5 was always just HTML. It looked backward (the first web page ever written would be valid HTML5 with the addition of a doctype) and forward. It would continue to evolve. The WHAT WG gave itself the job of steering and updating HTML, while the W3C took on the task of maintaining milestones (a task it will continue to perform).

In practice, the WHATWG has basically been operating like this for years, and indeed we were going to change the name last year but ended up deciding to wait a bit since people still used the term “HTML5″ a lot. However, the term is now basically being used to mean anything Web-standards-related, so it’s time to move on!

To those inside the circle of trust, there is no contradiction here. The W3C will doubtless continue to market HTML5, and, for a time, design technologists will continue to write HTML5 books and teach HTML5 classes, if only to acknowledge HTML’s new capabilities and to clearly mark the break from the technologies and practices of the past. Eventually, quite probably, the WHAT WG’s view will take hold, and we will view HTML as a living specification.

Meantime, we’ll take 5.

Thanks to J. David Eisenberg for the nudge.

Go to Source

All about CouchCMS

CouchCMS is a self-hosted simple CMS that has been created specifically with web designers in mind.
It allows designers to take any HTML/CSS templates and convert it into a fully content managed site, quite literally in minutes.
Unlike most CMSs out there, Couch works by being retrofitted within an existing design or static site and not vice-versa. This gives unparalleled creative freedom to designers who will no longer need to design their layouts around the limitations of whichever CMS they use.
No knowledge of PHP is required for using it, as everything in Couch is achieved using the familiar XHTML like tags.
There is no learning curve, no ‘a-ha moment’, no ‘light-bulb moment’. Everything that needs to be known for using Couch can be learnt in a very short time.

Although Couch claims to be a CMS built for designers, the truth is, it perhaps was built even more for their clients – the end users. It is eventually the end-users who have to deal with the CMS more than anybody else and if they find the interface over featured and complicated, everything else comes to a naught.

How to enter

This competition will run for the next 7 days, and all you have to do for a chance to win is leave a comment below leave a comment below telling us what type of project you are currently working (without being too specific). Winners will of course be selected at random and will be informed directly after the competition ends via email.
Good luck to everyone

Go to Source

The javascript library fixes browser & device bugs, and makes sure your video is even more compatible across different browser versions. The pure HTML5/CSS skin ensures a consistent look between HTML5 browsers, and easy custom skinning if you want to give it a specific look, or brand it with your own colors.

Requirements: HTML5
Demo: http://videojs.com/
License: LGPL License

Sponsors

Esyndicat – A Powerful PHP Web Directory Software

Go to Source

AlertFox, an awesome website monitoring service, held a giveaway on Six Revisions recently, giving away $300 in credit to their service to three Six Revisions readers. Read on to learn who the three winners are.

The Winners

• Mathan Vibranarayanan
• Adam
• Erwin

Congratulations to the winners! The winners should have already received an email with instructions on how to claim their prize.

Results of SQL query that selected 3 comments randomly.

About AlertFox

AlertFox is an in-depth website monitoring service for Web 2.0 and SaaS web applications. Unlike its predecessors, AlertFox can monitor the function and performance of sites using Ajax (JavaScript/HTML/CSS), Flash, Flex, and Silverlight. The AlertFox real user monitoring runs directly in the web browser, thereby monitoring the true user experience. AlertFox monitoring system administers more than 200,000 website tests a day and counting.

Related Content

• Things You Should Do Immediately After Launching a Website
• Search Analysis with Google Analytics
• Launching a Blog Successfully in 15 Days
• Related categories: Website Management and Web Development

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Go to Source

This step-by-step design tutorial on Design Instruct (our other website) will show you how to create a slick web button in Photoshop, and also how to make it functional using HTML and CSS.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

Related Content

• How to Create a Slick and Clean Button in Photoshop
• A Look into Registration Buttons in Web Design
• Creating a User Interface That Speaks Your Users’ Language
• Related categories: Tutorials and Web Design

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Go to Source

This 2-part tutorial on Design Instruct, our other site, will walk you through the creation of a Photoshop mock-up as well as provide you with a detailed guide on how to convert the design into an HTML5 template.

Final Result

Click the preview image below to go to Part 1 of the tutorial series on Design Instruct (or go to Part 2 instead).

Other Things to Do

• Subscribe to the Design Instruct RSS feed
• Follow @designinstruct on Twitter

Related Content

• How to Make an Elegant Patterned Web Design Using Photoshop
• How to Create a Web App’s Site Web Design in Photoshop
• How to Make a Light and Sleek Web Layout in Photoshop
• Related categories: Web Design and Tutorials

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Go to Source

CodeMyConcept, a PSD to HTML service aimed at agencies and freelancers, sponsored a Six Revisions giveaway by offering up four $250 gift cards for use on their services. Thank you to those who participated! In this post, you’ll find out the people who’ve won.

The Winners

The 4 winners of the $250 CodeMyConcept gift cards are:

• Sam De Decker
• Mark
• Karthikeyan
• tvardy

Congratulations to the winners! The winners should have already received an email with instructions on how to claim their prize.

Results of SQL query that selected 4 comments randomly.

About CodeMyConcept

CodeMyConcept is one of the fastest growing PSD to HTML services on the planet. They’ve worked on cool sites such as Coca-Cola and Absolut Vodka. They take pride in their work, they work hard, and they love what they do. CodeMyConcept wants to change the world one pixel at a time.

Follow CodeMyConcept on Twitter, become a fan on Facebook, read their blog where they share tips, tricks, and news that are relevant to web professionals, check out their sample work, and chat with them live to get your questions answered.

Related Content

• 30 Beautiful Photoshop Text Effect Tutorials
• How to Create a Slick and Clean Button in Photoshop
• The 50 Best Photoshop Tutorials of 2009
• Related categories: Web Design and Web Development

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Go to Source

This web design Photoshop tutorial on Design Instruct, our other site, outlines techniques for making a layout comp that will work well for the sites of web apps, startup companies, SaaSs, and other modern, "Web 2.0"-themed, product-centric sites.

Final Result

Click the preview image below to go to the tutorial on Design Instruct.

Other Things to Do

• Subscribe to the Design Instruct RSS feed
• Follow @designinstruct on Twitter

Related Content

• How to Create a Clean Web 2.0 Style Web Design in Photoshop
• Coding a Clean Web 2.0 Style Web Design from Photoshop
• How to Design a Clean Business Website with Photoshop
• Related categories: Web Design and Tutorials

About the Author

Jacob Gube is the Founder and Chief Editor of Six Revisions. He’s also a web developer/designer who specializes in front-end development (JavaScript, HTML, CSS) and also a book author. If you’d like to connect with him, head on over to the contact page and follow him on Twitter: @sixrevisions.

Go to Source

To explain the benefits of web standards, I’ve compared on my own blog the landscape of the web today with that of 10 to 15 years ago.

Questions related to cross-browser compliance and the necessity of testing extensively before launching still linger, but the standardization of DOM, (X)HTML, CSS and a number of other technologies has made the digital world much more predictable.

When coding a standards-compliant website, we can be reasonably certain that it will render the same in Firefox, Safari, Chrome, Opera and even Internet Explorer (from version 7 up, of course). Inconsistencies do arise, but anyone who has stood on either side of the past decade of web design and development would surely recognize the value of standards.

As a community, we embrace standards and encourage others to do the same. We write semantic code, validate it and occasionally go as far as having in-depth discussions about how we should (or shouldn’t) format our CSS and HTML.

But the ugly truth is that the average Joe Client simply doesn’t care. Joe is looking not for a compliant website, but for an effective website.

There are exceptions, of course. You might be “lucky” enough to pick up a know-it-all client who demands standards compliance because they overheard a friend of an assistant to a fellow CEO say that it’s important.

For the most part, though, Joe is not looking to hire a designer based on their ability to meet all of the standards recommended by the W3C. He probably doesn’t even know what the W3C is.

Rather, Joe is looking for a designer who can build a website that helps him achieve his objective. Whether the objective is to sell more products, share information about his company or bring people with a common interest together, he will certainly be more concerned with achieving it than with having a website that can be checked off as being standards-compliant.

So, do we abandon standards altogether to give Joe what he wants? Not at all. Standards, as we’ve discussed, are critical and should figure largely in the work we do for clients, even if they’re not a selling point in and of themselves.

I have seen a number of portfolios in which the designers proudly claim that their websites were built on valid standards-compliant HTML, CSS and so forth. While this is certainly a good thing, we have to ask ourselves what this means to Joe. More often than not, Joe will presume that you mean merely that your designs are of high quality, or perhaps that you are up to speed on the latest technological trends (such as the often-misunderstood Web 2.0).

Standards are so much more than that. But we can’t afford to leave Joe to connect the dots when he doesn’t fully understand standards in the first place. Rather than emphasize the standards themselves, we should focus on explaining their benefits.

Accessibility

Accessibility is about creating websites that can be used and navigated by users with disabilities. The most commonly cited implementation is to make content recognizable to screen-reading software and text-to-Braille hardware.

This could pose a great benefit to clients. Most clients probably do not understand that such assistive technologies basically parse the HTML document and return the content in a format that can be understood by the user. Standards-compliant code helps to create the document structure required for these devices to function properly, thus making the website more accessible.

Separating content (HTML) from presentation (CSS) also makes pages more accessible when certain stylistic elements are unavailable (whether because the server has failed to deliver them or the user’s custom settings override them).

Without the style information, a well-constructed website simply reverts to the browser’s defaults, which means that the content is still accessible even if the stylistic elements are not. Websites that do not comply with standards generally do not fall back accessibly in this way.

Future-Proofing

While the landscape of the web is constantly shifting, clients usually do not want to have to pay for a completely new website after a few years because of outdated code.

While the big browser makers do their best to make their rendering engines backwards-compatible (and HTML5 itself has this concept built into it), the future-proofing benefits of web standards might appeal to clients.

Just because a non-compliant website looks fine in current browser versions doesn’t mean it will in future ones, especially as browsers continue to deprecate certain quirks in favor of broader standardization. As such, one simple argument you could make is that compliant websites are best equipped to stand the test of time, because they are built according to the blueprint that guides the development of the web.

Improved Performance

Even the most uninformed client would recognize how damaging a sluggish website would be to their business. Web standards can help greatly with this, too.

The guideline to separate content and presentation was not established by purists out of semantic snobbery. It really is the best way to create a website. Embedding style mark-up on every page would create a lot of bloat and drive up page sizes (and the amount of information that users would have to download).

By moving the style code to a cacheable CSS file and eliminating layout tables and other useless mark-up, you will make the website more responsive and user-friendly. Joe would certainly appreciate that.

Improved performance also reduces bandwidth consumption and related costs (even though most hosting packages come with more bandwidth than a website would ever need).

Simpler Maintenance

Of the many benefits that come with having a standards-compliant website, perhaps the most appealing is that it generally requires less maintenance than a non-compliant website—or at least the maintenance can be done much more quickly and cheaply. A few tweaks to a style sheet will activate changes across the website.

Compare this to a website that mixes up style and content. Making a simple change could require digging through several template files or, worse, a set of static HTML documents. I remember having to do this myself, pre-enlightenment, wading through a host of ugly font tags scattered throughout the pages. Any typographic change would take hours, and I invariably missed one or two somewhere.

Standards help clients avoid these headaches and instead benefit from much simpler, cheaper and more efficient maintenance.

Because it is semantic and follows established document structures, a compliant website is also easier for other designers and developers to read and understand. So, if the client ends up needing someone else to maintain their website, that person will not have to spend hours trying to wrap their head around the code.

SEO

While there is no real consensus on the effect of web standards on search engine optimization, one thing is clear: standards don’t hurt. In fact, they very likely bring a number of benefits to a website’s search ranking. Just look at the tips that Aaron Walter suggests in his “Findability/SEO Cheat Sheet: Guide to Web Standards SEO,” all of which comply with web standards. Here are some of the requirements he suggests:

• Your mark-up should contain no errors that would make the page difficult for a search engine to index. Validate your mark-up with the W3C’s validation tool.
• Write semantically meaningful mark-up. This means using tags as they are intended to be used and in a way that reflects the content, rather than according to their default style. Use W3C’s semantics extractor to check your work, and view your website without CSS to ensure that the information hierarchy supports your message.
• Write intelligible title tags, beginning with the page name, then the website name, then a short keyword-rich phrase that describes the website.
• Use heading tags with relevant keywords to identify the key sections of your pages. Put the headings tags in order of importance, starting with h1 (for the website or organization’s name).

It stands to reason that standards-compliance would help a website’s SEO for the same reasons that it would make it future-proof. As search algorithms improve, compliant websites will naturally remain the most readable and crawlable, making them rank well.

Make sure that clients understand that SEO should not be done at the expense of standards. Anything that breaks standards is little more than a quick fix for fleeting results, not a forward-thinking solution to maintain visibility.

Conclusion

While Joe doesn’t care about standards-compliance in and of itself, he will be receptive to the many concrete benefits it would bring to his business. But you are the one who has to explain those benefits to him.

You have to explain how adhering to web standards will make his website faster, more accessible, easier to maintain, more future-proof and, in all likelihood, more findable. If you can help him grasp all that, he might become even more excited about standards than you are!

Written exclusively for Webdesigner Depot by Matt Ward. Matt is a respected designer and writer who freelances under the moniker Echo Enduring Media. He also currently acts as the Creative Director at Highland Marketing. You should follow Matt on Twitter.

How do you approach web standards? How do you explain their benefits to clients? Share your view below.

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: O1Rs1S

Source

Go to Source

Requirements: Safari 5 Browser
Demo: http://net.tutsplus.com/tutorials/other/how-to-create-a-safari…
License: License Free

Sponsors

Esyndicat – A Powerful PHP Web Directory Software

Go to Source

1. Building the HTML

Here’s the basic structure of the HTML we’ll need for our slide-out panel.

<div id="slider">
   <div class="wrap">
      <div class="slider-top">
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
      </div>
      <div class="slider-bottom">
         <div id="handle">
            <a href="#" id="logo" class="notext left">Logo</a>
            <a href="#" id="slide-link" class="notext left">Our sites <span>&nbsp;</span></a>
         </div>
      </div>
   </div>
</div>

We start out with a div with an ID slider that will stretch to the width of the page, and inside it another div which we’ll use to center the content horizontally. We’ll use a class wrap for that.

<div id="slider">
   <div class="wrap">

   </div>
</div>

Next, we’ll add two more divs which correspond to the top part of the slider, which will be hidden by default, and the bottom part which will be visible at all times and will hold the button which will slide the content.

<div id="slider">
   <div class="wrap">
      <div class="slider-top">

      </div>
      <div class="slider-bottom">

      </div>
   </div>
</div>

Finally, we’ll add the content at the top of the slide-out panel, and the logo and link which activates the sliding – it will be assigned the ID slide-link. In this example, our content will be a few linked images that you can replace with anything you like.

<div id="slider">
   <div class="wrap">
      <div class="slider-top">
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
         <a href="#"><img src="css/images/img.gif" alt="" /></a>
      </div>
      <div class="slider-bottom">
         <div id="handle">
            <a href="#" id="logo">Logo</a>
            <a href="#" id="slide-link">Our sites <span>&nbsp;</span></a>
         </div>
      </div>
   </div>
</div>

2. Styling our HTML with CSS

This is the stylesheet we’ll be using. There is a step-by-step explanation for it below.

* { padding: 0; margin: 0; outline: 0; }

body {
   font-family: Arial, Helvetica, Sans-serif;
   font-size: 12px;
   color: #fff;
   line-height: 1.2;
   background: #072348 url(images/bg.jpg) no-repeat top center;
}

a { color: #6eb6fd; }
a:hover { text-decoration: none; }
a img { border: 0; }

.left {
   float: left;
   display: inline;
}
.right {
   float: right;
   display: inline;
}

.notext {
   font-size: 0;
   line-height: 0;
   letter-spacing: -4000px;
}

.wrap {
   width: 800px;
   margin: 0 auto;
}

#slider {
   background: #2d2d2e url(images/bg-slider.png) 0 bottom repeat-x;
   width: 100%;
   height: 137px;
   position: absolute;
   top: -80px;
   left: 0;
}

#logo {
   background: url(images/logo.png);
   width: 312px;
   height: 67px;
   position: relative;
}

#handle {
   width: 515px;
   height: 67px;
   position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
}
#slide-link {
   background: url(images/our-network-button.gif);
   width: 103px;
   height: 67px;
   text-decoration: none;
   position: relative;
}
#slide-link span {
   background: url(images/network-arrow.gif) 0 -30px no-repeat;
   display: block;
   width: 25px;
   height: 25px;
   position: absolute;
   top: 35px;
   right: 43px;
}
#slide-link span.open {
   background-position: 0 5px !important;
}

.slider-top {
   height: 60px;
   padding: 10px 0;
}
.slider-top a {
   float: left;
   display: inline;
   margin: 0 10px 0 0;
}

.slider-bottom {
   width: 800px;
   height: 50px;
   position: relative;
}

First up, we’ll set the appropriate background and positioning to the div that holds our slider. We’ll set the width to 100%, height – 137px, and we’ll set an absolute position to the element so it will be easy for us to make it slide out later on. The top position is -80px because that is the height of the part we’ll want to hide. If your hidden area is sized differently you should change the position accordingly.

#slider {
   background: #2d2d2e url(images/bg-slider.png) 0 bottom repeat-x;
   width: 100%;
   height: 137px;
   position: absolute;
   top: -80px;
   left: 0;
}

Next, we’ll style the top (hidden) and bottom (always visible) part of our panel. We’ll also add some basic styling for the linked images in the top hidden part.

.slider-top {
   height: 60px;
   padding: 10px 0;
}
.slider-top a {
   float: left;
   display: inline;
   margin: 0 10px 0 0;
}

.slider-bottom {
   width: 800px;
   height: 50px;
   position: relative;
}

Then we’ll set up our blue handle, which holds the website logo and the link which toggles the sliding content. We’ll set the appropriate dimensions for the left and right divs. Then we’ll apply the style we need for our logo and slide toggle link. Notice how the white arrow which shows the state of the slider is placed in a separate <span> tag – we’ll be adding a class open to that so the arrow state changes when you slide out the content.

#handle {
   width: 515px;
   height: 67px;
   position: absolute;
   top: 0;
   left: 0;
   overflow: hidden;
}
#slide-link {
   background: url(images/our-network-button.gif);
   width: 103px;
   height: 67px;
   text-decoration: none;
   position: relative;
}
#slide-link span {
   background: url(images/network-arrow.gif) 0 -30px no-repeat;
   display: block;
   width: 25px;
   height: 25px;
   position: absolute;
   top: 35px;
   right: 43px;
}
#slide-link span.open {
   background-position: 0 5px !important;
}

#logo {
   background: url(images/logo.png);
   width: 312px;
   height: 67px;
   position: relative;
}

3. Using some jQuery magic to animate our slider.

Here’s the source of our functions.js file:

$(document).ready(function() {
   $('#slide-link').click(function() {
      if($(this).find('span').hasClass('open')) {
         $('#slider').animate({
            top : -80
         }, {
            queue : false
         });
         $(this).find('span').removeClass('open');
      } else {
         $('#slider').animate({
            top : 0
         }, {
            queue : false
         });
         $(this).find('span').addClass('open');
      }
      return false;
   });
});

As most of you probably know, the first thing we need to write in our functions file is the following:

$(document).ready(function() {

});

Next up, we select our slide-link by its ID, and add a .click() event handler, so the .animate() function will be executed when we click it.

$(document).ready(function() {
    $('#slide-link').click(function() {

    });
});

After that, we’ll let jQuery check whether or not the span tag inside our slide-link has a class called open – that way we’ll determine if the panel should be sliding up or down. We’ll also add return false; at the end of the function, so the link won’t take us to the page it has set in its href tag.

$(document).ready(function() {
    $('#slide-link').click(function() {
        if($(this).find('span').hasClass('open')) {

        } else {

        }
        return false;
    });
});

Finally, we’ll animate the slider div. If our panel is hidden, we’ll set the position in the animate function to top : 0 and we’ll add the open class to the span element in our slide-link. Otherwise, the animate position should be the negative of the height of our hidden panel – in our case – 80px, or simply top : -80 in the jQuery implementation; we’ll also remove the open class we added to our slide-link span before, so the white arrow will return to its default state. In the callbacks of both .animate() functions we added queue : false to prevent jQuery from queuing a lot of animations when a user clicks the slide-link repeatedly without waiting for the animation to finish.

$(document).ready(function() {
    $('#slide-link').click(function() {
        if($(this).find('span').hasClass('open')) {
            $('#slider').animate({
                top : -80
            }, {
                queue : false
            });
            $(this).find('span').removeClass('open');
        } else {
            $('#slider').animate({
                top : 0
            }, {
                queue : false
            });
            $(this).find('span').addClass('open');
        }
        return false;
    });
});

Wasn’t that easy?

Below you’ll find the source files for the slider, and a live demo.

Go to Source