JavaScript / LESSON 01 OF 35 / FOUNDATION
Give a value a name
Keep track of a score without writing the same number everywhere.
Start here: no earlier lesson in this subject is required.
Unfamiliar words? Start here.
- variable
- A name referring to a value. Assignment changes which value that name holds; it does not automatically keep a history.
01Meet the idea
A value is a piece of data: 10, "Gerry" or true. A variable gives a value a name so you can refer to it later.
02Follow the steps
In JavaScript, let creates a variable you can reassign. score = score + 5 reads the old value, adds five and stores the result.
03Make it yours
Work in this lesson’s editable code box below. A variable holds its current value; it does not remember every previous value automatically. Choose a starting score, then add five.
JavaScript / LIVE EXAMPLE
Where · JavaScript · lesson code boxEdit the complete example in the code box below; use its Run button. Results appear in this page, not in a Windows terminal. WEBTool guide↗
let score = START;
score = score + 5;
console.log(score);
OUTPUTYour result appears here.
Choose an example and run it.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
After let score = 10; score = score + 5; what is score?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
A variable holds its current value; it does not remember every previous value automatically. Choose a starting score, then add five.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
JavaScript / LESSON 02 OF 35 / FOUNDATION
Know what kind of value
A number and some text can look alike but behave differently.
Unfamiliar words? Start here.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
- expression
- A piece of code that produces a value, such as score + 5 or score >= 10.
- boolean
- A true-or-false value. A condition uses it to choose what happens next.
01Meet the idea
JavaScript values have types. A number such as 12 supports arithmetic; a string such as "12" is text; a boolean is true or false.
02Follow the steps
typeof tells you the type of a value. Quotation marks make a string literal, even when the characters inside are digits.
03Make it yours
Work in this lesson’s editable code box below. When one operand is a string, + can join text instead of adding numbers. Explicit conversion with Number makes your intention clearer.
JavaScript / LIVE EXAMPLE
Where · JavaScript · lesson code boxEdit the complete example in the code box below; use its Run button. Results appear in this page, not in a Windows terminal. WEBTool guide↗
console.log(EXPRESSION);
OUTPUTYour result appears here.
Choose an example and run it.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Which expression deliberately converts numeric text before adding?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
When one operand is a string, + can join text instead of adding numbers. Explicit conversion with Number makes your intention clearer.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
Unfamiliar words? Start here.
- operator
- A symbol or keyword performing an operation on values, such as addition, comparison or assignment.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
- expression
- A piece of code that produces a value, such as score + 5 or score >= 10.
- boolean
- A true-or-false value. A condition uses it to choose what happens next.
01Meet the idea
Operators act on values: + adds numbers, * multiplies and >= compares. A comparison produces true or false.
02Follow the steps
In JavaScript, === checks equality without converting one operand to another type. = is assignment, so it means something different.
03Make it yours
Work in this lesson’s editable code box below. Parentheses make grouping explicit. Try the basket expressions and watch arithmetic produce a number while a comparison produces a boolean.
JavaScript / LIVE EXAMPLE
Where · JavaScript · lesson code boxEdit the complete example in the code box below; use its Run button. Results appear in this page, not in a Windows terminal. WEBTool guide↗
const price = 8;
const quantity = 3;
console.log(EXPRESSION);
OUTPUTYour result appears here.
Choose an example and run it.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What does 5 >= 5 return?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Parentheses make grouping explicit. Try the basket expressions and watch arithmetic produce a number while a comparison produces a boolean.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
Unfamiliar words? Start here.
- statement
- An instruction in a program, such as an assignment, a loop or a return.
01Meet the idea
An if statement runs its block when its condition is true. An else block provides the alternative.
02Follow the steps
Conditions often compare values. total >= 20 includes exactly 20; total > 20 does not.
03Make it yours
Work in this lesson’s editable code box below. This shop offers free delivery at £20 or more. Change the basket total to test below, exactly on and above the boundary.
JavaScript / LIVE EXAMPLE
Where · JavaScript · lesson code boxEdit the complete example in the code box below; use its Run button. Results appear in this page, not in a Windows terminal. WEBTool guide↗
const total = TOTAL;
if (total >= 20) {
console.log("Free delivery");
} else {
console.log("Delivery charge");
}
OUTPUTYour result appears here.
Choose an example and run it.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
With this rule, does a £20 basket get free delivery?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
This shop offers free delivery at £20 or more. Change the basket total to test below, exactly on and above the boundary.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
JavaScript / LESSON 05 OF 35 / FOUNDATION
Repeat without repeating yourself
Give the computer a small job to repeat, with a clear stopping point.
Unfamiliar words? Start here.
- loop
- A control structure that repeats instructions. Its condition or sequence determines when repetition ends.
01Meet the idea
A loop repeats a block. A for loop can initialise a counter, test a condition and update the counter after each pass.
02Follow the steps
Here i starts at 1. The body runs while i <= count, and i++ adds one after each pass.
03Make it yours
Work in this lesson’s editable code box below. Try zero, one or three repetitions. Notice that zero skips the body entirely. A missing stopping condition can create an infinite loop.
JavaScript / LIVE EXAMPLE
Where · JavaScript · lesson code boxEdit the complete example in the code box below; use its Run button. Results appear in this page, not in a Windows terminal. WEBTool guide↗
const count = COUNT;
for (let i = 1; i <= count; i++) {
console.log("Light " + i);
}
OUTPUTYour result appears here.
Choose an example and run it.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
How many times does the body run when count is 3?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try zero, one or three repetitions. Notice that zero skips the body entirely. A missing stopping condition can create an infinite loop.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
Unfamiliar words? Start here.
- parameter
- A named input in a function or method declaration. The actual value supplied in a call is its argument.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- Task
- In C#, an object representing completion of work, possibly with a result. Awaiting it observes completion or failure.
01Meet the idea
A function groups a task behind a name. Parameters receive inputs, and return sends a result back to the caller.
02Follow the steps
Declaring a function does not run it. Calling double(4) runs its body with value set to 4.
03Make it yours
Work in this lesson’s editable code box below. Returning a value is different from displaying it. Our example returns a number, then console.log displays that result.
JavaScript / LIVE EXAMPLE
Where · JavaScript · lesson code boxEdit the complete example in the code box below; use its Run button. Results appear in this page, not in a Windows terminal. WEBTool guide↗
function double(value) {
return value * 2;
}
console.log(double(INPUT));
OUTPUTYour result appears here.
Choose an example and run it.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What does return do here?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Returning a value is different from displaying it. Our example returns a number, then console.log displays that result.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
Unfamiliar words? Start here.
- expression
- A piece of code that produces a value, such as score + 5 or score >= 10.
- array
- An ordered collection accessed by position. These languages use zero for the first index, but their array behaviours differ.
- index
- A position in a sequence. In these examples the first index is zero, so an array of three items ends at index two.
- collection
- An object containing several values. Lists, arrays, sets and maps offer different ways to organize and access them.
01Meet the idea
An array is an ordered collection. In JavaScript its first position has index 0, its second has index 1, and so on.
02Follow the steps
Use items[index] to read a position and items.length to find how many items are present.
03Make it yours
Work in this lesson’s editable code box below. Reading past the end gives undefined in JavaScript. That is different from an empty string or the number zero.
JavaScript / LIVE EXAMPLE
Where · JavaScript · lesson code boxEdit the complete example in the code box below; use its Run button. Results appear in this page, not in a Windows terminal. WEBTool guide↗
const colours = ["green", "gold", "cream"];
console.log(EXPRESSION);
OUTPUTYour result appears here.
Choose an example and run it.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What is the index of the second item?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Reading past the end gives undefined in JavaScript. That is different from an empty string or the number zero.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
Unfamiliar words? Start here.
- property
- A named piece of an object’s data or its public access surface. In C#, a property can control reading and writing through accessors.
- variable
- A name referring to a value. Assignment changes which value that name holds; it does not automatically keep a history.
- expression
- A piece of code that produces a value, such as score + 5 or score >= 10.
- array
- An ordered collection accessed by position. These languages use zero for the first index, but their array behaviours differ.
- index
- A position in a sequence. In these examples the first index is zero, so an array of three items ends at index two.
01Meet the idea
An object groups properties: named values describing one thing. A robot might have a name and a battery level.
02Follow the steps
Dot notation reads a property, such as robot.battery. Property names describe meaning, unlike an array index that describes position.
03Make it yours
Work in this lesson’s editable code box below. Objects can be updated. const prevents reassigning the variable itself, but does not freeze the properties of the object it references.
JavaScript / LIVE EXAMPLE
Where · JavaScript · lesson code boxEdit the complete example in the code box below; use its Run button. Results appear in this page, not in a Windows terminal. WEBTool guide↗
const robot = { name: "Pip", battery: 80 };
EXPRESSION
OUTPUTYour result appears here.
Choose an example and run it.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Does const automatically freeze an object’s properties?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Objects can be updated. const prevents reassigning the variable itself, but does not freeze the properties of the object it references.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
JavaScript / LESSON 09 OF 35 / BUILDING
Find the mistake
Compare what you expected with what the program actually does.
Unfamiliar words? Start here.
- validation
- Checking data against an explicit rule before accepting it. Valid syntax, a valid type and a valid business value are separate questions.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
- expression
- A piece of code that produces a value, such as score + 5 or score >= 10.
01Meet the idea
Debugging starts with a small reproducible example. Write down the expected result, run the code and compare.
02Follow the steps
Check values and types at the point where the behaviour changes. A string from an input field can look like a number while still being text.
03Make it yours
Work in this lesson’s editable code box below. This score comes from a text field. Diagnose the type, then convert deliberately before adding. Conversion still needs validation for non-numeric input.
JavaScript / LIVE EXAMPLE
Where · JavaScript · lesson code boxEdit the complete example in the code box below; use its Run button. Results appear in this page, not in a Windows terminal. WEBTool guide↗
const input = "10";
console.log(EXPRESSION);
OUTPUTYour result appears here.
Choose an example and run it.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What should you investigate when "10" + 5 produces "105"?
REPAIR SHOP / FIND THE CAUSE
The score that became text
Add five to the valid numeric text "10" and get fifteen.
const score = input + 5;
With input = "10", the result is the string "105".
Choose a repair. This is a code-review challenge with explained outcomes, not a live compiler.
Inspect the code before choosing a patch.
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
This score comes from a text field. Diagnose the type, then convert deliberately before adding. Conversion still needs validation for non-numeric input.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
JavaScript / LESSON 10 OF 35 / BUILDING
Build a tiny score checker
Combine values, a function, a decision and a loop into one small program.
Unfamiliar words? Start here.
- loop
- A control structure that repeats instructions. Its condition or sequence determines when repetition ends.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- array
- An ordered collection accessed by position. These languages use zero for the first index, but their array behaviours differ.
01Meet the idea
Start with a rule: a score of at least 10 earns a star. Put that decision into a function returning text.
02Follow the steps
Store the scores in an array, then use for...of to visit each score. Call the function and print the result for each one.
03Make it yours
Work in this lesson’s editable code box below. Test boundaries: 9 should miss, 10 should pass, and 11 should pass. These small checks help verify the rule you intended.
JavaScript / LIVE EXAMPLE
Where · JavaScript · lesson code boxEdit the complete example in the code box below; use its Run button. Results appear in this page, not in a Windows terminal. WEBTool guide↗
function badge(score) {
return score >= 10 ? "Star" : "Keep going";
}
for (const score of SCORES) {
console.log(badge(score));
}
OUTPUTYour result appears here.
Choose an example and run it.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Which set best checks the boundary at 10?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Test boundaries: 9 should miss, 10 should pass, and 11 should pass. These small checks help verify the rule you intended.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
C# / LESSON 01 OF 60 / FOUNDATION
Your first message
A console program follows instructions in order. Console.WriteLine sends a value to the terminal.
Start here: no earlier lesson in this subject is required.
01Meet the idea
A console program follows instructions in order. Console.WriteLine sends a value to the terminal.
02Follow the steps
The quotation marks mark a string literal. They are syntax, so they are not printed.
03Make it yours
Work in this lesson’s editable code box below. Change the greeting to your own name. Keep the quotation marks and semicolon.
C# / GUIDED CODE WALKTHROUGH
Where · C# example · Program.csRead this snippet here. For local execution, edit the COMPLETE downloaded Program.cs in VS Code, then use dotnet run in the project’s PowerShell terminal. Do not run a fragment as a complete program. .NTool guide↗
Console.WriteLine("Hello, Pip!");
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Make a small change, then download your code to try in your own editor. Reset example brings the starting code back here.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Which characters belong to the string syntax rather than the printed greeting?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Change the greeting to your own name. Keep the quotation marks and semicolon.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
C# / LESSON 02 OF 60 / FOUNDATION
Names and types
C# checks types before your program runs. An int stores a whole number; a string stores text.
Unfamiliar words? Start here.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
01Meet the idea
C# checks types before your program runs. An int stores a whole number; a string stores text.
02Follow the steps
The assignment starts at ten. += adds five and stores the new value in score.
03Make it yours
Work in this lesson’s editable code box below. Try assigning "ten" to score. Explain why the compiler rejects text here.
C# / GUIDED CODE WALKTHROUGH
Where · C# example · Program.csRead this snippet here. For local execution, edit the COMPLETE downloaded Program.cs in VS Code, then use dotnet run in the project’s PowerShell terminal. Do not run a fragment as a complete program. .NTool guide↗
int score = 10;
score += 5;
Console.WriteLine(score);
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Make a small change, then download your code to try in your own editor. Reset example brings the starting code back here.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What prevents assigning text to score?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try assigning "ten" to score. Explain why the compiler rejects text here.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
C# / LESSON 03 OF 60 / FOUNDATION
Numbers that behave differently
Integer division discards the fractional part. A decimal literal uses the m suffix and supports decimal arithmetic.
01Meet the idea
Integer division discards the fractional part. A decimal literal uses the m suffix and supports decimal arithmetic.
02Follow the steps
The first operation uses integers. The second uses decimals, so the half is retained. Decimal formatting follows your culture.
03Make it yours
Work in this lesson’s editable code box below. Change the numerator to eight. Why do both calculations now have a whole-number result?
C# / GUIDED CODE WALKTHROUGH
Where · C# example · Program.csRead this snippet here. For local execution, edit the COMPLETE downloaded Program.cs in VS Code, then use dotnet run in the project’s PowerShell terminal. Do not run a fragment as a complete program. .NTool guide↗
Console.WriteLine(7 / 2);
Console.WriteLine(7m / 2m);
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Make a small change, then download your code to try in your own editor. Reset example brings the starting code back here.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Why does 7 / 2 produce 3 here?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Change the numerator to eight. Why do both calculations now have a whole-number result?
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
C# / LESSON 04 OF 60 / FOUNDATION
Build readable strings
String interpolation puts expressions inside braces in a string beginning with $.
Unfamiliar words? Start here.
- expression
- A piece of code that produces a value, such as score + 5 or score >= 10.
01Meet the idea
String interpolation puts expressions inside braces in a string beginning with $.
02Follow the steps
The expressions name and stars are evaluated and inserted into the surrounding text.
03Make it yours
Work in this lesson’s editable code box below. Add another pair of braces containing stars + 1 and predict the new text.
C# / GUIDED CODE WALKTHROUGH
Where · C# example · Program.csRead this snippet here. For local execution, edit the COMPLETE downloaded Program.cs in VS Code, then use dotnet run in the project’s PowerShell terminal. Do not run a fragment as a complete program. .NTool guide↗
string name = "Pip";
int stars = 3;
Console.WriteLine($"{name}: {stars} stars");
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Make a small change, then download your code to try in your own editor. Reset example brings the starting code back here.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What do braces inside an interpolated string contain?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add another pair of braces containing stars + 1 and predict the new text.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
C# / LESSON 05 OF 60 / FOUNDATION
Ask a true-or-false question
A bool is true or false. Comparison operators produce booleans and && requires both sides to be true.
Unfamiliar words? Start here.
- operator
- A symbol or keyword performing an operation on values, such as addition, comparison or assignment.
- boolean
- A true-or-false value. A condition uses it to choose what happens next.
01Meet the idea
A bool is true or false. Comparison operators produce booleans and && requires both sides to be true.
02Follow the steps
The battery test is true and online is true. If the left side were false, && would skip the right side.
03Make it yours
Work in this lesson’s editable code box below. Try battery equal to 20. Explain the difference between > and >=.
C# / GUIDED CODE WALKTHROUGH
Where · C# example · Program.csRead this snippet here. For local execution, edit the COMPLETE downloaded Program.cs in VS Code, then use dotnet run in the project’s PowerShell terminal. Do not run a fragment as a complete program. .NTool guide↗
int battery = 80;
bool online = true;
Console.WriteLine(battery > 20 && online);
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Make a small change, then download your code to try in your own editor. Reset example brings the starting code back here.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
When does a && b evaluate b?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try battery equal to 20. Explain the difference between > and >=.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
C# / LESSON 06 OF 60 / BUILDING
Choose a branch
if selects a block using a boolean condition. else handles the alternative.
Unfamiliar words? Start here.
- boolean
- A true-or-false value. A condition uses it to choose what happens next.
01Meet the idea
if selects a block using a boolean condition. else handles the alternative.
02Follow the steps
Exactly twenty passes because >= includes equality. Only one of these branches runs.
03Make it yours
Work in this lesson’s editable code box below. Test 19, 20 and 21. These inputs check the delivery boundary.
C# / GUIDED CODE WALKTHROUGH
Where · C# example · Program.csRead this snippet here. For local execution, edit the COMPLETE downloaded Program.cs in VS Code, then use dotnet run in the project’s PowerShell terminal. Do not run a fragment as a complete program. .NTool guide↗
int total = 20;
if (total >= 20) Console.WriteLine("Free");
else Console.WriteLine("Paid");
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Make a small change, then download your code to try in your own editor. Reset example brings the starting code back here.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Which basket total first qualifies for this rule?
REPAIR SHOP / FIND THE CAUSE
The missing boundary
A basket worth exactly 20 should qualify for free delivery.
bool free = total > 20;
19 → paid · 20 → paid · 21 → free
Choose a repair. This is a code-review challenge with explained outcomes, not a live compiler.
Inspect the code before choosing a patch.
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Test 19, 20 and 21. These inputs check the delivery boundary.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
YOUR NEXT CHAPTER · STILL FREE
Match with switch
A switch expression turns a matched value into a result. The discard pattern _ supplies a fallback.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Count with a loop
A for loop has a starting action, a condition and an update. Its condition is checked before each pass.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Repeat until ready
A while loop repeats as long as its condition is true. Something must move it towards stopping.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Visit an array
An array has a fixed length. foreach visits its values without requiring you to manage an index.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Methods with a job
A method packages behaviour behind a name. Parameters receive arguments and return sends a value back.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Scope and lifetime
A local name is available within its scope. Variables declared inside a block cannot be read outside that block.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Parse input safely
TryParse reports whether conversion succeeded without throwing for ordinary invalid text.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Grow a list
List<T> is a resizable collection of a specified element type. Count reports its current size.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Find values by key
Dictionary<TKey,TValue> maps unique keys to values. TryGetValue handles a potentially missing key explicitly.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Keep only unique values
HashSet<T> represents a set. Adding an already-present value does not create a duplicate.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Create a class
A class defines a reference type with data and behaviour. new creates an instance.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Start valid with constructors
A constructor establishes the initial state of an object when new is called.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Protect an invariant
Encapsulation keeps callers from making invalid changes directly. A method can enforce a rule before updating state.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Share behaviour through inheritance
A derived class can override behaviour that its base class marks virtual.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Depend on an interface
An interface defines a contract. Code can accept any implementation of that contract.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Compose small objects
Composition builds behaviour by giving one object another object to use. It avoids inheriting just to reuse a task.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Copy values or references
Class variables hold references. Assigning one to another copies the reference, not the object.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Describe data with records
Records provide generated value-based equality. A with expression creates a copy with selected changes.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Make absence explicit
Nullable value types can represent no value. ?? supplies a fallback only when the left side is null.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Match the shape of data
Patterns can test a runtime type and introduce a variable that is safe to use within the matching branch.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Handle an exceptional failure
catch handles a matching exception. Catch errors you can meaningfully respond to rather than hiding every failure.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Release resources with using
A using declaration disposes an IDisposable resource when its scope ends, including during exception unwinding.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Reuse an algorithm with generics
Type parameters let code work with different types while preserving compile-time type checking.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Pass behaviour as a value
A delegate represents a callable operation. A lambda supplies a compact implementation.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Notify through events
An event lets subscribers react to a publisher. Only the publisher can raise its event.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Filter a collection with LINQ
Where describes a filter over a sequence. Enumeration visits the items that satisfy the predicate.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Transform and order data
Select projects each value into another form. OrderBy sorts the projected values when the sequence is enumerated.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Understand deferred execution
Many LINQ operations are deferred: the query is evaluated when enumerated. ToList materializes a snapshot of the results.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Produce a sequence with yield
yield return supplies one item at a time to an enumerator. Execution resumes when the consumer requests another item.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Wait without blocking with await
A Task represents eventual completion. await suspends the async method when the task is incomplete; it does not inherently create a thread.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Request cancellation cooperatively
Cancellation is a request that participating operations observe. A cancelled task throws when awaited.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Move data as JSON
Serialization converts data into a transferable format. Deserialization needs validation because external data is not automatically trustworthy.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Test the boundary
A useful test checks a behaviour and explains a failure. Boundary values expose mistakes such as > instead of >=.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Build a score report
Combine a model, a filter and a projection into a small reporting pipeline with an explicit business rule.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
Java / LESSON 01 OF 40 / FOUNDATION
Start a Java program
A conventional Java entry point is a public static main method. Compile a Main.java file and run the Main class.
Start here: no earlier lesson in this subject is required.
Unfamiliar words? Start here.
- method
- A function belonging to a type or object. It accepts inputs, performs a named task and may return a result.
- static
- Belonging to the type rather than a particular instance. Java and C# also use static methods that can be called without creating an object.
01Meet the idea
A conventional Java entry point is a public static main method. Compile a Main.java file and run the Main class.
02Follow the steps
The JVM calls main, which prints the string. The public class name matches Main.java.
03Make it yours
Work in this lesson’s editable code box below. Change the message and compile again. Separate a compiler error from a runtime failure.
Java / GUIDED CODE WALKTHROUGH
Where · Java example · Main.javaRead here; edit the complete Main.java download in VS Code. Compile and run from PowerShell in the same folder. JDKTool guide↗
public class Main {
public static void main(String[] args) {
System.out.println("Hello, Pip!");
}
}
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Make a small change, then download your code to try in your own editor. Reset example brings the starting code back here.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Where does this conventional Java program begin?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Change the message and compile again. Separate a compiler error from a runtime failure.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
Java / LESSON 02 OF 40 / FOUNDATION
Declare typed values
Java variables have declared types. int stores whole numbers and String represents text.
Unfamiliar words? Start here.
- variable
- A name referring to a value. Assignment changes which value that name holds; it does not automatically keep a history.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
01Meet the idea
Java variables have declared types. int stores whole numbers and String represents text.
02Follow the steps
The integer is updated before it is printed. A string cannot be assigned to this int variable.
03Make it yours
Work in this lesson’s editable code box below. Try a final variable and then reassign it. Explain what final prevents.
Java / GUIDED CODE WALKTHROUGH
Where · Java example · Main.javaRead here; edit the complete Main.java download in VS Code. Compile and run from PowerShell in the same folder. JDKTool guide↗
int score = 10;
score += 5;
System.out.println(score);
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Make a small change, then download your code to try in your own editor. Reset example brings the starting code back here.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What would final prevent for a local variable?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try a final variable and then reassign it. Explain what final prevents.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
Java / LESSON 03 OF 40 / FOUNDATION
Compare strings correctly
Use equals to compare String contents. == compares object references, which can appear to work accidentally with interned literals.
Unfamiliar words? Start here.
- reference
- A way to refer to an object. Two variables can refer to the same mutable object, so a change through one may be visible through the other.
- null
- A marker for absence. It is different from zero, false or empty text.
01Meet the idea
Use equals to compare String contents. == compares object references, which can appear to work accidentally with interned literals.
02Follow the steps
These are separate String objects containing equal text. Content equality and reference identity answer different questions.
03Make it yours
Work in this lesson’s editable code box below. Try "Pip".equals(a). Why is a known non-null receiver useful?
Java / GUIDED CODE WALKTHROUGH
Where · Java example · Main.javaRead here; edit the complete Main.java download in VS Code. Compile and run from PowerShell in the same folder. JDKTool guide↗
String a = new String("Pip");
String b = new String("Pip");
System.out.println(a.equals(b));
System.out.println(a == b);
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Make a small change, then download your code to try in your own editor. Reset example brings the starting code back here.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Which compares these strings' contents?
REPAIR SHOP / FIND THE CAUSE
Same name, different objects
Treat two separately constructed strings containing Pip as equal text.
boolean same = new String("Pip") == new String("Pip");For non-null a and b containing Pip, reference comparison returns false.
Choose a repair. This is a code-review challenge with explained outcomes, not a live compiler.
Inspect the code before choosing a patch.
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try "Pip".equals(a). Why is a known non-null receiver useful?
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
Java / LESSON 04 OF 40 / FOUNDATION
Choose with conditions
if uses a boolean expression to decide which branch runs. >= includes the boundary.
Unfamiliar words? Start here.
- expression
- A piece of code that produces a value, such as score + 5 or score >= 10.
- boolean
- A true-or-false value. A condition uses it to choose what happens next.
01Meet the idea
if uses a boolean expression to decide which branch runs. >= includes the boundary.
02Follow the steps
Twenty qualifies and the else branch is skipped.
03Make it yours
Work in this lesson’s editable code box below. Try 19 and 21, then explain what a mistaken > would change.
Java / GUIDED CODE WALKTHROUGH
Where · Java example · Main.javaRead here; edit the complete Main.java download in VS Code. Compile and run from PowerShell in the same folder. JDKTool guide↗
int total = 20;
if (total >= 20) System.out.println("Free");
else System.out.println("Paid");
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Make a small change, then download your code to try in your own editor. Reset example brings the starting code back here.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Why does twenty qualify?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try 19 and 21, then explain what a mistaken > would change.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
Java / LESSON 05 OF 40 / FOUNDATION
Repeat with for
A for loop controls initialization, continuation and update in one header.
Unfamiliar words? Start here.
- loop
- A control structure that repeats instructions. Its condition or sequence determines when repetition ends.
01Meet the idea
A for loop controls initialization, continuation and update in one header.
02Follow the steps
The loop starts at zero and stops before three, giving three iterations.
03Make it yours
Work in this lesson’s editable code box below. Start at one without changing the condition. How many passes remain?
Java / GUIDED CODE WALKTHROUGH
Where · Java example · Main.javaRead here; edit the complete Main.java download in VS Code. Compile and run from PowerShell in the same folder. JDKTool guide↗
for (int i = 0; i < 3; i++) System.out.println(i);
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Make a small change, then download your code to try in your own editor. Reset example brings the starting code back here.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
How many times does this loop run?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Start at one without changing the condition. How many passes remain?
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
YOUR NEXT CHAPTER · STILL FREE
Read an array
Java arrays have a fixed length and zero-based indexes. An invalid index throws an exception.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Extract a method
A static method can be called without creating an instance. Its signature declares parameter and return types.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Model an object
A class groups state and behaviour. Each new expression creates an instance.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Validate construction
Constructors establish starting state. Private fields prevent callers from bypassing your methods.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Program to an interface
An interface defines a behaviour contract. An implementing class supplies public methods for that contract.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Use generic collections
ArrayList<E> grows as items are added while checking the element type at compile time.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Look up a map entry
A Map associates keys with values. getOrDefault supplies a fallback for an absent key.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Handle invalid input
Exceptions transfer control to a matching catch. Handle the specific failure you can explain to the caller.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Transform with streams
A stream pipeline describes operations over data. A terminal operation triggers traversal, and streams cannot be reused after consumption.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Build a small report
A record is a concise data carrier with generated accessors and value-based equality. Combine records with a stream filter.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Transform with map and filter
filter selects values; map transforms them. Both return new arrays instead of replacing the original array.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Destructure and copy
Destructuring extracts named values. Object spread makes a shallow copy, so nested objects remain shared references.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
React to a browser event
addEventListener connects an event to a handler. Use textContent to display text rather than interpreting it as markup.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Wait for a promise
A promise represents eventual completion or failure. await resumes after settlement inside an async context.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Split code into modules
Named exports expose selected values. Imports give another module access to them without adding global variables.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
React / LESSON 01 OF 30 / FOUNDATION
Think in components
A React component is a function returning UI. JSX resembles HTML but is JavaScript syntax transformed by your tooling.
Unfamiliar words? Start here.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- component
- A reusable piece of UI. In these React lessons it is a function that describes elements from props and state.
- render
- Calculate or display a representation. React rendering describes what the UI should be; committing applies changes to the browser.
01Meet the idea
A React component is a function returning UI. JSX resembles HTML but is JavaScript syntax transformed by your tooling.
02Follow the steps
React calls the component to determine the UI. Capitalized component names distinguish them from built-in elements.
03Make it yours
Work in this lesson’s editable code box below. Build a Badge component and render it twice. Complete JavaScript and basic HTML first.
React / GUIDED CODE WALKTHROUGH
Where · React / JSX · lesson code boxEdit the complete component in this lesson’s code box, then use its Run button. The lesson supplies React and the JSX compiler. WEBTool guide↗
function Welcome() {
return <h2>Hello, Pip!</h2>;
}
// Render <Welcome /> in your app.
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Why is Welcome capitalized in JSX?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Build a Badge component and render it twice. Complete JavaScript and basic HTML first.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
React / LESSON 02 OF 30 / FOUNDATION
Pass information with props
Props are inputs passed by the parent. A component reads them to describe its UI rather than modifying them.
Unfamiliar words? Start here.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- component
- A reusable piece of UI. In these React lessons it is a function that describes elements from props and state.
- props
- Inputs supplied by a React component’s parent. Read them to describe UI; do not modify them.
- render
- Calculate or display a representation. React rendering describes what the UI should be; committing applies changes to the browser.
01Meet the idea
Props are inputs passed by the parent. A component reads them to describe its UI rather than modifying them.
02Follow the steps
The parent supplies name. Braces insert the JavaScript value into the JSX output.
03Make it yours
Work in this lesson’s editable code box below. Render two badges with different names using the same component.
React / GUIDED CODE WALKTHROUGH
Where · React / JSX · lesson code boxEdit the complete component in this lesson’s code box, then use its Run button. The lesson supplies React and the JSX compiler. WEBTool guide↗
function Badge({ name }) { return <span>{name}</span>; }
// Parent:
<Badge name="Pip" />
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Who supplies a component's props?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Render two badges with different names using the same component.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
React / LESSON 03 OF 30 / FOUNDATION
Remember with state
useState gives a component memory. Updating state asks React to render again; changing an ordinary local variable does not.
Unfamiliar words? Start here.
- variable
- A name referring to a value. Assignment changes which value that name holds; it does not automatically keep a history.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- component
- A reusable piece of UI. In these React lessons it is a function that describes elements from props and state.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
- render
- Calculate or display a representation. React rendering describes what the UI should be; committing applies changes to the browser.
01Meet the idea
useState gives a component memory. Updating state asks React to render again; changing an ordinary local variable does not.
02Follow the steps
Place this inside a component and import useState from react. The updater calculates the next count from the previous one.
03Make it yours
Work in this lesson’s editable code box below. Click twice and predict the label. Explain why you pass a function to onClick instead of calling it during render.
React / GUIDED CODE WALKTHROUGH
Where · React / JSX · lesson code boxEdit the complete component in this lesson’s code box, then use its Run button. The lesson supplies React and the JSX compiler. WEBTool guide↗
const [count, setCount] = useState(0);
return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What requests a render with the new count?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Click twice and predict the label. Explain why you pass a function to onClick instead of calling it during render.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
React / LESSON 04 OF 30 / FOUNDATION
Choose what to render
Conditional rendering uses ordinary JavaScript decisions to describe different UI for different state or props.
Unfamiliar words? Start here.
- expression
- A piece of code that produces a value, such as score + 5 or score >= 10.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- props
- Inputs supplied by a React component’s parent. Read them to describe UI; do not modify them.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
- DOM
- The browser’s object representation of a document. Scripts can read and change it, and events describe interactions with its elements.
01Meet the idea
Conditional rendering uses ordinary JavaScript decisions to describe different UI for different state or props.
02Follow the steps
false chooses the second branch of the conditional expression. No imperative DOM editing is needed.
03Make it yours
Work in this lesson’s editable code box below. Pass true, then explain why the string "false" would behave differently.
React / GUIDED CODE WALKTHROUGH
Where · React / JSX · lesson code boxEdit the complete component in this lesson’s code box, then use its Run button. The lesson supplies React and the JSX compiler. WEBTool guide↗
function Status({ online }) {
return <p>{online ? "Connected" : "Offline"}</p>;
}
// <Status online={false} />
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What does online={false} render here?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Pass true, then explain why the string "false" would behave differently.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
React / LESSON 05 OF 30 / FOUNDATION
Give list items stable keys
map creates elements from data. A stable key lets React match an item across insertions, removals and reordering.
Unfamiliar words? Start here.
- record
- A concise way to model data in modern Java and C#. The languages generate useful members, but their record details are different.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
- key
- An identifier. React list keys identify records between renders; dictionary or map keys are used to look up values.
01Meet the idea
map creates elements from data. A stable key lets React match an item across insertions, removals and reordering.
02Follow the steps
IDs identify the records independently of position. Random keys force recreation and indexes can mismatch state when order changes.
03Make it yours
Work in this lesson’s editable code box below. Insert a new user at the front. Explain why the existing IDs should stay the same.
React / GUIDED CODE WALKTHROUGH
Where · React / JSX · lesson code boxEdit the complete component in this lesson’s code box, then use its Run button. The lesson supplies React and the JSX compiler. WEBTool guide↗
const users = [{ id: 7, name: "Pip" }, { id: 9, name: "Kit" }];
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Which key is appropriate for a reorderable user list?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Insert a new user at the front. Explain why the existing IDs should stay the same.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
YOUR NEXT CHAPTER · STILL FREE
Control a form field
A controlled input gets its value from state and updates that state on change. A visible label gives the field a name.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Share state deliberately
Lift state to the closest common parent when siblings need one source of truth. Pass values down and callbacks for requested changes.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Synchronise with an effect
An effect synchronises with an external system after a commit. Do not use an effect merely to calculate a value from existing props.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Update collections immutably
State should be replaced rather than mutated. Use a new array and copy only the objects whose values change.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Build a tiny task board
Combine state, events, accessible controls and stable keys into a small list with a clear user action.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
HTML / LESSON 01 OF 15 / FOUNDATION
Give a page a structure
HTML describes content and meaning. A document declares its language and separates metadata from visible content.
Start here: no earlier lesson in this subject is required.
01Meet the idea
HTML describes content and meaning. A document declares its language and separates metadata from visible content.
02Follow the steps
The title is metadata while h1 belongs to the body. lang helps tools interpret the document's language.
03Make it yours
Work in this lesson’s editable code box below. Add a paragraph in the body and inspect the page using browser developer tools.
HTML / GUIDED CODE WALKTHROUGH
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><title>My workshop</title></head><body><h1>My workshop</h1></body></html>
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Which text appears in the browser tab?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a paragraph in the body and inspect the page using browser developer tools.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
HTML / LESSON 02 OF 15 / FOUNDATION
Make headings meaningful
Headings create an outline. Choose heading levels by hierarchy rather than by the size you want on screen.
01Meet the idea
Headings create an outline. Choose heading levels by hierarchy rather than by the size you want on screen.
02Follow the steps
The h2 belongs beneath the h1 in the content hierarchy. CSS can style either without changing its meaning.
03Make it yours
Work in this lesson’s editable code box below. Add a second h2 for Maintenance and decide whether a subsection needs h3.
HTML / GUIDED CODE WALKTHROUGH
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
<h1>Robot workshop</h1>
<h2>Getting started</h2>
<p>Charge your robot before its first trip.</p>
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
How should you choose heading levels?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a second h2 for Maintenance and decide whether a subsection needs h3.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
HTML / LESSON 03 OF 15 / FOUNDATION
Link to a destination
An anchor with href navigates. Descriptive link text tells users where it leads even outside the surrounding paragraph.
01Meet the idea
An anchor with href navigates. Descriptive link text tells users where it leads even outside the surrounding paragraph.
02Follow the steps
The href supplies the destination. Use a button for an action that does not navigate.
03Make it yours
Work in this lesson’s editable code box below. Create an on-page link to a section ID and test it with the keyboard.
HTML / GUIDED CODE WALKTHROUGH
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
<a href="/tutorials">Explore the tutorials</a>
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What makes this anchor navigate?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Create an on-page link to a section ID and test it with the keyboard.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
HTML / LESSON 04 OF 15 / FOUNDATION
Group related items
ul describes an unordered list; ol describes a sequence where order matters. Each item uses li.
01Meet the idea
ul describes an unordered list; ol describes a sequence where order matters. Each item uses li.
02Follow the steps
The browser supplies numbering from the ordered-list structure. The numbers are not manually typed content.
03Make it yours
Work in this lesson’s editable code box below. Change ol to ul and decide which meaning fits assembly instructions.
HTML / GUIDED CODE WALKTHROUGH
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
<ol><li>Charge</li><li>Switch on</li><li>Explore</li></ol>
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Which list indicates that order matters?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Change ol to ul and decide which meaning fits assembly instructions.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
HTML / LESSON 05 OF 15 / FOUNDATION
Describe an image
Alternative text communicates an image's purpose. Decorative images use empty alt; useful images need an appropriate description.
01Meet the idea
Alternative text communicates an image's purpose. Decorative images use empty alt; useful images need an appropriate description.
02Follow the steps
The source must exist. Width and height help reserve space before loading; alternative text is not a keyword-stuffing field.
03Make it yours
Work in this lesson’s editable code box below. Write different alt text for the same image used as a product photo and as purely decorative artwork.
HTML / GUIDED CODE WALKTHROUGH
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
<img src="robot.jpg" alt="Pip robot carrying a parcel" width="640" height="480">
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What should a purely decorative image usually have?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Write different alt text for the same image used as a product photo and as purely decorative artwork.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
HTML / LESSON 06 OF 15 / BUILDING
Use semantic landmarks
main, nav, header and footer describe regions. Landmarks help users navigate a page without reading everything in order.
01Meet the idea
main, nav, header and footer describe regions. Landmarks help users navigate a page without reading everything in order.
02Follow the steps
These elements add structure beyond their default appearance. The main element identifies the page's primary content.
03Make it yours
Work in this lesson’s editable code box below. Add a skip link targeting the main element and test it with Tab.
HTML / GUIDED CODE WALKTHROUGH
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
<header>Workshop</header>
<nav aria-label="Main"><a href="/tutorials">Tutorials</a></nav>
<main><h1>Build a robot</h1></main>
<footer>ClassAntics</footer>
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What does main identify?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a skip link targeting the main element and test it with Tab.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
YOUR NEXT CHAPTER · STILL FREE
Label a form control
A label connected through for and id gives an input an accessible name. name identifies the field in a form submission.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Choose the right button
A button is keyboard-operable by default. In a form its default type is submit, so specify type for other actions.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Make data tables understandable
A table represents relationships in rows and columns. Captions and header cells explain the data.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Build a useful project card
Combine a heading, descriptive content and a meaningful link. Use article when the content can stand independently.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
CSS / LESSON 01 OF 20 / FOUNDATION
Select what to style
CSS rules match elements with selectors. A class can be reused across several elements without changing their HTML meaning.
Unfamiliar words? Start here.
- property
- A named piece of an object’s data or its public access surface. In C#, a property can control reading and writing through accessors.
- selector
- A CSS pattern identifying which elements a rule applies to, such as .card for a class.
01Meet the idea
CSS rules match elements with selectors. A class can be reused across several elements without changing their HTML meaning.
02Follow the steps
The dot selects a class. The declaration changes the color property of matching elements.
03Make it yours
Work in this lesson’s editable code box below. Add another note and an ordinary paragraph. Predict which elements change.
CSS / GUIDED CODE WALKTHROUGH
Where · CSS · lesson code boxEdit CSS in the lesson’s code box and preview below. The HTML fixture is supplied separately; locally, CSS belongs in styles.css. WEBTool guide↗
/* HTML: <p class="note">Ready</p> */
.note { color: darkgreen; }
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What does .note select?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add another note and an ordinary paragraph. Predict which elements change.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
CSS / LESSON 02 OF 20 / FOUNDATION
Understand the cascade
When origin, importance and layers are equal, specificity takes precedence; source order breaks a specificity tie.
Unfamiliar words? Start here.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
- selector
- A CSS pattern identifying which elements a rule applies to, such as .card for a class.
- cascade
- The rules deciding which CSS declaration wins. Origin, importance, layers, specificity and order all contribute.
- specificity
- A comparison of selector weight used at one stage of the cascade. It does not override every other cascade rule.
01Meet the idea
When origin, importance and layers are equal, specificity takes precedence; source order breaks a specificity tie.
02Follow the steps
The class selector is more specific than the type selector. This example assumes ordinary rules in the same cascade layer.
03Make it yours
Work in this lesson’s editable code box below. Reverse the rule order. Then use two .note rules and see when order matters.
CSS / GUIDED CODE WALKTHROUGH
Where · CSS · lesson code boxEdit CSS in the lesson’s code box and preview below. The HTML fixture is supplied separately; locally, CSS belongs in styles.css. WEBTool guide↗
/* <p class="note">Ready</p> */
p { color: red; }
.note { color: green; }
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
Why does green win in this example?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Reverse the rule order. Then use two .note rules and see when order matters.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
CSS / LESSON 03 OF 20 / FOUNDATION
Measure the box model
With content-box sizing, padding and borders add to the declared content width. border-box includes them within the specified width.
Unfamiliar words? Start here.
- padding
- Space between content and its border. How it contributes to the declared width depends on box-sizing.
- margin
- Space outside an element’s border. It remains outside the declared border-box width.
01Meet the idea
With content-box sizing, padding and borders add to the declared content width. border-box includes them within the specified width.
02Follow the steps
Forty pixels of horizontal padding and four of border fit inside 200. Margins remain outside.
03Make it yours
Work in this lesson’s editable code box below. Switch to content-box and calculate the resulting 244px border box.
CSS / GUIDED CODE WALKTHROUGH
Where · CSS · lesson code boxEdit CSS in the lesson’s code box and preview below. The HTML fixture is supplied separately; locally, CSS belongs in styles.css. WEBTool guide↗
.card { width: 200px; padding: 20px; border: 2px solid; box-sizing: border-box; }
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What is the card's border-box width?
REPAIR SHOP / FIND THE CAUSE
The card that will not fit
The outer border box must fit into a 200px slot.
.card { width: 200px; padding: 20px; border: 2px solid; }With default content-box sizing, the outer width is 244px.
Choose a repair. This is a code-review challenge with explained outcomes, not a live compiler.
Inspect the code before choosing a patch.
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Switch to content-box and calculate the resulting 244px border box.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
CSS / LESSON 04 OF 20 / FOUNDATION
Set comfortable type
Relative sizes adapt to user settings. A unitless line-height scales with the element's font size.
Unfamiliar words? Start here.
- rem
- A CSS length relative to the root element’s font size. It can help sizing adapt to user text settings.
01Meet the idea
Relative sizes adapt to user settings. A unitless line-height scales with the element's font size.
02Follow the steps
rem refers to the root font size. ch is based on the zero glyph width, so 60ch is an approximate character measure.
03Make it yours
Work in this lesson’s editable code box below. Increase the browser's text size and check whether the content remains readable without clipping.
CSS / GUIDED CODE WALKTHROUGH
Where · CSS · lesson code boxEdit CSS in the lesson’s code box and preview below. The HTML fixture is supplied separately; locally, CSS belongs in styles.css. WEBTool guide↗
.copy { font-size: 1rem; line-height: 1.6; max-width: 60ch; }
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What is 1rem relative to?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Increase the browser's text size and check whether the content remains readable without clipping.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
CSS / LESSON 05 OF 20 / FOUNDATION
Arrange a row with flexbox
Flexbox lays out items along a main axis. gap separates them and wrapping lets another line form when space runs out.
Unfamiliar words? Start here.
- axis
- A direction used to describe layout. Flexbox arranges items along a main axis and aligns them across the other axis.
- flex
- A one-dimensional layout system that arranges items along a main axis, optionally wrapping them.
01Meet the idea
Flexbox lays out items along a main axis. gap separates them and wrapping lets another line form when space runs out.
02Follow the steps
Flex's default main direction is a row. Wrapping requires the available width to be insufficient for another item.
03Make it yours
Work in this lesson’s editable code box below. Add justify-content: space-between and compare it with the gap at different widths.
CSS / GUIDED CODE WALKTHROUGH
Where · CSS · lesson code boxEdit CSS in the lesson’s code box and preview below. The HTML fixture is supplied separately; locally, CSS belongs in styles.css. WEBTool guide↗
.tools { display: flex; gap: 12px; flex-wrap: wrap; }
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
What permits an additional flex line?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add justify-content: space-between and compare it with the gap at different widths.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
CSS / LESSON 06 OF 20 / BUILDING
Build columns with grid
Grid arranges content in rows and columns. minmax(0, 1fr) lets equal tracks shrink below their content's intrinsic minimum.
Unfamiliar words? Start here.
- grid
- A layout system arranging items in rows and columns.
01Meet the idea
Grid arranges content in rows and columns. minmax(0, 1fr) lets equal tracks shrink below their content's intrinsic minimum.
02Follow the steps
Direct children become grid items. Long content may still need wrapping rules even when tracks can shrink.
03Make it yours
Work in this lesson’s editable code box below. Change three to two and inspect how the items flow into new rows.
CSS / GUIDED CODE WALKTHROUGH
Where · CSS · lesson code boxEdit CSS in the lesson’s code box and preview below. The HTML fixture is supplied separately; locally, CSS belongs in styles.css. WEBTool guide↗
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
How many explicit columns does this rule create?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Change three to two and inspect how the items flow into new rows.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
CSS / LESSON 07 OF 20 / BUILDING
Adapt to smaller screens
Media queries apply rules only when their condition matches. Start with a simple mobile layout and add columns when space allows.
Unfamiliar words? Start here.
- viewport
- The area available for a page to render. A preview frame has its own viewport.
- grid
- A layout system arranging items in rows and columns.
01Meet the idea
Media queries apply rules only when their condition matches. Start with a simple mobile layout and add columns when space allows.
02Follow the steps
The later matching rule replaces the column definition. A breakpoint should reflect content needs rather than a particular phone model.
03Make it yours
Work in this lesson’s editable code box below. Resize around the boundary and test zoom as well as a narrow viewport.
CSS / GUIDED CODE WALKTHROUGH
Where · CSS · lesson code boxEdit CSS in the lesson’s code box and preview below. The HTML fixture is supplied separately; locally, CSS belongs in styles.css. WEBTool guide↗
.cards { display: grid; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .cards { grid-template-columns: 1fr 1fr; } }
WHAT TO EXPECT · GUIDED EXAMPLEYour result appears here.
Step through the explanation, then reveal the expected result. Try the practice challenge in your own editor.
Your turn — try a small change.
Change the example and see what happens in the preview. Your edits here do not change this website. Reset example brings the starting code back.
How this example runs
Open to load the complete example.
HTML used by this CSS lab
Where · HTML · lesson code boxEdit HTML in the lesson’s code box and use its Preview button. Locally, HTML belongs in index.html in an editor. WEBTool guide↗
An unexpected result is useful too. Change one thing at a time, and use your notebook to jot down what you notice.
CHECK YOUR UNDERSTANDING
When are two columns applied?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Resize around the boundary and test zoom as well as a narrow viewport.
Open your practice notebook
Use your own editor for code. These notes are saved on this device when browser storage is available. They are a personal record, not an automated code assessment.
YOUR NEXT CHAPTER · STILL FREE
Place a badge deliberately
An absolutely positioned element uses a containing block, commonly the nearest positioned ancestor. It no longer reserves normal-flow space.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Offer motion without dependence
Transitions animate property changes. Respect reduced-motion preferences and ensure interaction remains understandable without animation.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Build a reusable card theme
Custom properties name reusable design decisions. Combine spacing, color and a flexible layout instead of repeating unrelated magic numbers.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Name related choices with an enum
An enum names a set of integral constants. It makes intent clearer than passing unexplained numbers.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Return several values with a tuple
A tuple groups a small set of values without defining a new domain type. Named elements improve readability.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Choose culture deliberately
Parsing and formatting depend on culture unless one is supplied. Machine-readable numeric text needs an explicit convention.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Group records into categories
GroupBy collects values sharing a key. Each group exposes its Key and can be enumerated independently.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Join matching data
Join combines records whose selected keys compare equal. An inner join omits entries without a match.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Choose the right single-item operation
Single requires exactly one matching item. First needs at least one; their contracts catch different assumptions.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Define an extension method
An extension method is a static method callable with instance-like syntax. It does not add state to the extended type.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Make static state explicit
A static member belongs to the type rather than a particular object. Shared mutable state needs special care under concurrency.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Compare strings with a policy
Choose a string comparison policy to match the data. OrdinalIgnoreCase is useful for many non-linguistic identifiers.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Use dates without a time of day
DateOnly represents a calendar date. It avoids inventing a midnight time and time zone for data such as a birthday.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Read a time interval
TimeSpan represents a duration, not a clock date. TotalMinutes includes the contribution of every hour and day.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Await independent operations together
Task.WhenAll completes after every supplied task completes. It does not itself start work represented by those tasks.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Protect a shared update
Interlocked provides atomic operations on individual supported values. Larger invariants may need a lock or another design.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Use a thread-safe collection appropriately
ConcurrentDictionary supports concurrent operations, but a compound workflow still needs an explicit concurrency design.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Read text a line at a time
A TextReader lets you process text incrementally. ReadLine returns null when no lines remain.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Read JSON and validate it
Deserialization restores a data shape; it does not prove that the data satisfies your business rules.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Return a useful validation result
A validation result can communicate an expected failure without throwing. Keep the rule and the explanation together.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Inject a test double
Supplying a dependency lets a test use a controlled implementation. A double should match the contract, not reproduce the production system.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Separate a rule from presentation
A pure calculation is easier to test when it does not also read input or print messages. The caller handles presentation.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Finish a durable score tracker
A small application needs validation, a data model, persistence and a way to check its rules. Compose those responsibilities deliberately.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Switch between named outcomes
A switch expression produces a result and supports a default arm for unmatched values. This path targets Java 17 or later.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Represent a closed set with enum
An enum defines named instances for a finite set of choices. It is clearer than unrelated string constants.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Understand integer division
When both operands are integral, Java integer division discards the fractional portion towards zero.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Use decimal arithmetic for decimal rules
BigDecimal supports arbitrary-precision decimal arithmetic. Construct from text when exact decimal input matters.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Build text with a mutable buffer
StringBuilder accumulates text without creating a new immutable string for every append operation.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Distinguish aliases from copies
Java object variables hold references. Assigning one reference to another does not clone the object.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Remove duplicates with a set
A Set represents unique elements under its equality rules. HashSet iteration order is not a display-order contract.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Choose generic type bounds
A bounded type parameter limits which types can be supplied while allowing an implementation to use that bound's methods.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Read from a wildcard collection
? extends Number accepts lists of Number subtypes for reading as Number. It does not mean arbitrary numbers can safely be added.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Override behaviour polymorphically
A subclass can override an inherited instance method. Runtime dispatch uses the actual object's implementation.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Compose rather than inherit for reuse
Composition lets an object delegate to a collaborator. It avoids claiming an is-a relationship merely to share code.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Represent optional absence
Optional can express a potentially absent return value. It does not replace every null check or every nullable field.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Catch a specific failure
A matching catch handles a thrown exception. Catching the broadest type can conceal errors you cannot recover from.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Close resources predictably
Try-with-resources closes AutoCloseable resources when the block exits, including through an exception.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Use a lambda as behaviour
A functional interface has a single abstract method. A lambda supplies that behaviour without a separate implementation class.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Map a stream to new values
map transforms each stream item. It does not change the source list's elements in this example.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Reduce values to one result
A reduction combines values with an associative operation and a suitable identity. The identity matters for empty input.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Group stream results
Collectors.groupingBy groups items using a classifier. Do not rely on the default map's iteration order.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Sort with an explicit comparator
A comparator describes ordering separately from the objects. Comparing integer properties directly avoids subtraction overflow tricks.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Model a calendar date
LocalDate represents a date without a time or time zone. It handles calendar boundaries for date arithmetic.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Compose an asynchronous result
CompletableFuture can transform and combine eventual results. join waits and can report exceptional completion.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Update a counter atomically
AtomicInteger offers atomic operations on a shared integer. It does not make a multi-variable invariant automatically atomic.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Validate before storing data
Input validation checks the application's rules after parsing. A successfully parsed integer may still be outside the allowed range.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Make a regression check fail usefully
An explicit assertion-style guard fails when a known rule regresses. Java's assert keyword is disabled by default unless enabled.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Deliver a persistent console project
Combine validated input, records, a collection and a file format. Treat a malformed saved file as an explicit failure rather than silently replacing it.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Keep block scope predictable
let and const are block-scoped. A name inside a nested block can shadow an outer name without changing its value.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Understand truthy values
Conditions convert values to booleans. A non-empty string is truthy even when its characters spell false.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Default only missing values
?? uses a fallback for null or undefined, preserving zero, false and empty strings.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Read optional nested data
Optional chaining stops a property access chain when the value is null or undefined. It does not validate other unexpected types.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Collect arguments with rest
A rest parameter collects remaining arguments into an array. It must be the final parameter.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Accumulate with reduce
reduce carries an accumulator through a sequence. An explicit initial value defines behaviour for an empty array.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Keep unique values with Set
Set stores unique values under its equality rules. It is useful for deduplicating primitive values.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Use a Map for keyed data
Map accepts keys of any type and exposes size, get and has explicitly.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Understand a closure
A closure retains access to its lexical environment after the outer function returns.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Know what this refers to
For a normal method call, this depends on the call site. Extracting a method can lose its receiver.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Create an instance with class
JavaScript class syntax defines constructor and prototype-based behaviour. Each new call constructs an instance.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Handle thrown failures
try/catch handles a thrown exception in its synchronous block, or a rejected promise that is awaited there.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Serialize data deliberately
JSON.stringify converts supported values to JSON text. It does not preserve every JavaScript type or object relationship.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Coordinate promises with Promise.all
Promise.all fulfills with results in input order when every input fulfills; it rejects if an input rejects.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Check an HTTP response before parsing
fetch can fulfill even for HTTP error statuses. Check response.ok and handle network and parsing failures.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Cancel an obsolete request
AbortController lets participating browser APIs observe an abort signal. Cancellation needs explicit handling.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Understand event bubbling
Many events travel from their target up through ancestors. target identifies the origin; currentTarget identifies the listener's element.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Delegate repeated controls
One ancestor listener can handle events from many current or future children. Check the intended target and containment.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Persist a small preference
localStorage stores strings for an origin. Reads, writes and JSON parsing can fail, so storage should have a graceful fallback.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Finish an interactive workshop board
Combine state, rendering, event handling and storage around explicit rules. Keep user text as text rather than HTML.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Derive a value during render
Calculate values from existing props or state when no external synchronization is needed. Duplicated state can drift out of sync.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Queue updates from the previous state
Functional state updates are applied to the pending state in order. Repeating a snapshot-based update can request the same value twice.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Keep render free of side effects
Rendering should describe UI from inputs. Side effects during render can happen more often than expected because rendering may be repeated.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Remember a value without rendering
useRef stores a mutable value across renders without scheduling a render when current changes.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Focus an input with a ref
A DOM ref gives an event handler access to an element. Focus changes belong to an intentional interaction or synchronization step.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Reset state with a deliberate key
State is associated with a component's position and identity. Changing its key causes React to recreate that component's state.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Use a reducer for related transitions
A reducer expresses state transitions as a pure function. It can make several related actions easier to reason about.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Keep unknown reducer actions explicit
A reducer's handling of unexpected actions should be deliberate. A silent fallback can hide a misspelled action during development.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Share a value through context
Context passes a value to descendants without threading a prop through each intermediate component. It is not a replacement for all local state.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Extract a custom Hook
A custom Hook shares stateful logic, not one shared state instance. Each call has its own state unless an external mechanism shares it.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Clean up an effect
An effect that subscribes should return cleanup that reverses the subscription. Development checks may run setup and cleanup again.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Ignore an obsolete response
An older asynchronous response must not overwrite a newer selection. Cleanup can mark an obsolete effect result to be ignored.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Declare effect dependencies honestly
An effect's reactive inputs belong in its dependency list. Omitting one can leave it using an older value.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Memoize an expensive calculation when justified
useMemo caches a calculation between renders while its dependencies are equal. It is a performance tool, not a correctness requirement.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Keep callback identity stable when useful
useCallback can preserve a function reference across renders when dependencies are unchanged. It does not prevent the function from running.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Associate labels with generated IDs
useId generates IDs for accessibility relationships. It is not intended for generating list data keys.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Validate a form before updating state
A submit handler can prevent navigation and validate trimmed input. Browser checks improve feedback but do not replace server validation.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Model loading, success and failure
An explicit status prevents contradictory combinations of booleans. Rendering should account for each state the operation can reach.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Keep keys stable when filtering
Filtering changes which items are rendered, but a record's identity should remain tied to its ID rather than its filtered index.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Finish the React workshop board
Rebuild the same user behaviour using components, controlled input and immutable state. Compare the result against the earlier JavaScript version.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Let the browser choose an image source
picture can provide alternative image formats while img supplies the fallback and alternative text.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Make disclosure available without JavaScript
details and summary create a built-in disclosure control that supports keyboard interaction.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Explain form errors accessibly
aria-describedby connects additional explanatory text to a control. Invalid state and error text should be updated to match actual validation.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Describe a meaningful document title
A unique title helps users identify a tab, bookmark and search result. It should describe the specific page.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Finish the workshop board structure
A semantic foundation should remain usable before styling and scripts. Plan labels, reading order and empty-state content first.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Choose fluid columns with auto-fit
Grid can choose how many tracks fit without a fixed column count. A capped minimum helps avoid overflowing narrow containers.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Use a container's size for a component
Container queries let a component adapt to its container rather than only to the viewport. A suitable ancestor must establish containment.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Give the cascade named layers
Cascade layers provide an explicit order for groups of styles. For normal declarations, later layers beat earlier layers before specificity is compared.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Size type within bounds
clamp sets a minimum, a preferred fluid value and a maximum. Bounds keep responsive text from becoming too small or too large.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Handle long content without clipping
Long unbroken text can overflow a component. Wrapping rules should preserve access to content rather than simply hiding it.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Make state visible for keyboard users
focus-visible styles a focus indicator when the browser determines one should be shown. Do not remove outlines without a replacement.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Understand stacking contexts
A stacking context groups descendants for painting order. A huge z-index cannot escape an ancestor's lower stacking context.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Keep animation inexpensive and optional
Transforms and opacity often avoid layout work, but actual performance still depends on the page. Motion should not carry essential information alone.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Use logical spacing for adaptable layouts
Logical properties follow writing direction. They can make spacing rules work across left-to-right and right-to-left interfaces.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.
YOUR NEXT CHAPTER · STILL FREE
Finish a responsive, accessible board
A finished layout must survive real content, keyboard operation, zoom and narrow screens. A screenshot at one width is not enough.
Ready for the next step? A free ClassAntics account opens the rest of the lessons, stories and interactive examples whenever you’re ready.
No payment details. No subscription. Your next lesson will be waiting after sign-in.
Continue free →Explore the free startersAlready have an account? Use the same sign-in. Checks and notes currently stay on this device.