Installation

Follow the steps below to setup your site template:

  1. Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files to your hosting web server using FTP in order to use it on your website.
  2. Below is the folder structure and needs to be uploaded to your website root directory:
    • HTML/css - Stylesheets folder
    • HTML/fonts – Icon fonts folder
    • HTML/images - Images folder
    • HTML/js - Javacripts folder
    • HTML/sound – Sound audio files for Intro pages
    • HTML/video – Video files
  3. You should upload all or specific HTML files as per your need.
  4. You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.

HTML Structure

H-Code follows a simple and easy to customize coding structure. Here is the sample for your reference:

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <!-- title -->
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
        <!-- favicon -->
        <!-- style -->
    </head>
    <body>
        <!-- navigation panel -->
        <nav role="navigation">
            ...
        </nav>
        <!-- end navigation panel -->
        <!-- slider -->
        <section class="wow fadeIn">
            <div class="container">
                ...
            </div>
        </section>
        <!-- end slider -->
        <!-- content section -->
        <section class="wow fadeIn">
            <div class="container">
                ...
            </div>
        </section>
        <!-- end content section -->
        <!-- footer -->
        <footer class="wow fadeIn">
            <div class="container">
                ...
            </div>
        </footer>
        <!-- end footer -->
        <!-- javascript libraries -->
    </body>
</html>

Logo Settings

The Logo Container can be found in the Nav Container - .navbar

<!-- logo -->
<div class="col-md-2 pull-left"><a class="logo-light" href="index.html"><img alt="" src="images/logo-white.png" class="logo" /></a><a class="logo-dark" href="index.html"><img alt="" src="images/logo-light.png" class="logo" /></a></div>
<!-- end logo -->

Note The Logo Image's maximum height can be 70px.

Image & Favicon Settings

Image Settings

H-code download package does not contain images which are there in our online demo. We are using placeholder images instead of real images. You will see the image code as mentioned below. You can replace placeholder image url with your image url like images/yourimage.jpg

<img src="http://placehold.it/350x150">

NoteYour image size should be the same as per placeholder image url.

Favicon Settings

To change the favicon image of your site, you need to load a new ICO image in a site root or to point out a new address of the image.

<!--  favicon -->
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">

Changing Fonts

H-code uses 3 fonts: OpenSans, Oswald & OpenSans Condensed from the Google Fonts Library. You can change the fonts from /css/style.css file in below lines. If you want to use self hosted fonts other than Google fonts then here is an example of self hosted fonts. In this case you need to remove below lines and change font names in /css/style.css file as per your fonts used.

/* ===================================
Google font
====================================== */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700);

Optimization Tips

Now a days fast & optimized website is must, so we would like to represent some optimization tips below which can affect your overall website speed:

gZip Compression & Browser Caching

This is probably one of the mostly used techniques you should definitely implement in order to increase your website's loading speed. gZip Compression is used to compress the Files that are delivered when loading a website. It includes HTML, CSS, Javascript & Font files along with other miscellaneous text files. This is used to save the static data in your browser itself so that when you open the next pages on the same website, the content does not gets downloaded again and hence further pages loads fast.

gZip compression & browser caching can be enabled using the .htaccess file on an Apache web server. You can use the codes from here: https://github.com/h5bp/html5-boilerplate/blob/master/dist/ to enable these modules on your server.

Image Compression & Optimization

We normally use lots of images on our websites to make it look beautiful as well as easily understandable but it can make the website slow if we do not take care of image size. It is important to resize, optimize & compress your images before using it on your website. Here are some tips which can be helpful:

  • Resize your images: Resize your images before using it on your website. Do not just download an image & place it as it is in your website. The size/resolution of the image matters since it is not recommended to use an Image size of 1200px x 800px in a content size of 300px x 200px as this is unnecessary. Resize it to 300px x 200px.
  • Image formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a flat background use JPEG images, for images with a transparent background use PNG images and for images with animations use GIF images.
  • Compressing images: Images compression is important as it considerably reduces the size without losing the quality. There are several FREE image optimization tools available to download.
    For MAC use ImageOptim
    For windows use riot for compressing JPEG images & PNG Gauntlet for PNG images.

CSS & jQuery Minifications

It is also a best practice to combine & minify all your CSS files to a single CSS file & all Javascript files to a single JS file as it reduces the size of the file and combining the files helps in reducing the number of HTTP requests made to the server. There are several tools available online to Minify your CSS & JS files.

We recommend to use CSS Minifier for CSS and use Javascript Minifier for JS.

Customize Header Expiry/Caching

By using a customized Expiry header, your web components like images, static files, CSS, Javascript skipped unnecessary HTTP request when the same user reload the page for the second time. It reduces the bandwidth needed and definitely help in serving the page faster.

Disable ETags

Compared to the potential hassles that can be encountered when implementing the rule above, the application of this rule is very easy. You just need to add the following to your .htaccess file: FileETags none
Note that this rule applies to sites that are in a server farm. If you’re using a shared host, you could skip this step, but we recommend that you do it regardless.

Content Delivery Network

You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font files. There are many CDN hosting providers available in the market but we would recommend MaxCDN or CloudFlare.

Note CDN setup requires extra monthly recurring fees to setup.

Fast Web Hosting Servers

Website speed depends on your Web Hosting Servers also, so it is recommended that you choose a Hosting Company/Server that provides a reliable & a fast hosting service. You can refer some recommended hosting Services here: http://themeforest.net/get_hosting.