Coding a Clean and Professional Web Design

Mar 29 2010 by Waheed Akhtar | 103 Comments

Coding a Clean and Professional Web Design

In this web development tutorial, you will learn how to code a web page template from a Photoshop mock-up from a previous tutorial called "Create a Clean and Professional Web Design in Photoshop" using HTML/CSS.

This is the second part of a two-part series that will teach you how to create the layout in Photoshop, and then how to convert it to a standards-compliant (X)HTML web design.

The "Clean and Professional Web Design" Series

Final Result

Click on the preview below to see the live demo of the web design that you’ll be creating in this tutorial.

Download

You will need the Photoshop (PSD file) of Part 1 of this tutorial, download it from that tutorial.

Also you can download all files including the examples used in this tutorial from the link below if you want to study it offline (or use it in a project).

Introduction

In this tutorial, we’ll create a fixed-width web layout using some basic coding techniques. We will go through step-by-step from the top to bottom. So this means that we will start from the the header, then content, and then the footer section. Preview the examples when they are available to make sure that you are following along.

Setting up the file structure

1 Create a folder in your computer for the tutorial files and name the folder clean-professional-website. This will be our working folder.

2 Inside this folder, create the following:

  • images folder – will contain all images used in the tutorial.
  • index.html – our site template.
  • css folder – will contain our stylesheet called styles.css

File structure

3 Open index.html and styles.css in your favorite text editor. Also, open the PSD file in Photoshop; it’s inside the clean-professional-weblayout zip file from Part 1.

4 Our file structure is set up now and we are ready to go.

5 Open the Photoshop file. Open the Info panel from Window > Info (shortcut key: F8). The Info panel gives useful information depending on the selected tool. Choose the Rectangular Marquee Tool (M) and set the options as shown below. After the options are set, click on the top left of the canvas (next to the logo) to make a selection.

6 Use Edit > Copy Merged (Ctrl + Shift + C) to copy the selected area. Create a new document and paste (Ctrl + V) the copied selection into the new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as bg_body.jpg in the images folder. Use the same settings for saving all the files so that there is no issues with how they are rendered on a web page. I used the JPEGVery High preset but feel free to change these settings (you can probably get away with just JPEG – High or PNG-8 to keep your web page CSS backgrounds as lightweight as possible). If you change the default settings, be sure to save it the same way every time to provide consistency in the images.

Setting up the HTML and CSS files

7 Move to index.html. The first thing we want to do is reference style.css and in the <head> of our HTML document.

<head>
  <link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>

8 Open styles.css and add some basic style rules. We’re going to take a shortcut here and use the Universal Selector margin/padding CSS reset to zero out all the elements’ margins and paddings. This works the majority of the time, but it’s better to invest some time learning about more robust CSS Reset techniques which you can find here: Resetting Your Styles with CSS Reset.

9 Here is the style rule declaration for resetting the margins and paddings:

/* CSS Reset */
* { margin: 0; padding: 0; }

Implementing the background

10 We’re going to implement the background we created (body_bg.jpg), tiling it horizontally (repeat-x). We’re going to set it as the <body> background. We also define the default font-family that we are going to use in this website.

body {
  background: #fff url(images/body_bg.jpg) repeat-x 0 0;
  font-family: Arial, Helvetica, sans-serif;
}

Let’s preview how the background looks. In Example 1 below, you can see how background is implemented.

Example 1: See the background in action.

Setting up the layout’s container div

11 Let’s move into some HTML. We’ll contain our layout in a 960px-wide container div called #container.

<body>
<div  id="container">
  <!-- content goes here -->
</div>
</body>

12 Since our content area is 960px, we’ll give #container a width of 960px and add a padding of 10px on the right and left. This will give us sufficient room on either side of the layout for scroll bars so that when the user minimizes the web browser, there’s still a bit of padding on the left and right and our content is not right at the edges of the view port (making the content hard to read). Center it using the margin attribute.

#container {
  width: 960px;
  margin: 0 auto;
  padding: 0 10px;
}

Creating the logo

13 Let’s slice up the other stuff, starting with the logo. Head over to the Photoshop file. Create a selection around the logo that is exactly 360px and 115px wide using the Rectangular Marquee Tool (M) as shown in the image below. Use Photoshop Guides (View > Show > Guides) to make this easier.

14 Copy Merge (Shift + Ctrl + C) and then paste the logo in a new document.

Note: It’s not necessary to draw a selection with the Fixed Size option from the Style option. Select Normal as the Style option and drag around the target to have a similar selection as below.

15 Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as logo.jpg in the images folder.

Creating the phone icon

16 Create a selection around the phone icon that is exactly 47px and 47px wide using the Rectangular Marquee Tool (M) as shown in the image below. Copy Merge (Shift + Ctrl + C) and then paste it into a new document.

17 Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as phone_icon.jpg in the images folder.

Coding the Header’s HTML markup

18 Let’s get back to our HTML/CSS. First, we’ll start with the markup. Inside the #container div, we use another div to create our header section – we’ll call it #header.

19 For the logo, we’ll use an <h1> element. To make the logo clickable, we will need an <a> element inside the <h1> element to be a block element, and give it the same width and height as its parent <h1>. Also we add another div which is named #phone positioned below our <h1> element. This will hold the phone icon in the background with the phone number and text beside them. Let’s see how the markup will look like:

<div id="container">
  <div id="header">
    <h1><a href="#">Smashing Dzine</a></h1>
      <div id="phone">
        <p>+971 55 7457383</p>
        <h6>If you have any query, feel free to call us</h6>
      </div>
  </div>
</div>

Styling the logo

20 First, let’s style #header. We are going to set the position property to relative for #header so the phone icon—which will be absolute-positioned—positions itself relative to the #header. Also give it a width of 960px or 100%. I am using 100% here.

#header {
  position:relative;
  width: 100%;
}

21 We will work on the logo style first. We transform our <h1> element into a block element. Float it to the left. We use the logo we created earlier in Step 15 as the background, and finally indent the text to the left where it can’t be seen to hide our text. This method of replacing text with a background image is called CSS Background Image Replacement.

#header h1 {
  display:block;
  float:left;
  width:360px;
  height:115px;
  background:url(../images/logo.jpg) no-repeat 0 0;
  text-indent:-9999px;
}

22 To make the logo clickable, we also need the <a> element inside the <h1> element to be a block element, and give it the same width and height as <h1>.

#header h1 a {
  display: block;
  height: 100%;
  width: 100%;
}

Styling the phone section

23 We will use the phone icon (phone_icon.jpg) we created in Step 17 as the background for #phone. Position it absolutely as mentioned before in Step 20. We’ll add paddings 5px from top and 50px from right, so the text inside #phone is aligned properly with the icon on the left.

#header #phone {
  background: url(../images/phone_icon.jpg) no-repeat right 0px;
  height: 47px;
  position: absolute;
  top: 41px;
  right: 0;
  text-align: right;
  padding: 5px 50px 0 0;
}

24 Add the font size for <p> and <h6> elements.

#header #phone p {
  font-size: 20px;
} 
#header #phone h6 {
  font-size: 11px;
}

Preview your work in a web browser. Check out Example 2 below to see where we are now.

Example 2: Our header section which includes the logo and phone section is completed.

Creating the navigation menu

25 Move back to Photoshop file. Expand the navigation layer group if its not already expanded. Hide the navigation text. Select the hover layer and with the Direct Selection Tool (A), drag the right anchor points of the the path to the right as shown in the image below. (We will use this image for our navigation hover).

Tip: After selecting anchor points with the Direct Selection Tool, hold down Shift and move it to the right with your Right Arrow key. This will move anchor points 10px to the right.

26 Just like with the logo, create a selection exactly 203px by 35px. Copy Merge (Shift + Ctrl + C) and then paste the hover background in a new document.

27 Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as hover.jpg in our images folder.

Coding the Navigation Markup

28 We will add another div where #header ends and name it #nav. Our navigation will be a standard unordered list item. Each list item’s <a> element will contain a <span> element because of our rounded corners (you’ll see why in just a bit). Also the first list item (Home) will have a class of active to show the page name that the user is currently one.

<div id="nav">
  <ul>
    <li class="active"><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>About SmashingDzine</span></a></li>
    <li><a href="#"><span>Our Services</span></a></li>
    <li><a href="#"><span>Our Portfolio</span></a></li>
    <li><a href="#"><span>Blog</span></a></li>
    <li><a href="#"><span>Contact Us</span></a></li>
  </ul>
</div>

Styling the navigation menu

29 First we will clear the floated elements we have before #nav and set height and width of the #nav div.

#nav {
  clear: both;
  height: 35px;
  width: 100%;
}

30 We will float <ul> element to the left so that it remains with the flow our our web page.

#nav ul {
  float: left;
}

31 For the list items, we’ll make them into block elements, then float them to the left so that they display side by side. We’ll also add 1px padding to list items at their right.

#nav ul li {
  display: block;
  float: left;
  height: 35px;
  list-style-type: none;
  padding: 0 1px 0 0;
}

32 The image (hover.jpg) we created in a preceeding step will be used as the background for the <a> elements with x-position:left and also for <span> element with x-position: right. We’ll set text-transform to uppercase so that it is all in capital letters.

#nav ul li a {
  color: #3f3f3f;
  display: block;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  height: 100%;
  line-height: 35px;
  padding: 0 0 0 18px;
}
#nav li a span {
  display: block
  float: left;
  height: 100%;
  padding: 0 18px 0 0;
}

33 Finally, for the hover and active states, we adjust the background property. This will show the "hover.jpg" when you hover on a menu item.

#nav li a:hover, #nav li.active a {
  background: url(../images/hover.jpg) no-repeat left;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

34 Here the <span> element shows the background image from the right side.

#nav li.active a span, #nav li a:hover span {
  background: url(../images/hover.jpg) no-repeat right;
}

Preview your work in a web browser. Check out Example 3 below to see where we are. Hover over the menu items to see how our primary navigation works.

Example 3: Our navigation section is completed.

Creating the Featured section

35 Let’s call the big image and Quick Quote form area as our "Featured" section.

36 Go to our Photoshop file and browse to the header layer group and then to the fp layer group. Ctrl + Click on the vector mask thumbnail (as shown below). You will get a selection around the big image.

37 Copy Merge (Shift + Ctrl + C) and then paste the image in a new document.

38 Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as fp-01.jpg in images folder.

39 Next we’ll create the Quick Quote form background. With the Rectangular Marquee Tool (M), make a selection of 1px width and 340px height as shown below.

40 Copy Merge (Shift + Ctrl + C) and then paste the image in a new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as form_bg.jpg in the images folder.

41 Select the Rectangular Marquee Tool (M) again and make a selection around the submit button as shown below.

42 Copy Merge (Shift + Ctrl + C) and then paste the image in a new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as submit_btn.jpg inside the images folder.

Coding the Featured section

43 We’ll create another div called #featured under our #nav div. This will contain the featured image on the left. You might decide that this image should be a slideshow, and if that’s the case, you can check out the tutorial "Create a Slick and Accessible Slideshow Using jQuery".

Note: We are displaying the Featured image as an unordered list item, making it easy for anybody who wants to convert this section into an image slideshow later on. We’ll name our single <li> element as "ss1".

44 Featured section also contains the Quick Quote form on the right. This form will hold a title using an <h2> element, a <label> element for each <input> text element and lastly, an <input> element with type property set to image for the button. We’ll use "submit_btn.jpg" as the src for the image button and name it as .btn.

Here’s the markup:

<div id="featured">
  <ul>
    <li class="ss1"><a href="">Heading for Project</a></li>
  </ul>
  <form id="quote" action="#" method="post">
    <h2>Quick Quote</h2>
    <fieldset>
      <label>Your Full Name:</label>
      <input type="text" name="Full Name" />
      <label>Your Email:</label>
      <input type="text" name="Email" />
      <label>What Are You Looking For:</label>
      <textarea cols="35" rows="2"></textarea>
      <input class="btn" type="image" src="images/submit_btn.jpg"/>
    </fieldset>
  </form>
</div>

Styling the Featured section

45 Let’s style the #featured div first. Adding a top margin of 45px will center the #featured container vertically to the brown color gradient background. Also add a padding of 10px so the inner content doesn’t stick to the borders of featured container.

#featured {
  margin: 45px 0 0;
  background: #fff;
  padding: 10px;
  height: 340px;
  width: 940px;
}

46 Set the float to left for the unordered list.

#featured ul {
  float: left;
}

47 We will convert the list item into a block element and float it to the left as well. Then we set the width to 630px.

#featured ul li {
  float: left;
  list-style-type: none;
  display: block;
  width: 630px;
}

48 Then, just like the logo, we will display the <a> element as a block element and use text-indent to hide the text.

#featured ul li a {
  display: block;
  height: 340px;
  text-indent: -9999px;
}

49 Add "fp-01.jpg" as a background image for the list item.

#featured ul li.ss1 {
  background: url(../images/fp-01.jpg) no-repeat;
}

This is how it should look like in your browser.

50 Next we will style our <form> element. Add the "form_bg.jpg" background we created some steps back and float it to the right.

form#quote {
  background: url(../images/form_bg.jpg) repeat-x;
  margin: 0px;
  padding: 20px;
  float: right;
  width: 260px;
  height: 300px;
}

51 Style the <h2> element in the form. Add a bottom margin of 18px.

form#quote h2 {
  font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #fff;
  text-decoration: none;
  margin-bottom: 18px;
}

52 We’ll make the <label> element into block elements and float them to the left. Set their width to 100%.

form#quote label {
  font-weight: bold;
  color: #fff;
  font-size: 12px;
  display: block;
  float: left;
  width: 100%;
}

53 Next we’ll style our <input> and <textarea> elements. We’ll add height to the <textarea> element separately so that it doesn’t affect our <input> elements. We will also use some CSS3 properties here for rounded corners.

form#quote input, form#quote textarea {
  background-color: #fff;
  border:1px solid #ddd;
  color: #666;
  float: left;
  font: 12px Arial, Helvetica, sans-serif;
  margin: 5px 0 8px;
  padding: 8px;
  width: 240px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
form#quote textarea {
  height: 45px;
}

54 Lastly for our form, we will add the following CSS attributes for the image button named .btn. We’ll hide the border by giving the border property a value of none.

form#quote input.btn {
  width: auto;
  border: none;
  padding: 0;
  margin-top: 0;
}

You can find a big list of CSS Rounded Corners Tutorials here if you want to learn more about this in detail.

CSS3 properties used here are not supported in Internet Explorer, but still, it looks decent in Internet Explorer.

See the difference below between Firefox and Internet Explorer.

The Featured section is completed. Checkout the Example 4 below to see how it looks like in your browser.

Example 4: Our featured section is completed.

Creating the Content Section

55 Get back to Photoshop and with the Rectangular Marquee Tool (M), make a selection of 1px by 173px as shown below.

56 Copy Merge (Shift + Ctrl + C) and then paste the image in a new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as col_bg.jpg in our images folder.

Coding the Content Section

57 We will move to our Content section now. Create a div and name it #content. This will hold our content. Inside this div, we’ll create three boxes with a class of .col. We will double declare the class property of the 2nd box with .noMargin and triple declare the class property of the 3rd box with .noMargin and .fr. To be on the safer side in different browsers and at different resolutions. At the end we add an empty div with a class of .clear that will clear all floats. We will remove the margin of 2nd and 3rd box by adding .noMargin class to them and float the 3rd box to the right by adding .fr class to it.

<div id="content">
  <div class="col">
    <h2>About <span>SmashingDzine</span></h2>
    <img src="images/about_smashing_dzine.jpg" alt="About Smashing Dzine" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]</p>
    <a href="#" class="readmore">Read More</a>
  </div>
  <div class="col noMargin">
    <h2>Our <span>Services</span></h2>
    <img src="images/about_smashing_dzine.jpg" alt="About Smashing Dzine" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...]</p>
    <a href="#" class="readmore">Read More</a>
  </div>
  <div class="col noMargin fr">
    <h2>Our <span>Portfolio</span></h2>
    <img src="images/about_smashing_dzine.jpg" alt="About Smashing Dzine" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing  [...]</p>
    <a href="#" class="readmore">Read More</a>
  </div>
</div>
<div class="clear"></div>

Styling the Content section

58 First we set the atrribute of clear:both for the #content div so all floated elements before this div gets cleared. Then add 80px of top margin. We float the .col divs to the left so that they are displayed next to each other. Set the "col_bg.jpg" as the background image for .col div. Add a 1px border and 20px of padding. .noMargin will have 0px margin and .fr is set to float right.

59 We’ll set the <h2> element’s bottom margin so that it looks just like the mock-up. Style the image by adding a border and a padding of 2px. We’ll also style the <a> element named as .readmore.

#content {
  margin: 80px 0 0;
  clear: both;
  font-size: 12px;
  color: #767676;
}
#content .col {
  float: left;
  width: 258px;
  background: url(../images/col_bg.jpg) repeat-x;
  height: 153px;
  border: 1px solid #CCC;
  padding: 20px;
  margin-right: 30px;
}
#content .col h2 {
  font: normal 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #b47825;text-decoration: none;
  margin-bottom: 18px;
}
#content .col h2 span {
  color: #2f2f2f;
}
#content .col img {
  border: solid 1px #d8d8d8;
  padding: 2px;
  float: right;
  margin-left: 10px;
  margin-bottom: 10px;
}
#content .col p {
  margin-bottom: 20px;
  line-height: 17px;
}
#content .col a.readmore {
  font-weight: bold;
  color: #252525;
  text-decoration: underline;
}
#content .col a:hover.readmore {
  text-decoration: none;
}
#content .col.noMargin {
  margin: 0;
}
#content .col.fr {
  margin: 0;
  float: right;
}
.clear {
  clear: both;
}

60 Preview your work in your web browser. It should look like Example 5.

Example 5: Content section is completed.

Creating the Footer

61 Again we will go back to Photoshop and cut images out as required for our footer. With the Rectangular Marquee Tool (M), select the footer area as shown in the image below.

62 Copy Merge (Shift + Ctrl + C) and then paste the image in a new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as footer_bg.jpg in our images folder.

63 Select the Rectangular Marquee Tool (M) again and make a selection around the Subscribe button as shown below.

64 Copy Merge (Shift + Ctrl + C) and then paste the image in a new document. Save the file for the web, File > Save for Web (Alt + Shift + Ctrl + S) as subscribe_btn.jpg in our images folder.

Coding the Footer

65 To show the footer background with 100% width, we’ll create a div outside the #container div and call it #footer. Inside #footer, we’ll create another div and name it #footerContainer. We will be using one <p> element for footer links. We can also use footer links as standard unordered list items.

There is a newsletter section as well in the footer which we’ll wrap with a <form> element named #newsletter. The form will contain a label, input fields and an image button.

<div id="footer">
  <div id="footerContainer">
    <p>Copyright &copy; 2010 SmashingDzine | <a href="#">Privacy Policy</a></p>
    <p>
      <a href="#">Home</a> /  
      <a href="#">About SmashingDzine</a> / 
      <a href="#">Our Services</a> / 
      <a href="#">Portfolio</a> / 
      <a href="#">Blog</a> / 
      <a href="#">Contact Us</a>
    </p>
    <form id="newsletter" action="#" method="post">
      <label>Enter your email to subscribe for  RSS Updates</label>
      <input type="text" class="textBox" />
      <input class="btn" type="image" src="images/subscribe_btn.jpg"/>
    </form>
  </div>
</div>

Styling the Footer

66 We’ll add clear:both to our #footer div to clear any floating elements. Add footer_bg.jpg to the background of this div and a width attribute of 100%.

#footer {
  clear: both;
  background: url(../images/footer_bg.jpg);
  height: 100px;
  width: 100%;
  margin-top: 40px;
}

67 Set #footerContainer as 960px wide to align the content inside of this div with the rest of the page. We give this div a relative position so that we can absolutely-position the newsletter form on the right side.

#footerContainer {
  margin: 0px auto 0;
  width: 960px;
  font-size: 12px;
  color: #ddd;
  padding-top: 20px;
  position: relative;
}

68 Add the following properties to the <p> and <a> elements.

#footerContainer p {
  margin: 8px 0 8px;
}
#footerContainer a {
  color: #ddd;
  text-decoration: none;
}
#footerContainer a:hover {
  text-decoration: underline;
}

69 We’ll have #newsletter absolutely positioned on the right and 20px from top. For <input> fields, we will use the same styles we used above for the Quick Quote form input fields and set their width to 190px.

form#newsletter {
position: absolute;
right: 0;
top: 20px;
width: 300px;
}
form#newsletter label {
font-weight: bold;
color: #fff;
}
form#newsletter input {
background-color: #fff;
border:1px solid #ddd;
color: #666;
float: left;
font: 12px Arial, Helvetica, sans-serif;
margin: 5px 0 0;
padding: 8px;
width: 190px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

70 And lastly, we’ll hide the border that is around the image button by giving the border attribute a value of none.

form#newsletter input.btn {
  width: auto;
  border: none;
  padding: 0;
  margin-left: 3px;
}

Example 6: Footer completed.

And we’re all finished!

Congratulations, you have done it! Thank you for sticking through this tutorial – I hope you have enjoyed this tutorial and learned a few tips and tricks on converting a design mockup to an HTML/CSS template.

We would love to hear your feedback!

Please feel free to leave your feedback and questions in the comments section below. We will try our best to help you as best as we can.

Related Content

About the Author

Waheed Akhtar is a freelance web designer from Dubai, UAE. He is the founder and editor of Boost Inspiration, where he showcases different creative resources of Digital Art, Graphic Design, Illustration, Photography and Typography for inspiration. You can reach him via Twitter or Facebook.

103 Comments

yoash

March 29th, 2010

Thanks for sharing. I’ve been interested in practicing web design. Photoshop looks like a cool way to do it.

Thomas Craig

March 29th, 2010

Nice detailed tutorial, will be very helpful to a newbie.

Julia

March 29th, 2010

Thank you for the tut, I usually use the similar layot for the business sites, and it’s quite good for personal blog as well.

I would recommend to slice it up for WordPress theme.

w3planting

March 29th, 2010

thanks for sharing cool & interesting tutorial.

Doug

March 29th, 2010

It’s not fine in IE6.

visualhaze

March 29th, 2010

great tutorial!

SCreative

March 29th, 2010

Really useful for people just starting out, this is the sort of tut that will help people understand the level of work that goes into web design.
Many print designers send a clean and simple layout but don’t realise there is more to it than just putting a jpeg online

Spencer Sy

March 29th, 2010

Great and helpful tutorial! Concise and clear and learned some new things in web graphic design. Thanks.

Ahmed Bolica

March 29th, 2010

thanks Waheed really rock plz keep alot of this

Rodrigo Seoane

March 29th, 2010

Hi,

That´s was a good tutorial but, why not use the gradient property for backgrounds and let the images to the IE users. I believe that should be useful in this layout.

Thanks & Regards…

[]s,
Rodrigo.

neznelly

March 29th, 2010

Great tut really enjoyed it.

@Doug – Do you really still design for or even care about IE6?

Smashing Share

March 29th, 2010

Thank you guys for all your comments and feedback.

@Julia: I really never tried to convert any design to WordPress theme. I will give it a try first at my end :)

@Doug: Thanks for pointing out that its not looking fine in IE6. I did not got chance to look it into in IE6. I am using Windows7 and I think I have to install some extra stuff (Virtual Machine) to get IE6 on Windows7.

Olgerd

March 29th, 2010

I felt really surprised to see marquee tool used to slice up the images. Strongly ineffective and even misleading for those starting up, don’t you think?

Melody

March 29th, 2010

I know so many people recommend merging design + coding, but I don’t quite have the patience for coding. However, these tutorials help in understanding the best way to design for coding..

BeBeN

March 29th, 2010

in 70 step we can make a design template…WOW
its a great

Bertrand

March 29th, 2010

@Olgerd : using the marquee is a good first step to slicing a design. If you’re referring to using guides and slice tools to slice a design, yea, it has is pros and cons. I think at first people should start using the marquee to get a sense of how it works. Then, I suggest everyone to get used with the slice tool since it can improve exporting speed of a design.

@neznelly : sadly, some people still use IE6. Lucky you if your clients don’t use it anymore. Nearly 20% are stil using it as of now :
http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2

Travis13th

March 29th, 2010

This is what i’ve been lookin’ for. thnx for sharing. Godbless

Pepa

March 29th, 2010

I wonder why still so many people do webdesign in Photoshop and then even use Marquee tool to slice it. This is horribly inefficient. You’re like 1000x faster in Fireworks which actually *is* the right tool for webdesign.

Kelley Thompson

March 29th, 2010

Best tutorial on this subject I’ve seen so far! Kudos!

I personally love using the slice tool to create images for my websites from a layout. There is a distinct advantage in being able to save your slices with the PSD (and thus the exact dimensions and type of images you create), plus you don’t have the added step of creating a new document for each image.

That being said, I would never allow Photoshop to automatically name all my images for me! I prefer to use the “Selected Slices” option in the “Save Optimized As” screen and give each sliced image a name that relates to its role in the design.

Jonathan Butterworth

March 29th, 2010

Great tutorial. It is always great to see how others design.

Agilworld

March 29th, 2010

awesome tutorials..clear and clean step by step!
thanks for sharing…

Smashing Share

March 29th, 2010

Never thought of this good response of my first coding tutorial. Thank you guys
The reason of using marque tool instead of slicing tool is to not make the slicing part complicated for beginners.

@Bertrand: Thanks man, you cleared some points before I read them :)

@Pepa: I have seen some of my friends working with Fireworks but I never gave it a try for web design.

@Kelley: You got solid points with slicing in Photoshop. The reason of using marque tool here is already mentioned.

JC

March 29th, 2010

awesome post. Now got to know best practices to get slices from PS. Thanks anyways.

Jason

March 29th, 2010

This is a good tutorial for someone starting out, but I really think the name needs to be changed from “coding” to “marking up” a professional web design.

HTML isn’t code, it’s a markup language and in reality all you are doing is adding markup and style to one page. If some sort of programming language were being applied to this tutorial, “coding” might apply.

Naga

March 29th, 2010

Nice tutorial. Clean design & minimalistic code. This is the same way how I too code a website :) Thanks for sharing Waheed Akhtar. Nice work.

Muxx

March 29th, 2010

Awesome

I’ve been itching to do a bit more coding lately, been a little out of it for the last few months, should get some of my skills back up to speed.

Michael

March 29th, 2010

You have suggested to include this css reset:

/* CSS Reset */
* { margin: 0; padding: 0; }

This is not the best practice, I would encourage the use of a more refined reset such as the one by Eric Meyer.

Mars

March 30th, 2010

impressive tutorial mate, very detailed.

inspirationfeed

March 30th, 2010

Great tutorial, very helpful

Colin Morgan

March 30th, 2010

Always good to read how other people do it. Personally I use slicing but that’s just how I learned. You should have showed the good stuff like hooking up the forms :) I spend alot of time on forms and it’s super important for designers to understand how they work. Good read.. Thanks for the article.

jagadishthaker

March 30th, 2010

Hi Waheed, You did a splendid job, I real liked the layout and step buy step guide for coding and designing of this article.. looking for some more interesting UI and Code..

Thanks!

jj

March 30th, 2010

Nice tut. In IE design look broken. Especially ie6.

Demir

March 30th, 2010

really clean and professional coding. thanks for the tutorial.

adkarta

March 30th, 2010

good article to start web design

mkjones

March 30th, 2010

Some very odd things going on in this article.

Never use the marquee/select took to export images for web. Use slicing and create a flexible pallet with layers, its far easier if you need to change things in the future.

There is also no need for the SPAN element in the navigation. You could have used the LI and A tags to create a classic ‘sliding doors’ technique.

I also think the use of the H6 tag in the contact box seems pretty useless – it won’t help SEO and seen as you are re-working the attributes anyway just go for a span or a classed up P tag.

Anyway, the rest is pretty good, maybe I’m just a bit cranky this morning because we put the clocks forward yesterday :)

joel

March 30th, 2010

i think a video showing this would be even more excellent- great tutorial!

@joelyboyblue

Marin

March 30th, 2010

I totally like it man, congrats for the patience to create such a great tutorial resource. I appreciate cz I know how much time it takes to put together a good tutorial :)

saida

March 30th, 2010

Really nice ,and thanks for publishing this . Its very useful for customizing …

Guilherme

March 30th, 2010

Great tutorial man. Thank you very much for the tips and the step by step! Excellent job.

Smashing Share

March 30th, 2010

Glad you all like this tutorial.

@Jason: I hope this link will help what I meant here by coding – http://en.wikipedia.org/wiki/Hand_coding

@Michael: I agree with you. I used global reset so that it is not complicated for beginners

@mkjones: Thanks for your feedback. It is already mentioned above why I used the marque/select tool here for slicing images :)

@Joel: Great idea. But I feel better in writing and explaining it with images

dan

March 30th, 2010

Waheed, nice tutorial, thanks!

IE-Tester might be interesting for your IE browser compatibility testing. (http://www.my-debugbar.com/wiki/IETester/HomePage)

It allows you to have the rendering and javascript engines of IE8, IE7 IE 6 and IE5.5 on one system (Windows 7, Vista and XP)

so you don’t have to install another system/virtual machine if you’r using a pc anyways.

It works fine on my virtual machine tho. (xp and win7 running VirtualBox on a mac pro)

Vicky Nimbalkar

March 31st, 2010

What an Article.

Thanks Waheed Akhtar for such a beautiful article.

Vicky Nimbalkar

awicks44

March 31st, 2010

Great tutorial. I learned something new :)

Smashing Share

March 31st, 2010

Thanks Dan for the link and information. Will try this and see how it works.

Ben

March 31st, 2010

This is just such a great tutorial – with some excellent code . . Thanks for some great ideas.

Daniel15

April 2nd, 2010

With the border radius section:
-webkit-border-radius: 3px;
-moz-border-radius: 3px;

You forgot the CSS3 standard one:
border-radius: 3px;

This is supported in Opera and the IE 9 preview, and in the future it will be supported by Firefox and Google Chrome/Safari. When using vendor-specific prefixes, it’s good to also use the standard one (with no prefix) so it’s future-proof.

Tutorial Lounge

April 2nd, 2010

really informative training session for learn about front-end development.

Smashing Share

April 5th, 2010

@Daniel15: Thanks for those tips. Still I have to digg a lot into CSS3 :)

Rudy C

April 5th, 2010

Good tutorial on a very versatile theme and its organized well.

When coding the Quick Quote section, either the “fieldset” needs to have no borders or just not use of “fieldset” in the html or else there will be the default border that comes with the “fieldset” tag.

Also, the “newsletter”; since it is absolutely positioned to a footer that spans the 100% width of the browser, when using a browser zoom; it throws it off. May look at putting the “newsletter” within another div container.

Other then that; great tutorial!

leah

April 7th, 2010

looks like a nice tutorial. will be putting in my faves. :)

Avangelist

April 7th, 2010

Why is the phone number in a paragraph tag? Is there not a more suitable tag for this? + you have used a heading for a paragraph below it.

Agon

April 9th, 2010

great tutorial, thanks for sharing your knowledge whith us…keep it up whith more this kind of simple and great tutorials…

Brad

April 9th, 2010

Great tuts. I noticed that the code for the form has a fieldset tag that leaves a border in the form. His working example is without the fieldset. You can remove it or add the following:
form#quote fieldset
{
border: 0px;
}

Rahul

April 11th, 2010

Great for new designers

Markupmypage

April 12th, 2010

This is one of the best tutorial i have seen for PSD HTML conversion , It is very neat and very professional out put

Thank you very much

Casssax

April 12th, 2010

Great Tutorial,

I’m having one problem maybe someone could help with.

My ‘Home’ and hover images are coming out with a rounded corner on the top left but a squared off corner on the top right. If I play around with the ‘background-position’ I can change it so the rounded corner is on the right but then the left side is squared off.

I don’t think it’s a browser issue because it does this in Chrome, IE7, and Firefox.

The image I’m using is the exact size as the tutorial so I think it has to be in my code.

Any ideas?

Thanks.

Daniel Leavey

April 15th, 2010

The following rule declaration is shown in step 50. I’m not familiar with ID selectors that have characters (words) preceding the pound symbol, as in the following declaration:

form#quote {
background: url(../images/form_bg.jpg) repeat-x;
margin: 0px;
padding: 20px;
float: right;
width: 260px;
height: 300px;
}

Could you explain why the selector is formed in this way.

Thanks,

Mike

April 17th, 2010

I also have problem with the right rounded corners.. They don’t show right!!

Devin

April 18th, 2010

Just a little warning.
On the topic of image replacement
After looking into it more, and there are a number of good articles out there about best practices for clean website development, and image replacement (css tricks, nettuts). One of them references the head of Google SEO spamming, and he stated that the form of image replacement used in this tutorial, more often than not could be recognized as spam, and the Long and short of what he said is, using an image link with an alt text is just as effective. Otherwise, this is a good tutorial, it is always nice to see how others code websites.

Also, anyone interested look into resetting methods, yahoo has a number of formal resources, one of which includes linking to their resetting css style sheet, but you can easily create a universal resetting css sheet to include in your page, and all pages that will help with cross browser compatibility.

V

April 19th, 2010

Hi, I’m really new at this and have been trying to do this tutorial but am stuck. Am I the only one having a problem where the headers and nav aren’t showing properly in IE? Looks fine in FF and Chrome. I’ve tried copying and pasting exactly like the tutorial/example to see if it would fix the problem but it’s still showing up incorrectly in IE.

Any advice? I greatly appreciate it, thanks!

eko

April 19th, 2010

awesome!!!

tao

April 20th, 2010

thang you

Smashing Share

April 25th, 2010

@Rudy C & @Brad: Thanks for pointing out about fieldset border. Actually I did mention “fieldset” in tutorial but I think not used in the layout (Check out the final example of this tutorial)

@Casssax: Follow steps from 28 to 34. You will definitely get the result. If still you find it wrong, do email me your code, I will look into this. (you can get my email from my website contact page)

@Daniel Leavey: May be “form” has been added with “#quote” mistakenly. Thanks Daniel for pointing this out. Still it will work fine if it remain same :)

Mohit

May 16th, 2010

awesome!!!

redman

May 26th, 2010

Some of the css code need minor fixes. If a beginner is trying to make this tutorial by copy and paste, he or she will not get “the right” final result. For example, from start the background path is not set right. There is a missing “;”, a field set with border and finally the breaking menu on ie6. Overall, this is a very good tutorial, and with minor fixes can become a perfect tutorial.

Lada

May 30th, 2010

nice tutorial, thanks

Lee

June 2nd, 2010

Excellent tutorial. Very well explained and easy to follow. I am an mechanical engineer, I also design using Adobe Flash but I am looking to expand more into HTML/CSS. After reading this, the level of detail and explanation makes it more easy to follow. Keep up the good work!!

mustd

June 11th, 2010

hey,i am a chinese guy!my english is so-so,but i have stick to reading this tutorial!then i also have a problem!
outer of my form,still have a frame(may be 2 pix or 1pix weight)!

Rajeesh

July 11th, 2010

great tuts.
Instead of using the selection tool and using copy merged, why cant u use the slice tool in photoshop?

Kobz

August 5th, 2010

Thanks for sharing!

andy

August 7th, 2010

In step #32 you need a semi-colon at end of display: block;

Otherwise the right side of nav on hover images will not show.

Reidy

August 30th, 2010

…being a noobie to web design, this is the first psd to css style tutorial that i’ve completed and loved it! the last part with the three boxes lost me slightly but the rest i followed step by step and it gave me a new approach to the whole design process! very well explained as i’ve read many tutorials and books and most are missing the finer details that you seem to cover! great stuff!

Nick

September 12th, 2010

AWESOME Tutorial!! I love it!! THX a million for sharing!

Dan

September 13th, 2010

Great article. i never knew about the live selection tool in photoshop – fantastic discovery. cheers. As for the web designing/coding part of the article i think you’ve nailed it on the head when simplifying the three column layout for the content.

Dan

September 13th, 2010

Also you need to mention, setting the border:none; for the frame set field which appears in safari browsers.

Farid

September 15th, 2010

Akhter,

Great job….

Thanks a lot.

Farid.

robikucluk

October 14th, 2010

what a great tutor dude … :D

Bob

October 17th, 2010

Great article(s)
Thx a lot !

Bob

October 17th, 2010

IE6 – issue:

Many complain about the lack of IE6 support, and that the horizontal navigation breaks in it.

If you add this declaration to the “#nav ul li a” selector it will work just fine in IE6:

float:left;

Bob

October 23rd, 2010

To remove the in IE6 doubled up space between the container and the footer add this IE6 specific declaration:

#footer{
_margin-top: -40px;
}

Now everything should look similar in IE and other browsers

Jeff

October 24th, 2010

Thank you for a very well thought out and presented PSD to HTML/CSS tut! Look forward to more:)

octavianusb

November 25th, 2010

Hi!
Your tutorial it’s very good, and thx you share your knowledge with us. And i have a question for you(i’m a beginner in web developements), i don’t understand why when you save an image from a mock up, you save it after “save for web pages” method. with this method the image have a bad quality, and the single advantage is that it have few Kb.(Sorry for my bad english :D). Anyway, thx a lot for this tuts.

VINEESH

December 9th, 2010

IT IS VERY USE FULL FOR MY WORK

Ronny

February 23rd, 2011

Interesting article with very detailed explanations, will be very useful for newbies.

v42noo

March 9th, 2011

How can I save the coordinates of x,y,w and h from the Info Panel of Photoshop when I make a selection, without having to manually write them down? Thanks

vinay

March 17th, 2011

Thanks Mate :)

Kelly

March 19th, 2011

Very nice tutorial, thanks Mate)

Tom

March 23rd, 2011

Hi, Great tutorial but my content boxes and header set isn’t coming out as it should.

Why?

chinna

April 16th, 2011

Thank u sir
my doubt is clear
again thank u

Jes

April 24th, 2011

the 3 columns about the company, portfolio and services come out all messed up for me. Also I prefer a tut to do the mark up first instead of switching between css and html back and fourth.

I managed to get the columns in the right place with some added code, but I screwed that up some how as when you hit ctrl – to minimize the page it gets all screwy shifting around the page.

Chip

April 29th, 2011

Great Tutorial)

alex

May 5th, 2011

What is the coding for the background? I managed to save the photoshop body image in step 6 and in step 10 my image wont appear on my index.html file.

Alex

June 5th, 2011

I have to admit it was a beautiful tutorial, very clear and a very nice template. Congratulations and Thank You. I will search your name to find more tutorials.

alex

June 13th, 2011

Really good review. Thank you.

VS

June 26th, 2011

Great tutorial but I can’t get my logo to appear over the header. Any suggestions?

Vaibhav

June 28th, 2011

I think you skipped the content image i.e. shown in about smashingdzine, our services, our portfolio at the bottom.

Thanks for sharing this type of knowledge among beginners. As I’m also a beginner I found this thing very newly & knowledgeable.

Alper

July 25th, 2011

Thanks a lot.
Although being a beginner, this tutorial is very clear and easy to understand for me. Thank you very much for sharing.

maxpanna

August 30th, 2011

This is one of the best tutorial. Clear, precise, step by step. Thanks a lot Waheed. Its really awesome.

Amit

May 30th, 2013

great tutorial…..but i think slice tool is good for use instead of marquee tool.
otherwise awesome tut and keep it up.

Tyler

September 15th, 2013

Hi there I can’t seem to get my body_bg.jpg image to shop up like in ex1 am ideas I have copied the text exactly step by step thanks in advance

Martin

September 17th, 2013

Hi again,

Can somebody put up the entire html document including the slideshow code so I can actually see where it fits into the grand scheme of things please.

Sorry forgot to mention im a beginner and all help would be gratefully received.

martin

September 17th, 2013

hi, I want to add the slide show instead of the fp-01.jpg image where do I put the code for it? i’m a bit of a novice so any help would be gratefully received, making an educated guess is it in between the tags?

Martin

September 18th, 2013

Can anyone help? in section 43 where it mentions the slideshow, where do I put that? in relation to the html code do I replace the image with the code can anyone give me any pointers please

Leave a Comment

Subscribe to the comments on this article.