Learn it fast with expert-taught software and skills training at lynda.com. See what you can learn

By David Gassner | Wednesday, February 15, 2012

13 courses to help you learn HTML5 on lynda.com

Recently I’ve been asked by some very influential people why lynda.com hasn’t published an HTML5 essential training course yet. Isn’t HTML5 an enormously important topic? Isn’t HTML5 at the core of how the web is being transformed and adapted to the new reality of modern web browsers on desktops, cell phones, and tablets? Isn’t HTML5 changing how rich media (audio and video) is delivered on the Internet? And isn’t HTML5 on its way to replacing web browser plugins such as Flash Player and Silverlight that we’ve depended on for many years? (Whether HTML5 will completely replace the plugins on the web, and how long it will take, is a matter of debate—but that’s for another discussion and another day.)

How could lynda.com have ignored this critical topic? If lynda.com is such a forward-looking educational company, how could we have missed this tectonic shift in the web development landscape??

No worries; we didn’t miss the boat. Simply put, we decided last year that HTML5 was too large a subject to cover in a single course. HTML5 isn’t a single technology; it’s an umbrella term that’s used by the W3C (the Worldwide Web Consortium, a standards-setting body in Switzerland that’s theoretically in charge of how the web works) to describe a set of specifications that let you manage all sorts of things in a web page or application with relatively simple code. (These specifications include both HTML tags and a set of powerful JavaScript APIs.)

We broke down the subject into a series of courses, each taught by an instructor who was able to specialize in one or more aspects of HTML5, and started publishing the courses in mid-2011. We then continued periodically releasing these smaller, focused courses with a new deep dive into some aspect of HTML5 until the last of the 13-course series was released in January 2012, declaring our first pass at coverage of HTML5 to be officially complete. And so, this seems like a good time to review what we’ve created.

If you’re just getting started with HTML5, you might first watch HTML5 First Look taught by lynda.com senior staff author James Williamson. In this course, James offers a birds-eye view of the purpose and usage of HTML5, and includes invaluable references to sites and other resources you can use to keep up with HTML5’s ongoing evolution.

For your first hands-on course, I suggest HTML5: Structure, Syntax and Semantics, also taught by James Williamson. Here, you’ll see how basic HTML code looks, and how to set the stage for all the fun stuff you’ll learn to do later.

From there you can sample a broad array of juicy HTML5 dishes. Each of the remaining courses focuses on a single aspect of HTML5, and you can watch them in any order. To animate your pages, watch HTML5: Graphics and Animation with Canvas taught by Joe Marini. To add drag and drop interactions, look at HTML5: Drag and Drop in Depth taught by Bill Weinman. And for rich media, check out HTML5: Video and Audio in Depth taught by Steve Heffernan.

Want to work with advanced data entry forms (HTML5: Web Forms in Depth) or in-line document editing (HTML5: Document Editing in Depth)? We’ve got that. How about network communications (HTML5: Messaging and Communications in Depth), multi-threading (HTML5: Background Processes with Web Workers), working with the user’s physical location (HTML5: Geolocation in Depth), managing browser history (HTML5: Managing Browser History), or working with local databases (HTML5: Local Storage and Offline Applications in Depth) and text files (HTML5: File API in Depth). Yes, we’ve got all that too.

The 13 courses in this series cover nearly all aspects of the HTML5 specifications. By designing the courses in this modular fashion, we’ve hopefully made it easier for you to find and learn the specific skills you need to satisfy the needs of your web project, your job, or your curiosity. Taken together, they’re the equivalent of a single master-class in HTML5 development—essentially, “HTML5 Essential Training” from lynda.com.

And as we promised when the series was launched, we’re keeping an eye on the evolution of both the HTML5 specs and and how the web browsers implement them. When we see significant changes, we’ll update these courses with the latest information.

So no, we didn’t fall asleep at the switch. HTML5 is a fast-moving set of technologies, and we’ll keep on doing what’s needed to help you incorporate the latest technologies into your web sites and applications.

What HTML5 courses will you add to your lynda.com queue first?

Interested in more? • All developer courses on lynda.com • All courses from David Gassner on lynda.com

Suggested courses to watch next:HTML5 First LookDreamweaver CS5: Getting Started with HTML5iOS 4 Web Applications with HTML5 and CSS3HTML5: Local Storage and Offline Applications in DepthHTML5: Graphics and Animation with Canvas

By Cynthia Scott | Tuesday, May 31, 2011

Author James Williamson discusses his new HTML5 course on structure, syntax, and semantics

We’re very excited to be releasing a series of courses on HTML5 this week. Senior staff author James Williamson kicks off the content with a new course releasing today, HTML5: Structure, Syntax, and Semantics. This course is designed as the starting point; other courses will teach how to use HTML5 web forms, local storage, rich media, and graphics with the HTML5 <canvas> tag. Let us know what else you’re interested in learning about HTML5 by leaving us a comment with this post.

I had a chance to ask James about his experiences preparing for this course.

Q: What got you interested in HTML5?A: When it seemed that the implementation of XHTML 2 just wasn’t going to happen. I remember hearing about the founding of WHATWG and how they planned to keep working on HTML. At the time I viewed it as a pleasant curiosity, but as we can see, they were on the right track.

Q: What are some of the most surprising uses of HTML5 you’ve seen?A: I have to be really careful here, because there are a lot of demos and examples floating around out there that, while amazing executions of HTML and JavaScript, aren’t technically HTML5. Overall, I’d have to say I’m most surprised at how quickly Canvas is maturing. Although the Canvas API is in its own spec in the W3C, the canvas element is native to HTML5. Check out Hakim El Hattab’s demo page and you’ll see how far some people are pushing the envelope.

By James Williamson | Wednesday, November 17, 2010

Can you use CSS3 now?

Chances are, if you are a web designer or developer, you’ve at least heard of CSS3. If you haven’t had the time to dive into the modules yourself, you’re no doubt wondering if it’s ready to use now. Well, the short answer is yes, it is! There is, of course, more to it than that. As with any emerging technology, you need to develop a strategy for deploying CSS3 on your sites that accounts for either inconsistent or non-existent support between browsers or devices.

By now, you’ve probably come to terms with the fact that web sites don’t look exactly the same across different devices and browsers. If you’ve been designing sites for a while, you probably already have a strategy in place for dealing with browser inconsistencies. In most cases, your existing workflow for dealing with these will work just fine when adding CSS3 to your sites.  However, there are some specific considerations you need to be aware of when dealing with CSS3, so let’s take a moment to discuss strategies for introducing CSS3 into your sites.

First, make sure that using CSS3 makes sense for your site. Occasionally we get so caught up in using the latest features and technology that we lose sight of the needs of our users. Before using any of the new capabilities of CSS3 make sure that using them actually enhances your design.

Once you’ve settled on using CSS3, it’s best to approach it as a means of enhancing the design of your site, rather than driving it. Make sure you have a solid layout and design without relying on CSS3 techniques to make it work. Then gradually enhance your design with CSS3 to present a much more robust experience to those using supporting devices.  This will allow you to present functional designs to your users regardless of the device they are using. This approach, called progressive enhancement, is a common way of dealing with device inconsistencies for both styling and behavior, and is a great foundation for any CSS3 deployment strategy. It’s worth mentioning here as well that if you are providing fallback content for non-supported devices, make sure the absence of CSS3 features doesn’t harm your design. Features like multiple backgrounds, transparency, and drop shadows can cause content to either look odd when absent or cause readability issues with your text. In those cases, make sure that alternate styles are presented that ensure the clarity of your content.

In learning about CSS3, you are bound to come across many solutions for enforcing or adding support for CSS3 features in older browsers. While there are some great solutions out there, keep in mind that many of theses workarounds are time consuming, result in larger and slower pages, and can cause rendering errors if not executed properly. Make sure that the extra effort is worth it. In many cases, simply providing those users with a more basic, functional site is the better solution.

Any current discussion on utilizing CSS3 would be incomplete without dealing with Internet Explorer. While Firefox, Opera, Safari, and Chrome have all been gradually adding support for CSS3 to their browsers, the same is not true for Internet Explorer. Until version 9 is released, many of the new features in CSS3 will not work in Internet Explorer at all. That alone is enough for some designers to ignore CSS3, and frankly, that’s a shame. One browser’s shortcomings should not prevent you from enhancing the design of your sites.

When dealing with Internet Explorer, you have a few choices in how to progressively enhance your designs. First, you can simply write CSS 2.1 base styling and let it ignore the selectors or properties it doesn’t support. For more complex designs, or for cases where the lack of CSS3 styling would cause rendering issues, you could pass alternate style sheets to Internet Explorer through the use of conditional comments. Conditional comments are a widely used technique for addressing the specific styling needs of Explorer, and are a great way of overwriting unsupported CSS3 styling.

Another way to use CSS3 with Internet Explorer is to use the Progressive Internet Explorer or CSS3 PIE library. PIE is a small javascript library that adds limited CSS3 support to older versions of Internet Explorer. It’s free, easy to use, lightweight, and gives you a way to use CSS3 features such as border-radius, box-shadow, and gradients through a single line of code.

I also recommend taking a look at using Modernizr. Modernizr is free, small javascript library that provides detection support for a wide range of next generation web capabilities. Not surprisingly, CSS3 is among them. Although Modernizr won’t add capabilities to non-supporting browsers, it does make it much easier to provide fallback content to these browsers and devices. What’s more, it adds detection capabilities for HTML5 as well, making it a smart choice for anyone wanting to start working in HTML5 and CSS3.

CSS3 gives designers an exciting set of new and enhanced features to use when styling page content. However, it’s evolving nature and inconsistent support requires you to have a solid strategy for using it. Be sure to carefully plan which features you want to use, and how you are going to account for this styling in unsupported devices. Having such a strategy in place will allow you to enhance your user experience in modern browsers while still providing solid functionality to older browsers and devices. Keep an eye out for our upcoming CSS3 course to learn more about these techniques, and many of the new features and capabilities in CSS3. In the meantime, the accompanying video from my HTML5 First Look course gives a good basic overview of CSS3.

By Cynthia Scott | Tuesday, September 07, 2010

First Look course about HTML5 released

We’re thrilled to have released our course, HTML5 First Look with James Williamson. This much anticipated training course provides a high-level look at HTML5 in its current state.

Topics include: • Understanding the history of HTML5 • Using new tags • Understanding HTML5 semantics • Coding ID and class attributes in HTML5 • Structuring documents • Building forms • Exploring HTML5 native APIs • Encoding and adding HTML5 video • Exploring associated technologies such as CSS3

Happy learning! While you’re exploring HTML5 First Look, keep track of what you’d like to learn next. We’re working on developing future HTML5 courses and we’d like your input.

By James Williamson | Monday, July 12, 2010

HTML5 training: Taking a first look at HTML5

In all my years of teaching and writing about web design, I don’t think I’ve ever seen a topic explode in terms of interest level and passion as quickly as I have with HTML5. Despite the huge amount of interest in the topic, there is still a great deal of confusion about what HTML5 is and how to go about learning it. In my opinion, one of the best ways to approach HTML5 is by first comparing it to HTML 4 and learning the differences. That way, it’s easier to understand exactly what is changing in regards to HTML and cut through some of the hype and clutter that is currently surrounding the topic.

Although HTML5 represents an ambitious step forward in the evolution of HTML, it is largely a revised version of HTML 4. If you are comfortable writing HTML4, you should find yourself quite comfortable with the majority of the HTML5 specification. With that in mind, let’s take a closer look at the differences between HTML5 and HTML 4.

First, it’s important to note that the HTML5 specification is designed not just to replace HTML 4, but also the XHTML 1.0 and DOM Level 2 specifications. That means the serialization of HTML to XML and the DOM specification are now contained inside the HTML5 specification, instead of belonging to separate specs. It also contains detailed parsing rules that are designed to improve the interoperability of systems that use HTML documents. As such, the HTML5 Specification is much larger than HTML 4 and covers a lot more ground.

One of the first places you’ll notice a difference in writing HTML5 documents is in the doctype and character encoding. In the past, based on the version of HTML they were using authors have had to use long, arcane doctypes to trigger standards mode in modern browsers. You may recognize this code, for example:Now, rather than having to deal with multiple complex doctypes, you simply use a single doctype that declares the document as an HTML file. Since HTML is no longer SGML-based, no DTD is required. Character encoding is likewise simplified. All that is required now is a meta tag with a charset attribute. Here’s what the above code looks like in HTML5:

Much simpler!

There are, of course, new elements in HTML5 that are not part of HTML 4. These new elements assist with page structure and code semantics, allow embedded content, and include new phrasing tags that help add additional meaning to content within the page. By now, you’ve probably heard of new elements such as the section, article, and headervideo and audio

Forms undergo a dramatic update in HTML5 as well. Much of the work done on the Web Forms 2.0 specification has been added to the HTML5 spec. The result of this is new form controls and input types that allow you to create more powerful forms and more compelling user experiences. New form elements include date pickers, color pickers, and numeric steppers. The input element is now much more versatile, with new input types such as url, email, and search that will make it easier to control the presentation and behavior of form content both on the web and within mobile applications. It’s worth noting that HTML5 also adds support for the PUT and DELETE form methods, making it easier to submit data to a wider array of applications.

By far the addition to HTML5 that is getting the most attention is the introduction of several new API’s that are designed to make developing web applications easier across multiple devices and user agents. These APIs include the much talked about video and audio API, an API for building offline applications, an API for editing page content, one that controls Drag and Drop functionality, another that focuses on history, and one that controls Application protocols and media types. Other API’s like Geolocation, Web Sockets, and Web Messaging are associated with HTML5, but are defined within their own specifications.

Those are a few of the highlights of the differences between HTML5 and HTML 4, and should give you a good idea of how HTML5 will change the way that web sites and web applications are authored. Sign up for the lynda.com Online Training Library® New Releases announcement so you’ll know when my HTML5 tutorials are available.

By Crystal McCullough | Monday, May 03, 2010

Senior staff author James Williamson delves into Dreamweaver CS5

Join senior staff author James Williamson for an introduction to the latest features and enhancements to Adobes web design and development software. Dreamweaver CS5 New Features covers the improved CSS workflows of CSS Enable and CSS Inspect, integrated services with CS Live, and the program’s support of popular content management system (CMS) frameworks such as Drupal, Joomla!, and WordPress.

By Crystal McCullough | Wednesday, February 24, 2010

HTML structure and markup language basics

Web Design Fundamentals with James Williamson is a survey of Web design and development techniques and technologies, fundamental concepts, terms, and best practices involved in professional web design. Instructor James Williamson examines popular web development tools, server-side software solutions, content management solutions, and cloud-based software, providing a high-level overview of the world of Web publishing. In this excerpt from the course, James explains the basics of HTML structure.

By Megan O. Read | Friday, February 12, 2010

Author dinner: Mordy Golding, Mark Christiansen, James Williamson, and Taz Tally

Taz Tally, author relations manager Megan O. Read, Mordy Golding, Mark Christiansen, James Williamson, supervising training producer Max Smith.

After a long week of recording, Mordy Golding, Mark Christiansen, James Williamson, and Taz Tally were let out of their booths for a little fresh air and a meal.

It’s inevitable, that when you get so many industry power-houses together, they will talk shop, compare histories, and brainstorm upcoming projects. It’s always a treat to hear about conferences from the past, like Mordy Golding recounting the ADIM (costume mandatory!) conferences, or different methods to slow down their speech in the booth (Mordy has a wall of snail images, stop signs, sloths etc.). But it’s also a treat when you find out that authors have crossed paths before, and hadn’t realized it until something triggers them—like Taz Tally (who now lives in Homer, Alaska) remembering James Williamson from a South Carolina service bureau in the late ’80s!

Stay tuned for upcoming training from these greats.

Get the latest news

  •   New course releases
  •   Pro tips and tricks
  •   News and updates
  
New releases submit clicked

You can change your email preferences at any time. We will never sell your email. More info

Featured articles

A lynda.com membership includes:

Unlimited access to thousands of courses in our library
Certificates of completion
New courses added every week (almost every day!)
Course history to track your progress
Downloadable practice files
Playlists and bookmarks to organize your learning
Become a member

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.