Variables and Functions Practice

This is a structured learning tracker and practice page for the early phase of learning JavaScript. It is divided into three sections. The first section is a table, Learning Progress Overview, that gives a big picture of the learning and a detailed breakdown of specific skills. It also tracks the skill level currently attained. The next section is a Current Practice Work area with the goal of practicing the currently focused skill over and over until it is mastered. The last section, Learning History not only records what has been mastered, it provides a resource should my mastery of particular skills get a little rusty. Getting rusty is a problem when you work as an instructional designer may mean going four years with no javascript coding assignments while other priorities keep you busy.

Learning Progress Overview

This table tracks the big picture of the early stages of learning JavaScript and it allows progress tracking of those skills.

Skill	Level	Description
Set up HTML5 files	Goal	I am learning what automated help the AI gives me in setting up HTML5 files and where I feel the desire to be able to manually code meets with the logic of using AI assistance for speed. I used to be able to do this completely on my own, but I am a little rusty
╟ Create files	Mastery Click to update progress	Create the folder and empty html, css, and js files.
╟ Initialize HTML	Practicing Click to update progress	initialize the html file with the head including giving the Title a logical name. Link to the stylesheet and the javascript files.
╟ HTML5 semantic elements	Not Started Click to update progress	Learn to use semantic HTML5 elements: header, main, section, article, nav, aside, footer for meaningful page structure.
╟ Forms and inputs	Not Started Click to update progress	Create forms with various input types (text, email, password, radio, checkbox) and basic validation attributes.
╟ Media elements	Not Started Click to update progress	Implement images, audio, video elements with proper attributes and responsive design considerations.
╟ Accessibility basics	Not Started Click to update progress	Add ARIA labels, alt text, semantic structure, and keyboard navigation support for screen readers.
╟ HTML validation	Not Started Click to update progress	Use W3C markup validator to check and fix HTML errors, ensuring clean, standards-compliant code.
Understand JavaScript basics	Goal	I am getting familiar with variables, data types, and basic operators in JavaScript.
╟ Variables and data types	Practicing Click to update progress	Master let, const, var declarations and understand strings, numbers, booleans, undefined, null data types.
╟ Operators and expressions	Practicing Click to update progress	Use arithmetic (+, -, *, /), comparison (==, ===, !=, <, >), and logical (&&, \|\|, !) operators effectively.
╟ Conditional statements	Practicing Click to update progress	Implement if/else statements, switch cases, and ternary operators for program flow control.
╟ Loops and iteration	Not Started Click to update progress	Write for loops, while loops, do-while loops, for...of, and for...in loops for repetitive tasks.
╟ Arrays and objects	Not Started Click to update progress	Create, access, and modify arrays and objects; understand methods like push, pop, slice, and object properties.
╟ Error handling	Not Started Click to update progress	Implement try/catch blocks, understand error types, and use debugging techniques like console.log and browser dev tools.
Manipulate the DOM	Goal	I am learning how to use JavaScript to change the content and style of HTML elements.
╟ Element selection	Practicing Click to update progress	Use getElementById, querySelector, querySelectorAll to find and select HTML elements from JavaScript.
╟ Content modification	Practicing Click to update progress	Change element content using innerHTML, textContent, createElement, appendChild, and removeChild methods.
╟ Attribute manipulation	Practicing Click to update progress	Get and set element attributes using getAttribute, setAttribute, and manipulate CSS classes with classList.
╟ Style manipulation	Practicing Click to update progress	Dynamically change CSS properties through JavaScript using element.style and computed styles.
╟ Event handling	Not Started Click to update progress	Add event listeners for clicks, form submissions, key presses; understand event objects and event delegation.
╟ DOM traversal	Not Started Click to update progress	Navigate the DOM tree using parentNode, children, nextSibling, previousSibling, and closest methods.
Work with functions	Goal	I am understanding how to define and call functions in JavaScript.
╟ Function declaration	Practicing Click to update progress	Learn basic function syntax, function statements vs expressions, and proper function naming conventions.
╟ Parameters and arguments	Not Started Click to update progress	Pass data to functions using parameters, understand default parameters, rest parameters, and the arguments object.
╟ Return values	Not Started Click to update progress	Return data from functions, understand return statement behavior, and handle functions that return vs don't return values.
╟ Function scope	Not Started Click to update progress	Understand local vs global scope, variable accessibility, and how functions create their own scope bubbles.
╟ Arrow functions	Not Started Click to update progress	Master ES6 arrow function syntax, understand this binding differences, and when to use arrow vs regular functions.
╟ Higher-order functions	Not Started Click to update progress	Use functions as parameters, create callback functions, and understand array methods like map, filter, reduce.
╟ Closures	Not Started Click to update progress	Understand how functions remember their outer scope, create private variables, and implement closure patterns.

Skill

Level

Description

Set up HTML5 files

Goal

I am learning what automated help the AI gives me in setting up HTML5 files and where I feel the desire to be able to manually code meets with the logic of using AI assistance for speed. I used to be able to do this completely on my own, but I am a little rusty

╟ Create files

Mastery

Create the folder and empty html, css, and js files.

╟ Initialize HTML

Practicing

initialize the html file with the head including giving the Title a logical name. Link to the stylesheet and the javascript files.

╟ HTML5 semantic elements

Not Started

Learn to use semantic HTML5 elements: header, main, section, article, nav, aside, footer for meaningful page structure.

╟ Forms and inputs

Not Started

Create forms with various input types (text, email, password, radio, checkbox) and basic validation attributes.

╟ Media elements

Not Started

Implement images, audio, video elements with proper attributes and responsive design considerations.

╟ Accessibility basics

Not Started

Add ARIA labels, alt text, semantic structure, and keyboard navigation support for screen readers.

╟ HTML validation

Not Started

Use W3C markup validator to check and fix HTML errors, ensuring clean, standards-compliant code.

Understand JavaScript basics

Goal

I am getting familiar with variables, data types, and basic operators in JavaScript.

╟ Variables and data types

Practicing

Master let, const, var declarations and understand strings, numbers, booleans, undefined, null data types.

╟ Operators and expressions

Practicing

Use arithmetic (+, -, *, /), comparison (==, ===, !=, <, >), and logical (&&, ||, !) operators effectively.

╟ Conditional statements

Practicing

Implement if/else statements, switch cases, and ternary operators for program flow control.

╟ Loops and iteration

Not Started

Write for loops, while loops, do-while loops, for...of, and for...in loops for repetitive tasks.

╟ Arrays and objects

Not Started

Create, access, and modify arrays and objects; understand methods like push, pop, slice, and object properties.

╟ Error handling

Not Started

Implement try/catch blocks, understand error types, and use debugging techniques like console.log and browser dev tools.

Manipulate the DOM

Goal

I am learning how to use JavaScript to change the content and style of HTML elements.

╟ Element selection

Practicing

Use getElementById, querySelector, querySelectorAll to find and select HTML elements from JavaScript.

╟ Content modification

Practicing

Change element content using innerHTML, textContent, createElement, appendChild, and removeChild methods.

╟ Attribute manipulation

Practicing

Get and set element attributes using getAttribute, setAttribute, and manipulate CSS classes with classList.

╟ Style manipulation

Practicing

Dynamically change CSS properties through JavaScript using element.style and computed styles.

╟ Event handling

Not Started

Add event listeners for clicks, form submissions, key presses; understand event objects and event delegation.

╟ DOM traversal

Not Started

Navigate the DOM tree using parentNode, children, nextSibling, previousSibling, and closest methods.

Work with functions

Goal

I am understanding how to define and call functions in JavaScript.

╟ Function declaration

Practicing

Learn basic function syntax, function statements vs expressions, and proper function naming conventions.

╟ Parameters and arguments

Not Started

Pass data to functions using parameters, understand default parameters, rest parameters, and the arguments object.

╟ Return values

Not Started

Return data from functions, understand return statement behavior, and handle functions that return vs don't return values.

╟ Function scope

Not Started

Understand local vs global scope, variable accessibility, and how functions create their own scope bubbles.

╟ Arrow functions

Not Started

Master ES6 arrow function syntax, understand this binding differences, and when to use arrow vs regular functions.

╟ Higher-order functions

Not Started

Use functions as parameters, create callback functions, and understand array methods like map, filter, reduce.

╟ Closures

Not Started

Understand how functions remember their outer scope, create private variables, and implement closure patterns.

Learning History

Archive of past practice code organized by topic for review.

This is just placeholder data at the moment:

Variables Practice - October 2025

Achievement: Reached Proficient level

Key Learning: Difference between let, const, var

Code examples: See JavaScript lines 45-78, CSS .variables-practice

Learning history will be added here as practice progresses...

Learning Progress Overview

Current Practice Work

This message will get replaced

Learning History

Variables Practice - October 2025