What are the best practices of best practices for HTML coding?

Best practices of HTML coding

  • Please use a common HTML5 polyfill or HTML5 Shiv to enable styling and recognition of HTML5 elements in older devices’ browsers
  • Always include a proper doctype to trigger standards mode
  • All markup should be delivered as UTF-8, since it has the best support for internationalization
  • Should follow the proper naming conventions.
  • Close your tags, some tags no need close tag like img and br.
  • Explain which DIV you are closing by proper comments.

IDs vs. Classes

  • An ID is a unique identifier for that particular element; no other element on the page should use the same ID.
  • Classes are not unique. The same class can be used on multiple elements within a page, and a single element can have more than one class, in a space delimited list.Anchors and LinksAll links should point to absolute or relative URLs with user-readable content.

Paragraphs

Avoid using <br>tags to separate paragraphs or lines of text. Use <p> instead with proper opening and closing elements.

Table:

  • Tables should not be used for page layout; only use them when you need to display tabular data.
  • Use <table> rather than other elements when displaying multiple records of data.
  • The <caption> element is the recommended way to describe a table for both sighted and sight-impaired users, though this can also be done less semantically in the normal page text around the table.
  • Use the <thead> and <tbody> elements to denote which row contains column headers so when a user prints the website and the table runs onto another page, browsers can display the <thead> on each page for easier readability.
  • Remember to use the scope attribute on the <th> element to indicate whether the header applies to the row or column.

If you are using “float” attribute for more than one DIV Use “clear: both” at the end of parent div close.


<div id="header">
<div id="sub" class="first left">...</div>
<!-- #sub.first.left -->
</div>
<!-- #header -->
  • Use CSS Reset (reset.css)
  • Never use inline styles – Don’t mix CSS with HTML.
  • Don’t mix JavaScript with HTML.
  • Include external CSS inside the head tag.
  • Consider placing JavaScript at the bottom.
  • Use lowercase in your tags.
  • Use semantic elements to provide additional semantic value to our documents, make use of HTML5 elements such as <header> ,<article> ,<section> and <footer> where appropriate.
  • Keep the syntax organized.

Use conditional comments.

height: 200px; /* normal browsers */
*height: 350px; /* All IEs */
<!–[if lte IE 6]>
<link href=”ie.css” rel=”stylesheet” type=”text/css” />
<![endif]–>

  • You should only give elements an ID attributes if they are unique.
  • Classes can be applied to multiple elements that share the same style properties.

Label Use

All input fields should be associated with a


<label for="home-address">Home Address</label>
<input id="home-address" type="text" /></label></label>

Use the optimized images.

  • Use Smush tool for image optimization.
  • Save for web” Photoshop command

Cross platform and cross browser check

Test while you writing codes at every stage in various browsers to avoid cross browser issues.
To test on cross platform and cross browsers compatibility, please check the below list of tools.

Reusable Components

Build pages as a library of components, in such a way that blocks of code can be broken up and reused when implemented.

Continue Reading

Change the background color of table row when select a checkbox

Change the background color of table row by checking checkbox using Jquery

Script:


 $(function() {
    $('td:first-child input').change(function() {
        $(this).closest('tr').toggleClass("highlight", this.checked);
});

Explanation

  • Change method is used to identify the event change of checkbox.
  • We can set some CSS properties to class name ‘highclass’ for changing the background color.

Demo

See the Pen Change the background of table row when select a checkbox by Vinothkumar Rajendran (@fedtutorial) on CodePen.0

Continue Reading

How to do Form Validation using Jquery?

Form validation using Jquery

Include the Jquery library and jquery.validate file.

Include below JS files


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>

Script


$(document).ready(function(){
  $(function() {
 $("form[name='register-form']").validate({  
rules: {
         firstname: "required",
		  password: {
			required: true,
			minlength: 6
		  },
         email: {               
             required: true,
             email: true
         },
     },
messages: {
			firstname: "Enter First Name",
			 password: "Enter Passowrd",
			 email: "Enter Valid Email ID"
		},
		 submitHandler: function(form) {
			 form.submit();
		 }
 });

  });
})

Explanation:

Validate method will apply to form. By using validate method we can define two arrays like rules and messages. In the rules, we can set the validation conditions to accept the given input. In the messages part, we should define the validation messages to show when the user entered the detail wrongly.

Output

See the Pen Form validation using Jquery by Vinothkumar (@fedtutorial) on CodePen.0

Continue Reading

How to create Custom select box using CSS?

Custom select box design using CSS

We can develop custom select box design using CSS and Script. Here we will see the CSS based implementation.

HTML


  <div class="select-style">
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

CSS:


.select-style {
 padding: 0;
 margin: 0;
 border: 1px solid #ccc;
 width: 197px;
 overflow: hidden;
 height: 30px;
 background: url("../images/dropdown.png") no-repeat right center #fff; //Set the image path of dropdown icon design
}
.select-style select {
 padding: 0 3px;
 width: 108% !important;
 border: none;
 box-shadow: none;
 background-color: transparent;
 background-image: none;
}
.select-style select:focus {
 outline: 0;
}

Note: Wrap a Div section with a class name “select-style” on the select field.

Continue Reading

Custom radio button & custom checkbox styling using CSS

Custom radio and custom checkbox design using CSS

We are hiding default form element using CSS. The “for” attribute specifies which form element is bound to the label. So, label will act as an input element. “Id” name of the form element and “for” attribute name should be same.

I have used images for active & inactive mode. Instead of images we can use font-awesome.

HTML:


//Custom radio button
<input id="apple" name="fruits" type="radio" />
<label for="apple">
<img class="offradio" height="20" src="images/form_btn-radio-off.png" width="20" /> //Inactive image
<img class="onradio" height="20" src="images/form_btn-radio-on-01.png" width="20" />  //Active image
</label>
//Custom checkbox 
<input id="fruits" name="fruits" type="checkbox" />
<label for="fruits">
<img class="offradio" height="20" src="images/form_box-off.png" width="20" />
<img class="onradio" height="20" src="images/form_box-on.png" width="20" />
</label>

CSS:


input[type="radio"], input[type="checkbox"] {
    display: none;
}
input[type="radio"]:checked + label .offradio,
input[type="checkbox"]:checked + label .offradio{
 display: block;
}
/* Hidding the "check" status of inputs */
input[type="radio"] + label .onradio,
input[type="checkbox"] + label .onradio {
display: none;
}
/* Styling the "check" status */
input[type="radio"]:checked + label .onradio,
input[type="checkbox"]:checked + label .onradio {
display: block;
}
input[type="radio"]:checked + label .offradio,
input[type="checkbox"]:checked + label .offradio {
display: none;
}
Continue Reading

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

Instantly turn any ttf font permission into installable

Turn any ttf font permission into installable

Online based tool to set truetype fonts permission into its least restrictive form “installable embedding allowed”. Solves most problems related to embedding fonts into web pages, free of charge. Based on the tool embed. Made because there just weren’t any quick fix tools available.

https://www.andrebacklund.com/fontfixer.html

Continue Reading