Best HTML5 Tutorial Resources and Websites

Here we have something to discuss about HTML5 Tutorial Resources and Websites.

Want to build cool stuff using HTML5? but don’t know how to do it? So, basically, you are searching tutorial websites and resources for HTML5.

Let me suggest you some great and cool websites and resources where you can learn HTML5 from scratch to Advance.

What is HTML5? (Basic)

HTML5 is the newest hyper text markup language for web by W3C (World Wide Web Consortium). It was first publicly introduced in 2008. Still HTML5 is under development. It is an iteration of HTML after version 4.01.

It works with CSS3.

What you can do with HTML5?
  1. Animation, Images, Scripting Drawing(2D and 3D graphics) using Canvas
  2. more semantically accurate documents
  3. Audio and Video support
  4. web/browser database

So, here is the list of Best HTML5 Tutorial Resources and Websites.

HTML5 Tutorial Resources and Websites

1. W3Schools

As W3Schools is already ever green site for learning web technologies from basic. You can find nice and basic HTML5 tutorial from them. They have beautifully explained each newly released elements and features.

HTML5 tutorial from w3schools

2. HTML5Rocks

HTML5Rocks is Google project. You will find lots of basic and advance tutorials of HTML5 and CSS3. Tutorials are written by some of best programmer from Google, Adobe, Red Hat etc. You can find author list here.

They have mentioned some good development tool and resources. Here is the link.

3. HTML5 Doctor

It is another good resource for learning HTML5 basics. Even you can find some cool article on “How To _______ with HTML5?”

HTML5Doctor helps developers to solve their issue by Ask the HTML5 Doctor where you can ask solution for your issue if you have stuck somewhere while development. You just have to give project link, issue in detail, what you have tried and what you want to do.

4. HTML5 at Lynda

If You are looking HTML5 video tutorials. I think this can work out for you. Though its paid but you will find it useful if you love to learn from videos.

5. HTML5 by Mozilla

Mozilla communities has even shared good and advance tutorials for beginner. They have explained each new element and its feature from the core. You can learn semantics, performance and integration, offline storage, connectivity, device access etc.

If want to look at some HTML5 Demos before starting learning, you can visit html5demos.com.

If you liked the article, please take a moment to share it! If you have any questions or want to share your thoughts, do it in the comment section below.

If you are looking for any Website Designing services, then Contact Us today!

jQuery Validation Styles

Let’s see something about jQuery Validation Styles in this article.

This application will allows user to show validation messages in three elegant way like Inline, Summary and Popup.

Introduction:

This application makes simple client side form validation with the help of jQuery plugins. Here I would like to show different validation style of jQuery with basic sample of HTML and jQuery.

JQueryValidationStyles

Background:

ASP.NET MVC 3 uses jQuery validation for form validations and jQuery validation library has a remote validation feature, using this feature by ASP.NET MVC libraries is really easy.

  • Every validation attribute has a ToJson method which serializes attributes into a dictionary
  • $(“#form”).validate({
    rules: {
    firstname: { required: true, minlength: 5, maxlength: 10 },
    lastname: { required: true, minlength: 5, maxlength: 10 },
    email: { required: true, email: true },
    mobile: { required: true, digits: true, minlength: 10, maxlength: 10 }
    }
    });

  • All error labels are displayed inside an unordered list with the ID “validationSummary” Additonal container for error messages. The elements given as the “errorContainer” are all shown and hidden when errors occur.
  • errorContainer: “#validationSummary”,

  • The error labels themselve are added to the element(s) given as errorLabelContainer, here an unordered list.
  • errorLabelContainer: “#validationSummary ul”,

  • Therefore the error labels are also wrapped into li elements (wrapper option).
    wrapper: “li”,
  • A custom message display handler. Gets the map of errors as the first argument and and array of errors as the second, called in the context of the validator object.
  • showErrors: function (errorMap, errorList) {
    .
    .
    .
    }

 

Implementation:

This code demonstrates a basic jQuery validation sample, jQuery Validate plugins validates the form before it submitted, if form is valid it submits the form, otherwise form doesn’t get submitted.

  1. Include jQuery Plugin and Validations scripts into your page.
  2. Add following script in your page. It is very descriptive so no need to explain each and every lines.
  3. < script type="text/javascript">// < ![CDATA[
    $(document).ready(function () {
    //Set border color when text class getting focus or remove border color when lost focus from textbox.
    $(‘.text’)
    .focus(function () { $(‘.text’).removeClass(‘focused’); $(this).addClass(‘focused’); })
    .blur(function () { $(this).removeClass(‘focused’); });

    //Fire validation events
    $(“#form”).validate({

    //Setting validation type like, Required, Minimum or Maximum Length, Data Type etc.
    rules: {
    firstname: { required: true, minlength: 5, maxlength: 10 },
    lastname: { required: true, minlength: 5, maxlength: 10 },
    email: { required: true, email: true },
    mobile: { required: true, digits: true, minlength: 10, maxlength: 10 }
    },

    //All error labels are displayed inside an unordered list with the ID “validationSummary”
    //Additonal container for error messages. The elements given as the “errorContainer” are all shown and hidden when errors occur.
    errorContainer: “#validationSummary”,

    //But the error labels themselve are added to the element(s) given as errorLabelContainer, here an unordered list.
    errorLabelContainer: “#validationSummary ul”,

    //Therefore the error labels are also wrapped into li elements (wrapper option).
    wrapper: “li”,

    //A custom message display handler. Gets the map of errors as the first argument and and array of errors as the second,
    //called in the context of the validator object.
    showErrors: function (errorMap, errorList) {
    $(‘.errorList’).hide();
    $(‘.inlineMessage’).hide();
    $(‘#validationSummary’).hide();
    var messages = “”;
    $.each(errorList, function (index, value) {
    var id = $(value.element).attr(‘id’);
    messages += ” < span > ” + (index + 1) + “. < a title='click to view field' href='javascript:setFocus(" + id + ");'>[” + $(value.element).attr(‘name’) + ” ]< /a > ” + value.message + “< / span >
    “;
    });
    messages = ”
    < div class='errorWrapper' >
    < h1 >Please correct following errors:< /h1 >
    ” + messages + “< /div >
    “;
    switch ($(‘input[name=DisplayType]:checked’, ‘#form’).val()) {
    case “Popup”:

    //Showing validation summary in Popup window
    $(‘#dialog-validation’).html(messages);
    $(‘#dialog-validation’).dialog(‘open’);
    break;
    case “Summary List”:

    //Showing validation summary in list of the same page
    $(‘#summary-validation’).html(messages);
    $(‘#summary-validation’).show(“fast”);
    break;
    case “Inline”:

    //Showing validation in inline format
    $.each(errorList, function (index, item) {
    $(item.element).next(‘div’).html(“[” + $(item.element).attr(‘name’) + “] ” + item.message);
    $(item.element).next(‘div’).show(“fast”);
    });
    break;
    }
    },

    //If all validations are successfully validate then execute submitHandler function
    submitHandler: function () {
    $(‘#summary-validation’).empty();
    $(‘#dialog-validation’).empty();
    alert(“All fields are valid!”)
    }
    })

    //jQuery Modal Dialog boxes can also use to display list of validation erorrs.
    $(“#dialog-validation”).dialog({
    resizable: false,
    height: 190,
    width: 350,
    modal: true,
    autoOpen: false,
    title: “Validation Errors”,
    buttons: {
    “Ok”: function () {
    $(this).dialog(“close”);
    $(‘.focused’).focus();
    }
    }
    });
    });

    //If validation errors are occured in any field, it will display field name with link, clicking on link it will set focus of perticular field.
    function setFocus(ele) {
    $(ele).focus();
    }
    // ]] >< /script >

  4. HTML page:
    1. If you need show validation near to field then it should be compulsory to add “
      ” with class name is “inlineMessage”.

    2. Hidden container for Error Messages
    3. Display Validation Summary in same page
    4. Display Validation Summary in Modal Dialog box.
    5. Add Style for Form, Inputbox, Button, Dialog and Validation Messages.Please visit Views/Shared/_Layout.cshtml

JqueryValidation

Your Thoughts:

If you find some issues or bugs with it, just leave a comment. If you make any notes on this, let me know that too so I don’t have to redo any of your hard work. Please share if this is helpful.

Download JQueryValidationStyles – Source Code

If you are looking for any Web Development services, then Contact Us today!