Creating a Clean Website Template in HTML5 & CSS3

This is an excellent HTML5 and CSS3 tutorial to create a beautiful Website Template design and code for your users to employ. This tutorial post about creating a website template would not only provide complete procedural but also provide all snippet of code and other guidance.

When the things come about coding up designs, there are lot of things to look after towards, though every personal has their own preference and priorities to do things according to their own way. Some people attempt to get indulge in and juggle writing HTML, CSS and exporting images through the layout according to the necessity and all at the same time. You will be amazed to know that this is the most common method which regularly employed. However, some people used to classify this into different stages such as write HTML, export images and then style with CSS. But to the very personal, always we don’t know about all images we need to extract through design until the we split the layout into HTML. So, the preferred work procedural will be something like this:

  • Plan structure then opt to write HTML code
  • Export pictures from the layout
  • Style the HTML with CSS

Therefore, following this working procedural let’s start writing our HTML.

Preparation

You can initiate by making a new folder with index.html and styles.css files. Then make another new folder termed as images.

folder1

Doctype and Structure

Here, you are required to open the file index.html in your preferred code editor.

Now, we will attempt to start by including the basic skeleton of HTML, as we are employing HTML5 for this project therefore the declaration of DOCTYPE is very simple, just “HTML”. The remarkable things are that we have already set the page title, include our stylesheets (styles.css), add the Google web font and also incorporate the HTML5shiv JavaScript fragment of code which make the older browsers such as Internet Explorer to comprehend HTML5.

Header

Here, we are supposed to assign the tag for header, and then place a wrapper inside this in order to transform the header to 100% wide, but the content is wrapped to a fixed width of 960px, include the logo as H1 and generate an unordered list regarding main menu.

Main Feature

Now, you can employ the same technique of wrapper for main feature from header. Now, we are empoloying a <section> to incorporate two <article>s in this section of this layout. The feature text is completely straight forward, we have some paragraph, H2 and a link. The computer screen will be our main_display article and then we will layering on top of that:

• the image that will be appear on the screen
• the image followed by gloss via screen
• and eventually the banner which sits in corner than reads “NEW”.

Featured Service

The section of featured services of the layout is considered as a basic unordered list, therefore we have define distinct class for each list item in order to make it styled and targeted appropriately. There is no necessity of wrapper div due to lack of defined background. Simply we can set the <ul&rt; to 960 px wide dimension in the CSS.

About Us and Testimonials

As we have already created 2 articles regarding about us blurb and testimonials. We own a wrapper which incorporate both the name and quote for the testimonials.

Footer

Though it is supposed to big one but the actual code is very straight forward. The footer area comprises widgets where each one has a class which begins with ‘widget_’. Moreover, we have 3 <div>s along with a ‘column’ class, where social widgets and newsletter are being incorporated as appears in the design.

Images

Now, you are supposed to work with images you required for the design. Therefore, in total you require 17 images. Now open your original design files of Fireworks if you don’t have and start retrieving the images of your need. However, the most common way to retrieve the images is to designate those object which you need and them copy them. Next, create a new document by employing the dimensions of clipboard (size must be identical to copied item) and the paste the copied object here.

Logo

Now, open the original Fireworks document if you already incorporated and select the logo symbol. Next copy it by pressing Ctrl+C and paste it by creating a new document. Later, employ transparent background for the document and optimize the window through selecting PNG32 as exporting option. Simply, just go to File → Export and click Images Only and Current Page. Now, select the image folder we have already build as export destination.

Hatch pattern

hatch_pattern3

Zoom the design at its maximum level and select the pattern area of 3x3px dimension by employing crop tool in Fireworks (as shown in the above image). By using the same method employed earlier export this.

Feature display

feature_display4

Again availing the same procedure, you are required to select all objects which are useful for display excluding gloss layers and banner.

Display image

display_image5

Here, you are required to crop the display image down in the case while you employed a clipping mask as Fireworks will attempt to utilize the original dimensions of image instead of the clipped area we required.

Display Gloss

display_gloss6

In this design, the display gloss has been set to 50% soft light. Still there is no any web browsers which is supported by such kind of blending modes such as soft light, therefore, it will treat them as normal. However, you are required to compensate and lower the opacity of display-gloss to 20%.

Button main feature

btn_main_feature7

Here you are required to copy the button through the unique design and paste into another new document. Next, create a canvas that should be 3 times taller than button. Further counterfeit the button one below the another in order to occupying 1/3 of the image exactly. This is referred as the out sprite for main button along with pressed and hover states, thus the second one would be hover state and bottom one would be pressed state. Now, nudge top layer down by 3px on hover state, 1px on pressed state and transform the gradient little darker to make it appear like pressed in.

Service

service_1 8

Now, you are supposed to copy the icon and paste it into a 32x32px document.

service_2 9

Copy and paste the icon as second service in another new 32x32px document.

service_3 10

Copy and paste the icons as third service to a new 32x32px document.

Hr shadow

hr_shadow 11

Enure to set the background transparent and employ the same method you adopt earlier.

About us

about_us 12

Employ once again the same method you employed earlier, but you have to copy the border and shadow created in the design, though it is not supported by all browsers.

social_facebook.png, social_facebook.png, social_twitter.png, social_tumblr.png,

social_behance.png, social_linkedin.png

social icon 13

The CSS

First thing you are required to perform is to open the style.css file and let’s employ the basic reset in order to make this sporting will all new and old browsers.

We are supposed to define only height and background for header. However CSS3 is very useful towards this direction as it eliminate the necessity to use images for gradient backgrounds. Simply you can define only start and end points as well as gradient type, also internet explorer 6 is supported by basic filters and gradients.

Here, you will target on <a> link which sits inside the <h1> along with a class of ‘logo’. The things to be marked when retrieving the logo.png file, you are transforming those text to hide by setting text-indent to 5000px. The purpose to add text and then hiding is two-fold that boosts up it accessibility and also help in Search Engine Optimization.

The main navigation, Time to style. Here we will define some new CSS3 properties including border, box-shadow, radius which are referred as both safe and non-essential visual elements. In modern browsers the vendor prefixes such -moz- lets you to target specific browsers, -moz- for Mozilla Firefox, -webkit- for WebKit (Chrome and Safari). But in the case when HTML5 and CSS3 meets the specifications it will eliminate the necessity of vendor prefixes.

This style has been implemented to the main feature, we have layer up the computer screen, gloss from the screen, image on the screen and banner separately employing ‘position:absolute’ and ‘position:relative’ properties.

The feature of featured services at first instances attempt to use our generic button class ‘button_1’ that will be called out several times through out the entire design.

Useful styles for the testimonials

The footer and its widgets

We will attempt to use one master style for position and dimensions for the social links including an individual style for every icon setting with distinct background image.

And eventually, the style for footer section and logo style will be too much identical used in header.

And finally, you have accomplish this. You have successfully coded and designed a complete homepage template that will look something like this.

dreamweb 14

Tom Hardy

Tom Hardy

Tom Hardy is an experienced professional working at Sparx IT Solutions - Big Data Analytics Company. He is engaged in providing the well-researched business solutions to various companies. The solutions are offered after analyzing the related business data with the help of big data techniques. Also, he has knack for writing and posts his blogs on reputed websites.
Tom Hardy