How can do a PSD to HTML conversion?

PSD to HTML conversion

First of all we should know about basic HTML and CSS (HTML5 and CSS3). Javascript & Jquery also used for creating interactions between the web page and user.

Now we are living in the smart world, so our website should be fit with all kind of devices. We can create Responsive websites by using media queries, bootstrap and foundation.

Following points we have to focus when doing HTML conversion:

  • Pixel perfect User Interface Development using HTML and CSS.
  • Cross browser compatibility check & cross platform support.
  • Responsiveness for all kind of devices by using Media Queries.
  • SEO friendly codes.
  • User Accessibility check.
  • Code Validation Check, Code Review and Code Minification.
Continue Reading

What are the steps to learn front end web development?

Learning Front End Development

  • First learn about web development basic concepts such as domain, web hosting, web server, FTP, HTTP, HTTPS, markup languages, script languages, SEO, version control, responsiveness, recent trends in web development… ect
  • Then focus on creating structures (image, title, table, logo, content section, slider, tab.. ect) using markup language like HTML/HTML5.
  • Then applying styles (color, fonts, background, line-height, border.. etc) for created structures using CSS/CSS3.
  • Create interaction between the webpage and user by using scripts like Javascript and Jquery.
  • Try to create responsive web page by using media queries.
  • Then use advanced responsive framework like Bootstrap and Foundation.
  • Learn Advance Javascipt based libraries such as Angular JS, React JS, Ember JS, Knockout JS, Node JS for advanced web development.
Continue Reading

Load more items when clicked show link using jquery

Loading more items using Jquery

When the page loads I am displaying 5 items Initially. When I clicked show link which is placed on the bottom, it will show next 5 items. When all the items are displayed, I have to hide the show link further.

Solution:

Load more items when clicked show link using jquery

Script:


var itemsCount = 0;
 var itemsMax = 30;
 //var itemsMax = $("#totalcount").val();
 $('.product-section .item').hide();
function loadNextItems() {
 var pagination = 5;
 //var pagination = $("#initialcount").val(); 
 //var pagination = parseInt($("#initialcount").val()); 
 //parseInt
 for (var i = itemsCount; i < (itemsCount + pagination) ; i++) { $('.product-section .item:eq(' + i + ')').show(); //load 5 more items in every iteration } itemsCount += pagination; if (itemsCount > itemsMax) {
 $('#showmore').hide(); 
//hiding load more link after loaded the maximum count
 }
};
loadNextItems();
$('#showmore').on('click', function (e) {
 e.preventDefault();
 loadNextItems();
});
/* end load more items*/
});
Continue Reading

Font color is not changing on Iphone for Numbers

This happens as IOS detects Phone Numbers and change to links that people can click to call them.

To overcome this issue, we can follow two approaches such as CSS fix and adding meta data fix.

Sample HTML


<div class="number">01202-529-414</div>

1) CSS based Fix


.number a,
.number a[href^=tel]{
   color: inherit; //or color code
   text-decoration: none;
}

2) Meta data based Fix

<meta name="format-detection" content="telephone=no" />

Continue Reading