Paths
HTML5
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.
HTML, CSS, and JavaScript: The Big Picture
Beginner • 1h 28m
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
- Course Overview1m 30s
- Why You Should Care About How the Web Works13m 39s
- Displaying the Web with HTML21m
- Styling the Web with CSS22m 20s
- Interacting with the Web with JavaScript23m 32s
- Where to Go from Here6m 20s
HTML Fundamentals
Beginner • 2h 13m
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
- HTML Fundamentals Introduction30m 1s
- HTML Text32m 55s
- HTML Lists13m 9s
- HTML Links16m 25s
- HTML Tables23m 22s
- HTML Images and Objects17m 44s
HTML5 Fundamentals
Beginner • 3h 47m
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
- Course Overview1m 28s
- Introduction1h 7m 28s
- Finding Parts of the Page15m 13s
- Working with User Input43m 25s
- Music & Video (without Plugins)20m 42s
- Drawing Shapes, Charts, and More49m 14s
- Drag and Drop30m 15s
Semantic HTML
Intermediate • 1h 49m
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
- Introduction and Project Overview1m 1s
- Semantic HTML1h 48m 46s
Meeting Web Accessibility Guidelines (Section 508/ WCAG 2.0)
Beginner • 1h 44m
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
- Course Overview1m 57s
- Choosing a Web Conformance Guideline8m 19s
- HTML1h 4m 7s
- Media18m 41s
- Responsive Web Design and Accessibility11m
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.
Practical HTML5
Beginner • 4h 6m
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
- Creating a Site Using HTML538m 37s
- Adding Some Basic CSS and JavaScript31m 53s
- Navigation, Forms, and Validation30m 49s
- Adding Style and Layout with CSS333m 57s
- Adding Functionality Using Built-in JavaScript Libraries43m 23s
- Using Video and Adding Graphical Elements with a Canvas42m 3s
- Drawing More Graphical Elements with SVG25m 25s
HTML5 Web Component Fundamentals
Beginner • 5h 3m
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
- Five Problems, One Solution23m 52s
- Templates27m 50s
- Custom Elements43m 34s
- Shadow DOM Fundamentals34m 19s
- Shadow DOM Insertion Points & Events53m 34s
- Shadow DOM Styling51m 34s
- Imports56m
- Native Alternatives10m 43s
- Resources2m 5s
WebRTC Fundamentals
Intermediate • 1h 40m
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
- Introduction to Web Real-time Communication (WebRTC)15m 18s
- Architecture of a WebRTC Application6m 39s
- Understanding Server Technologies for WebRTC13m 48s
- Introducing the WebRTC API18m 58s
- Setting Up Your Development Environment3m 26s
- Create a Two-person Video Chat Using Peer.js22m 54s
- Create a Multi-person Chat Application Using SimpleWebRTC14m 43s
- Where To Go Next4m 35s
HTML5 Audio, Video, and WebRTC
Intermediate • 5h 10m
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
- Introduction12m 42s
- Audio and Video Basics38m 24s
- Tools and Configuration11m 33s
- Introduction to the Media API24m 2s
- Buffering, Seeking, Preloading, and the User Experience37m 30s
- Subtitles and Playback Rate34m 52s
- Canvas and WebGL45m 51s
- WebRTC41m 26s
- Advanced Audio25m 51s
- Wrap-Up37m 58s
HTML5 Browser Caching
Intermediate • 1h 1m
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
- Getting Started15m 58s
- Feedback13m 24s
- JavaScript23m 14s
- Rails 3.29m 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.
HTML5 Advanced Topics
Advanced • 2h 45m
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
- Fundamentals of HTML5 : Offline Applications41m 45s
- Fundamentals of HTML5 : Geolocation17m 52s
- Fundamentals of HTML5 : Web Storage21m 26s
- Fundamentals of HTML5 : Web Workers28m 56s
- Fundamentals of HTML5 : Web Sockets26m 7s
- Fundamentals of HTML5 : Microdata29m 17s
HTML5 Web Storage, IndexedDB and File System
Intermediate • 5h 29m
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
- Course Introduction29m 44s
- Web Storage45m 6s
- IndexedDB: Introduction and Concepts17m 49s
- IndexedDB: Initialization & CRUD20m 49s
- IndexedDB: Cursors, Indexes and Ranges21m 20s
- IndexedDB: Keys, Capacity, Performance and Versions29m 38s
- IndexedDB: Abstractions & Implementing an Edit Screen44m 58s
- File System: Introduction, Concepts & Initialization21m 21s
- File System: Directories - Create, List, Delete, Move & Copy17m 42s
- File System: Building an Abstraction Layer over Directories28m 56s
- File System: Files - Create, Read, Write, Delete, Move & Copy27m 35s
- File System: Testing Capacity Limits & Implementing a File Editor11m 12s
- Libraries13m 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.