HTML APIs: Creating Interactive Experiences
html · apis · interactive · experiences · css · web · fundamentals · frontend · development · dom · events · event · playback · animations · audio · content · drag · drop · elements · ani...
This course introduces the fundamental concepts around the Document Object Model (DOM) and shows how to add interactivity to HTML using JavaScript. Throughout the course, a single-page application (a fictional ticket-selling site called GloboTicket) is built and progressively enhanced with DOM manipulation, event handling, keyboard/mouse/touch/pointer input, drag and drop, animations, and audio/video playback.
The Document Object Model (DOM) connects web pages to JavaScript by representing the structure of a document in memory. It is the bridge between the static HTML markup and the dynamic behavior implemented with JavaScript.
Every element that exists in the HTML, or is currently rendered on the page, has a corresponding JavaScript object. These objects expose instance properties and methods, exactly like any other object in JavaScript.
Sign in to read this course
A free account unlocks all 514 courses. 20 are readable without one.
What's inside
7 sections- 1 Table of Contents
- 2 Module 1: Working with the Document Object Model
- 3 Module 2: Enhancing the Interaction with the User
- 4 Module 3: Adding Drag and Drop Support
- 5 Module 4: Animating Your Content
- 6 Module 5: Using Audio and Video in HTML
- 7 Summary
More HTML, CSS & Web Fundamentals courses
View all 10Creating Graphics with Canvas and SVG
The rich features of JavaScript, combined with the power of modern web browsers, have blurred the lines between the capabilities of web-based and native applications. This course discusse...
CSS: Advanced Features
This course built up a layered toolkit for adding depth, color, motion, and typographic polish to a site using only CSS — no images, no JavaScript animation libraries.
CSS: Creating Layouts
css · layouts · html · web · fundamentals · frontend · development · layout · page · responsive · components · grid · clean · flexbox · pies · designing · home · study · visit · accessibi...
Debugging Sites with Chrome DevTools
Google Chrome ships with a powerful set of tools to help developers debug websites. There is no more appropriate place to debug client-side web apps than right in the application where th...
Deploying and Optimizing Websites
Zip --> Kudu[Upload to Kudu Zip Deploy] Kudu --> Extract[Kudu extracts files] Extract --> Recycle[App Service recycles] Recycle --> Live[Site live at azurewebsites.net] flowchart TB You[Y...
HTML & CSS: Building Websites
html · css · websites · web · fundamentals · frontend · development · page · elements · form · images · iframe · introducing · links · pie · site · text · browser · contact · content · co...
Interested in this course?
Contact us to book it or get a custom training plan for your team.