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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗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
A variable holds its current value; it does not remember every previous value automatically. Choose a starting score, then add five.
JavaScript / LIVE EXAMPLE
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
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗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
When one operand is a string, + can join text instead of adding numbers. Explicit conversion with Number makes your intention clearer.
JavaScript / LIVE EXAMPLE
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
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗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
Parentheses make grouping explicit. Try the basket expressions and watch arithmetic produce a number while a comparison produces a boolean.
JavaScript / LIVE EXAMPLE
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
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗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
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
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
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗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
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
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
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗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
Returning a value is different from displaying it. Our example returns a number, then console.log displays that result.
JavaScript / LIVE EXAMPLE
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
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗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
Reading past the end gives undefined in JavaScript. That is different from an empty string or the number zero.
JavaScript / LIVE EXAMPLE
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
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗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
Objects can be updated. const prevents reassigning the variable itself, but does not freeze the properties of the object it references.
JavaScript / LIVE EXAMPLE
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
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗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
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
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
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗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
Test boundaries: 9 should miss, 10 should pass, and 11 should pass. These small checks help verify the rule you intended.
JavaScript / LIVE EXAMPLE
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
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.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗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
Change the greeting to your own name. Keep the quotation marks and semicolon.
C# / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗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
Try assigning "ten" to score. Explain why the compiler rejects text here.
C# / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗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
Change the numerator to eight. Why do both calculations now have a whole-number result?
C# / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗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
Add another pair of braces containing stars + 1 and predict the new text.
C# / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗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
Try battery equal to 20. Explain the difference between > and >=.
C# / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗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
Test 19, 20 and 21. These inputs check the delivery boundary.
C# / GUIDED CODE WALKTHROUGH
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
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.
C# / LESSON 07 OF 60 / BUILDING
Match with switch
A switch expression turns a matched value into a result. The discard pattern _ supplies a fallback.
Unfamiliar words? Start here.
- expression
- A piece of code that produces a value, such as score + 5 or score >= 10.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A switch expression turns a matched value into a result. The discard pattern _ supplies a fallback.
02Follow the steps
The value two matches the second arm. The fallback handles other integers.
03Make it yours
Add a three-star Gold arm before the fallback and test an unknown value.
C# / GUIDED CODE WALKTHROUGH
int stars = 2;
string badge = stars switch { 1 => "Bronze", 2 => "Silver", _ => "Visitor" };
Console.WriteLine(badge);
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
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 purpose of the _ switch arm?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a three-star Gold arm before the fallback and test an unknown value.
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 08 OF 60 / BUILDING
Count with a loop
A for loop has a starting action, a condition and an update. Its condition is checked before each pass.
Unfamiliar words? Start here.
- loop
- A control structure that repeats instructions. Its condition or sequence determines when repetition ends.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A for loop has a starting action, a condition and an update. Its condition is checked before each pass.
02Follow the steps
i begins at one. After printing three, the update makes i four and the condition fails.
03Make it yours
Change <= to <. Predict which line disappears before running it.
C# / GUIDED CODE WALKTHROUGH
for (int i = 1; i <= 3; i++)
Console.WriteLine(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
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 printing three, what makes the loop stop?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Change <= to <. Predict which line disappears before running it.
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 09 OF 60 / BUILDING
Repeat until ready
A while loop repeats as long as its condition is true. Something must move it towards stopping.
Unfamiliar words? Start here.
- loop
- A control structure that repeats instructions. Its condition or sequence determines when repetition ends.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A while loop repeats as long as its condition is true. Something must move it towards stopping.
02Follow the steps
The battery drops on each pass. At zero the condition is false, so zero is not printed.
03Make it yours
Move the print after battery-- and predict how the output changes.
C# / GUIDED CODE WALKTHROUGH
int battery = 2;
while (battery > 0) {
Console.WriteLine(battery);
battery--;
}
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
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 zero not printed?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Move the print after battery-- and predict how the output changes.
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 10 OF 60 / BUILDING
Visit an array
An array has a fixed length. foreach visits its values without requiring you to manage an index.
Unfamiliar words? Start here.
- loop
- A control structure that repeats instructions. Its condition or sequence determines when repetition ends.
- 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.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
An array has a fixed length. foreach visits its values without requiring you to manage an index.
02Follow the steps
The loop visits the two values in array order. The first array index is zero.
03Make it yours
Read colours[2]. Explain why this throws instead of returning undefined as JavaScript would.
C# / GUIDED CODE WALKTHROUGH
string[] colours = { "green", "gold" };
foreach (string colour in colours) Console.WriteLine(colour);
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
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 happens when reading colours[2] here?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Read colours[2]. Explain why this throws instead of returning undefined as JavaScript would.
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 11 OF 60 / APPLIED
Methods with a job
A method packages behaviour behind a name. Parameters receive arguments and return sends a value back.
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.
- parameter
- A named input in a function or method declaration. The actual value supplied in a call is its argument.
- argument
- A value supplied when calling a function or method. It is received through a parameter.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying 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.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A method packages behaviour behind a name. Parameters receive arguments and return sends a value back.
02Follow the steps
The local function receives four and returns eight. Declaring it does not itself print anything.
03Make it yours
Call Double with zero and a negative number. Do you need extra branches?
C# / GUIDED CODE WALKTHROUGH
static int Double(int value) => value * 2;
Console.WriteLine(Double(4));
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
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 the method body calculate its result?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Call Double with zero and a negative number. Do you need extra branches?
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 12 OF 60 / APPLIED
Scope and lifetime
A local name is available within its scope. Variables declared inside a block cannot be read outside that block.
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.
- scope
- The region of code in which a name can be used. A name declared inside a block usually belongs to that block.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A local name is available within its scope. Variables declared inside a block cannot be read outside that block.
02Follow the steps
The inner block can access score from its enclosing scope. bonus belongs only to the inner block.
03Make it yours
Try printing bonus after the closing brace. Explain the compiler error.
C# / GUIDED CODE WALKTHROUGH
int score = 1;
{ int bonus = 2; score += bonus; }
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
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 can bonus be used?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try printing bonus after the closing brace. Explain the compiler error.
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 13 OF 60 / APPLIED
Parse input safely
TryParse reports whether conversion succeeded without throwing for ordinary invalid 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.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
TryParse reports whether conversion succeeded without throwing for ordinary invalid text.
02Follow the steps
The bool reports success. The out variable receives the parsed number; failed integer parsing sets it to zero.
03Make it yours
Try "forty-two" and then "0". Why must you check valid rather than value alone?
C# / GUIDED CODE WALKTHROUGH
bool valid = int.TryParse("42", out int value);
Console.WriteLine(valid);
Console.WriteLine(value);
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
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 do you distinguish parsing zero from invalid text?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try "forty-two" and then "0". Why must you check valid rather than value alone?
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 14 OF 60 / APPLIED
Grow a list
List<T> is a resizable collection of a specified element type. Count reports its current size.
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.
- 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.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
List<T> is a resizable collection of a specified element type. Count reports its current size.
02Follow the steps
Add appends a second string. Unlike an array, this list can grow without creating a new list yourself.
03Make it yours
Remove Pip, then inspect Count and the item at index zero.
C# / GUIDED CODE WALKTHROUGH
var names = new List<string> { "Pip" };
names.Add("Kit");
Console.WriteLine(names.Count);
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
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 List different from this array?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Remove Pip, then inspect Count and the item at index 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.
C# / LESSON 15 OF 60 / APPLIED
Find values by key
Dictionary<TKey,TValue> maps unique keys to values. TryGetValue handles a potentially missing key explicitly.
Unfamiliar words? Start here.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
- key
- An identifier. React list keys identify records between renders; dictionary or map keys are used to look up values.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Dictionary<TKey,TValue> maps unique keys to values. TryGetValue handles a potentially missing key explicitly.
02Follow the steps
The key kits exists, so the lookup succeeds and the value is printed.
03Make it yours
Look up robots instead. Add an else branch describing an unavailable item.
C# / GUIDED CODE WALKTHROUGH
var stock = new Dictionary<string, int> { ["kits"] = 3 };
if (stock.TryGetValue("kits", out int count)) Console.WriteLine(count);
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
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 TryGetValue report for an absent key?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Look up robots instead. Add an else branch describing an unavailable item.
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 16 OF 60 / APPLIED
Keep only unique values
HashSet<T> represents a set. Adding an already-present value does not create a duplicate.
Unfamiliar words? Start here.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
HashSet<T> represents a set. Adding an already-present value does not create a duplicate.
02Follow the steps
Both strings are equal under the set's default comparer, so there is only one member.
03Make it yours
Add "star". Decide whether your application needs a case-insensitive comparer.
C# / GUIDED CODE WALKTHROUGH
var badges = new HashSet<string>();
badges.Add("Star");
badges.Add("Star");
Console.WriteLine(badges.Count);
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
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 the HashSet count one?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add "star". Decide whether your application needs a case-insensitive comparer.
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 17 OF 60 / APPLIED
Create a class
A class defines a reference type with data and behaviour. new creates an instance.
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.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
- instance
- One object created from a class. Two instances can have different state even when their methods come from the same class.
- 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.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A class defines a reference type with data and behaviour. new creates an instance.
02Follow the steps
The property initializer runs when the Robot is created. The instance exposes its Name property.
03Make it yours
Create a second robot and change its name. Does the first robot change?
C# / GUIDED CODE WALKTHROUGH
var robot = new Robot();
Console.WriteLine(robot.Name);
class Robot { public string Name { get; set; } = "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
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
Do two new Robot expressions create the same instance?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Create a second robot and change its name. Does the first robot 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.
C# / LESSON 18 OF 60 / APPLIED
Start valid with constructors
A constructor establishes the initial state of an object when new is called.
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.
- argument
- A value supplied when calling a function or method. It is received through a parameter.
- constructor
- The initialization operation called when an object is created. Use it to establish a valid starting state.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A constructor establishes the initial state of an object when new is called.
02Follow the steps
The constructor receives Kit and stores it in a getter-only property. Callers cannot later assign Name.
03Make it yours
Reject empty names in the constructor. Decide what should happen when the argument is invalid.
C# / GUIDED CODE WALKTHROUGH
var robot = new Robot("Kit");
Console.WriteLine(robot.Name);
class Robot {
public string Name { get; }
public Robot(string name) { Name = name; }
}
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
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 can callers not assign robot.Name afterward?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Reject empty names in the constructor. Decide what should happen when the argument is invalid.
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 19 OF 60 / APPLIED
Protect an invariant
Encapsulation keeps callers from making invalid changes directly. A method can enforce a rule before updating state.
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.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Encapsulation keeps callers from making invalid changes directly. A method can enforce a rule before updating state.
02Follow the steps
The negative amount is ignored. The private setter prevents callers from assigning a negative Value directly.
03Make it yours
Decide whether ignoring invalid input or throwing would be clearer for this API.
C# / GUIDED CODE WALKTHROUGH
var counter = new Counter();
counter.Add(-2);
Console.WriteLine(counter.Value);
class Counter {
public int Value { get; private set; }
public void Add(int amount) { if (amount > 0) Value += amount; }
}
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
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 direct assignment to counter.Value?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Decide whether ignoring invalid input or throwing would be clearer for this API.
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 20 OF 60 / APPLIED
Share behaviour through inheritance
A derived class can override behaviour that its base class marks virtual.
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.
- 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.
- composition
- Building behaviour by combining collaborating objects. An object has another object rather than inheriting from it.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A derived class can override behaviour that its base class marks virtual.
02Follow the steps
The runtime object is a DeliveryRobot. Virtual dispatch selects its override even through a Robot reference.
03Make it yours
Add a second derived type. Consider when composition would be simpler than a growing hierarchy.
C# / GUIDED CODE WALKTHROUGH
Robot robot = new DeliveryRobot();
Console.WriteLine(robot.Job());
class Robot { public virtual string Job() => "Wait"; }
class DeliveryRobot : Robot { public override string Job() => "Deliver"; }
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
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 implementation does this virtual call select?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a second derived type. Consider when composition would be simpler than a growing hierarchy.
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 21 OF 60 / APPLIED
Depend on an interface
An interface defines a contract. Code can accept any implementation of that contract.
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.
- 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.
- interface
- A contract describing operations a type provides. Callers can depend on the contract instead of one particular implementation.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
An interface defines a contract. Code can accept any implementation of that contract.
02Follow the steps
The variable uses the interface type. Battery supplies the required method.
03Make it yours
Create a Solar implementation and pass it through the same IPower variable.
C# / GUIDED CODE WALKTHROUGH
IPower power = new Battery();
Console.WriteLine(power.Read());
interface IPower { int Read(); }
class Battery : IPower { public int Read() => 80; }
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
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 an interface provide to the caller?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Create a Solar implementation and pass it through the same IPower variable.
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 22 OF 60 / APPLIED
Compose small objects
Composition builds behaviour by giving one object another object to use. It avoids inheriting just to reuse a task.
Unfamiliar words? Start here.
- interface
- A contract describing operations a type provides. Callers can depend on the contract instead of one particular implementation.
- composition
- Building behaviour by combining collaborating objects. An object has another object rather than inheriting from it.
- delegate
- In C#, a typed callable value. It specifies the parameter and result shape of a compatible method or lambda.
- Task
- In C#, an object representing completion of work, possibly with a result. Awaiting it observes completion or failure.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Composition builds behaviour by giving one object another object to use. It avoids inheriting just to reuse a task.
02Follow the steps
Robot delegates the reading to its Battery. The supplied dependency is retained for later calls.
03Make it yours
Replace the concrete Battery dependency with an interface to support another power source.
C# / GUIDED CODE WALKTHROUGH
var robot = new Robot(new Battery());
Console.WriteLine(robot.Charge());
class Battery { public int Level => 80; }
class Robot {
private readonly Battery battery;
public Robot(Battery battery) { this.battery = battery; }
public int Charge() => battery.Level;
}
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
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 does this Robot obtain its charge reading?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Replace the concrete Battery dependency with an interface to support another power source.
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 23 OF 60 / APPLIED
Copy values or references
Class variables hold references. Assigning one to another copies the reference, not the object.
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.
- 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.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Class variables hold references. Assigning one to another copies the reference, not the object.
02Follow the steps
Both names refer to the same Box. Changing it through second is visible through first.
03Make it yours
Change class Box to struct Box and predict the result. Struct assignment copies the value.
C# / GUIDED CODE WALKTHROUGH
var first = new Box();
var second = first;
second.Value = 9;
Console.WriteLine(first.Value);
class Box { public int Value { get; set; } }
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
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 first.Value become nine?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Change class Box to struct Box and predict the result. Struct assignment copies the value.
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 24 OF 60 / APPLIED
Describe data with records
Records provide generated value-based equality. A with expression creates a copy with selected changes.
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.
- expression
- A piece of code that produces a value, such as score + 5 or score >= 10.
- 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.
- shallow
- A copy of the outer structure that can still share nested reference-valued objects with the original.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Records provide generated value-based equality. A with expression creates a copy with selected changes.
02Follow the steps
with creates a new record here; it does not edit first. Reference-valued members are still shallow-copied.
03Make it yours
Compare first to another Badge("Star", 1). Then consider a record containing a mutable list.
C# / GUIDED CODE WALKTHROUGH
var first = new Badge("Star", 1);
var next = first with { Level = 2 };
Console.WriteLine(first.Level);
Console.WriteLine(next.Level);
record Badge(string Name, int Level);
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
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 with do to the original record here?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Compare first to another Badge("Star", 1). Then consider a record containing a mutable list.
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 25 OF 60 / APPLIED
Make absence explicit
Nullable value types can represent no value. ?? supplies a fallback only when the left side is null.
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.
- nullable
- Able to represent absence. A nullable annotation or wrapper is not itself proof that an incoming value is valid.
- null
- A marker for absence. It is different from zero, false or empty text.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Nullable value types can represent no value. ?? supplies a fallback only when the left side is null.
02Follow the steps
score has no integer value, so the expression uses zero. Zero itself would not trigger the fallback.
03Make it yours
Set score to five, then zero. Explain why both are present values.
C# / GUIDED CODE WALKTHROUGH
int? score = null;
Console.WriteLine(score ?? 0);
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
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 ?? use its right-hand value?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Set score to five, then zero. Explain why both are present values.
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 26 OF 60 / DEEPER
Match the shape of data
Patterns can test a runtime type and introduce a variable that is safe to use within the matching branch.
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.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Patterns can test a runtime type and introduce a variable that is safe to use within the matching branch.
02Follow the steps
The object contains a string. The pattern binds text, allowing access to Length without a separate cast.
03Make it yours
Replace the string with 42. Add a branch for an integer.
C# / GUIDED CODE WALKTHROUGH
object value = "Pip";
if (value is string text) Console.WriteLine(text.Length);
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
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 is text available in the matching branch?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Replace the string with 42. Add a branch for an integer.
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 27 OF 60 / DEEPER
Handle an exceptional failure
catch handles a matching exception. Catch errors you can meaningfully respond to rather than hiding every failure.
Unfamiliar words? Start here.
- exception
- A failure that transfers control to a matching handler. Expected validation failures may be better represented by an ordinary result.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
catch handles a matching exception. Catch errors you can meaningfully respond to rather than hiding every failure.
02Follow the steps
Parsing fails and transfers control to the matching catch. For ordinary user input, TryParse is usually clearer.
03Make it yours
Try a number beyond the int range. Identify the different exception instead of assuming this catch covers it.
C# / GUIDED CODE WALKTHROUGH
try { int.Parse("oops"); }
catch (FormatException) { Console.WriteLine("Invalid number"); }
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
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 this catch cover all parsing failures?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try a number beyond the int range. Identify the different exception instead of assuming this catch covers it.
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 28 OF 60 / DEEPER
Release resources with using
A using declaration disposes an IDisposable resource when its scope ends, including during exception unwinding.
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.
- scope
- The region of code in which a name can be used. A name declared inside a block usually belongs to that block.
- exception
- A failure that transfers control to a matching handler. Expected validation failures may be better represented by an ordinary result.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A using declaration disposes an IDisposable resource when its scope ends, including during exception unwinding.
02Follow the steps
ReadLine reads the first line. Disposal happens at the end of the enclosing scope; using does not mean a background operation.
03Make it yours
Move this into a method and identify the exact point where the reader is disposed.
C# / GUIDED CODE WALKTHROUGH
using var reader = new System.IO.StringReader("Pip");
Console.WriteLine(reader.ReadLine());
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
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 is the reader disposed?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Move this into a method and identify the exact point where the reader is disposed.
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 29 OF 60 / DEEPER
Reuse an algorithm with generics
Type parameters let code work with different types while preserving compile-time type checking.
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.
- parameter
- A named input in a function or method declaration. The actual value supplied in a call is its argument.
- array
- An ordered collection accessed by position. These languages use zero for the first index, but their array behaviours differ.
- 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.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Type parameters let code work with different types while preserving compile-time type checking.
02Follow the steps
The compiler infers T as string. The same function can accept an int array without treating everything as object.
03Make it yours
Pass an empty array. Design a clear contract for the missing-first-item case.
C# / GUIDED CODE WALKTHROUGH
static T First<T>(T[] items) => items[0];
Console.WriteLine(First(new[] { "Pip", "Kit" }));
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
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 T represent in First<T>?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Pass an empty array. Design a clear contract for the missing-first-item case.
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 30 OF 60 / DEEPER
Pass behaviour as a value
A delegate represents a callable operation. A lambda supplies a compact implementation.
Unfamiliar words? Start here.
- lambda
- A compact function expression that can be passed as behaviour to another operation.
- delegate
- In C#, a typed callable value. It specifies the parameter and result shape of a compatible method or lambda.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A delegate represents a callable operation. A lambda supplies a compact implementation.
02Follow the steps
Func<int, int> describes one integer input and an integer result. The lambda multiplies its input.
03Make it yours
Supply a different lambda that adds two without changing the calling line.
C# / GUIDED CODE WALKTHROUGH
Func<int, int> doubleIt = value => value * 2;
Console.WriteLine(doubleIt(6));
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
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 Func<int, int> describe?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Supply a different lambda that adds two without changing the calling line.
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 31 OF 60 / DEEPER
Notify through events
An event lets subscribers react to a publisher. Only the publisher can raise its event.
Unfamiliar words? Start here.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
- event
- A notification that something happened, such as a click. An event handler is the code called in response.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
An event lets subscribers react to a publisher. Only the publisher can raise its event.
02Follow the steps
The subscriber registers a handler before Ring invokes it. ?. handles the case with no subscribers.
03Make it yours
Keep a named handler, subscribe it, then unsubscribe it. Consider subscriber lifetime in long-lived publishers.
C# / GUIDED CODE WALKTHROUGH
var alarm = new Alarm();
alarm.Rang += () => Console.WriteLine("Wake up");
alarm.Ring();
class Alarm {
public event Action? Rang;
public void Ring() => Rang?.Invoke();
}
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
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 if Rang has no subscribers?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Keep a named handler, subscribe it, then unsubscribe it. Consider subscriber lifetime in long-lived publishers.
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 32 OF 60 / DEEPER
Filter a collection with LINQ
Where describes a filter over a sequence. Enumeration visits the items that satisfy the predicate.
Unfamiliar words? Start here.
- predicate
- A function that answers true or false, often to decide whether an item belongs in a filtered result.
- array
- An ordered collection accessed by position. These languages use zero for the first index, but their array behaviours differ.
- enumeration
- Visiting the values in a sequence. For a deferred query, this is when its work usually occurs.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Where describes a filter over a sequence. Enumeration visits the items that satisfy the predicate.
02Follow the steps
The predicate rejects two and accepts eight and ten. Where does not change the original array.
03Make it yours
Change the threshold to ten and compare the source array before and after enumeration.
C# / GUIDED CODE WALKTHROUGH
int[] scores = { 2, 8, 10 };
foreach (int score in scores.Where(s => s >= 8)) 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
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 Where remove values from scores?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Change the threshold to ten and compare the source array before and after enumeration.
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 33 OF 60 / DEEPER
Transform and order data
Select projects each value into another form. OrderBy sorts the projected values when the sequence is enumerated.
Unfamiliar words? Start here.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Select projects each value into another form. OrderBy sorts the projected values when the sequence is enumerated.
02Follow the steps
Projection creates uppercase strings. Ordering arranges those results; the original strings are unchanged.
03Make it yours
Project to string lengths instead. Decide whether ordering before or after projection expresses your intention.
C# / GUIDED CODE WALKTHROUGH
var names = new[] { "Kit", "Pip" };
foreach (var name in names.Select(n => n.ToUpperInvariant()).OrderBy(n => n)) Console.WriteLine(name);
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
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 Select do here?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Project to string lengths instead. Decide whether ordering before or after projection expresses your intention.
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 34 OF 60 / DEEPER
Understand deferred execution
Many LINQ operations are deferred: the query is evaluated when enumerated. ToList materializes a snapshot of the results.
Unfamiliar words? Start here.
- LINQ
- C# query operations over data, such as Where for filtering and Select for projection. Many operations run only when results are enumerated.
- deferred
- Described now but evaluated later. A deferred query may observe source changes made before it is enumerated.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Many LINQ operations are deferred: the query is evaluated when enumerated. ToList materializes a snapshot of the results.
02Follow the steps
The second value is added before Count enumerates the query. Saving the query did not freeze the source.
03Make it yours
Insert ToList after Where and before Add. Predict why the count becomes one.
C# / GUIDED CODE WALKTHROUGH
var values = new List<int> { 1 };
var query = values.Where(x => x > 0);
values.Add(2);
Console.WriteLine(query.Count());
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
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 is this query evaluated?
REPAIR SHOP / FIND THE CAUSE
The moving snapshot
Keep the positive values as they were before the source list changed.
var saved = values.Where(x => x > 0);
values.Add(2);
Starting with [1], enumeration after Add sees [1, 2].
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.
Insert ToList after Where and before Add. Predict why the count becomes one.
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 35 OF 60 / DEEPER
Produce a sequence with yield
yield return supplies one item at a time to an enumerator. Execution resumes when the consumer requests another item.
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.
- 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.
- enumeration
- Visiting the values in a sequence. For a deferred query, this is when its work usually occurs.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
yield return supplies one item at a time to an enumerator. Execution resumes when the consumer requests another item.
02Follow the steps
The iterator pauses at each yield. Calling Steps creates an enumerable; enumeration performs its body.
03Make it yours
Add a trace before each yield and stop the consumer after the first value.
C# / GUIDED CODE WALKTHROUGH
static IEnumerable<int> Steps() { yield return 1; yield return 2; }
foreach (int step in Steps()) Console.WriteLine(step);
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
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 an iterator advance past a yield?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a trace before each yield and stop the consumer after the first value.
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 36 OF 60 / DEEPER
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.
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.
- interface
- A contract describing operations a type provides. Callers can depend on the contract instead of one particular implementation.
- async
- Marking code that can suspend while awaiting completion. It does not mean every operation automatically runs on a new thread.
- await
- Wait for an eventual result within an asynchronous flow, continuing afterward or handling its failure.
- Task
- In C#, an object representing completion of work, possibly with a result. Awaiting it observes completion or failure.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A Task represents eventual completion. await suspends the async method when the task is incomplete; it does not inherently create a thread.
02Follow the steps
Done is reached after the delay completes. The ten milliseconds is a requested delay, not an exact timing guarantee.
03Make it yours
Compare awaiting a delay with blocking a UI thread. Which lets the interface continue responding?
C# / GUIDED CODE WALKTHROUGH
Console.WriteLine("Start");
await Task.Delay(10);
Console.WriteLine("Done");
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
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 await necessarily start a new thread?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Compare awaiting a delay with blocking a UI thread. Which lets the interface continue responding?
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 37 OF 60 / DEEPER
Request cancellation cooperatively
Cancellation is a request that participating operations observe. A cancelled task throws when awaited.
Unfamiliar words? Start here.
- await
- Wait for an eventual result within an asynchronous flow, continuing afterward or handling its failure.
- Task
- In C#, an object representing completion of work, possibly with a result. Awaiting it observes completion or failure.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Cancellation is a request that participating operations observe. A cancelled task throws when awaited.
02Follow the steps
The token is already cancelled, so the delay does not wait a second. The catch handles cancellation explicitly.
03Make it yours
Cancel after starting an operation. Explain why ignoring the token prevents cooperative cancellation.
C# / GUIDED CODE WALKTHROUGH
using var source = new CancellationTokenSource();
source.Cancel();
try { await Task.Delay(1000, source.Token); }
catch (OperationCanceledException) { Console.WriteLine("Cancelled"); }
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
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 a cancellation token represent?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Cancel after starting an operation. Explain why ignoring the token prevents cooperative cancellation.
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 38 OF 60 / DEEPER
Move data as JSON
Serialization converts data into a transferable format. Deserialization needs validation because external data is not automatically trustworthy.
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.
- validation
- Checking data against an explicit rule before accepting it. Valid syntax, a valid type and a valid business value are separate questions.
- 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.
- serialization
- Converting data into a representation such as JSON for storage or transfer. Reading it back also requires validation.
- JSON
- A text format for objects, arrays, strings, numbers, booleans and null. JSON text is not a live object reference.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Serialization converts data into a transferable format. Deserialization needs validation because external data is not automatically trustworthy.
02Follow the steps
The anonymous object's public property is written as a JSON member. JSON text is data, not an object reference.
03Make it yours
Add a Level property. Decide how to handle missing or invalid fields when reading JSON back.
C# / GUIDED CODE WALKTHROUGH
var json = System.Text.Json.JsonSerializer.Serialize(new { Name = "Pip" });
Console.WriteLine(json);
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
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 serializer's result?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a Level property. Decide how to handle missing or invalid fields when reading JSON back.
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 39 OF 60 / DEEPER
Test the boundary
A useful test checks a behaviour and explains a failure. Boundary values expose mistakes such as > instead of >=.
Unfamiliar words? Start here.
- 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.
- exception
- A failure that transfers control to a matching handler. Expected validation failures may be better represented by an ordinary result.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A useful test checks a behaviour and explains a failure. Boundary values expose mistakes such as > instead of >=.
02Follow the steps
Nine must fail and ten must pass. This tiny guard illustrates assertions; real projects normally use a test framework.
03Make it yours
Change >= to > and confirm that the guard detects the regression.
C# / GUIDED CODE WALKTHROUGH
static bool EarnsStar(int score) => score >= 10;
if (EarnsStar(9) || !EarnsStar(10)) throw new Exception("Boundary failed");
Console.WriteLine("Checks passed");
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
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 changed rule would this test catch?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Change >= to > and confirm that the guard detects the regression.
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 40 OF 60 / DEEPER
Build a score report
Combine a model, a filter and a projection into a small reporting pipeline with an explicit business rule.
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.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Combine a model, a filter and a projection into a small reporting pipeline with an explicit business rule.
02Follow the steps
The filter selects qualifying scores and the projection formats each one. The rule is separated from display by the pipeline.
03Make it yours
Turn the rule into a method, test its boundary, then accept validated scores from input.
C# / GUIDED CODE WALKTHROUGH
var scores = new[] { 9, 10, 12 };
var stars = scores.Where(s => s >= 10).Select(s => $"Star: {s}");
Console.WriteLine(string.Join("\n", 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
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 scores survive the filter?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Turn the rule into a method, test its boundary, then accept validated scores from 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.
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.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗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
Change the message and compile again. Separate a compiler error from a runtime failure.
Java / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗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
Try a final variable and then reassign it. Explain what final prevents.
Java / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗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
Try "Pip".equals(a). Why is a known non-null receiver useful?
Java / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗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
Try 19 and 21, then explain what a mistaken > would change.
Java / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗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
Start at one without changing the condition. How many passes remain?
Java / GUIDED CODE WALKTHROUGH
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
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.
Java / LESSON 06 OF 40 / BUILDING
Read an array
Java arrays have a fixed length and zero-based indexes. An invalid index throws an exception.
Unfamiliar words? Start here.
- loop
- A control structure that repeats instructions. Its condition or sequence determines when repetition ends.
- 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.
- exception
- A failure that transfers control to a matching handler. Expected validation failures may be better represented by an ordinary result.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
Java arrays have a fixed length and zero-based indexes. An invalid index throws an exception.
02Follow the steps
Index one selects the second item. names.length is two, not the final valid index.
03Make it yours
Iterate with the enhanced for loop and print both names.
Java / GUIDED CODE WALKTHROUGH
String[] names = { "Pip", "Kit" };
System.out.println(names[1]);
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
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 array item has index one?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Iterate with the enhanced for loop and print both names.
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 07 OF 40 / BUILDING
Extract a method
A static method can be called without creating an instance. Its signature declares parameter and return types.
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.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
- 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.
- instance
- One object created from a class. Two instances can have different state even when their methods come from the same class.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A static method can be called without creating an instance. Its signature declares parameter and return types.
02Follow the steps
The method receives four and returns eight to println. Put the declaration inside Main, outside main.
03Make it yours
Call the method with zero and compare returning a value with printing inside the method.
Java / GUIDED CODE WALKTHROUGH
static int doubleIt(int value) { return value * 2; }
// Inside main:
System.out.println(doubleIt(4));
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
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 should this static method declaration go?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Call the method with zero and compare returning a value with printing inside the method.
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 08 OF 40 / BUILDING
Model an object
A class groups state and behaviour. Each new expression creates an instance.
Unfamiliar words? Start here.
- expression
- A piece of code that produces a value, such as score + 5 or score >= 10.
- statement
- An instruction in a program, such as an assignment, a loop or a return.
- instance
- One object created from a class. Two instances can have different state even when their methods come from the same class.
- 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.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A class groups state and behaviour. Each new expression creates an instance.
02Follow the steps
The instance initializer sets name. Put Robot as a nested static class or a separate class, not inside the main statements shown.
03Make it yours
Create another instance and give it a different name.
Java / GUIDED CODE WALKTHROUGH
class Robot { String name = "Pip"; }
// Inside main:
Robot robot = new Robot();
System.out.println(robot.name);
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
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 new Robot() create?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Create another instance and give it a different name.
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 09 OF 40 / BUILDING
Validate construction
Constructors establish starting state. Private fields prevent callers from bypassing your methods.
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.
- argument
- A value supplied when calling a function or method. It is received through a parameter.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- constructor
- The initialization operation called when an object is created. Use it to establish a valid starting state.
- 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.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
Constructors establish starting state. Private fields prevent callers from bypassing your methods.
02Follow the steps
The constructor stores its argument. final prevents assigning a different reference to the field later.
03Make it yours
Reject a null or blank name before assigning the field.
Java / GUIDED CODE WALKTHROUGH
class Robot {
private final String name;
Robot(String name) { this.name = name; }
String name() { return name; }
}
// Inside main:
System.out.println(new Robot("Kit").name());
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
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 private protect here?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Reject a null or blank name before assigning the field.
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 10 OF 40 / BUILDING
Program to an interface
An interface defines a behaviour contract. An implementing class supplies public methods for that contract.
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.
- 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.
- interface
- A contract describing operations a type provides. Callers can depend on the contract instead of one particular implementation.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
An interface defines a behaviour contract. An implementing class supplies public methods for that contract.
02Follow the steps
The variable exposes the Power contract while the Battery object supplies the result.
03Make it yours
Implement Solar and replace the construction without changing the call to level.
Java / GUIDED CODE WALKTHROUGH
interface Power { int level(); }
class Battery implements Power { public int level() { return 80; } }
// Inside main:
Power power = new Battery();
System.out.println(power.level());
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
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 must Battery supply?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Implement Solar and replace the construction without changing the call to level.
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 11 OF 40 / APPLIED
Use generic collections
ArrayList<E> grows as items are added while checking the element type at compile time.
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.
- array
- An ordered collection accessed by position. These languages use zero for the first index, but their array behaviours differ.
- collection
- An object containing several values. Lists, arrays, sets and maps offer different ways to organize and access them.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
ArrayList<E> grows as items are added while checking the element type at compile time.
02Follow the steps
The list contains two strings. Java collection sizes use size(), while arrays use length.
03Make it yours
Remove Pip and inspect the remaining item with get(0).
Java / GUIDED CODE WALKTHROUGH
var names = new java.util.ArrayList<String>();
names.add("Pip");
names.add("Kit");
System.out.println(names.size());
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
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 is the ArrayList size read?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Remove Pip and inspect the remaining item with get(0).
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 12 OF 40 / APPLIED
Look up a map entry
A Map associates keys with values. getOrDefault supplies a fallback for an absent key.
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.
- generic
- Code parameterized by a type, such as a list of strings. Type parameters preserve useful checking while allowing reuse.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
- key
- An identifier. React list keys identify records between renders; dictionary or map keys are used to look up values.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A Map associates keys with values. getOrDefault supplies a fallback for an absent key.
02Follow the steps
robots is not present, so the fallback is returned. Integer is the boxed type used in the generic map.
03Make it yours
Look up kits, then update its existing value with put.
Java / GUIDED CODE WALKTHROUGH
var stock = new java.util.HashMap<String, Integer>();
stock.put("kits", 3);
System.out.println(stock.getOrDefault("robots", 0));
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
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 returned for the absent robots key?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Look up kits, then update its existing value with put.
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 13 OF 40 / APPLIED
Handle invalid input
Exceptions transfer control to a matching catch. Handle the specific failure you can explain to the caller.
Unfamiliar words? Start here.
- exception
- A failure that transfers control to a matching handler. Expected validation failures may be better represented by an ordinary result.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
Exceptions transfer control to a matching catch. Handle the specific failure you can explain to the caller.
02Follow the steps
The text cannot be parsed as an integer, so normal execution of the try block stops.
03Make it yours
Try "42" and add a success path. Avoid catching Exception merely to suppress all errors.
Java / GUIDED CODE WALKTHROUGH
try { Integer.parseInt("oops"); }
catch (NumberFormatException e) { System.out.println("Invalid number"); }
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
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 failure does this catch handle?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try "42" and add a success path. Avoid catching Exception merely to suppress all errors.
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 14 OF 40 / APPLIED
Transform with streams
A stream pipeline describes operations over data. A terminal operation triggers traversal, and streams cannot be reused after consumption.
Unfamiliar words? Start here.
- collection
- An object containing several values. Lists, arrays, sets and maps offer different ways to organize and access them.
- stream
- In Java, a pipeline for processing values. A terminal operation consumes the pipeline; this is different from a file input stream.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A stream pipeline describes operations over data. A terminal operation triggers traversal, and streams cannot be reused after consumption.
02Follow the steps
filter accepts eight and ten. forEach consumes this sequential stream and prints them.
03Make it yours
Use map to double the accepted values. Keep the source collection unchanged.
Java / GUIDED CODE WALKTHROUGH
java.util.List.of(2, 8, 10).stream()
.filter(n -> n >= 8)
.forEach(System.out::println);
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
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 triggers traversal of this stream?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Use map to double the accepted values. Keep the source collection unchanged.
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 15 OF 40 / APPLIED
Build a small report
A record is a concise data carrier with generated accessors and value-based equality. Combine records with a stream filter.
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.
- stream
- In Java, a pipeline for processing values. A terminal operation consumes the pipeline; this is different from a file input stream.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A record is a concise data carrier with generated accessors and value-based equality. Combine records with a stream filter.
02Follow the steps
Only Kit reaches the ten-point threshold. Records require a suitable modern Java version; this path targets Java 17 or later.
03Make it yours
Extract the qualifying rule and test scores of nine, ten and eleven.
Java / GUIDED CODE WALKTHROUGH
record Score(String name, int value) {}
// Inside main:
var scores = java.util.List.of(new Score("Pip", 9), new Score("Kit", 12));
scores.stream().filter(s -> s.value() >= 10).forEach(s -> System.out.println(s.name()));
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
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 record qualifies for the report?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Extract the qualifying rule and test scores of nine, ten and eleven.
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 11 OF 35 / APPLIED
Transform with map and filter
filter selects values; map transforms them. Both return new arrays instead of replacing the original array.
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.
- array
- An ordered collection accessed by position. These languages use zero for the first index, but their array behaviours differ.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
filter selects values; map transforms them. Both return new arrays instead of replacing the original array.
02Follow the steps
Two is excluded, then eight and ten are doubled. The source array still contains its original three values.
03Make it yours
Reverse the order of map and filter. Explain why the result can change.
JavaScript / GUIDED CODE WALKTHROUGH
const scores = [2, 8, 10];
console.log(scores.filter(n => n >= 8).map(n => n * 2).join(", "));
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
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 map replace the source array here?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Reverse the order of map and filter. Explain why the result can 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.
JavaScript / LESSON 12 OF 35 / APPLIED
Destructure and copy
Destructuring extracts named values. Object spread makes a shallow copy, so nested objects remain shared references.
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.
- 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.
- shallow
- A copy of the outer structure that can still share nested reference-valued objects with the original.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
Destructuring extracts named values. Object spread makes a shallow copy, so nested objects remain shared references.
02Follow the steps
The new battery value overrides the spread property. The original top-level object is unchanged.
03Make it yours
Add a nested settings object and investigate why changing it through a shallow copy affects both.
JavaScript / GUIDED CODE WALKTHROUGH
const robot = { name: "Pip", battery: 80 };
const { name } = robot;
const updated = { ...robot, battery: 50 };
console.log(name, robot.battery, updated.battery);
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
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 kind of copy does object spread make?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a nested settings object and investigate why changing it through a shallow copy affects both.
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 13 OF 35 / APPLIED
React to a browser event
addEventListener connects an event to a handler. Use textContent to display text rather than interpreting it as markup.
Unfamiliar words? Start here.
- event
- A notification that something happened, such as a click. An event handler is the code called in response.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
addEventListener connects an event to a handler. Use textContent to display text rather than interpreting it as markup.
02Follow the steps
Registering the handler does not immediately change the label. The browser calls it when the click event occurs.
03Make it yours
Add a counter and update it on every click. Keep a keyboard-operable button.
JavaScript / GUIDED CODE WALKTHROUGH
// A page with <button id="go">Go</button>
const button = document.querySelector("#go");
button.addEventListener("click", () => { button.textContent = "Ready"; });
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
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 the button text change?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a counter and update it on every click. Keep a keyboard-operable button.
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 14 OF 35 / APPLIED
Wait for a promise
A promise represents eventual completion or failure. await resumes after settlement inside an async context.
Unfamiliar words? Start here.
- async
- Marking code that can suspend while awaiting completion. It does not mean every operation automatically runs on a new thread.
- await
- Wait for an eventual result within an asynchronous flow, continuing afterward or handling its failure.
- promise
- A JavaScript object representing eventual completion or failure. Its result is obtained asynchronously.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
A promise represents eventual completion or failure. await resumes after settlement inside an async context.
02Follow the steps
The promise fulfills with Pip. await reads the fulfillment value; a rejected promise would throw at that point.
03Make it yours
Replace resolve with reject and add try/catch inside greet.
JavaScript / GUIDED CODE WALKTHROUGH
async function greet() {
const name = await Promise.resolve("Pip");
console.log(name);
}
greet();
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
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 happens if the awaited promise rejects?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Replace resolve with reject and add try/catch inside greet.
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 15 OF 35 / APPLIED
Split code into modules
Named exports expose selected values. Imports give another module access to them without adding global variables.
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
Named exports expose selected values. Imports give another module access to them without adding global variables.
02Follow the steps
app.js imports the named function from a separate file. In a browser load app.js with a type="module" script through a web server.
03Make it yours
Export a second function and import only what the calling module needs.
JavaScript / GUIDED CODE WALKTHROUGH
// maths.js
export const double = n => n * 2;
// app.js
import { double } from "./maths.js";
console.log(double(4));
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
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 the named import refer to?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Export a second function and import only what the calling module needs.
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 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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗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
Build a Badge component and render it twice. Complete JavaScript and basic HTML first.
React / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗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
Render two badges with different names using the same component.
React / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗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
Click twice and predict the label. Explain why you pass a function to onClick instead of calling it during render.
React / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗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
Pass true, then explain why the string "false" would behave differently.
React / GUIDED CODE WALKTHROUGH
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
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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗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
Insert a new user at the front. Explain why the existing IDs should stay the same.
React / GUIDED CODE WALKTHROUGH
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
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.
React / LESSON 06 OF 30 / BUILDING
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.
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.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
A controlled input gets its value from state and updates that state on change. A visible label gives the field a name.
02Follow the steps
The change handler stores the current input text. Rendering supplies that value back to the field.
03Make it yours
Add a live greeting below the input and a reset button that clears the state.
React / GUIDED CODE WALKTHROUGH
const [name, setName] = useState("");
return <label>Name<input value={name} onChange={e => setName(e.target.value)} /></label>;
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
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 updates this controlled input's value?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a live greeting below the input and a reset button that clears the state.
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 07 OF 30 / BUILDING
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.
Unfamiliar words? Start here.
- callback
- A function given to another operation so it can call that behaviour at the appropriate time.
- 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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
Lift state to the closest common parent when siblings need one source of truth. Pass values down and callbacks for requested changes.
02Follow the steps
The paragraph and button share the parent's state. Extracting them into children should preserve that single owner.
03Make it yours
Extract Display and AddButton components. Pass count to one and an onAdd callback to the other.
React / GUIDED CODE WALKTHROUGH
function Dashboard() {
const [count, setCount] = useState(0);
return <><p>{count}</p><button onClick={() => setCount(c => c + 1)}>Add</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
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 should shared sibling state normally live?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Extract Display and AddButton components. Pass count to one and an onAdd callback to the other.
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 08 OF 30 / BUILDING
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.
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.
- effect
- React synchronization with an external system after a commit. Use event handlers for user actions and ordinary calculations for derived values.
- dependency
- Something another operation relies on. An effect dependency is a reactive input whose change requires resynchronization.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
An effect synchronises with an external system after a commit. Do not use an effect merely to calculate a value from existing props.
02Follow the steps
This is a component excerpt with useEffect imported. count is a dependency because the effect reads it. Subscriptions and timers also need cleanup.
03Make it yours
Change the effect to subscribe to an event and return a function that removes the listener.
React / GUIDED CODE WALKTHROUGH
useEffect(() => {
document.title = `Score: ${count}`;
}, [count]);
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
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 this effect synchronising?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Change the effect to subscribe to an event and return a function that removes the listener.
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 09 OF 30 / BUILDING
Update collections immutably
State should be replaced rather than mutated. Use a new array and copy only the objects whose values change.
Unfamiliar words? Start here.
- array
- An ordered collection accessed by position. These languages use zero for the first index, but their array behaviours differ.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
State should be replaced rather than mutated. Use a new array and copy only the objects whose values change.
02Follow the steps
map creates a new array and spread creates a changed item object. The previous state is left intact.
03Make it yours
Add a second item and verify that finishing item one does not alter item two.
React / GUIDED CODE WALKTHROUGH
const [items, setItems] = useState([{ id: 1, done: false }]);
const finish = () => setItems(old => old.map(item => item.id === 1 ? { ...item, done: true } : item));
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
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 use map and spread for this update?
REPAIR SHOP / FIND THE CAUSE
The task that changed in the past
Toggle one task while preserving previous state for React.
tasks[0].done = true;
setTasks(tasks);
The original state object is mutated and its array reference is reused.
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.
Add a second item and verify that finishing item one does not alter item two.
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 10 OF 30 / BUILDING
Build a tiny task board
Combine state, events, accessible controls and stable keys into a small list with a clear user action.
Unfamiliar words? Start here.
- callback
- A function given to another operation so it can call that behaviour at the appropriate time.
- 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.
- 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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
Combine state, events, accessible controls and stable keys into a small list with a clear user action.
02Follow the steps
The callback identifies the task by ID and replaces its state. React renders the updated label.
03Make it yours
Add a labelled input for new tasks and unique IDs. Test adding, toggling and keyboard operation.
React / GUIDED CODE WALKTHROUGH
function Tasks() {
const [tasks, setTasks] = useState([{ id: 1, title: "Learn", done: false }]);
return <ul>{tasks.map(t => <li key={t.id}><button onClick={() => setTasks(old => old.map(x => x.id === t.id ? { ...x, done: !x.done } : x))}>{t.title}: {t.done ? "done" : "to do"}</button></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
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 identifies the task to toggle?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a labelled input for new tasks and unique IDs. Test adding, toggling and keyboard operation.
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 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.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗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
Add a paragraph in the body and inspect the page using browser developer tools.
HTML / GUIDED CODE WALKTHROUGH
<!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
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.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗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
Add a second h2 for Maintenance and decide whether a subsection needs h3.
HTML / GUIDED CODE WALKTHROUGH
<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
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.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗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
Create an on-page link to a section ID and test it with the keyboard.
HTML / GUIDED CODE WALKTHROUGH
<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
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.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗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
Change ol to ul and decide which meaning fits assembly instructions.
HTML / GUIDED CODE WALKTHROUGH
<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
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.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗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
Write different alt text for the same image used as a product photo and as purely decorative artwork.
HTML / GUIDED CODE WALKTHROUGH
<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
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.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗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
Add a skip link targeting the main element and test it with Tab.
HTML / GUIDED CODE WALKTHROUGH
<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
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.
HTML / LESSON 07 OF 15 / BUILDING
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.
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.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗01Meet the idea
A label connected through for and id gives an input an accessible name. name identifies the field in a form submission.
02Follow the steps
Browser validation helps users but is not server-side security. The for value must match the unique input ID.
03Make it yours
Put the field in a form and test empty and malformed input; plan matching server validation.
HTML / GUIDED CODE WALKTHROUGH
<label for="email">Email address</label>
<input id="email" name="email" type="email" required>
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
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 connects this label and input?
REPAIR SHOP / FIND THE CAUSE
A label with nowhere to go
Clicking the Email label should focus the email field.
<label for="email">Email</label>
<input id="address" type="email">
The label references an ID that does not exist.
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.
Put the field in a form and test empty and malformed input; plan matching server validation.
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 08 OF 15 / BUILDING
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.
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.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗01Meet the idea
A button is keyboard-operable by default. In a form its default type is submit, so specify type for other actions.
02Follow the steps
The first does not submit a surrounding form. Behaviour for preview still requires a handler.
03Make it yours
Place both in a form and check Enter and Space keyboard behaviour.
HTML / GUIDED CODE WALKTHROUGH
<button type="button">Preview</button>
<button type="submit">Send enquiry</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
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 type avoids submitting a surrounding form?
REPAIR SHOP / FIND THE CAUSE
The preview that submits
A Preview button inside a form must not submit the form.
<button>Preview</button>
The default button type in this form is submit.
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.
Place both in a form and check Enter and Space keyboard behaviour.
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 09 OF 15 / BUILDING
Make data tables understandable
A table represents relationships in rows and columns. Captions and header cells explain the data.
Unfamiliar words? Start here.
- scope
- The region of code in which a name can be used. A name declared inside a block usually belongs to that block.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗01Meet the idea
A table represents relationships in rows and columns. Captions and header cells explain the data.
02Follow the steps
Column headers identify the meaning of each cell. Tables are for tabular data, not page layout.
03Make it yours
Add another kit row and read the table using its headers instead of relying on position alone.
HTML / GUIDED CODE WALKTHROUGH
<table><caption>Kit stock</caption><tr><th scope="col">Kit</th><th scope="col">Count</th></tr><tr><td>Starter</td><td>3</td></tr></table>
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
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 describes the table's subject?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add another kit row and read the table using its headers instead of relying on position alone.
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 10 OF 15 / BUILDING
Build a useful project card
Combine a heading, descriptive content and a meaningful link. Use article when the content can stand independently.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗01Meet the idea
Combine a heading, descriptive content and a meaningful link. Use article when the content can stand independently.
02Follow the steps
The structure remains understandable without styling. Avoid nested interactive elements when making larger click targets.
03Make it yours
Add an appropriate image and check reading order before moving on to CSS.
HTML / GUIDED CODE WALKTHROUGH
<article><h2>Robot workshop</h2><p>Build your first parcel robot.</p><a href="/tutorials">Explore workshop lessons</a></article>
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
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 use article for this project card?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add an appropriate image and check reading order before moving on to CSS.
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 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.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗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
Add another note and an ordinary paragraph. Predict which elements change.
CSS / GUIDED CODE WALKTHROUGH
/* 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
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.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗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
Reverse the rule order. Then use two .note rules and see when order matters.
CSS / GUIDED CODE WALKTHROUGH
/* <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
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.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗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
Switch to content-box and calculate the resulting 244px border box.
CSS / GUIDED CODE WALKTHROUGH
.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
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.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗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
Increase the browser's text size and check whether the content remains readable without clipping.
CSS / GUIDED CODE WALKTHROUGH
.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
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.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗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
Add justify-content: space-between and compare it with the gap at different widths.
CSS / GUIDED CODE WALKTHROUGH
.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
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.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗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
Change three to two and inspect how the items flow into new rows.
CSS / GUIDED CODE WALKTHROUGH
.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
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.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗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
Resize around the boundary and test zoom as well as a narrow viewport.
CSS / GUIDED CODE WALKTHROUGH
.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
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.
CSS / LESSON 08 OF 20 / BUILDING
Place a badge deliberately
An absolutely positioned element uses a containing block, commonly the nearest positioned ancestor. It no longer reserves normal-flow space.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
An absolutely positioned element uses a containing block, commonly the nearest positioned ancestor. It no longer reserves normal-flow space.
02Follow the steps
The relative card establishes the containing block. Other content can overlap the badge unless you reserve room.
03Make it yours
Remove position: relative and inspect which ancestor the badge now uses.
CSS / GUIDED CODE WALKTHROUGH
.card { position: relative; }
.badge { position: absolute; top: 12px; right: 12px; }
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
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 element establishes the intended containing block?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Remove position: relative and inspect which ancestor the badge now uses.
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 09 OF 20 / BUILDING
Offer motion without dependence
Transitions animate property changes. Respect reduced-motion preferences and ensure interaction remains understandable without animation.
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.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
Transitions animate property changes. Respect reduced-motion preferences and ensure interaction remains understandable without animation.
02Follow the steps
The media query removes the transition duration. Hover is not available on every device, so it must not hide essential content.
03Make it yours
Add an obvious focus-visible style to interactive cards and test using only the keyboard.
CSS / GUIDED CODE WALKTHROUGH
.card { transition: transform .2s; }
.card:hover { transform: translateY(-4px); }
@media (prefers-reduced-motion: reduce) { .card { transition: none; } }
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
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 the reduced-motion rule remove?
REPAIR SHOP / FIND THE CAUSE
Motion without a choice
Keep the status visible but remove its animation when reduced motion is requested.
.signal { animation: pulse 2s infinite; }The animation continues for everyone.
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.
Add an obvious focus-visible style to interactive cards and test using only 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.
CSS / LESSON 10 OF 20 / BUILDING
Build a reusable card theme
Custom properties name reusable design decisions. Combine spacing, color and a flexible layout instead of repeating unrelated magic numbers.
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.
- padding
- Space between content and its border. How it contributes to the declared width depends on box-sizing.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
Custom properties name reusable design decisions. Combine spacing, color and a flexible layout instead of repeating unrelated magic numbers.
02Follow the steps
The custom property is inherited by descendants. Changing it can restyle related details together.
03Make it yours
Apply this to the HTML project card. Check contrast, narrow screens, zoom and keyboard focus before calling it finished.
CSS / GUIDED CODE WALKTHROUGH
.card { --accent: #dfc58a; padding: 1.5rem; border: 1px solid var(--accent); border-radius: .75rem; }
.card a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
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
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 changing --accent affect here?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Apply this to the HTML project card. Check contrast, narrow screens, zoom and keyboard focus before calling it finished.
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 41 OF 60 / DEEPER
Name related choices with an enum
An enum names a set of integral constants. It makes intent clearer than passing unexplained numbers.
Unfamiliar words? Start here.
- enum
- A named set of choices. Java enums are named instances; C# enums are named integral constants.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
An enum names a set of integral constants. It makes intent clearer than passing unexplained numbers.
02Follow the steps
The named value Ready is formatted as its name. An enum can still contain an undefined numeric value after a cast, so validate external input.
03Make it yours
Add a Working state and handle it explicitly in a switch.
C# / GUIDED CODE WALKTHROUGH
Status state = Status.Ready;
Console.WriteLine(state);
enum Status { Waiting, Ready }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a Working state and handle it explicitly in a switch.
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 42 OF 60 / DEEPER
Return several values with a tuple
A tuple groups a small set of values without defining a new domain type. Named elements improve readability.
Unfamiliar words? Start here.
- tuple
- A small group of values treated as one value. Names can make its positions easier to understand.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
- 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.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A tuple groups a small set of values without defining a new domain type. Named elements improve readability.
02Follow the steps
The second tuple element is named Max. Names help source readability but are not a substitute for a domain model with behaviour.
03Make it yours
Deconstruct the tuple into two locals and print the difference.
C# / GUIDED CODE WALKTHROUGH
static (int Min, int Max) Bounds() => (2, 8);
var range = Bounds();
Console.WriteLine(range.Max);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Deconstruct the tuple into two locals and print the difference.
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 43 OF 60 / DEEPER
Choose culture deliberately
Parsing and formatting depend on culture unless one is supplied. Machine-readable numeric text needs an explicit convention.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Parsing and formatting depend on culture unless one is supplied. Machine-readable numeric text needs an explicit convention.
02Follow the steps
Both parsing and formatting use the same invariant convention. This is separate from formatting a price for a human in their own locale.
03Make it yours
Format the value with a specific regional culture and compare the separator.
C# / GUIDED CODE WALKTHROUGH
decimal value = decimal.Parse("3.50", System.Globalization.CultureInfo.InvariantCulture);
Console.WriteLine(value.ToString("0.00", System.Globalization.CultureInfo.InvariantCulture));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Format the value with a specific regional culture and compare the separator.
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 44 OF 60 / DEEPER
Group records into categories
GroupBy collects values sharing a key. Each group exposes its Key and can be enumerated independently.
Unfamiliar words? Start here.
- LINQ
- C# query operations over data, such as Where for filtering and Select for projection. Many operations run only when results are enumerated.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
- key
- An identifier. React list keys identify records between renders; dictionary or map keys are used to look up values.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
GroupBy collects values sharing a key. Each group exposes its Key and can be enumerated independently.
02Follow the steps
The two three-letter words share a group. LINQ to Objects yields groups in first-key encounter order here.
03Make it yours
Add another two-letter word and predict which count changes.
C# / GUIDED CODE WALKTHROUGH
var words = new[] { "cat", "dog", "ox" };
foreach (var group in words.GroupBy(w => w.Length)) Console.WriteLine($"{group.Key}: {group.Count()}");
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add another two-letter word and predict which count changes.
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 45 OF 60 / DEEPER
Join matching data
Join combines records whose selected keys compare equal. An inner join omits entries without a match.
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.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
- key
- An identifier. React list keys identify records between renders; dictionary or map keys are used to look up values.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Join combines records whose selected keys compare equal. An inner join omits entries without a match.
02Follow the steps
Only ID two appears in both sequences. Joining by display name would make identity depend on text that can change.
03Make it yours
Add a score for ID one and explain the new result.
C# / GUIDED CODE WALKTHROUGH
var names = new[] { (Id: 1, Name: "Pip"), (Id: 2, Name: "Kit") };
var scores = new[] { (Id: 2, Value: 12) };
var report = names.Join(scores, n => n.Id, s => s.Id, (n, s) => $"{n.Name}: {s.Value}");
Console.WriteLine(string.Join(", ", report));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a score for ID one and explain the new 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 46 OF 60 / DEEPER
Choose the right single-item operation
Single requires exactly one matching item. First needs at least one; their contracts catch different assumptions.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Single requires exactly one matching item. First needs at least one; their contracts catch different assumptions.
02Follow the steps
There is exactly one item. Single throws if the sequence is empty or has multiple items, rather than silently choosing one.
03Make it yours
Try zero and two items. Decide whether an optional or an exactly-one contract fits your use case.
C# / GUIDED CODE WALKTHROUGH
int[] values = { 7 };
Console.WriteLine(values.Single());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try zero and two items. Decide whether an optional or an exactly-one contract fits your use case.
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 47 OF 60 / DEEPER
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.
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.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
- scope
- The region of code in which a name can be used. A name declared inside a block usually belongs to that block.
- parameter
- A named input in a function or method declaration. The actual value supplied in a call is its argument.
- instance
- One object created from a class. Two instances can have different state even when their methods come from the same class.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
An extension method is a static method callable with instance-like syntax. It does not add state to the extended type.
02Follow the steps
The this parameter enables the call syntax. The method still belongs to a static class and must be in scope.
03Make it yours
Add an extension returning whether a number is even. Keep domain rules out of a catch-all extensions class.
C# / GUIDED CODE WALKTHROUGH
Console.WriteLine(3.Double());
static class NumberExtensions { public static int Double(this int value) => value * 2; }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add an extension returning whether a number is even. Keep domain rules out of a catch-all extensions class.
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 48 OF 60 / DEEPER
Make static state explicit
A static member belongs to the type rather than a particular object. Shared mutable state needs special care under concurrency.
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.
- instance
- One object created from a class. Two instances can have different state even when their methods come from the same class.
- 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.
- atomic
- Performed as one indivisible operation from the perspective of other participating threads. A sequence of atomic operations is not automatically an atomic workflow.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A static member belongs to the type rather than a particular object. Shared mutable state needs special care under concurrency.
02Follow the steps
Both calls change the same type-level value. This increment is not an atomic concurrency strategy.
03Make it yours
Compare a static counter with one counter per instance, then consider concurrent callers.
C# / GUIDED CODE WALKTHROUGH
Counter.Add();
Counter.Add();
Console.WriteLine(Counter.Total);
static class Counter { public static int Total { get; private set; } public static void Add() => Total++; }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Compare a static counter with one counter per instance, then consider concurrent callers.
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 49 OF 60 / DEEPER
Compare strings with a policy
Choose a string comparison policy to match the data. OrdinalIgnoreCase is useful for many non-linguistic identifiers.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Choose a string comparison policy to match the data. OrdinalIgnoreCase is useful for many non-linguistic identifiers.
02Follow the steps
Case is ignored using ordinal comparison. Sorting words for people may require a different, culture-aware policy.
03Make it yours
Use Ordinal instead and predict the result; document the policy for your identifiers.
C# / GUIDED CODE WALKTHROUGH
Console.WriteLine(string.Equals("KIT", "kit", StringComparison.OrdinalIgnoreCase));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Use Ordinal instead and predict the result; document the policy for your identifiers.
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 50 OF 60 / DEEPER
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.
Unfamiliar words? Start here.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
DateOnly represents a calendar date. It avoids inventing a midnight time and time zone for data such as a birthday.
02Follow the steps
Adding a day crosses the month boundary correctly. A date is not an instant on a global clock.
03Make it yours
Try a leap-year February boundary and decide where DateTimeOffset would be more appropriate.
C# / GUIDED CODE WALKTHROUGH
var day = new DateOnly(2026, 1, 31);
Console.WriteLine(day.AddDays(1).ToString("yyyy-MM-dd", System.Globalization.CultureInfo.InvariantCulture));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try a leap-year February boundary and decide where DateTimeOffset would be more appropriate.
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 51 OF 60 / DEEPER
Read a time interval
TimeSpan represents a duration, not a clock date. TotalMinutes includes the contribution of every hour and day.
Unfamiliar words? Start here.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
- component
- A reusable piece of UI. In these React lessons it is a function that describes elements from props and state.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
TimeSpan represents a duration, not a clock date. TotalMinutes includes the contribution of every hour and day.
02Follow the steps
Hours is the hour component; TotalMinutes is the whole duration expressed in minutes.
03Make it yours
Compare Minutes with TotalMinutes for the same interval.
C# / GUIDED CODE WALKTHROUGH
var duration = TimeSpan.FromMinutes(90);
Console.WriteLine(duration.Hours);
Console.WriteLine(duration.TotalMinutes);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Compare Minutes with TotalMinutes for the same interval.
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 52 OF 60 / DEEPER
Await independent operations together
Task.WhenAll completes after every supplied task completes. It does not itself start work represented by those tasks.
Unfamiliar words? Start here.
- array
- An ordered collection accessed by position. These languages use zero for the first index, but their array behaviours differ.
- await
- Wait for an eventual result within an asynchronous flow, continuing afterward or handling its failure.
- Task
- In C#, an object representing completion of work, possibly with a result. Awaiting it observes completion or failure.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Task.WhenAll completes after every supplied task completes. It does not itself start work represented by those tasks.
02Follow the steps
The returned array follows input task order, not completion order. These sample tasks are already complete.
03Make it yours
Use two independent asynchronous operations and consider how you will report one failure.
C# / GUIDED CODE WALKTHROUGH
var results = await Task.WhenAll(Task.FromResult(2), Task.FromResult(3));
Console.WriteLine(results.Sum());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Use two independent asynchronous operations and consider how you will report one 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.
C# / LESSON 53 OF 60 / DEEPER
Protect a shared update
Interlocked provides atomic operations on individual supported values. Larger invariants may need a lock or another design.
Unfamiliar words? Start here.
- thread
- A flow of execution. Shared mutable data accessed by several threads needs a deliberate concurrency strategy.
- atomic
- Performed as one indivisible operation from the perspective of other participating threads. A sequence of atomic operations is not automatically an atomic workflow.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Interlocked provides atomic operations on individual supported values. Larger invariants may need a lock or another design.
02Follow the steps
Each increment is atomic, so concurrent updates are not lost. This does not make every surrounding operation thread-safe.
03Make it yours
Compare with count++ under repeated concurrent runs; a race is not guaranteed to fail on every run.
C# / GUIDED CODE WALKTHROUGH
int count = 0;
Parallel.For(0, 100, _ => Interlocked.Increment(ref count));
Console.WriteLine(count);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Compare with count++ under repeated concurrent runs; a race is not guaranteed to fail on every run.
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 54 OF 60 / DEEPER
Use a thread-safe collection appropriately
ConcurrentDictionary supports concurrent operations, but a compound workflow still needs an explicit concurrency design.
Unfamiliar words? Start here.
- collection
- An object containing several values. Lists, arrays, sets and maps offer different ways to organize and access them.
- delegate
- In C#, a typed callable value. It specifies the parameter and result shape of a compatible method or lambda.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
- effect
- React synchronization with an external system after a commit. Use event handlers for user actions and ordinary calculations for derived values.
- key
- An identifier. React list keys identify records between renders; dictionary or map keys are used to look up values.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
ConcurrentDictionary supports concurrent operations, but a compound workflow still needs an explicit concurrency design.
02Follow the steps
The absent key uses the add value. Update delegates can be called more than once during contention, so avoid side effects in them.
03Make it yours
Call AddOrUpdate again and predict the new value.
C# / GUIDED CODE WALKTHROUGH
var counts = new System.Collections.Concurrent.ConcurrentDictionary<string, int>();
counts.AddOrUpdate("kits", 1, (_, old) => old + 1);
Console.WriteLine(counts["kits"]);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Call AddOrUpdate again and predict the new value.
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 55 OF 60 / DEEPER
Read text a line at a time
A TextReader lets you process text incrementally. ReadLine returns null when no lines remain.
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.
- null
- A marker for absence. It is different from zero, false or empty text.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A TextReader lets you process text incrementally. ReadLine returns null when no lines remain.
02Follow the steps
The loop reads a line, tests for end of input, then processes it. An empty line is different from null.
03Make it yours
Insert a blank line and ensure it does not incorrectly end the loop.
C# / GUIDED CODE WALKTHROUGH
using var reader = new System.IO.StringReader("Pip\nKit");
string? line;
while ((line = reader.ReadLine()) is not null) Console.WriteLine(line.ToUpperInvariant());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Insert a blank line and ensure it does not incorrectly end the 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.
C# / LESSON 56 OF 60 / DEEPER
Read JSON and validate it
Deserialization restores a data shape; it does not prove that the data satisfies your business rules.
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.
- null
- A marker for absence. It is different from zero, false or empty text.
- JSON
- A text format for objects, arrays, strings, numbers, booleans and null. JSON text is not a live object reference.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Deserialization restores a data shape; it does not prove that the data satisfies your business rules.
02Follow the steps
The JSON parses into a non-null record and the value passes the rule. Malformed JSON requires separate error handling.
03Make it yours
Try a negative value, null JSON and malformed JSON; treat these as different cases.
C# / GUIDED CODE WALKTHROUGH
var data = System.Text.Json.JsonSerializer.Deserialize<Score>("{\"Value\":12}");
Console.WriteLine(data is not null && data.Value >= 0 ? "Valid" : "Invalid");
record Score(int Value);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try a negative value, null JSON and malformed JSON; treat these as different cases.
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 57 OF 60 / DEEPER
Return a useful validation result
A validation result can communicate an expected failure without throwing. Keep the rule and the explanation together.
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.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying 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.
- exception
- A failure that transfers control to a matching handler. Expected validation failures may be better represented by an ordinary result.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A validation result can communicate an expected failure without throwing. Keep the rule and the explanation together.
02Follow the steps
The invalid input returns a meaningful result. Exceptions remain appropriate for failures outside the normal contract.
03Make it yours
Add an upper bound of one hundred and test both boundaries.
C# / GUIDED CODE WALKTHROUGH
static (bool Valid, string Message) Check(int score) => score >= 0 ? (true, "Accepted") : (false, "Score must be non-negative");
Console.WriteLine(Check(-1).Message);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add an upper bound of one hundred and test both boundaries.
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 58 OF 60 / DEEPER
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.
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.
- interface
- A contract describing operations a type provides. Callers can depend on the contract instead of one particular implementation.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
- dependency
- Something another operation relies on. An effect dependency is a reactive input whose change requires resynchronization.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
Supplying a dependency lets a test use a controlled implementation. A double should match the contract, not reproduce the production system.
02Follow the steps
The greeting depends on an interface and the supplied implementation returns predictable data. No external service is involved.
03Make it yours
Supply a different name source and test the greeting without network access.
C# / GUIDED CODE WALKTHROUGH
var greeting = new Greeting(new FixedName());
Console.WriteLine(greeting.Read());
interface IName { string Read(); }
class FixedName : IName { public string Read() => "Pip"; }
class Greeting { private readonly IName source; public Greeting(IName source) { this.source = source; } public string Read() => "Hello " + source.Read(); }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Supply a different name source and test the greeting without network access.
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 59 OF 60 / DEEPER
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.
Unfamiliar words? Start here.
- interface
- A contract describing operations a type provides. Callers can depend on the contract instead of one particular implementation.
- 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.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A pure calculation is easier to test when it does not also read input or print messages. The caller handles presentation.
02Follow the steps
Total calculates a result from its inputs; the caller decides how it is displayed. This division enables reuse in a console or web interface.
03Make it yours
Test an empty sequence, then change only the display text.
C# / GUIDED CODE WALKTHROUGH
static int Total(IEnumerable<int> values) => values.Sum();
int result = Total(new[] { 2, 3 });
Console.WriteLine($"Total: {result}");
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Test an empty sequence, then change only the display 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 60 OF 60 / DEEPER
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.
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.
- validation
- Checking data against an explicit rule before accepting it. Valid syntax, a valid type and a valid business value are separate questions.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start here with no programming experience. Examples target modern .NET console projects with implicit usings and nullable checking enabled. Sixty lessons build a practical foundation, not an exhaustive language reference. To practise locally, install a current .NET SDK, run dotnet new console -n LearningLab, open that folder and replace Program.cs with one example at a time. Run dotnet run from the project folder.
Official learning reference ↗01Meet the idea
A small application needs validation, a data model, persistence and a way to check its rules. Compose those responsibilities deliberately.
02Follow the steps
The report uses two separate questions: total records and qualifying records. Saving and loading belongs outside this calculation.
03Make it yours
Use the C# project brief below to accept input, save records and verify the report after restarting.
C# / GUIDED CODE WALKTHROUGH
var scores = new[] { 9, 10, 12 };
var summary = new { Count = scores.Length, Stars = scores.Count(s => s >= 10) };
Console.WriteLine($"{summary.Count} scores; {summary.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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Use the C# project brief below to accept input, save records and verify the report after restarting.
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 16 OF 40 / DEEPER
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.
Unfamiliar words? Start here.
- expression
- A piece of code that produces a value, such as score + 5 or score >= 10.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A switch expression produces a result and supports a default arm for unmatched values. This path targets Java 17 or later.
02Follow the steps
The second case matches and supplies the expression's result. Arrow cases do not fall through.
03Make it yours
Add a Gold case and test an unknown level.
Java / GUIDED CODE WALKTHROUGH
int level = 2;
String badge = switch (level) { case 1 -> "Bronze"; case 2 -> "Silver"; default -> "Visitor"; };
System.out.println(badge);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a Gold case and test an unknown level.
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 17 OF 40 / DEEPER
Represent a closed set with enum
An enum defines named instances for a finite set of choices. It is clearer than unrelated string constants.
Unfamiliar words? Start here.
- enum
- A named set of choices. Java enums are named instances; C# enums are named integral constants.
- instance
- One object created from a class. Two instances can have different state even when their methods come from the same class.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
An enum defines named instances for a finite set of choices. It is clearer than unrelated string constants.
02Follow the steps
The enum constant identifies a valid named state. Parsing arbitrary input still needs handling for unknown names.
03Make it yours
Use the enum in a switch and decide how to translate user-facing labels.
Java / GUIDED CODE WALKTHROUGH
enum Status { WAITING, READY }
// Inside main:
System.out.println(Status.READY);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Use the enum in a switch and decide how to translate user-facing labels.
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 18 OF 40 / DEEPER
Understand integer division
When both operands are integral, Java integer division discards the fractional portion towards zero.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
When both operands are integral, Java integer division discards the fractional portion towards zero.
02Follow the steps
The floating-point second operand changes the second operation to floating-point division.
03Make it yours
Try negative seven and explain why truncation towards zero is not the same as floor.
Java / GUIDED CODE WALKTHROUGH
System.out.println(7 / 2);
System.out.println(7 / 2.0);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try negative seven and explain why truncation towards zero is not the same as floor.
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 19 OF 40 / DEEPER
Use decimal arithmetic for decimal rules
BigDecimal supports arbitrary-precision decimal arithmetic. Construct from text when exact decimal input matters.
Unfamiliar words? Start here.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
BigDecimal supports arbitrary-precision decimal arithmetic. Construct from text when exact decimal input matters.
02Follow the steps
Text construction preserves the intended decimal values. Division may require an explicit rounding policy.
03Make it yours
Compare compareTo with equals for values having different scales.
Java / GUIDED CODE WALKTHROUGH
var price = new java.math.BigDecimal("0.10");
System.out.println(price.add(new java.math.BigDecimal("0.20")));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Compare compareTo with equals for values having different scales.
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 20 OF 40 / DEEPER
Build text with a mutable buffer
StringBuilder accumulates text without creating a new immutable string for every append operation.
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.
- immutable
- Not changed after creation. To represent a change, create a new value. A read-only reference does not necessarily make the object it points to immutable.
- thread
- A flow of execution. Shared mutable data accessed by several threads needs a deliberate concurrency strategy.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
StringBuilder accumulates text without creating a new immutable string for every append operation.
02Follow the steps
append returns the builder, allowing calls to chain. It is not inherently a thread-safe shared buffer.
03Make it yours
Append a number and inspect how it is represented.
Java / GUIDED CODE WALKTHROUGH
var text = new StringBuilder("Hello");
text.append(" ").append("Pip");
System.out.println(text);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Append a number and inspect how it is represented.
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 21 OF 40 / DEEPER
Distinguish aliases from copies
Java object variables hold references. Assigning one reference to another does not clone the object.
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.
- 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.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
Java object variables hold references. Assigning one reference to another does not clone the object.
02Follow the steps
Both variables refer to the same list. A new list constructed from first would copy the list structure, not deeply clone its members.
03Make it yours
Make a new ArrayList from first and compare independent additions.
Java / GUIDED CODE WALKTHROUGH
var first = new java.util.ArrayList<String>();
var second = first;
second.add("Pip");
System.out.println(first.size());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Make a new ArrayList from first and compare independent additions.
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 22 OF 40 / DEEPER
Remove duplicates with a set
A Set represents unique elements under its equality rules. HashSet iteration order is not a display-order contract.
Unfamiliar words? Start here.
- collection
- An object containing several values. Lists, arrays, sets and maps offer different ways to organize and access them.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A Set represents unique elements under its equality rules. HashSet iteration order is not a display-order contract.
02Follow the steps
Equal strings occupy one set entry. Use an ordered collection when order is part of the requirement.
03Make it yours
Add Kit and choose a collection if insertion order matters.
Java / GUIDED CODE WALKTHROUGH
var names = new java.util.HashSet<String>();
names.add("Pip");
names.add("Pip");
System.out.println(names.size());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add Kit and choose a collection if insertion 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.
Java / LESSON 23 OF 40 / DEEPER
Choose generic type bounds
A bounded type parameter limits which types can be supplied while allowing an implementation to use that bound's methods.
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.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
- 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.
- 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.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A bounded type parameter limits which types can be supplied while allowing an implementation to use that bound's methods.
02Follow the steps
The bound guarantees a Number method is available. Conversion to double may lose precision for some Number types.
03Make it yours
Try an Integer and a Double, then explain why a String is rejected.
Java / GUIDED CODE WALKTHROUGH
static <T extends Number> double twice(T value) { return value.doubleValue() * 2; }
// Inside main:
System.out.println(twice(3));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try an Integer and a Double, then explain why a String is rejected.
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 24 OF 40 / DEEPER
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.
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.
- 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.
- 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.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
? extends Number accepts lists of Number subtypes for reading as Number. It does not mean arbitrary numbers can safely be added.
02Follow the steps
The method reads Number values without knowing the exact list element subtype. Adding a Double could violate a List<Integer> contract.
03Make it yours
Explain when a consumer parameter with ? super Integer could be appropriate.
Java / GUIDED CODE WALKTHROUGH
static double sum(java.util.List<? extends Number> values) { double total = 0; for (Number n : values) total += n.doubleValue(); return total; }
// Inside main:
System.out.println(sum(java.util.List.of(2, 3)));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Explain when a consumer parameter with ? super Integer could be appropriate.
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 25 OF 40 / DEEPER
Override behaviour polymorphically
A subclass can override an inherited instance method. Runtime dispatch uses the actual object's implementation.
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.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- instance
- One object created from a class. Two instances can have different state even when their methods come from the same class.
- 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.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A subclass can override an inherited instance method. Runtime dispatch uses the actual object's implementation.
02Follow the steps
The reference type does not force the base implementation. @Override lets the compiler check the intended override.
03Make it yours
Change the method signature accidentally and observe what the annotation helps detect.
Java / GUIDED CODE WALKTHROUGH
class Robot { String job() { return "Wait"; } }
class Courier extends Robot { @Override String job() { return "Deliver"; } }
// Inside main:
Robot robot = new Courier();
System.out.println(robot.job());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Change the method signature accidentally and observe what the annotation helps detect.
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 26 OF 40 / DEEPER
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.
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.
- constructor
- The initialization operation called when an object is created. Use it to establish a valid starting state.
- interface
- A contract describing operations a type provides. Callers can depend on the contract instead of one particular implementation.
- composition
- Building behaviour by combining collaborating objects. An object has another object rather than inheriting from it.
- delegate
- In C#, a typed callable value. It specifies the parameter and result shape of a compatible method or lambda.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
Composition lets an object delegate to a collaborator. It avoids claiming an is-a relationship merely to share code.
02Follow the steps
Robot has a Battery; it is not a Battery. Constructor injection would make this collaborator replaceable.
03Make it yours
Supply Battery through the constructor and consider an interface for testing.
Java / GUIDED CODE WALKTHROUGH
class Battery { int level() { return 80; } }
class Robot { private final Battery battery = new Battery(); int charge() { return battery.level(); } }
// Inside main:
System.out.println(new Robot().charge());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Supply Battery through the constructor and consider an interface for testing.
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 27 OF 40 / DEEPER
Represent optional absence
Optional can express a potentially absent return value. It does not replace every null check or every nullable field.
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.
- nullable
- Able to represent absence. A nullable annotation or wrapper is not itself proof that an incoming value is valid.
- null
- A marker for absence. It is different from zero, false or empty text.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
Optional can express a potentially absent return value. It does not replace every null check or every nullable field.
02Follow the steps
The optional is empty, so the fallback is chosen. Calling get without checking would fail.
03Make it yours
Try Optional.of("Pip") and compare orElse with a lazily evaluated orElseGet.
Java / GUIDED CODE WALKTHROUGH
java.util.Optional<String> name = java.util.Optional.empty();
System.out.println(name.orElse("Visitor"));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try Optional.of("Pip") and compare orElse with a lazily evaluated orElseGet.
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 28 OF 40 / DEEPER
Catch a specific failure
A matching catch handles a thrown exception. Catching the broadest type can conceal errors you cannot recover from.
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.
- 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.
- exception
- A failure that transfers control to a matching handler. Expected validation failures may be better represented by an ordinary result.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A matching catch handles a thrown exception. Catching the broadest type can conceal errors you cannot recover from.
02Follow the steps
The catch receives the exception object and reads its message. A real application should explain recoverable input failures clearly.
03Make it yours
Add validation before constructing a record and decide whether a result or exception fits the API.
Java / GUIDED CODE WALKTHROUGH
try { throw new IllegalArgumentException("Score required"); }
catch (IllegalArgumentException error) { System.out.println(error.getMessage()); }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add validation before constructing a record and decide whether a result or exception fits the API.
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 29 OF 40 / DEEPER
Close resources predictably
Try-with-resources closes AutoCloseable resources when the block exits, including through an exception.
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.
- exception
- A failure that transfers control to a matching handler. Expected validation failures may be better represented by an ordinary result.
- null
- A marker for absence. It is different from zero, false or empty text.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
Try-with-resources closes AutoCloseable resources when the block exits, including through an exception.
02Follow the steps
The reader is closed after the block. readLine can throw IOException, so the surrounding method must handle or declare it.
03Make it yours
Read a second line and distinguish end-of-input null from an empty line.
Java / GUIDED CODE WALKTHROUGH
try (var reader = new java.io.BufferedReader(new java.io.StringReader("Pip"))) { System.out.println(reader.readLine()); }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Read a second line and distinguish end-of-input null from an empty line.
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 30 OF 40 / DEEPER
Use a lambda as behaviour
A functional interface has a single abstract method. A lambda supplies that behaviour without a separate implementation class.
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.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- interface
- A contract describing operations a type provides. Callers can depend on the contract instead of one particular implementation.
- lambda
- A compact function expression that can be passed as behaviour to another operation.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A functional interface has a single abstract method. A lambda supplies that behaviour without a separate implementation class.
02Follow the steps
The specialized interface takes and returns primitive int values.
03Make it yours
Supply a lambda that adds three while leaving the call unchanged.
Java / GUIDED CODE WALKTHROUGH
java.util.function.IntUnaryOperator twice = n -> n * 2;
System.out.println(twice.applyAsInt(4));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Supply a lambda that adds three while leaving the call unchanged.
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 31 OF 40 / DEEPER
Map a stream to new values
map transforms each stream item. It does not change the source list's elements in this example.
Unfamiliar words? Start here.
- stream
- In Java, a pipeline for processing values. A terminal operation consumes the pipeline; this is different from a file input stream.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
map transforms each stream item. It does not change the source list's elements in this example.
02Follow the steps
The terminal toList gathers the transformed results. This Java 17 result list is unmodifiable.
03Make it yours
Try adding to the returned list and choose a mutable collector if your requirement needs one.
Java / GUIDED CODE WALKTHROUGH
var values = java.util.List.of(2, 3);
System.out.println(values.stream().map(n -> n * 2).toList());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try adding to the returned list and choose a mutable collector if your requirement needs one.
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 32 OF 40 / DEEPER
Reduce values to one result
A reduction combines values with an associative operation and a suitable identity. The identity matters for empty input.
Unfamiliar words? Start here.
- stream
- In Java, a pipeline for processing values. A terminal operation consumes the pipeline; this is different from a file input stream.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A reduction combines values with an associative operation and a suitable identity. The identity matters for empty input.
02Follow the steps
Zero is the identity for addition. Each value contributes to the accumulated total.
03Make it yours
Try an empty list and explain why the result is zero.
Java / GUIDED CODE WALKTHROUGH
int total = java.util.List.of(2, 3).stream().reduce(0, Integer::sum);
System.out.println(total);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try an empty list and explain why the result is 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.
Java / LESSON 33 OF 40 / DEEPER
Group stream results
Collectors.groupingBy groups items using a classifier. Do not rely on the default map's iteration order.
Unfamiliar words? Start here.
- stream
- In Java, a pipeline for processing values. A terminal operation consumes the pipeline; this is different from a file input stream.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
- key
- An identifier. React list keys identify records between renders; dictionary or map keys are used to look up values.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
Collectors.groupingBy groups items using a classifier. Do not rely on the default map's iteration order.
02Follow the steps
The key three identifies both three-letter words. Reading a missing key would require handling absence.
03Make it yours
Count each group directly with a downstream counting collector.
Java / GUIDED CODE WALKTHROUGH
var grouped = java.util.List.of("cat", "dog", "ox").stream().collect(java.util.stream.Collectors.groupingBy(String::length));
System.out.println(grouped.get(3).size());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Count each group directly with a downstream counting collector.
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 34 OF 40 / DEEPER
Sort with an explicit comparator
A comparator describes ordering separately from the objects. Comparing integer properties directly avoids subtraction overflow tricks.
Unfamiliar words? Start here.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
A comparator describes ordering separately from the objects. Comparing integer properties directly avoids subtraction overflow tricks.
02Follow the steps
The shorter word comes first. A secondary comparison can make ties follow a deliberate policy.
03Make it yours
Add another two-letter word and use thenComparing for alphabetical ties.
Java / GUIDED CODE WALKTHROUGH
var words = new java.util.ArrayList<>(java.util.List.of("cat", "ox"));
words.sort(java.util.Comparator.comparingInt(String::length));
System.out.println(words);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add another two-letter word and use thenComparing for alphabetical ties.
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 35 OF 40 / DEEPER
Model a calendar date
LocalDate represents a date without a time or time zone. It handles calendar boundaries for date arithmetic.
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.
- immutable
- Not changed after creation. To represent a change, create a new value. A read-only reference does not necessarily make the object it points to immutable.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
LocalDate represents a date without a time or time zone. It handles calendar boundaries for date arithmetic.
02Follow the steps
plusDays returns a new immutable date rather than changing date.
03Make it yours
Test a leap year and choose Instant when modelling a specific moment in time.
Java / GUIDED CODE WALKTHROUGH
var date = java.time.LocalDate.of(2026, 1, 31);
System.out.println(date.plusDays(1));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Test a leap year and choose Instant when modelling a specific moment in time.
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 36 OF 40 / DEEPER
Compose an asynchronous result
CompletableFuture can transform and combine eventual results. join waits and can report exceptional completion.
Unfamiliar words? Start here.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
CompletableFuture can transform and combine eventual results. join waits and can report exceptional completion.
02Follow the steps
The starting future is already completed, so this example does not demonstrate background work. thenApply transforms its value.
03Make it yours
Explore a failing future and decide where failure should be translated into a useful result.
Java / GUIDED CODE WALKTHROUGH
var result = java.util.concurrent.CompletableFuture.completedFuture(4).thenApply(n -> n * 2);
System.out.println(result.join());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Explore a failing future and decide where failure should be translated into a useful 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.
Java / LESSON 37 OF 40 / DEEPER
Update a counter atomically
AtomicInteger offers atomic operations on a shared integer. It does not make a multi-variable invariant automatically atomic.
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.
- atomic
- Performed as one indivisible operation from the perspective of other participating threads. A sequence of atomic operations is not automatically an atomic workflow.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
AtomicInteger offers atomic operations on a shared integer. It does not make a multi-variable invariant automatically atomic.
02Follow the steps
The operation increments and returns the updated value atomically.
03Make it yours
Compare getAndIncrement and explain which value it returns.
Java / GUIDED CODE WALKTHROUGH
var count = new java.util.concurrent.atomic.AtomicInteger();
System.out.println(count.incrementAndGet());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Compare getAndIncrement and explain which value it returns.
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 38 OF 40 / DEEPER
Validate before storing data
Input validation checks the application's rules after parsing. A successfully parsed integer may still be outside the allowed range.
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.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
Input validation checks the application's rules after parsing. A successfully parsed integer may still be outside the allowed range.
02Follow the steps
The text is a valid integer but violates the score range. Parsing failures need a separate response.
03Make it yours
Test -1, 0, 100 and 101 as well as non-numeric text.
Java / GUIDED CODE WALKTHROUGH
int score = Integer.parseInt("-1");
System.out.println(score >= 0 && score <= 100 ? "Accepted" : "Out of range");
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
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 the stated inputs and context, what is the expected behaviour?
REPAIR SHOP / FIND THE CAUSE
Valid number, invalid score
Accept whole-number scores from zero to one hundred, including both endpoints.
boolean valid = score > 0 && score < 100;
0 and 100 are both incorrectly rejected.
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 -1, 0, 100 and 101 as well as non-numeric 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.
Java / LESSON 39 OF 40 / DEEPER
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.
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.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
An explicit assertion-style guard fails when a known rule regresses. Java's assert keyword is disabled by default unless enabled.
02Follow the steps
The check expresses both sides of the threshold and throws regardless of JVM assertion settings.
03Make it yours
Move the rule into a method and use a testing framework in a larger project.
Java / GUIDED CODE WALKTHROUGH
if (!(10 >= 10) || 9 >= 10) throw new AssertionError("Boundary failed");
System.out.println("Checks passed");
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Move the rule into a method and use a testing framework in a larger project.
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 40 OF 40 / DEEPER
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.
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.
- collection
- An object containing several values. Lists, arrays, sets and maps offer different ways to organize and access them.
- stream
- In Java, a pipeline for processing values. A terminal operation consumes the pipeline; this is different from a file input stream.
- var
- Ask the compiler to infer a local variable’s type in Java or C#. In JavaScript, var is a different declaration with function scope; prefer let or const in these lessons.
Before you begin
Start at lesson 01. Use Java 17 or later. Unless a complete class is shown, statements belong inside main; method and type declarations belong outside it. Install a Java Development Kit, save a Main.java file using the entry-point structure in lesson 01, then run javac Main.java followed by java Main.
Official learning reference ↗01Meet the idea
Combine validated input, records, a collection and a file format. Treat a malformed saved file as an explicit failure rather than silently replacing it.
02Follow the steps
One record qualifies. This report should give the same answer after records are saved and loaded.
03Make it yours
Complete the Java project brief: accept real input, save it, restart and run the report again.
Java / GUIDED CODE WALKTHROUGH
record Score(String name, int value) {}
// Inside main:
var scores = java.util.List.of(new Score("Pip", 9), new Score("Kit", 12));
System.out.println(scores.stream().filter(s -> s.value() >= 10).count());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Complete the Java project brief: accept real input, save it, restart and run the report again.
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 16 OF 35 / DEEPER
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.
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
let and const are block-scoped. A name inside a nested block can shadow an outer name without changing its value.
02Follow the steps
The inner declaration is a separate variable, not an assignment to the outer one.
03Make it yours
Remove the inner let and predict why the result changes.
JavaScript / GUIDED CODE WALKTHROUGH
let score = 1;
{ let score = 2; }
console.log(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.
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Remove the inner let and predict why the result changes.
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 17 OF 35 / DEEPER
Understand truthy values
Conditions convert values to booleans. A non-empty string is truthy even when its characters spell false.
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.
- boolean
- A true-or-false value. A condition uses it to choose what happens next.
- array
- An ordered collection accessed by position. These languages use zero for the first index, but their array behaviours differ.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
Conditions convert values to booleans. A non-empty string is truthy even when its characters spell false.
02Follow the steps
String contents are not parsed as boolean words. Empty text is falsy.
03Make it yours
Test "0", 0 and an empty array; use explicit validation when reading form values.
JavaScript / GUIDED CODE WALKTHROUGH
console.log(Boolean("false"));
console.log(Boolean(""));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Test "0", 0 and an empty array; use explicit validation when reading form values.
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 18 OF 35 / DEEPER
Default only missing values
?? uses a fallback for null or undefined, preserving zero, false and empty strings.
Unfamiliar words? Start here.
- null
- A marker for absence. It is different from zero, false or empty text.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
?? uses a fallback for null or undefined, preserving zero, false and empty strings.
02Follow the steps
Zero is present data. Using a truthiness-based fallback could replace a legitimate zero.
03Make it yours
Compare with score || 10 and decide which rule your input needs.
JavaScript / GUIDED CODE WALKTHROUGH
const score = 0;
console.log(score ?? 10);
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
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 the stated inputs and context, what is the expected behaviour?
REPAIR SHOP / FIND THE CAUSE
Zero is a real score
Use a default only when the score is null or undefined.
const shown = score || 10;
A valid score of 0 is replaced with 10.
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.
Compare with score || 10 and decide which rule your input needs.
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 19 OF 35 / DEEPER
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.
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.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
- null
- A marker for absence. It is different from zero, false or empty text.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
Optional chaining stops a property access chain when the value is null or undefined. It does not validate other unexpected types.
02Follow the steps
owner is undefined, so the optional access yields undefined and ?? supplies a label.
03Make it yours
Add an owner with a name and test a name that is an empty string.
JavaScript / GUIDED CODE WALKTHROUGH
const robot = {};
console.log(robot.owner?.name ?? "Unassigned");
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add an owner with a name and test a name that is an empty string.
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 20 OF 35 / DEEPER
Collect arguments with rest
A rest parameter collects remaining arguments into an array. It must be the final parameter.
Unfamiliar words? Start here.
- parameter
- A named input in a function or method declaration. The actual value supplied in a call is its argument.
- argument
- A value supplied when calling a function or method. It is received through a parameter.
- 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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
A rest parameter collects remaining arguments into an array. It must be the final parameter.
02Follow the steps
The three arguments become array entries. The reduction starts with zero.
03Make it yours
Call total without arguments and explain the identity result.
JavaScript / GUIDED CODE WALKTHROUGH
function total(...values) { return values.reduce((sum, n) => sum + n, 0); }
console.log(total(2, 3, 4));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Call total without arguments and explain the identity 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.
JavaScript / LESSON 21 OF 35 / DEEPER
Accumulate with reduce
reduce carries an accumulator through a sequence. An explicit initial value defines behaviour for an empty array.
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.
- array
- An ordered collection accessed by position. These languages use zero for the first index, but their array behaviours differ.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
reduce carries an accumulator through a sequence. An explicit initial value defines behaviour for an empty array.
02Follow the steps
The accumulator moves from zero to two to five.
03Make it yours
Reduce objects into a total of one numeric property and validate missing values.
JavaScript / GUIDED CODE WALKTHROUGH
console.log([2, 3].reduce((sum, n) => sum + n, 0));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Reduce objects into a total of one numeric property and validate missing values.
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 22 OF 35 / DEEPER
Keep unique values with Set
Set stores unique values under its equality rules. It is useful for deduplicating primitive values.
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
Set stores unique values under its equality rules. It is useful for deduplicating primitive values.
02Follow the steps
The repeated string is one entry. Distinct objects with identical properties would still be distinct references.
03Make it yours
Try two separate {name: "Pip"} objects and explain the different result.
JavaScript / GUIDED CODE WALKTHROUGH
console.log(new Set(["Pip", "Pip", "Kit"]).size);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Try two separate {name: "Pip"} objects and explain the different 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.
JavaScript / LESSON 23 OF 35 / DEEPER
Use a Map for keyed data
Map accepts keys of any type and exposes size, get and has explicitly.
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.
- key
- An identifier. React list keys identify records between renders; dictionary or map keys are used to look up values.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
Map accepts keys of any type and exposes size, get and has explicitly.
02Follow the steps
The lookup retrieves the value for the exact key. A missing lookup yields undefined.
03Make it yours
Store a key with an undefined value and use has to distinguish it from an absent key.
JavaScript / GUIDED CODE WALKTHROUGH
const stock = new Map([["kits", 3]]);
console.log(stock.get("kits"));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Store a key with an undefined value and use has to distinguish it from an absent key.
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 24 OF 35 / DEEPER
Understand a closure
A closure retains access to its lexical environment after the outer function returns.
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.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
- closure
- A function retaining access to variables from its lexical environment, even after the enclosing function has returned.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
A closure retains access to its lexical environment after the outer function returns.
02Follow the steps
Both calls share the captured n from the same counter invocation.
03Make it yours
Create a second counter and show that its captured state is independent.
JavaScript / GUIDED CODE WALKTHROUGH
function counter() { let n = 0; return () => ++n; }
const next = counter();
console.log(next(), next());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Create a second counter and show that its captured state is independent.
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 25 OF 35 / DEEPER
Know what this refers to
For a normal method call, this depends on the call site. Extracting a method can lose its receiver.
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.
- 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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
For a normal method call, this depends on the call site. Extracting a method can lose its receiver.
02Follow the steps
The method is called through robot, which supplies the receiver. Arrow functions use lexical this instead.
03Make it yours
Extract read into a variable, then compare an unbound call with bind(robot).
JavaScript / GUIDED CODE WALKTHROUGH
const robot = { name: "Pip", read() { return this.name; } };
console.log(robot.read());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Extract read into a variable, then compare an unbound call with bind(robot).
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 26 OF 35 / DEEPER
Create an instance with class
JavaScript class syntax defines constructor and prototype-based behaviour. Each new call constructs an instance.
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.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- instance
- One object created from a class. Two instances can have different state even when their methods come from the same class.
- constructor
- The initialization operation called when an object is created. Use it to establish a valid starting state.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
JavaScript class syntax defines constructor and prototype-based behaviour. Each new call constructs an instance.
02Follow the steps
The constructor initializes instance state; the method uses that instance's name.
03Make it yours
Create two robots and compare their names and shared method implementation.
JavaScript / GUIDED CODE WALKTHROUGH
class Robot { constructor(name) { this.name = name; } greet() { return `Hi ${this.name}`; } }
console.log(new Robot("Pip").greet());
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Create two robots and compare their names and shared method implementation.
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 27 OF 35 / DEEPER
Handle thrown failures
try/catch handles a thrown exception in its synchronous block, or a rejected promise that is awaited there.
Unfamiliar words? Start here.
- exception
- A failure that transfers control to a matching handler. Expected validation failures may be better represented by an ordinary result.
- JSON
- A text format for objects, arrays, strings, numbers, booleans and null. JSON text is not a live object reference.
- promise
- A JavaScript object representing eventual completion or failure. Its result is obtained asynchronously.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
try/catch handles a thrown exception in its synchronous block, or a rejected promise that is awaited there.
02Follow the steps
The text does not follow JSON syntax, so parsing throws before producing a value.
03Make it yours
Parse valid JSON and validate its shape separately from its syntax.
JavaScript / GUIDED CODE WALKTHROUGH
try { JSON.parse("oops"); } catch (error) { console.log("Invalid JSON"); }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Parse valid JSON and validate its shape separately from its syntax.
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 28 OF 35 / DEEPER
Serialize data deliberately
JSON.stringify converts supported values to JSON text. It does not preserve every JavaScript type or object relationship.
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.
- 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.
- JSON
- A text format for objects, arrays, strings, numbers, booleans and null. JSON text is not a live object reference.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
JSON.stringify converts supported values to JSON text. It does not preserve every JavaScript type or object relationship.
02Follow the steps
The two properties become JSON members. Functions, undefined values and circular references need different treatment.
03Make it yours
Round-trip the object and then try a Date to see why a schema matters.
JavaScript / GUIDED CODE WALKTHROUGH
console.log(JSON.stringify({ name: "Pip", score: 12 }));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Round-trip the object and then try a Date to see why a schema 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.
JavaScript / LESSON 29 OF 35 / DEEPER
Coordinate promises with Promise.all
Promise.all fulfills with results in input order when every input fulfills; it rejects if an input rejects.
Unfamiliar words? Start here.
- promise
- A JavaScript object representing eventual completion or failure. Its result is obtained asynchronously.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
Promise.all fulfills with results in input order when every input fulfills; it rejects if an input rejects.
02Follow the steps
The aggregate retains input order even if completion times differ. Rejection does not automatically cancel other work.
03Make it yours
Compare allSettled when you need to inspect every independent outcome.
JavaScript / GUIDED CODE WALKTHROUGH
Promise.all([Promise.resolve(2), Promise.resolve(3)]).then(values => console.log(values.join(", ")));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Compare allSettled when you need to inspect every independent outcome.
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 30 OF 35 / DEEPER
Check an HTTP response before parsing
fetch can fulfill even for HTTP error statuses. Check response.ok and handle network and parsing failures.
Unfamiliar words? Start here.
- HTTP
- The request-and-response protocol used by websites. A returned response can still have an error status such as 404.
- async
- Marking code that can suspend while awaiting completion. It does not mean every operation automatically runs on a new thread.
- await
- Wait for an eventual result within an asynchronous flow, continuing afterward or handling its failure.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
fetch can fulfill even for HTTP error statuses. Check response.ok and handle network and parsing failures.
02Follow the steps
The example's stated response is unsuccessful. Without this check you might try to interpret an error page as normal data.
03Make it yours
Add a caller that displays a useful failure message and a retry action.
JavaScript / GUIDED CODE WALKTHROUGH
// Inside an async function; assume a 404 response:
const response = await fetch("/missing");
if (!response.ok) throw new Error(`HTTP ${response.status}`);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a caller that displays a useful failure message and a retry action.
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 31 OF 35 / DEEPER
Cancel an obsolete request
AbortController lets participating browser APIs observe an abort signal. Cancellation needs explicit handling.
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.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
AbortController lets participating browser APIs observe an abort signal. Cancellation needs explicit handling.
02Follow the steps
The signal records that cancellation was requested. Pass it to fetch to make that request observe the signal.
03Make it yours
Start a request with the signal and abort it when a newer search replaces it.
JavaScript / GUIDED CODE WALKTHROUGH
const controller = new AbortController();
controller.abort();
console.log(controller.signal.aborted);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Start a request with the signal and abort it when a newer search replaces it.
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 32 OF 35 / DEEPER
Understand event bubbling
Many events travel from their target up through ancestors. target identifies the origin; currentTarget identifies the listener's element.
Unfamiliar words? Start here.
- event
- A notification that something happened, such as a click. An event handler is the code called in response.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
Many events travel from their target up through ancestors. target identifies the origin; currentTarget identifies the listener's element.
02Follow the steps
The panel's listener receives the bubbled click from its child. currentTarget would identify the panel instead.
03Make it yours
Compare target and currentTarget and test clicking empty panel space.
JavaScript / GUIDED CODE WALKTHROUGH
// A button inside a panel; click the button:
panel.addEventListener("click", event => console.log(event.target.tagName));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Compare target and currentTarget and test clicking empty panel space.
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 33 OF 35 / DEEPER
Delegate repeated controls
One ancestor listener can handle events from many current or future children. Check the intended target and containment.
Unfamiliar words? Start here.
- scope
- The region of code in which a name can be used. A name declared inside a block usually belongs to that block.
- event
- A notification that something happened, such as a click. An event handler is the code called in response.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
One ancestor listener can handle events from many current or future children. Check the intended target and containment.
02Follow the steps
closest finds the button even if a nested icon was clicked. The containment check scopes the action to this list.
03Make it yours
Add a second button dynamically and verify that it needs no individual listener.
JavaScript / GUIDED CODE WALKTHROUGH
// A list containing <button data-id="7">Done</button>:
list.addEventListener("click", event => { const button = event.target.closest("button[data-id]"); if (button && list.contains(button)) console.log(button.dataset.id); });
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a second button dynamically and verify that it needs no individual listener.
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 34 OF 35 / DEEPER
Persist a small preference
localStorage stores strings for an origin. Reads, writes and JSON parsing can fail, so storage should have a graceful fallback.
Unfamiliar words? Start here.
- JSON
- A text format for objects, arrays, strings, numbers, booleans and null. JSON text is not a live object reference.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
localStorage stores strings for an origin. Reads, writes and JSON parsing can fail, so storage should have a graceful fallback.
02Follow the steps
The value survives a page reload on this origin until cleared. Private modes, quotas and user settings can affect persistence.
03Make it yours
Wrap storage access in try/catch and decide what happens when the saved value is invalid.
JavaScript / GUIDED CODE WALKTHROUGH
// Assume storage is available:
localStorage.setItem("theme", "forest");
console.log(localStorage.getItem("theme"));
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Wrap storage access in try/catch and decide what happens when the saved value is invalid.
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 35 OF 35 / DEEPER
Finish an interactive workshop board
Combine state, rendering, event handling and storage around explicit rules. Keep user text as text rather than HTML.
Unfamiliar words? Start here.
- Task
- In C#, an object representing completion of work, possibly with a result. Awaiting it observes completion or failure.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
- event
- A notification that something happened, such as a click. An event handler is the code called in response.
Before you begin
Start here if programming is new. The first ten examples run in your browser; later lessons trace browser and module concepts.
Official learning reference ↗01Meet the idea
Combine state, rendering, event handling and storage around explicit rules. Keep user text as text rather than HTML.
02Follow the steps
Only one task remains open. The same underlying state can drive the list, filter and count.
03Make it yours
Complete the JavaScript project brief, then rebuild its behaviour with React while preserving the acceptance tests.
JavaScript / GUIDED CODE WALKTHROUGH
const tasks = [{ title: "Learn", done: false }, { title: "Build", done: true }];
console.log(tasks.filter(task => !task.done).length);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Complete the JavaScript project brief, then rebuild its behaviour with React while preserving the acceptance tests.
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 11 OF 30 / DEEPER
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.
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.
- array
- An ordered collection accessed by position. These languages use zero for the first index, but their array behaviours differ.
- Task
- In C#, an object representing completion of work, possibly with a result. Awaiting it observes completion or failure.
- props
- Inputs supplied by a React component’s parent. Read them to describe UI; do not modify them.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
Calculate values from existing props or state when no external synchronization is needed. Duplicated state can drift out of sync.
02Follow the steps
The count is derived from the array. An effect and a second state variable would add coordination work without benefit.
03Make it yours
Change the tasks and confirm the count follows without another setter.
React / GUIDED CODE WALKTHROUGH
const tasks = [{ done: false }, { done: true }];
const remaining = tasks.filter(t => !t.done).length;
return <p>{remaining} remaining</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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Change the tasks and confirm the count follows without another setter.
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 12 OF 30 / DEEPER
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.
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.
- 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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
Functional state updates are applied to the pending state in order. Repeating a snapshot-based update can request the same value twice.
02Follow the steps
Each updater receives the result of the previous updater. The current render's count variable remains its snapshot.
03Make it yours
Compare two setCount(count + 1) calls and explain their different next result.
React / GUIDED CODE WALKTHROUGH
// count is 0; inside a click handler:
setCount(c => c + 1);
setCount(c => c + 1);
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
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 the stated inputs and context, what is the expected behaviour?
REPAIR SHOP / FIND THE CAUSE
The button that only adds one
Queue two increments in the same click handler, starting at zero.
setCount(count + 1);
setCount(count + 1);
Both snapshot-based updates request 1, so the next render shows 1.
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.
Compare two setCount(count + 1) calls and explain their different next 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.
React / LESSON 13 OF 30 / DEEPER
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.
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.
- 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.
- effect
- React synchronization with an external system after a commit. Use event handlers for user actions and ordinary calculations for derived values.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
Rendering should describe UI from inputs. Side effects during render can happen more often than expected because rendering may be repeated.
02Follow the steps
The component computes JSX without changing external state. A network call or mutation belongs elsewhere.
03Make it yours
Move an analytics action into the user event that actually causes it, if that is the intended trigger.
React / GUIDED CODE WALKTHROUGH
function Greeting({ name }) { return <p>Hello {name}</p>; }
// <Greeting 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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Move an analytics action into the user event that actually causes it, if that is the intended trigger.
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 14 OF 30 / DEEPER
Remember a value without rendering
useRef stores a mutable value across renders without scheduling a render when current changes.
Unfamiliar words? Start here.
- 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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
useRef stores a mutable value across renders without scheduling a render when current changes.
02Follow the steps
Use state for information that must update the visible UI. A ref is useful for an interval ID or another non-render value.
03Make it yours
Replace ref storage with state when showing the count on screen.
React / GUIDED CODE WALKTHROUGH
const clicks = useRef(0);
// Inside a handler:
clicks.current += 1;
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Replace ref storage with state when showing the count on screen.
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 15 OF 30 / DEEPER
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.
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.
- null
- A marker for absence. It is different from zero, false or empty text.
- Task
- In C#, an object representing completion of work, possibly with a result. Awaiting it observes completion or failure.
- DOM
- The browser’s object representation of a document. Scripts can read and change it, and events describe interactions with its elements.
- event
- A notification that something happened, such as a click. An event handler is the code called in response.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
A DOM ref gives an event handler access to an element. Focus changes belong to an intentional interaction or synchronization step.
02Follow the steps
The ref is attached after the element is committed. Optional access handles the not-yet-attached case.
03Make it yours
Add a visible focus style and test that keyboard focus remains predictable.
React / GUIDED CODE WALKTHROUGH
const input = useRef(null);
return <><input ref={input} aria-label="Task" /><button onClick={() => input.current?.focus()}>Focus task</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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a visible focus style and test that keyboard focus remains predictable.
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 16 OF 30 / DEEPER
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.
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.
- instance
- One object created from a class. Two instances can have different state even when their methods come from the same class.
- 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.
- key
- An identifier. React list keys identify records between renders; dictionary or map keys are used to look up values.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
State is associated with a component's position and identity. Changing its key causes React to recreate that component's state.
02Follow the steps
A new key identifies a different editor instance. This is useful for resetting a draft but could discard unsaved work unintentionally.
03Make it yours
Compare preserving a draft per record with resetting it whenever selection changes.
React / GUIDED CODE WALKTHROUGH
// Editor uses local useState:
<Editor key={selectedId} itemId={selectedId} />
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Compare preserving a draft per record with resetting it whenever selection changes.
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 17 OF 30 / DEEPER
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.
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.
- 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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
A reducer expresses state transitions as a pure function. It can make several related actions easier to reason about.
02Follow the steps
The action describes an intent and the reducer calculates the next state. It must not mutate external data.
03Make it yours
Add reset and subtract actions with checks for a non-negative count.
React / GUIDED CODE WALKTHROUGH
function reducer(state, action) { return action.type === "add" ? state + 1 : state; }
const [count, dispatch] = useReducer(reducer, 0);
// dispatch({ type: "add" })
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add reset and subtract actions with checks for a non-negative count.
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 18 OF 30 / DEEPER
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.
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.
- 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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
A reducer's handling of unexpected actions should be deliberate. A silent fallback can hide a misspelled action during development.
02Follow the steps
The misspelling reaches the default arm instead of silently keeping stale state. Choose a consistent contract for the application.
03Make it yours
Write checks for both a valid reset and an unknown action.
React / GUIDED CODE WALKTHROUGH
function reducer(state, action) { switch (action.type) { case "reset": return 0; default: throw new Error("Unknown action"); } }
// reducer(3, { type: "resett" })
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Write checks for both a valid reset and an unknown action.
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 19 OF 30 / DEEPER
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.
Unfamiliar words? Start here.
- 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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
Context passes a value to descendants without threading a prop through each intermediate component. It is not a replacement for all local state.
02Follow the steps
Without a provider above this component, the context's default is used. A provider supplies a different current value.
03Make it yours
Add a Theme.Provider above two descendants and change its value.
React / GUIDED CODE WALKTHROUGH
const Theme = createContext("forest");
// A descendant with no matching provider:
const theme = useContext(Theme);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a Theme.Provider above two descendants and change its value.
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 20 OF 30 / DEEPER
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.
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.
- instance
- One object created from a class. Two instances can have different state even when their methods come from the same class.
- 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.
- Hook
- A React function such as useState that connects a component to React behaviour. Call Hooks at the top level of components or custom Hooks, not inside conditional branches.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
A custom Hook shares stateful logic, not one shared state instance. Each call has its own state unless an external mechanism shares it.
02Follow the steps
Calling the same custom Hook does not merge its state. Use a common owner or store when shared state is intended.
03Make it yours
Increment one component and verify that the other remains unchanged.
React / GUIDED CODE WALKTHROUGH
function useCounter() { const [n, setN] = useState(0); return [n, () => setN(v => v + 1)]; }
// Two components each call useCounter().
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Increment one component and verify that the other remains unchanged.
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 21 OF 30 / DEEPER
Clean up an effect
An effect that subscribes should return cleanup that reverses the subscription. Development checks may run setup and cleanup again.
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.
- 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.
- effect
- React synchronization with an external system after a commit. Use event handlers for user actions and ordinary calculations for derived values.
- dependency
- Something another operation relies on. An effect dependency is a reactive input whose change requires resynchronization.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
An effect that subscribes should return cleanup that reverses the subscription. Development checks may run setup and cleanup again.
02Follow the steps
The same function reference is used to add and remove the listener. Cleanup also runs before a relevant effect reruns.
03Make it yours
Add a prop dependency and verify there is only one active subscription after it changes.
React / GUIDED CODE WALKTHROUGH
useEffect(() => { const handler = () => console.log("resize"); window.addEventListener("resize", handler); return () => window.removeEventListener("resize", handler); }, []);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a prop dependency and verify there is only one active subscription after it changes.
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 22 OF 30 / DEEPER
Ignore an obsolete response
An older asynchronous response must not overwrite a newer selection. Cleanup can mark an obsolete effect result to be ignored.
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.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
- effect
- React synchronization with an external system after a commit. Use event handlers for user actions and ordinary calculations for derived values.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
An older asynchronous response must not overwrite a newer selection. Cleanup can mark an obsolete effect result to be ignored.
02Follow the steps
The local flag belongs to one effect invocation. Production code must also handle loading and error state consistently, including obsolete failures.
03Make it yours
Extend the error handler with the same obsolete-result guard and consider aborting the request.
React / GUIDED CODE WALKTHROUGH
useEffect(() => { let ignore = false; load(id).then(data => { if (!ignore) setData(data); }).catch(reportError); return () => { ignore = true; }; }, [id]);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Extend the error handler with the same obsolete-result guard and consider aborting the request.
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 23 OF 30 / DEEPER
Declare effect dependencies honestly
An effect's reactive inputs belong in its dependency list. Omitting one can leave it using an older value.
Unfamiliar words? Start here.
- render
- Calculate or display a representation. React rendering describes what the UI should be; committing applies changes to the browser.
- effect
- React synchronization with an external system after a commit. Use event handlers for user actions and ordinary calculations for derived values.
- dependency
- Something another operation relies on. An effect dependency is a reactive input whose change requires resynchronization.
- closure
- A function retaining access to variables from its lexical environment, even after the enclosing function has returned.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
An effect's reactive inputs belong in its dependency list. Omitting one can leave it using an older value.
02Follow the steps
The dependency expresses that the effect reads title. Suppressing a dependency warning does not fix a stale closure.
03Make it yours
Move a calculation into render if no external synchronization is needed.
React / GUIDED CODE WALKTHROUGH
useEffect(() => { document.title = title; }, [title]);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Move a calculation into render if no external synchronization is needed.
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 24 OF 30 / DEEPER
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.
Unfamiliar words? Start here.
- immutable
- Not changed after creation. To represent a change, create a new value. A read-only reference does not necessarily make the object it points to immutable.
- 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.
- dependency
- Something another operation relies on. An effect dependency is a reactive input whose change requires resynchronization.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
useMemo caches a calculation between renders while its dependencies are equal. It is a performance tool, not a correctness requirement.
02Follow the steps
Keep state updates immutable so dependency changes are meaningful. Measure before adding memoization to trivial work.
03Make it yours
Remove useMemo and verify that behaviour stays correct; then compare performance on realistic data.
React / GUIDED CODE WALKTHROUGH
const visible = useMemo(() => items.filter(item => item.done), [items]);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Remove useMemo and verify that behaviour stays correct; then compare performance on realistic data.
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 25 OF 30 / DEEPER
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.
Unfamiliar words? Start here.
- callback
- A function given to another operation so it can call that behaviour at the appropriate time.
- 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.
- 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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
useCallback can preserve a function reference across renders when dependencies are unchanged. It does not prevent the function from running.
02Follow the steps
The state setter has stable identity. This optimization is useful only when a consumer actually benefits from stable callback identity.
03Make it yours
Measure a memoized child's renders before introducing extra callbacks everywhere.
React / GUIDED CODE WALKTHROUGH
const reset = useCallback(() => setCount(0), []);
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Measure a memoized child's renders before introducing extra callbacks everywhere.
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 26 OF 30 / DEEPER
Associate labels with generated IDs
useId generates IDs for accessibility relationships. It is not intended for generating list data keys.
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.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- instance
- One object created from a class. Two instances can have different state even when their methods come from the same class.
- Task
- In C#, an object representing completion of work, possibly with a result. Awaiting it observes completion or failure.
- render
- Calculate or display a representation. React rendering describes what the UI should be; committing applies changes to the browser.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
useId generates IDs for accessibility relationships. It is not intended for generating list data keys.
02Follow the steps
htmlFor is the JSX property corresponding to HTML for. The same generated ID connects both elements.
03Make it yours
Render two instances and verify each label focuses its own input.
React / GUIDED CODE WALKTHROUGH
const id = useId();
return <><label htmlFor={id}>Task</label><input id={id} /></>;
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Render two instances and verify each label focuses its own 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.
React / LESSON 27 OF 30 / DEEPER
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.
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.
- return
- Send a result back to the caller and leave the current function or method. Returning is different from displaying a result.
- event
- A notification that something happened, such as a click. An event handler is the code called in response.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
A submit handler can prevent navigation and validate trimmed input. Browser checks improve feedback but do not replace server validation.
02Follow the steps
Whitespace is removed before validation. A clear error should be associated with the field and available to assistive technology.
03Make it yours
Test empty text, spaces and a valid title; keep the user's input when validation fails.
React / GUIDED CODE WALKTHROUGH
function submit(event) { event.preventDefault(); const clean = title.trim(); if (!clean) { setError("Enter a title"); return; } addTask(clean); }
// title contains only spaces.
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Test empty text, spaces and a valid title; keep the user's input when validation fails.
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 28 OF 30 / DEEPER
Model loading, success and failure
An explicit status prevents contradictory combinations of booleans. Rendering should account for each state the operation can reach.
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.
- boolean
- A true-or-false value. A condition uses it to choose what happens next.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
An explicit status prevents contradictory combinations of booleans. Rendering should account for each state the operation can reach.
02Follow the steps
This reduced example shows one state. A complete data view also needs success, empty and failure handling.
03Make it yours
Define those states and a retry transition without leaving a stale error visible.
React / GUIDED CODE WALKTHROUGH
const [status] = useState("loading");
return <p>{status === "loading" ? "Loading…" : "Ready"}</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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Define those states and a retry transition without leaving a stale error visible.
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 29 OF 30 / DEEPER
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.
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.
- index
- A position in a sequence. In these examples the first index is zero, so an array of three items ends at index two.
- 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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
Filtering changes which items are rendered, but a record's identity should remain tied to its ID rather than its filtered index.
02Follow the steps
The key survives changes in position within the filtered result. Keys are used by React and are not rendered as DOM attributes.
03Make it yours
Toggle the filter and check an editable row does not inherit another row's local state.
React / GUIDED CODE WALKTHROUGH
const items = [{ id: 7, done: true }, { id: 9, done: false }];
return items.filter(x => !x.done).map(x => <p key={x.id}>{x.id}</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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Toggle the filter and check an editable row does not inherit another row's local state.
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 30 OF 30 / DEEPER
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.
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.
- immutable
- Not changed after creation. To represent a change, create a new value. A read-only reference does not necessarily make the object it points to immutable.
- Task
- In C#, an object representing completion of work, possibly with a result. Awaiting it observes completion or failure.
- 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.
Before you begin
Complete JavaScript and basic HTML first. These are component excerpts for an existing React project; import the Hooks used from react.
Official learning reference ↗01Meet the idea
Rebuild the same user behaviour using components, controlled input and immutable state. Compare the result against the earlier JavaScript version.
02Follow the steps
The count comes from the same state as the list, keeping them consistent. Persistence and error handling should not obscure the core interaction.
03Make it yours
Complete the React project brief, then run the same add, toggle, filter and reload checks as the JavaScript stage.
React / GUIDED CODE WALKTHROUGH
const remaining = tasks.filter(task => !task.done).length;
return <output>{remaining} open tasks</output>;
// tasks contains one open and one completed task.
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Complete the React project brief, then run the same add, toggle, filter and reload checks as the JavaScript stage.
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 11 OF 15 / DEEPER
Let the browser choose an image source
picture can provide alternative image formats while img supplies the fallback and alternative 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.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗01Meet the idea
picture can provide alternative image formats while img supplies the fallback and alternative text.
02Follow the steps
The image files must exist. A format alternative is different from using srcset sizes to select resolutions.
03Make it yours
Add real files and inspect which resource the browser requests.
HTML / GUIDED CODE WALKTHROUGH
<picture><source srcset="robot.webp" type="image/webp"><img src="robot.jpg" alt="Parcel robot" width="640" height="480"></picture>
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add real files and inspect which resource the browser requests.
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 12 OF 15 / DEEPER
Make disclosure available without JavaScript
details and summary create a built-in disclosure control that supports keyboard interaction.
Unfamiliar words? Start here.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗01Meet the idea
details and summary create a built-in disclosure control that supports keyboard interaction.
02Follow the steps
The paragraph is hidden until the disclosure is open. Keep the summary informative and avoid nesting confusing controls inside it.
03Make it yours
Add open and compare the initial state; then operate it with the keyboard.
HTML / GUIDED CODE WALKTHROUGH
<details><summary>What is included?</summary><p>A starter kit and guide.</p></details>
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add open and compare the initial state; then operate 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 13 OF 15 / DEEPER
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.
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.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
- attribute
- Additional information on an HTML element, such as id, href or alt.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗01Meet the idea
aria-describedby connects additional explanatory text to a control. Invalid state and error text should be updated to match actual validation.
02Follow the steps
The attribute communicates state; it does not itself validate or style the input. Remove the invalid state when corrected.
03Make it yours
Add a valid state and ensure the error is not communicated by color alone.
HTML / GUIDED CODE WALKTHROUGH
<label for="score">Score</label><input id="score" aria-invalid="true" aria-describedby="score-error"><p id="score-error">Enter a score from 0 to 100.</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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add a valid state and ensure the error is not communicated by color alone.
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 14 OF 15 / DEEPER
Describe a meaningful document title
A unique title helps users identify a tab, bookmark and search result. It should describe the specific page.
Unfamiliar words? Start here.
- Task
- In C#, an object representing completion of work, possibly with a result. Awaiting it observes completion or failure.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗01Meet the idea
A unique title helps users identify a tab, bookmark and search result. It should describe the specific page.
02Follow the steps
The title belongs in head. It does not replace a visible heading for the page content.
03Make it yours
Compare two pages and ensure their titles distinguish their purpose.
HTML / GUIDED CODE WALKTHROUGH
<title>My tasks | Workshop Board</title>
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Compare two pages and ensure their titles distinguish their purpose.
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 15 OF 15 / DEEPER
Finish the workshop board structure
A semantic foundation should remain usable before styling and scripts. Plan labels, reading order and empty-state content first.
Unfamiliar words? Start here.
- Task
- In C#, an object representing completion of work, possibly with a result. Awaiting it observes completion or failure.
- state
- Information a component or application remembers. In React, a state setter requests a new render.
- semantic
- Describing meaning, not just appearance. A real button or heading provides behaviour or structure that a styled generic element does not.
Before you begin
No programming experience needed. Save examples in an HTML file to explore them in a browser.
Official learning reference ↗01Meet the idea
A semantic foundation should remain usable before styling and scripts. Plan labels, reading order and empty-state content first.
02Follow the steps
The heading identifies the section and the paragraph explains its current state. Later stages can replace it with a real list.
03Make it yours
Complete the HTML project brief, then carry the same document into the CSS stage.
HTML / GUIDED CODE WALKTHROUGH
<main><h1>Workshop board</h1><section aria-labelledby="tasks-heading"><h2 id="tasks-heading">My tasks</h2><p>No tasks yet.</p></section></main>
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Complete the HTML project brief, then carry the same document into the CSS stage.
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 11 OF 20 / DEEPER
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.
Unfamiliar words? Start here.
- container
- An element that holds other content. A query container must opt into the relevant kind of CSS containment.
- 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.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
Grid can choose how many tracks fit without a fixed column count. A capped minimum helps avoid overflowing narrow containers.
02Follow the steps
The minimum is at most the container width, so a narrow viewport can still fit one track. auto-fit collapses unused tracks.
03Make it yours
Compare auto-fill and auto-fit with fewer cards than available columns.
CSS / GUIDED CODE WALKTHROUGH
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Compare auto-fill and auto-fit with fewer cards than available columns.
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 12 OF 20 / DEEPER
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.
Unfamiliar words? Start here.
- container
- An element that holds other content. A query container must opt into the relevant kind of CSS containment.
- type
- A category of value that determines which operations make sense. Text, whole numbers and true/false values are different types.
- component
- A reusable piece of UI. In these React lessons it is a function that describes elements from props and state.
- viewport
- The area available for a page to render. A preview frame has its own viewport.
- flex
- A one-dimensional layout system that arranges items along a main axis, optionally wrapping them.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
Container queries let a component adapt to its container rather than only to the viewport. A suitable ancestor must establish containment.
02Follow the steps
The rule concerns an ancestor query container's inline size, not the card querying its own size.
03Make it yours
Place the card in a sidebar and a main column and compare behaviour.
CSS / GUIDED CODE WALKTHROUGH
.panel { container-type: inline-size; }
@container (min-width: 30rem) { .card { display: flex; } }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Place the card in a sidebar and a main column and compare behaviour.
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 13 OF 20 / DEEPER
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.
Unfamiliar words? Start here.
- component
- A reusable piece of UI. In these React lessons it is a function that describes elements from props and state.
- 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.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
Cascade layers provide an explicit order for groups of styles. For normal declarations, later layers beat earlier layers before specificity is compared.
02Follow the steps
The later components layer wins for these normal author declarations even against the earlier ID selector. Important declarations have different ordering rules.
03Make it yours
Add an unlayered normal rule and investigate its priority.
CSS / GUIDED CODE WALKTHROUGH
@layer base, components;
@layer base { #note { color: red; } }
@layer components { .note { color: green; } }
/* Element has id="note" and class="note". */
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Add an unlayered normal rule and investigate its priority.
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 14 OF 20 / DEEPER
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.
Unfamiliar words? Start here.
- viewport
- The area available for a page to render. A preview frame has its own viewport.
- clamp
- A CSS function choosing a preferred value within a minimum and maximum.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
clamp sets a minimum, a preferred fluid value and a maximum. Bounds keep responsive text from becoming too small or too large.
02Follow the steps
The preferred value changes with viewport width; the bounds constrain it. Test text zoom as well as viewport resizing.
03Make it yours
Resize and zoom, checking that the heading remains readable without clipping.
CSS / GUIDED CODE WALKTHROUGH
h1 { font-size: clamp(2rem, 5vw, 4rem); }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Resize and zoom, checking that the heading 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 15 OF 20 / DEEPER
Handle long content without clipping
Long unbroken text can overflow a component. Wrapping rules should preserve access to content rather than simply hiding it.
Unfamiliar words? Start here.
- component
- A reusable piece of UI. In these React lessons it is a function that describes elements from props and state.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
Long unbroken text can overflow a component. Wrapping rules should preserve access to content rather than simply hiding it.
02Follow the steps
The browser may break otherwise unbreakable text. This is useful for URLs or unpredictable user content.
03Make it yours
Test a long URL and an ordinary sentence in a narrow card.
CSS / GUIDED CODE WALKTHROUGH
.description { overflow-wrap: anywhere; }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Test a long URL and an ordinary sentence in a narrow card.
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 16 OF 20 / DEEPER
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.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
focus-visible styles a focus indicator when the browser determines one should be shown. Do not remove outlines without a replacement.
02Follow the steps
The indicator must remain visible against surrounding colors. Hover alone is not sufficient feedback.
03Make it yours
Tab through every control and check the outline is not clipped by an ancestor.
CSS / GUIDED CODE WALKTHROUGH
button:focus-visible { outline: 3px solid #dfc58a; outline-offset: 4px; }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Tab through every control and check the outline is not clipped by an ancestor.
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 17 OF 20 / DEEPER
Understand stacking contexts
A stacking context groups descendants for painting order. A huge z-index cannot escape an ancestor's lower stacking context.
Unfamiliar words? Start here.
- index
- A position in a sequence. In these examples the first index is zero, so an array of three items ends at index two.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
A stacking context groups descendants for painting order. A huge z-index cannot escape an ancestor's lower stacking context.
02Follow the steps
The badge's high value is only compared within its context. Several properties besides positioned z-index can create contexts.
03Make it yours
Inspect an overlapping example before increasing numbers randomly.
CSS / GUIDED CODE WALKTHROUGH
.panel { position: relative; z-index: 1; }
.panel .badge { position: absolute; z-index: 999; }
.overlay { position: relative; z-index: 2; }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Inspect an overlapping example before increasing numbers randomly.
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 18 OF 20 / DEEPER
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.
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.
- 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.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
Transforms and opacity often avoid layout work, but actual performance still depends on the page. Motion should not carry essential information alone.
02Follow the steps
The default opacity is one, so the animation returns to full opacity between cycles. The reduced-motion rule removes the animation.
03Make it yours
Keep a static status label so meaning remains available when motion is off.
CSS / GUIDED CODE WALKTHROUGH
.signal { animation: breathe 2s infinite; }
@keyframes breathe { 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .signal { animation: none; } }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Keep a static status label so meaning remains available when motion is off.
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 19 OF 20 / DEEPER
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.
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.
- interface
- A contract describing operations a type provides. Callers can depend on the contract instead of one particular implementation.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
Logical properties follow writing direction. They can make spacing rules work across left-to-right and right-to-left interfaces.
02Follow the steps
In ordinary horizontal English layout, these correspond to horizontal padding and vertical margins.
03Make it yours
Switch the writing direction and compare logical properties with hard-coded left and right rules.
CSS / GUIDED CODE WALKTHROUGH
.card { padding-inline: 1rem; margin-block: 2rem; }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Switch the writing direction and compare logical properties with hard-coded left and right rules.
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 20 OF 20 / DEEPER
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.
Unfamiliar words? Start here.
- margin
- Space outside an element’s border. It remains outside the declared border-box width.
Before you begin
Complete the HTML path first. Apply each rule to HTML with the matching classes and inspect the result in your browser.
Official learning reference ↗01Meet the idea
A finished layout must survive real content, keyboard operation, zoom and narrow screens. A screenshot at one width is not enough.
02Follow the steps
The available width shrinks on small screens while the maximum prevents excessively long lines. Child content still needs its own overflow handling.
03Make it yours
Complete the CSS project checklist at narrow and wide widths, then move into JavaScript behaviour.
CSS / GUIDED CODE WALKTHROUGH
.board { width: min(100% - 2rem, 70rem); margin-inline: auto; }
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
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 the stated inputs and context, what is the expected behaviour?
YOUR TURN / PRACTISE, THEN EXPLAIN
Make the idea work for you.
Complete the CSS project checklist at narrow and wide widths, then move into JavaScript behaviour.
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.