Paths

HTML5

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

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

by Barry Luijbregts

Apr 23, 2018 / 1h 28m

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 Overview1m
  2. Why You Should Care About How the Web Works13m
  3. Displaying the Web with HTML21m
  4. Styling the Web with CSS22m
  5. Interacting with the Web with JavaScript23m
  6. Where to Go from Here6m

HTML Fundamentals

by Matt Milner

May 18, 2012 / 2h 13m

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 Introduction30m
  2. HTML Text32m
  3. HTML Lists13m
  4. HTML Links16m
  5. HTML Tables23m
  6. HTML Images and Objects17m
Interactive

HTML and CSS: Creating a Basic Website

by Jon Friskics

May 17, 2018 / 4h 30m

4h 30m

Start Course
Description

Learn the fundamentals of HTML and CSS, while building a strong foundation for more advanced front-end development. This course was formerly known as Front-end Foundations on Code School.

Table of contents
  1. HTML2 Videos - 6 Challenges
  2. CSS3 Videos - 4 Challenges
  3. Classes and Layout2 Videos - 7 Challenges
  4. Images3 Videos - 11 Challenges
  5. Fonts and Forms2 Videos - 10 Challenges

HTML5 Fundamentals

by Craig Shoemaker

Mar 3, 2017 / 3h 47m

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 Overview1m
  2. Introduction1h 7m
  3. Finding Parts of the Page15m
  4. Working with User Input43m
  5. Music & Video (without Plugins)20m
  6. Drawing Shapes, Charts, and More49m
  7. Drag and Drop30m
Interactive

HTML 5 and CSS 3: Overview of Tag, Attribute and Selector Additions

by Drew Barontini

May 10, 2018 / 4h 30m

4h 30m

Start Course
Description

Discover the latest versions of HTML and CSS, including HTML5 tags, form elements, attributes, input types, CSS styling, and more. This course was formerly known as Front-end Formations on Code School.

Table of contents
  1. Overview & Updates1 Video - 8 Challenges
  2. HTML5 Elements2 Videos - 11 Challenges
  3. HTML5 Forms1 Video - 5 Challenges
  4. CSS3 Styles2 Videos - 12 Challenges
  5. Fonts & Interactions1 Video - 12 Challenges

Semantic HTML

by Susan Simkins

Jan 21, 2016 / 1h 49m

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 Overview1m
  2. Semantic HTML1h 48m

Meeting Web Accessibility Guidelines (Section 508/ WCAG 2.0)

by Gerard Cohen

Sep 7, 2016 / 1h 44m

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 Overview1m
  2. Choosing a Web Conformance Guideline8m
  3. HTML1h 4m
  4. Media18m
  5. 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

by Gill Cleeren

Feb 24, 2015 / 4h 6m

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 HTML538m
  2. Adding Some Basic CSS and JavaScript31m
  3. Navigation, Forms, and Validation30m
  4. Adding Style and Layout with CSS333m
  5. Adding Functionality Using Built-in JavaScript Libraries43m
  6. Using Video and Adding Graphical Elements with a Canvas42m
  7. Drawing More Graphical Elements with SVG25m

HTML5 Web Component Fundamentals

by Cory House

Jan 9, 2015 / 5h 3m

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 Solution23m
  2. Templates27m
  3. Custom Elements43m
  4. Shadow DOM Fundamentals34m
  5. Shadow DOM Insertion Points & Events53m
  6. Shadow DOM Styling51m
  7. Imports56m
  8. Native Alternatives10m
  9. Resources2m

WebRTC Fundamentals

by Lisa Larson-Kelley

Feb 20, 2014 / 1h 40m

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
  2. Architecture of a WebRTC Application6m
  3. Understanding Server Technologies for WebRTC13m
  4. Introducing the WebRTC API18m
  5. Setting Up Your Development Environment3m
  6. Create a Two-person Video Chat Using Peer.js22m
  7. Create a Multi-person Chat Application Using SimpleWebRTC14m
  8. Where To Go Next4m

HTML5 Audio, Video, and WebRTC

by Mark Boas

Aug 26, 2014 / 5h 10m

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. Introduction12m
  2. Audio and Video Basics38m
  3. Tools and Configuration11m
  4. Introduction to the Media API24m
  5. Buffering, Seeking, Preloading, and the User Experience37m
  6. Subtitles and Playback Rate34m
  7. Canvas and WebGL45m
  8. WebRTC41m
  9. Advanced Audio25m
  10. Wrap-Up37m

HTML5 Browser Caching

by Ben Schwarz

Feb 3, 2012 / 1h 1m

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 Started15m
  2. Feedback13m
  3. JavaScript23m
  4. Rails 3.29m

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

by Craig Shoemaker

Aug 22, 2011 / 2h 45m

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 Applications41m
  2. Fundamentals of HTML5 : Geolocation17m
  3. Fundamentals of HTML5 : Web Storage21m
  4. Fundamentals of HTML5 : Web Workers28m
  5. Fundamentals of HTML5 : Web Sockets26m
  6. Fundamentals of HTML5 : Microdata29m

HTML5 Web Storage, IndexedDB and File System

by Craig Shoemaker

Dec 3, 2013 / 5h 29m

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 Introduction29m
  2. Web Storage45m
  3. IndexedDB: Introduction and Concepts17m
  4. IndexedDB: Initialization & CRUD20m
  5. IndexedDB: Cursors, Indexes and Ranges21m
  6. IndexedDB: Keys, Capacity, Performance and Versions29m
  7. IndexedDB: Abstractions & Implementing an Edit Screen44m
  8. File System: Introduction, Concepts & Initialization21m
  9. File System: Directories - Create, List, Delete, Move & Copy17m
  10. File System: Building an Abstraction Layer over Directories28m
  11. File System: Files - Create, Read, Write, Delete, Move & Copy27m
  12. File System: Testing Capacity Limits & Implementing a File Editor11m
  13. Libraries13m

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.