JavaScript and the HTML DOM: Free Course

About this course

Study JavaScript and the HTML DOM through this free English video course from freeCodeCamp. The classroom brings together all 11 public recordings from the selected source curriculum, totaling approximately 1h 8m. You can watch the teaching sequence, search the lesson list and keep track of the recordings you have completed. The course focuses on the subject named in its title. Its value comes from following the explanations and making your own small practice attempts, with enough time to inspect the result and explain the decisions involved.

Course at a glance

What you’ll learn

• Select and change document elements
• Read and update styles through JavaScript
• Use events and event listeners
• Inspect nodes and animation techniques
• Compare browser storage options
• Explain history and window-related examples

Skills you’ll gain

• JavaScript
• DOM
• Events
• Browser APIs

Course Overview

Eleven connected lessons progress from element selection to events, animation, browser APIs, storage and history.

The source lesson list includes “Selecting & Changing Website Elements (DOM manipulation) – Beau teaches JavaScript”, “Animation in the DOM – Beau teaches JavaScript”, “Browser history tutorial – Beau teaches JavaScript”. The classroom retains their original titles and positions. Introductions, supplementary explanations and complete-course recordings remain present whenever they are part of the source. A repeated recording is retained at each original position, allowing the course to be checked against the published teaching sequence.

Elements and styles

Begin with selection and styles. Trace the relationship between a DOM node and the displayed page, then explain how a script targets the intended element.

Events and nodes

Follow the event, listener and node lessons. Identify what triggers an operation and which document changes happen as a result.

Animation and browser context

Study animation, requestAnimationFrame, the window object and pop-up examples. Connect a repeated update with its timing and inspect how it affects page behaviour.

Persistence and navigation

Compare cookies, localStorage, sessionStorage and browser history. Describe the information an application needs to retain and choose a mechanism suited to that example.

Who is this for?

This course suits learners who want the specific subject described above and who can work at the stated level. It is also useful as a recorded reference when revisiting a concept or comparing a practice attempt with a demonstrated example. Beginners should give the foundational explanations time before moving to more elaborate applications. Experienced learners can use the lesson names to locate a topic, then inspect the surrounding context before applying a technique.

Before you start

Basic HTML, CSS and JavaScript are helpful. A browser and code editor are sufficient for a small practice page. The recordings describe the browser APIs and conventions used in their original edition.

Put the lessons into practice

Build a fictional reading list with an add button, a filter and a saved preference. Trace each event from the control to the DOM update. Test an empty value and a repeated action. Store one small preference and explain why the chosen storage mechanism fits it. Add a short animation only after the underlying behaviour is clear, then inspect how the page responds after a reload.

Treat this suggested exercise as independent practice provided by WikiFree. Keep a short working note containing your inputs, assumptions, result and one point you still need to check. Revisit the relevant recording when a step is unclear, then attempt a small variation without following the demonstration line by line. A result you can explain and reproduce is a more useful study outcome than simply recognizing a familiar term. The exercise is not submitted to an instructor for grading.

Certificate / Assessment

Watching these public recordings and using WikiFree completion tracking does not award a certificate, academic credit, an examination voucher or instructor assessment. The video curriculum is the material included here. Separate platform assignments, credentials and paid services are not part of video viewing. Use the practice output to review which concepts you can explain, which steps you can repeat independently and which questions need another look at the teaching.

Frequently asked questions

Provider: freeCodeCamp. Videos play from the freeCodeCamp channel on YouTube.