Paths

HTML5

Authors: Craig Shoemaker, Ben Schwarz, Cory House, Susan Simkins, Gerard K. Cohen, Gill Cleeren, Barry Luijbregts, Mark Boas, Lisa Larson-Kelley, Matt Milner

HTML5 is the newest version of the default file format for web documents. It adds new form elements, audio/video support, a drawing canvas, real-time communication, local storage,... Read more

Beginner

The goal of these beginner HTML courses are to create a solid foundation of the fundamentals of HTML. You will learn how to properly define your HTML, follow the standards and become confident using basic HTML elements. You will also learn about the new features of HTML introduced in HTML5. Aside from learning how to use all the basic features of HTML, you will learn how to write it in a descriptive and meaningful way.

1

HTML, CSS, and JavaScript: The Big Picture

by Barry Luijbregts

Apr 23, 2018 / 1h 28m

Beginner • 1h 28m

Start Course
Description

At the core of creating applications for the web is a thorough knowledge of HTML, CSS, and JavaScript. In this course, HTML, CSS, and JavaScript: The Big Picture, you’ll learn how to create applications for the web. First, you’ll learn to display content on the web with HTML. Next, you’ll explore styling the web with CSS. Finally, you’ll discover how to make the web interactive with JavaScript. When you’re finished with this course, you’ll have a foundational knowledge of HTML, CSS, and JavaScript that will help you as you move forward to create applications for the web.

Table of contents
  1. Course Overview
    1m 30s
  2. Why You Should Care About How the Web Works
    13m 39s
  3. Displaying the Web with HTML
    21m
  4. Styling the Web with CSS
    22m 20s
  5. Interacting with the Web with JavaScript
    23m 32s
  6. Where to Go from Here
    6m 20s
2

HTML Fundamentals

by Matt Milner

May 18, 2012 / 2h 13m

Beginner • 2h 13m

Start Course
Description

HTML markup is the heart of any web application and this course will teach you the fundamentals of HTML regardless of the tool you use to author it. You will learn how to properly define your HTML markup and follow the standards, how to create lists, tables, and images, and all about text elements. Along the way you will also be show what NOT to do in your HTML.

Table of contents
  1. HTML Fundamentals Introduction
    30m 1s
  2. HTML Text
    32m 55s
  3. HTML Lists
    13m 9s
  4. HTML Links
    16m 25s
  5. HTML Tables
    23m 22s
  6. HTML Images and Objects
    17m 44s
3

HTML5 Fundamentals

by Craig Shoemaker

Mar 3, 2017 / 3h 47m

Beginner • 3h 47m

Start Course
Description

HTML5 is a big and broad topic that has evolved much over the years. In this course, HTML5 Fundamentals, you'll learn about HTML5 from the new and updated markup to the associated JavaScript APIs that help make up the modern web. After gaining perspective on the breadth, scope, and history of HTML5 you learn about native selection, web forms, media, drawing, and drag and drop APIs. As you go through this course, you'll learn how to deal with out-of-date browsers and how you can detect browser capabilities so your web apps take advantage of all that HTML5 has to offer. After watching this course, you will have learned how to deal with out-of-date browsers and how you can detect browser capabilities so your web apps take advantage of all that HTML5 has to offer.

Table of contents
  1. Course Overview
    1m 28s
  2. Introduction
    1h 7m 28s
  3. Finding Parts of the Page
    15m 13s
  4. Working with User Input
    43m 25s
  5. Music & Video (without Plugins)
    20m 42s
  6. Drawing Shapes, Charts, and More
    49m 14s
  7. Drag and Drop
    30m 15s
4

Semantic HTML

by Susan Simkins

Jan 21, 2016 / 1h 49m

Intermediate • 1h 49m

Start Course
Description

In this HTML tutorial, we'll learn about the concept of semantic HTML. Semantic HTML means writing HTML that is descriptive and meaningful in regards to content and context. This course will talk about how, and especially why, it is important to write semantic HTML. If you have ever been confused about when and how to use semantic HTML5 elements we will talk about their intended uses in depth. We will also learn how our HTML creates an outline using both headings and HTML5 sectioning elements. We will even gain insight into accessibility concepts and how using different elements changes how those using assistive technologies perceive our webpages by testing our project with a screen reader. By the end of this HTML training, you'll have a solid understanding of how you can write better, semantic HTML. Software required: Brackets, Google Chrome.

Table of contents
  1. Introduction and Project Overview
    1m 1s
  2. Semantic HTML
    1h 48m 46s
5

Meeting Web Accessibility Guidelines (Section 508/ WCAG 2.0)

by Gerard Cohen

Sep 7, 2016 / 1h 44m

Beginner • 1h 44m

Start Course
Description

If you are a web/front-end developer, the work you produce must be accessible to all users. In this course, Meeting Web Accessibility Guidelines (Section 508/ WCAG 2.0), you will get hands-on, practical code examples that you can start using today towards your goal of meeting official accessibility guidelines. First, you will learn the differences between Section 508 and WCAG 2.0, helping you to decide which guideline to use. Next, you'll dive into real-world, reusable code patterns/techniques and matching them to relevant guidelines. After finishing this course, not only will you be equipped to acquire government/education-related contracts, but you'll be able to make sites that meet established accessibility conformance guidelines and are more usable for everyone.

Table of contents
  1. Course Overview
    1m 57s
  2. Choosing a Web Conformance Guideline
    8m 19s
  3. HTML
    1h 4m 7s
  4. Media
    18m 41s
  5. Responsive Web Design and Accessibility
    11m

Intermediate

Now that you have the basics down, let’s learn how to put your HTML5 knowledge to practical use. This section will show you how to build useful and meaningful applications using many new HTML features. Here you will learn how to create reusable web components, leverage JavaScript APIs for real-time communication, add rich media to your web pages and harness the power of data in the browser.

6

Practical HTML5

by Gill Cleeren

Feb 24, 2015 / 4h 6m

Beginner • 4h 6m

Start Course
Description

This course is a very practical way to learn web development using HTML5, JavaScript, and CSS3. We start with an empty website at the beginning of module 1. With every module, new topics are introduced. Instead of showing how they work in a stand-alone demo, they are added directly to our site. The outcome is a fully-functioning site that includes all of the HTML5 topics covered in the course. The site provides an online storefront for a coffee shop named Joe's Coffee Store. Among many other features, your finished site includes support for the canvas, drag and drop, new input types, geolocation, SVG, CSS3, audio, media, and much more. To conclude, this course takes the practical approach: open an editor, follow along, and by the time the course is done you'll have the whole picture of how the different HTML5 building blocks work together and can help you in avoiding the use of plugins for your web development.

Table of contents
  1. Creating a Site Using HTML5
    38m 37s
  2. Adding Some Basic CSS and JavaScript
    31m 53s
  3. Navigation, Forms, and Validation
    30m 49s
  4. Adding Style and Layout with CSS3
    33m 57s
  5. Adding Functionality Using Built-in JavaScript Libraries
    43m 23s
  6. Using Video and Adding Graphical Elements with a Canvas
    42m 3s
  7. Drawing More Graphical Elements with SVG
    25m 25s
7

HTML5 Web Component Fundamentals

by Cory House

Jan 9, 2015 / 5h 3m

Beginner • 5h 3m

Start Course
Description

In this course, you'll learn how HTML5 Web Components give us the power to extend the web with our own rich, standards-based components. Web developers have been struggling for years to create truly reusable components. We struggle with styling, bundling, defining templates, and encapsulating our markup and styles from accidental manipulation. But HTML5 Web Components provide the power to finally define standards-based, reusable web components through four new technologies. Learn how to use the Shadow DOM to encapsulate the DOM and styling for your components. Define inert templates with the template tag. Extend HTML by registering your custom elements. And bundle this all together in a simple reusable package using HTML5 imports.

Table of contents
  1. Five Problems, One Solution
    23m 52s
  2. Templates
    27m 50s
  3. Custom Elements
    43m 34s
  4. Shadow DOM Fundamentals
    34m 19s
  5. Shadow DOM Insertion Points & Events
    53m 34s
  6. Shadow DOM Styling
    51m 34s
  7. Imports
    56m
  8. Native Alternatives
    10m 43s
  9. Resources
    2m 5s
8

WebRTC Fundamentals

by Lisa Larson-Kelley

Feb 20, 2014 / 1h 40m

Intermediate • 1h 40m

Start Course
Description

WebRTC is a powerful new open-source project that seamlessly enables real-time communication (RTC) – baked right into modern web browsers. This means web developers can now incorporate video, voice and data sharing using peer-to-peer connectivity via simple JavaScript APIs, with no plugins or additional installs required. In this course, Lisa Larson-Kelley introduces you to the fundamentals of WebRTC, explaining its elements and capabilities in easy-to-understand terms, and gets you started building simple ‘hello world’ applications using the WebRTC API. With over 10 years of experience building RTC apps using Flash Media Server, Lisa brings her perspective and enthusiasm for RTC to this rapidly emerging open source technology that is poised revolutionize how we communicate on the web.

Table of contents
  1. Introduction to Web Real-time Communication (WebRTC)
    15m 18s
  2. Architecture of a WebRTC Application
    6m 39s
  3. Understanding Server Technologies for WebRTC
    13m 48s
  4. Introducing the WebRTC API
    18m 58s
  5. Setting Up Your Development Environment
    3m 26s
  6. Create a Two-person Video Chat Using Peer.js
    22m 54s
  7. Create a Multi-person Chat Application Using SimpleWebRTC
    14m 43s
  8. Where To Go Next
    4m 35s
9

HTML5 Audio, Video, and WebRTC

by Mark Boas

Aug 26, 2014 / 5h 10m

Intermediate • 5h 10m

Start Course
Description

HTML5 gives us power beyond what we've had before through native APIs in the browser delivering rich media, realtime effects and communication. In this course, you'll get hands-on examples of building your own media players on top of HTML5 APIs. You'll dive into camera support with getUserMedia, WebRTC for realtime communication, video effects with canvas, and get introduced to the Web Audio API for low-level audio support.

Table of contents
  1. Introduction
    12m 42s
  2. Audio and Video Basics
    38m 24s
  3. Tools and Configuration
    11m 33s
  4. Introduction to the Media API
    24m 2s
  5. Buffering, Seeking, Preloading, and the User Experience
    37m 30s
  6. Subtitles and Playback Rate
    34m 52s
  7. Canvas and WebGL
    45m 51s
  8. WebRTC
    41m 26s
  9. Advanced Audio
    25m 51s
  10. Wrap-Up
    37m 58s
10

HTML5 Browser Caching

by Ben Schwarz

Feb 3, 2012 / 1h 1m

Intermediate • 1h 1m

Start Course
Description

The syntax for using local storage and offline caching is simple, but the implementation details can easily leave you frustrated. Existing blog posts ignore the finer points of this nuanced API. For this course, we brought in W3C committee member Ben Schwarz to show us how it's done. In only an hour you'll learn about how to speed up the user experience for online and offline applications, basic syntax for caching files and data in the browser, browser tools and development workflow to help debugging and avoid frustration, how to steer around bugs, restrictions, and pitfalls, and how to use the Rails 3 asset pipeline with browser caching.

Table of contents
  1. Getting Started
    15m 58s
  2. Feedback
    13m 24s
  3. JavaScript
    23m 14s
  4. Rails 3.2
    9m 15s

Advanced

Our advanced HTML5 tutorial topics include a deeper dive into building rich internet applications. You will learn how to apply many of the new features found within the HTML5 specs, such as WebSockets, geolocation and web storage, offline applications, and more.

11

HTML5 Advanced Topics

by Craig Shoemaker

Aug 22, 2011 / 2h 45m

Advanced • 2h 45m

Start Course
Description

In Advanced HTML5 you learn to build native rich internet applications by taking advantage of features that: allow a website to operate with or without internet connectivity, relieve the UI thread of intense processing, reduce application overhead by using Web Sockets for constant communication with the server, extend the amount of data available on the client using the new storage APIs, programmatically locate user’s geographical location on a one-time or continual basis and make data on your website available to both viewers and machines with Microdata markup.

Table of contents
  1. Fundamentals of HTML5 : Offline Applications
    41m 45s
  2. Fundamentals of HTML5 : Geolocation
    17m 52s
  3. Fundamentals of HTML5 : Web Storage
    21m 26s
  4. Fundamentals of HTML5 : Web Workers
    28m 56s
  5. Fundamentals of HTML5 : Web Sockets
    26m 7s
  6. Fundamentals of HTML5 : Microdata
    29m 17s
12

HTML5 Web Storage, IndexedDB and File System

by Craig Shoemaker

Dec 3, 2013 / 5h 29m

Intermediate • 5h 29m

Start Course
Description

Learn to use HTML5 to persist data on the client using Web Storage (local and session storage), the client-side object database known as IndexedDB and the in-browser file system. In this course you are introduced to each persistence medium and will learn to abstract away the complexities of using the raw APIs. Discussion of each technology also includes a "real-life" sample to demonstrate how you can use capabilities shown in this course in context of an application scenario.

Table of contents
  1. Course Introduction
    29m 44s
  2. Web Storage
    45m 6s
  3. IndexedDB: Introduction and Concepts
    17m 49s
  4. IndexedDB: Initialization & CRUD
    20m 49s
  5. IndexedDB: Cursors, Indexes and Ranges
    21m 20s
  6. IndexedDB: Keys, Capacity, Performance and Versions
    29m 38s
  7. IndexedDB: Abstractions & Implementing an Edit Screen
    44m 58s
  8. File System: Introduction, Concepts & Initialization
    21m 21s
  9. File System: Directories - Create, List, Delete, Move & Copy
    17m 42s
  10. File System: Building an Abstraction Layer over Directories
    28m 56s
  11. File System: Files - Create, Read, Write, Delete, Move & Copy
    27m 35s
  12. File System: Testing Capacity Limits & Implementing a File Editor
    11m 12s
  13. Libraries
    13m 22s

What you will learn

  • Properly define your HTML markup
  • HTML5 elements and JavaScript APIs
  • HTML that is descriptive and meaningful
  • Reusable web components
  • Real-time communication via JavaScript APIs
  • Native APIs for rich media, realtime effects and communication
  • Speed up the user experience for online and offline applications
  • Storage APIs and web sockets

Pre-requisites

You'll need to have at least a passing familiarity with JavaScript and CSS.

Register for FREE. Get your Pluralsight IQ.

You’ll get unlimited access to adaptive skill assessments that help you validate your skills in as little as 5 minutes, and you'll get to see the Pluralsight platform first-hand.