Course Overview
Comprehensive HTML 5 Training
HTML 5 and CSS3 have completely changed web development. Before them, there were several alterations to the way that web designers created web pages, but these two are the current standard. If you want to learn web development, you have to learn HTML 5 from scratch and that is what this course offers.
This comprehensive HTML 5 training course delivers exactly that, starting from the basics and ultimately giving you a basic working knowledge to start your journey into web development.
For a newbie, reading HTML 5 or CSS 3 code could make it seem as complicated as rocket science, when it is actually very simple to grasp. This course takes you through the motions in a relaxed way that helps you learn the core concepts and gain enough coding knowledge to build a standard web page while understanding how it all comes together.
Combine this course with all the free HTML 5 templates and other smaller learning resources available in this website and all across the internet, you have the perfect platform to begin your journey into web development in the best way possible.
Why learn HTML 5?
This here is the million-dollar question. There are lots of ways to enter the web development field, so why choose HTML 5 as your introduction? The most obvious reason is that it is now the standard for web designer. Wherever you go and whatever you do, you should ideally know HTML 5 as long as you are in this industry.
Learning HTML 5 means that you will be able to work more closely with global web development standards, like other designers. You will also be able to find a lot more support for your work, and the applications and websites you build will be supported by the latest web browsers.
But why did HTML 5 become the industry standard in the first place? Well, because of the benefits that it offered. And to understand those benefits, we need to compare it to the preceding markup language, HTML 4.
HTML 5 brought a lot of the new additions and important changes to the HTML language that not only made it beneficial, but even crucial to switch over to the new language. At surface level, however, you will find it difficult to compare the two versions.
On viewing the HTML 5 draft, you will see that the error handling procedures have been corrected and featured elements have been added. From a browser developer’s perspective, HTML 5 comes with new specifications to render default web pages that they can all enjoy.
HTML 5 also marks a significant point in the evolution of the internet and browsers. With its new specifications, the web today is viewed most often as a platform for HTML 5, JavaScript and CSS to be built on. The system also elegantly forms harmony among web developers and designers, setting a series of common standards for major browsers.
In addition, HTML 5 comes with several new elements for representing new digital media. These include the <audio> and <video> elements, which are major additions for multimedia support. For certain browsers, you can directly complete the form validation in HTML.
Before you begin this course, it’s important to understand that HTML 5 is not one large single thing. It is, in fact, a collection of many things, or features. According to some people, HMTL 5 does not support older browsers, but this statement in itself is misleading. There is no such thing as detecting ‘HTML 5 support’ as a whole. You can, however, detect support for HTML 5 features such as geo-location, video or canvas.
So what are the things that HTML consists of? Well, the first things that most people would think when you say HTML are angle brackets and tags. These are both, of course, important parts of the HTML language in general, but not the only important parts. HTML 5 is a specification that defines the Document Object Model (DOM), which determines how the brackets work with JavaScript.
About the DOM
The DOM is essential to HTML 5, and you have to know this before you learn more about HTML 5. In HTML 5, you do not just define a video tag, but also a DOM API corresponding to video objects in the model. This API can be used to detect support for various video formats, mute audio, pause or play a video, track how much video has been downloaded. It offers everything needed for a rich user experience across the video tag.
The predecessor to HTML 5 was definitely the most successful markup, and HTML 5 builds on that. Which means that you do not have to get rid of the older markup. You also do not have to relearn the things that you know already. And if you have a web application that worked in HMTL 4, it would also work in HTML 5. What HTML 5 does is improve your applications.
For instance, HTML 5 supports all of HTML 4’s form controls and adds some input controls too. Some of these additions are long overdue, like date pickers and sliders. Other additions are a little more subtle, like an email input type that looks similar to a text box, but mobile browsers customize the onscreen keyboard for making it easier to enter an email address. Meanwhile, older browsers not supporting the email input type will process it as a normal text field and the form still works without adding any scripting hacks or markup changes. You can make improvements to your web forms right now, even if some of your visitors remain stuck with older browsers.
HTML 5 is easy to ‘upgrade’ to. All you have to do is change your doctype, which is right on the first line of your HTML page. In previous versions of HTML, you had a lot of different doctypes to choose from and your selection was based on what kind of page you were making. HTML 5 simplifies this by making just one doctype: <!DOCTYPE html> .
You can make the change to your doctype without worrying about the rest of your markup going bad. All the obsolete elements that were defined in HTML 4 will continue to render in HTML 5. Meanwhile, switching to HTML 5 also gets you to utilize and validate new semantic elements such as <footer>, <header>, <section> and <article>.
If, for some reason, you are still wondering if you should take the leap and learn HTML 5, remember that most developers and industry players have already taken that leap. HTML 5 is already pretty well-supported whether you want to build offline-working web applications, design better forms, add video to your website or draw on a canvas. Mobile browsers as well as major ones like Safari, Chrome, Firefox and Opera already support HTML 5 features like local storage, geo-location, video and canvas. Google also even supports micro-data annotations. Even Microsoft, whose Internet Explorer is known to always be at the tail end of standards support, already supports most HTML 5 features in its current Internet Explorer 9 browser.
Even W3C, the organization established to steward and direct the development of web standards, decided that HTML 5 is the way forward for the internet. At the end of 2009, it expired its XHTML 2 Working Group charter, instead focusing its resources on the HTML Working Group to accelerate HTML 5’s progress.
HTML 5 Course Curriculum
Section 1: History of the Web
We begin the course with a brief history of the internet, focusing on more of the web development side than the technology and infrastructure. We look at the development of various web development standards in particular, the competition between browsers to gain market share during the early days of the internet, and how we got to where we are right now.
Section 2: Introducing HTML5
With a quick background to how we all got here, this section now introduces us to HTML 5, beginning with the last few steps before HTML 5 was launched to the world. The section is pretty long and introduced all the vital elements of HTML as well as key components such as CSS and JavaScript, so stay focused!
Section 3: Structuring Pages with Semantic Elements
With the second section complete, you would be aware of all essential HTML 5 elements. This next section shows you how to fit all these pieces in the final picture. It provides an introduction to semantic elements, which clearly describe their meaning to the developer and browser. Find out more about how to use them and their compatibility with browsers.
Section 4: Writing More Meaningful Mark Up
This section introduced some more semantic elements for your use, including date time, mark output and web forms. All of these, while not as essential as the ones discussed before, add more layers to your web site or application and play a key role in the user experience. So buckle up and learn how to use these elements in this section.
Section 5: Building Better Web Forms
This section focuses exclusively on web forms, and for good reason. Web forms 2.0 extends the form features you could find in HTML 4. With HTML 4’s web forms, the form attributes and elements provide a higher degree of semantic markup than the previous HTML 4. They also remove the need for spending hours on end styling and scripting, which was necessary in HTML 4.
Section 6: Audio & Video
Before HTML 5, developers had to rely on third-party plugins like Flash to play audio or video on a website. That changed entirely with the addition of audio and video elements in HTML 5. This section covers these two incredible game-changing elements of the markup language, and how to utilize them.
Section 7: Basic of Canvas
We touched up on canvas at the beginning of the course, but this section goes into depth. The canvas element is used for drawing graphics on a web page on the fly using JavaScript, most commonly. It has many paths to draw the graphics, and is a significant addition to the capabilities of HTML.
Pre-Requisites
The comprehensive HTML 5 training course, while focused on giving a ground-up introduction to the markup language, is best taught if you meet certain requirements and prerequisites. These are mentioned below, and if you meet these requirements, the course would help you much better:
- You should have a reliable computer and internet connection
- You should know your way around the internet and should have good computer skills
- Previous knowledge of any programming language, like C++, would help in grasping HTML 5 faster, but is not a hard-and-fast prerequisite
- You need to have the interest and time to pursue the course and hone your development skills by making practice pages and applications
Target Audience
The course is focused on the following:
- Students and professionals interested in entering the field of web development
- Students and professionals looking to gain an introduction and working understanding of HTML 5, to begin scripting their own basic pages.
HTML 5 FAQs – General Questions
- Is this course for me?
The good thing about this course is that it is broad and designed to be accessible to as many people as possible. As long as you have the interest and basic resources, you can pursue this course and complete it, learning a lot of new things. This course is for those who are new to web development in general, and want to find out more about ‘this HTML 5 that they keep hearing about’. The course is also for those generally interested in how their favorite sites function.
- Is there a particular order to follow?
In general, it is best to follow the course section by section, especially if you are entirely new to the idea of web development and want to learn from scratch. The section on the history of the web gives a lot of vital background information so that you can understand the ‘why’ of it all, but you can skip this one if you are already well-aware of why and how HTML 5 was developed. Similarly, you can go through the sections that you are most interested in first, without worrying about losing the flow.
- Where would I apply this?
Pretty much everywhere. This course is a great jump-off point into the vast, vast world of web development. There is a lot more to learn, obviously, but this course gives you the solid foundation you need to learn more about working with HTML 5 and even grasping new languages.
Course Testimonials
Mikey T:
I was entirely new to web development. I was a little interested at school but never pursued it, but five years into work and I decided to give it a go. This course was a great foundation for me. Within a month, I was already coding web pages. Another month later, I was learning more advanced stuff. Definitely worth a shot if you want to start learning web development.
Serena K:
I’ve been in marketing for close to seven years, and I was always interested in the website aspect of it. But I was also almost always out of the loop when it came to discussions regarding web strategy. This course gave me an edge, and the knowledge to know what exactly happens behind the scenes. It helped me become much better in my job, and help out my team better.
John B:
Learning this course was a great way to enter the field of website development. It was so comprehensive, I didn’t have to go anywhere else to learn more about this language. I’m looking forward to take more courses from you guys!