Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Design And Develop A Complete Website (A Tuts+ Mini Series, Pt 3)

by
Length:LongLanguages:
This post is part of a series called Iconify: A Complete Website.
Design And Develop A Complete Website (A Tuts+ Mini Series, Pt 2)

It's been a while coming, but today, during the coding phase of this massive tutorial, we're going to begin the HTML conversion of our theme. We've already designed the whole thing in Photoshop, so now we'll look at converting our homepage into a valid HTML web page.

Throughout our conversion phase we'll follow best practices, use valid HTML 5 (doctype, though none of the newer spec elements) and CSS 2.1 for maximum browser support.


The Game Plan

We'll use this general process to convert our Photoshop design into HTML in three phases

Phase 1

  • Create document/folder/site structure.
  • Define document type.
  • Inspect the main design and figure out the overall basic markup.
  • Inspect the specific page sections to get an idea as to how to mark it up.
  • Insert HTML tags according to our markup ideas and finish the HTML coding.

Phase 2

  • Reset the default styles of browsers.
  • Add some default styles for common HTML elements.
  • Position and design elements sequentially from top to bottom and section by section.

Phase 3

  • We'll check our design in all modern browsers and compensate for IE.
  • Finally, we'll add some behavior to our theme with some custom and third party jQuery plugins and scripts.

Our theme is very simple, so we need to slice very few graphics from our design. Those graphics that we do slice will be done as necessary as we approach the HTML and CSS. Please follow the tutorial from start to finish attentively as I'll discuss each trick only once.


Resources Used For This Project

You can use your own resources if you'd like, but here's the full list of the images and icons that I've used in the tutorial:


Generally, HTML conversion consists of three separate parts:

  • Content (HTML/XHTML)
  • Presentation (CSS) and
  • Behavior (JS)

Today's three sub-parts are defined below. Feel free to jump back and forth when you're proficient at a certain skill outlined in a specific section.

  • Part A -- Content - Creating markup and populating the page With content.
  • Part B -- Presentation - Positioning and designing content with pure CSS.
  • Part C -- Behavior - Defining interactions with JavaScript

Let's convert our Photoshop design into a working HTML page!


Step A - 1: Creating The Site Structure

Creating a well thought-out folder structure is extremely important for any web development work. With that in mind, we'll create our folder structure first. Use the image A - 1a as a guideline to create your folder structure.

A - 1a
  • In the assets folder, we'll place all our assets -- images, videos, flash, etc.
  • In the files folder, there are two subfolders named, codes and images.
  • The folder named codes is for css (Style Sheet) and js (JavaScript) files.
  • All our images used for creating this theme will be placed inside the images folder.
  • Our HTML files will be directly inside the ICONIFY folder.

Step A - 2: The First HTML Document

Create a new HTML file and name it index.html. Open the file in your favorite HTML/Code editor. Place the following content inside your index.html file.

This is an HTML 5 document and we're ensuring this by setting its doctype to <!DOCTYPE HTML>. In the head section, we're placing some meta tags like- author, description, keywords these meta tags help search engines to easily find and index our web pages. We are also declaring our page's title and favicon.


Step A - 3: Inspecting The Design

A - 3a

By inspecting the homepage design, we find three horizontal sections: #header, #content, and #footer. Two (header, footer) of these three sections are static, because they are going to be same throught-out the site. So, depending on this preliminary markup idea from the design, our HTML markup will be:

Our three vertical sections are div#header, div#content, and div#footer. Also note that within each section, there's a div.inner element, this is for the glow effect of every section and we'll also place all our elements inside these div.inner containers.

In browsers, our document now looks like this image:

HTML Preview

Note: every closing tag has an associated comment, which describes the element that is being closed. It's best practice to always comment out important parts or sections in an HTML document. We'll follow this practice today.

Now let's populate our three sections with HTML contents, sequentially from header to footer


Step A - 4: Populate the Header

Inspect the design and trace out the HTML parts in the header section. Use the image A - 4a as a guideline.

A - 4a

Here's our header design translated into HTML markup:

We're going to slice our first image, the logo, so open the index design in Photoshop. Select the Slice tool from inside the Crop Tool group. Now use images A - 4b and A - 4c as a guideline to crop your logo. Then goto File->Save for Web & Devices or press Alt+Shift+Ctrl+S from key board to call the Save for Web & Devices dialogue box. Select PNG-24 and Transparent then save to our web roots files->images folder as shown in image A - 4d.

A - 4b
A - 4c
A - 4d

We'll use these same techniques/steps for slicing our next images. Only the dimensions will be mentioned from now on.

Let's fill up the #header section with associated contents. Copy the following into your document:

Our ul.top is a list element and thus is made up of li elements. The last child of ul.top holds our search form. Inside div#nav, there are two immediate children: div#logo and ul#menu. ul#menu is a list element and all its children are menu items. Notice that one menu item has a class li.active and one menu item has a class li.dropdown. Those are to merely indicate active and dropdown menu items respectively.

Your browser should now render index.html like this

Browser Preview

Step A - 5: Populate The #content

Inspect the design and trace out the HTML parts in the content section. Use the following image as a guideline.

A - 5a

After inspecting the content section in the design, we can plan our HTML sub-sections inside the #content section as shown below.

Now we're going to fill up the #content section with some contents, sequentially, from top to bottom. Copy the following code into your html document.

Inside #slider we've three image links, which are our slides. And a div#cyclePager for the pager or slider navigation.

This is a 4 column promotional item named ul.promo-col-4 and we'll see how to position them according to our design in the CSS portion. Its structure is pretty simple -- just place every column's elements inside a li of ul.promo-col-4.

Currently, our page renders in the browser like this

Browser Preview

This promotional section is the same as ul.promo-col-4, the only difference being that it has 3 columns. And it render in browsers as follows:

Browser Preview

This is the featured testimonial box in the homepage. Inside the div.testimonial parent element, we place a blockquote element within a div.inner element. This div.inner element is for the inner darker stroke of the testimonial box. We'll use some techniques in the CSS portion to design the testimonial box.

div#recentProjects has two children: div.bar for the heading and a ul element with four li children for the recent project's items. Check out the browser preview:

Browser Preview

Step A - 6: Populate the Footer

As usual, inspect the design and trace out the HTML parts in the footer section. Use the image A - 6a as a guideline.

A - 6a

After inspecting the footer section in the design we can plan our HTML sub-sections inside the #footer section as shown below.

Copy the following code into your html document.

There are two immediate children inside div.top:, one for our lovely twitter plugin named div#twitter and another one for our social links- ul.social.

The ul.content is a three column section and each li element is a column. We'll use some tricks in the CSS portion to properly style and position them out.

div.bottom should be self explanatory. And this is the browser preview:

Browser Preview

Final Index Page HTML


Part B Presentation

We've finished the markup portion of this tutorial, let's move on to the CSS.

First, create some blank CSS files inside your css folder. You'll also need to download and link prettyPhoto.css file and 960.css file from the Nomarginsforerroe and 960 website respectively. Create and link your CSS style sheets from inside your document head as shown below:

In the bottom portion, we've linked two style sheet documents specifically for IE browsers. We've placed them inside a conditional comments block which only IE browsers understand.


Step B - 1: Resetting Default Styles

You may have noticed by this time, that though we haven't applied any CSS style to our document, our contents are not completely unstyled. These are the default browser styles and they're applied to every page loaded. To properly position and design our page, we must apply some basic styles to reset these default styles, thus creating a blank slate to apply our own styles and positioning. We're going to do that from inside our reset.css document.

Open reset.css document in your text editor. Then copy the following into the document:

First, we're declaring our character set UTF8 as the same we've used for our HTML.

In the resetting section, we're resetting default browsers styles and positioning. We're also applying our default body and text colors and details to the body selector. Now, if you preview your document in any browser you'll notice that our theme is slowly coming to life with our own colors and some styles we're applying from reset.css file.

Browser Preview

Step B - 2: Position And Design Elements

We're going to use the grid960 library for easy positioning. And we'll use default.css file from now on to design and position our contents. Make sure you have properly linked 960.css file inside your index.html head section. We don't need to touch the 960.css file, we'll just use some classes from the 960.css library to easily position our contents.

Open default.css file in your text editor. Now copy paste the following into your default.css file.


Step B - 2a: Three Main Sections

First, we're going to position the three main horizontal sections- #header, #content, and #footer of our theme. We'll do this by applying class .container_16 to every section as shown here:

Now our three main sections are floating in the center of the page. .container_16 is the grid 16 of grid960. The total width of all our three sections is now exactly 940px. Our design, however, is 980px wide so we're going to apply (left+right: 20+20)px padding around our sections. We'll also apply some other styles to our sections. Type these rules inside your default.css file's 2. Theme Structure section or copy and paste them.

All the rules for these three sections are pretty much the same. To #header, we're applying a background color and the outer border color (get these color values from your design with the eye dropper tool). And .inner elements for the inner white glow. Check your progress in your browser to make sure everything is being styled appropriately. Here our document's browser preview:

Browser Preview

Step B - 2b: The Header Section

Slice and save the header's divider horizontal ruler graphic from your index.psd file. Use the following image as a guideline and use image slicing techniques as described in the Step A - 4. We'll use this bdr-bg.png image in numerous places throughout our theme.

B - 2ba

Here's our recently styled header section:

Browser Preview

OK, a summary of the most important code blocks or tricks, sequentially from top to bottom.

  • #header .top - we're using this element to apply the divider image.
  • #header .top li - this applies a different text color for this block. And its large line-height will help our text stay in the middle of the block.
  • #header .top li a - overriding the default link element's styling and applying a unique style for this block.
  • #header .top li:last-child - selecting the last child of #header .top element and zeroing out its margin for perfect positioning.
  • #header .top li:first-child a - overriding the styling of #header .top first child.
  • #header .top form - setting form's position to relative for its label to float appropriately .
  • #header .top legend - hiding legend element from displaying
  • #header .top label - we're positioning the label to act like a field value for visitors to easily define why this field is for. By default we're hiding it, but we'll display it using JS.
  • #header .top input[type="submit"] - for this button please slice and save our magnifier icon with the guideline shown in image B - 2bb.
B - 2bb

Step B - 2c The Menu

First copy the following into your menu section. You can see what's changed by what's been highlighted:

We're applying class names container_16 and clearfix to the div#nav element to properly position our #logo and #menu. We're applying .grid_5 and .alpha to div#logo to give it a space equal to 5 grids and removing its left margins with the class .alpha. We're also applying .grid_11 and .omega to the ul#menu to give it a space equal to 11 grids and removing its right margins with the class .omega. Finally, we take care of the dropdown or multi-level menus. We'll design and position menu and multi-level menus with CSS.

Now slice and save your dropdown menu item's arrow inside your files->images folder as shown in image B - 2ca

B - 2ca

Copy or type the following code inside your default.css file's menu section.

What have we done here?

  • #menu - extra padding to push menu items to the right.
  • #menu li - setting its position to relative to properly position the multi-level menus.
  • #menu>li.dropdown>a - applying the multilevel menu's arrow and giving its some extra padding for arrow graphic to fit perfectly inside the menu item.
  • #menu>li.dropdown.active>a - applying a fixed border to the .active multi-level menu item.
  • #menu ul - this is the actual multi-level menu element. So, we're applying some styles to decoration and position our multi-level menu items.
  • #menu ul li - its background color is showing as the actual background color of the multi-level menu.
  • #menu ul li span - giving it a larger text size as the arrows look a little odd with 12px.

Note: our multi-level menus have extra margins on their left. Everything will be fine when we apply the superfish jQuery dropdown menu plugin a little later.


Step B - 2d: The Content Area

Now we're going to deal with our #content section's contents.


The image slider (jQuery.cycle plugin)

Position, slice and save your image slider's radios inside your files->images folder as shown in image B - 2da

B- 2da

Copy the following to your default.css file's a.Home subsection.

The styles are very simple. #slider's background color needs to be shown as the dark inner glow color. We'll achieve this by applying a 1px padding inside the #slider element. We apply position: relative to our #cyclePager so that it floats inside the #slider and on top of the slides. a.activeSlide is a class of current active slide, jQuery cycle plugin will automatically apply this class.


The 4 Column Promotional Items

Apply these class names to your .promo-col-4 element and its children:

Here we're applying a width to every column equal to grid 4 and clearing the floating bug with the class clearfix.

Copy or type the following styles after your #slider code inside the a.Home section.

At this point your document should to render in browsers like the image shown below:

Browser Preview

The 3 Column Promotional Items

Apply these class names to your .promo-col-3 element and its children:

..and copy this CSS rule after your #promo-col-4 codes inside a.Home section.

We have two borders in our images: an inner glow and a darker border. We can apply these styles directly from Photoshop but it's far more flexible to achive the effect using CSS. We'll apply the inner glow from Photoshop and apply a class of .border to our images for those two borders. As an example, follow these guidelines on how I slice, apply the styles, then save them.

Our .promo-col-3 images' dimensions are 300x140. We'll start by creating a new document in Photoshop measuring 298x138px (we're leaving 1px from around image to fill those 1px with CSS). Now place your image, reduce its size by using transform. Hit Ctrl+A to select the entire canvas, goto Image->Crop. Now copy the layer styles from any one of our images, now apply that layer style to this new image. After doing all that all you should see the glow effect. Now save your image in your assets folder. Apply the same techniques for our future images using the following image as a reference.

Image Glow

Now apply a class of .border to the images, and paste this code inside your default.css file's 1. Common Theme Elements (usually inline elements) section.


The Testimonial

Slice and save testi-arrow.png image inside your files->images folder as shown in image B - 2db.

B - 2db

Paste the following code after your #promo-col-3 codes inside the a.Home section.

Here we are..

  • #content .testimonial .inner - overriding some styles of .inner element.

  • >.testimonial blockquote - setting the background and inner border color of the testimonial box.

  • >.testimonial .arrow - linking testi-arrow.png image and positioning it appropriately.

Let's again check how things are rendering in the browser:

Browser Preview

The Recent Projects Box

Apply these class names to your #recentProjects element's children:

Copy the following rules after your .testimonial codes inside a.Home section.

We've just finished designing and positioning our #content section's elements. In the browser our #recentProjects element should to render perfectly as shown below.

Browser Preview

Step B - 2e: The Footer Area

Let's tackle the footer..


The #footer's .top Portion

Apply these class names to your .top element and its children:

Paste the following code inside your default.css file's d. Footer subsection.

Here we are..

  • #footer .top - using its background property to apply our border.
  • #twitter - applying our twitter bird as a background image. We're also overriding some styles and hiding them (our twitter jQuery plugin will append them in our document).
  • .social - we're applying vertical border with this element. For your vertical border, slice and save this graphic from our index.psd file as shown in image B - 2ea.
B - 2ea

At this point our document should to render as follows. Please note that our twitter section is empty as we've not applied any scripts to our document.

Browser Preview

The #footer's .content Portion

Apply these class names to your .content element and its children:

Paste the following code after your .top rules inside d. Footer section.

#footer .content .grid_4 overrides the default .grid_4 width and applies some other styles.

For #toTop's arrow slice, save the arrow from our Photoshop file as shown in image B - 2eb.

B - 2eb

Copy the following code inside your default.css file's 1. Common Theme Elements (usually inline elements) section.

You may have noticed that we've applied a class of .list to our Categories item inside .content section. This .list is a common inline class and we can use it to display other list items in any other pages. And our final footer element looks like this:

Browser Preview

Final Touches

We've successfully designed our homepage, and our theme works fine in all the modern browsers except IE. For IE, we need some special CSS since they don't support some CSS pseudo classes. We're going to write some IE specific code to handle these issues.

If you preview your document by this point in IE8 then you'll find this misrendering:

Browser Preview
Browser Preview

To solve these misrenderings copy or type the following rules inside your ie8.css file.

If you preview your document in IE7 you'll find some browser misrenderings as in IE8 + more

To solve these please copy or type the following rules inside your ie7.css file.

Note: we're targeting some elements which don't exist, yet. We'll use these selectors/elements later.


Step - C Defining Interactions with JavaScript

Download and link these JavaScript libraries. jQuery JavaScript Library v1.4.2, jQuery.prettyPhoto v-2.5.6, and jQuery.cycle v-2.80.

Now open your init.js file and copy the source from the following plugins:

All the above libraries are third party. We're combining them into a single file for fewer HTTP requests. Among them tinyValidator is a mini validation plugin which I've developed. Now we're going to actually start/initialize our scripts. Copy the following code inside your init.js file's Site Initialization JavaScript Codes section.

We're placing all our site initialization codes inside an anonymous function.

  • In the first block we're removing hover state border from images with a class .border.
  • Initializing jQuery scrollToTop plugin with our #toTop element.
  • Making sure #cycle is available and then initializing the cycle plugin.
  • Altering search form label and using its label as field's value.
  • Initializing dropdown menu function using 'superfish.js' and 'supersubs.js' jquery plugin
  • Initializing twitter plugin. You can show your tweet by only changing the userName variable.

Conclusion

Phew! We've finsihed the most substantial part of our coding phase. You may notice that some practices or techniques have been exaggerated, but these were only for demonstration purposes and little else. We'll work on finishing up this theme in the next part. Thank you so much for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.