When a learner can reproduce a familiar example but a small variation causes confusion, the problem is usually an incomplete model rather than a lack of effort. The fastest useful response is to expose the hidden state and test one boundary at a time.
CSS scroll snap lets a scrolling container define an axis and snap strictness while its descendants provide candidate snap positions. Mastery means identifying the real scroll container, reasoning in logical axes, locating the snapport and alignment area, and testing touch, keyboard, reduced-motion and oversized-content boundaries. This guide begins with that mechanism, then develops it through worked traces, deliberate mistakes, explained practice and transfer decisions.
The aim is independent reasoning. A learner should be able to predict behaviour, locate the earliest wrong assumption, use a safe diagnostic procedure and defend a design choice in a new project.
Punggol families can use the guide in short sessions around homework, CCAs and rest. The activities are proposed learning exercises, not claims about a physical branch, timetable, class size, fee, school relationship or guaranteed result.
Use disposable data and repositories, preserve backups, and check version-sensitive details against the official source. Current documentation settles a technical contract; observation and explanation turn that contract into usable knowledge.
Find your next learning step
Choose the route that matches the present difficulty. Use the complete index for a systematic course.
Build the model
Chapters 1-4 . Begin here, then continue after the learner can predict, verify and explain.
Use the core tools
Chapters 5-8 . Begin here, then continue after the learner can predict, verify and explain.
Handle boundaries
Chapters 9-12 . Begin here, then continue after the learner can predict, verify and explain.
Debug and verify
Chapters 13-16 . Begin here, then continue after the learner can predict, verify and explain.
Transfer with judgment
Chapters 17-20 . Begin here, then continue after the learner can predict, verify and explain.
Open the full chapter index . Jump to capstone practice . Use the How Studying Works hub . Read the official documentation
Complete chapter index
Chapters 1-4 . Build the model
Chapters 5-8 . Use the core tools
Chapters 9-12 . Handle boundaries
Chapters 13-16 . Debug and verify
Chapters 17-20 . Transfer with judgment
Scroll snapping works on a scrolling box whose scroll-snap-type defines the axis and strictness; descendants contribute positions with scroll-snap-align. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is putting snap properties on a wrapper that never actually scrolls. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Identify overflow, scroll range and viewport first, then mark the real scrolling element.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.deck{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
.card{flex:0 0 80%;scroll-snap-align:start}Explained result. The deck scrolls horizontally and each card offers a start-aligned snap position. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision-card row. Predict the rule using six topic cards of different text lengths. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Scroll snapping works on a scrolling box whose scroll-snap-type defines the axis and strictness; descendants contribute positions with scroll-snap-align.” Apply this procedure: Identify overflow, scroll range and viewport first, then mark the real scrolling element. The expected mechanism is: The deck scrolls horizontally and each card offers a start-aligned snap position. For the revision-card row, add one near-miss that exposes putting snap properties on a wrapper that never actually scrolls. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: school-event gallery. Contrast the rule using landscape and portrait images with captions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Scroll snapping works on a scrolling box whose scroll-snap-type defines the axis and strictness; descendants contribute positions with scroll-snap-align.” Apply this procedure: Identify overflow, scroll range and viewport first, then mark the real scrolling element. The expected mechanism is: The deck scrolls horizontally and each card offers a start-aligned snap position. For the school-event gallery, add one near-miss that exposes putting snap properties on a wrapper that never actually scrolls. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: worked-example deck. Stress-test the rule using step panels with previous and next controls. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Scroll snapping works on a scrolling box whose scroll-snap-type defines the axis and strictness; descendants contribute positions with scroll-snap-align.” Apply this procedure: Identify overflow, scroll range and viewport first, then mark the real scrolling element. The expected mechanism is: The deck scrolls horizontally and each card offers a start-aligned snap position. For the worked-example deck, add one near-miss that exposes putting snap properties on a wrapper that never actually scrolls. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading chapters. Explain the rule using full-height sections with long accessible content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Scroll snapping works on a scrolling box whose scroll-snap-type defines the axis and strictness; descendants contribute positions with scroll-snap-align.” Apply this procedure: Identify overflow, scroll range and viewport first, then mark the real scrolling element. The expected mechanism is: The deck scrolls horizontally and each card offers a start-aligned snap position. For the reading chapters, add one near-miss that exposes putting snap properties on a wrapper that never actually scrolls. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers putting snap properties on a wrapper that never actually scrolls.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Identify overflow, scroll range and viewport first, then mark the real scrolling element.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny science process with ordered stages with diagrams and notes. Include one ordinary case, one boundary and one deliberate failure caused by putting snap properties on a wrapper that never actually scrolls. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Scroll snapping works on a scrolling box whose scroll-snap-type defines the axis and strictness; descendants contribute positions with scroll-snap-align. It shows a trace, not only a final value. The ordinary case should demonstrate “The deck scrolls horizontally and each card offers a start-aligned snap position.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Identify overflow, scroll range and viewport first, then mark the real scrolling element. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
A box needs overflow content along the chosen axis before user scrolling and snap selection can occur. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is debugging snap alignment when every child already fits inside the container. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Measure client size and scroll size, then temporarily outline the container and children.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:18rem;overflow-x:auto}Explained result. Fixed column tracks can create horizontal overflow; without overflow there is no meaningful horizontal snap journey. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: worked-example deck. Contrast the rule using step panels with previous and next controls. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A box needs overflow content along the chosen axis before user scrolling and snap selection can occur.” Apply this procedure: Measure client size and scroll size, then temporarily outline the container and children. The expected mechanism is: Fixed column tracks can create horizontal overflow; without overflow there is no meaningful horizontal snap journey. For the worked-example deck, add one near-miss that exposes debugging snap alignment when every child already fits inside the container. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading chapters. Stress-test the rule using full-height sections with long accessible content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A box needs overflow content along the chosen axis before user scrolling and snap selection can occur.” Apply this procedure: Measure client size and scroll size, then temporarily outline the container and children. The expected mechanism is: Fixed column tracks can create horizontal overflow; without overflow there is no meaningful horizontal snap journey. For the reading chapters, add one near-miss that exposes debugging snap alignment when every child already fits inside the container. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: timetable strip. Explain the rule using weekday columns and current-period highlighting. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A box needs overflow content along the chosen axis before user scrolling and snap selection can occur.” Apply this procedure: Measure client size and scroll size, then temporarily outline the container and children. The expected mechanism is: Fixed column tracks can create horizontal overflow; without overflow there is no meaningful horizontal snap journey. For the timetable strip, add one near-miss that exposes debugging snap alignment when every child already fits inside the container. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: science process. Transfer the rule using ordered stages with diagrams and notes. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A box needs overflow content along the chosen axis before user scrolling and snap selection can occur.” Apply this procedure: Measure client size and scroll size, then temporarily outline the container and children. The expected mechanism is: Fixed column tracks can create horizontal overflow; without overflow there is no meaningful horizontal snap journey. For the science process, add one near-miss that exposes debugging snap alignment when every child already fits inside the container. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers debugging snap alignment when every child already fits inside the container.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Measure client size and scroll size, then temporarily outline the container and children.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny mobile vocabulary list with short definition cards in a horizontal lane. Include one ordinary case, one boundary and one deliberate failure caused by debugging snap alignment when every child already fits inside the container. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: A box needs overflow content along the chosen axis before user scrolling and snap selection can occur. It shows a trace, not only a final value. The ordinary case should demonstrate “Fixed column tracks can create horizontal overflow; without overflow there is no meaningful horizontal snap journey.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Measure client size and scroll size, then temporarily outline the container and children. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
scroll-snap-type can use physical axes or logical block and inline axes that adapt to writing mode. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is choosing x because the current language is horizontal and forgetting logical layout. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. State the reading direction and writing mode, then choose physical or logical axes deliberately.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.chapters{overflow-block:auto;scroll-snap-type:block proximity}Explained result. The snap axis follows the block direction rather than assuming a physical y axis. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: timetable strip. Stress-test the rule using weekday columns and current-period highlighting. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-type can use physical axes or logical block and inline axes that adapt to writing mode.” Apply this procedure: State the reading direction and writing mode, then choose physical or logical axes deliberately. The expected mechanism is: The snap axis follows the block direction rather than assuming a physical y axis. For the timetable strip, add one near-miss that exposes choosing x because the current language is horizontal and forgetting logical layout. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: science process. Explain the rule using ordered stages with diagrams and notes. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-type can use physical axes or logical block and inline axes that adapt to writing mode.” Apply this procedure: State the reading direction and writing mode, then choose physical or logical axes deliberately. The expected mechanism is: The snap axis follows the block direction rather than assuming a physical y axis. For the science process, add one near-miss that exposes choosing x because the current language is horizontal and forgetting logical layout. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: mobile vocabulary list. Transfer the rule using short definition cards in a horizontal lane. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-type can use physical axes or logical block and inline axes that adapt to writing mode.” Apply this procedure: State the reading direction and writing mode, then choose physical or logical axes deliberately. The expected mechanism is: The snap axis follows the block direction rather than assuming a physical y axis. For the mobile vocabulary list, add one near-miss that exposes choosing x because the current language is horizontal and forgetting logical layout. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: project showcase. Predict the rule using responsive cards inside a wider page layout. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-type can use physical axes or logical block and inline axes that adapt to writing mode.” Apply this procedure: State the reading direction and writing mode, then choose physical or logical axes deliberately. The expected mechanism is: The snap axis follows the block direction rather than assuming a physical y axis. For the project showcase, add one near-miss that exposes choosing x because the current language is horizontal and forgetting logical layout. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers choosing x because the current language is horizontal and forgetting logical layout.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “State the reading direction and writing mode, then choose physical or logical axes deliberately.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny project showcase with responsive cards inside a wider page layout. Include one ordinary case, one boundary and one deliberate failure caused by choosing x because the current language is horizontal and forgetting logical layout. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: scroll-snap-type can use physical axes or logical block and inline axes that adapt to writing mode. It shows a trace, not only a final value. The ordinary case should demonstrate “The snap axis follows the block direction rather than assuming a physical y axis.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: State the reading direction and writing mode, then choose physical or logical axes deliberately. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
mandatory requests snapping whenever scrolling ends, while proximity lets the user agent snap when a point is sufficiently near. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using mandatory for long panels that can trap inaccessible middle content. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test short and oversized children with wheel, touch and keyboard before selecting strictness.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.gallery{scroll-snap-type:inline proximity}Explained result. The browser may settle on nearby inline snap points without forcing every scroll ending onto one. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: mobile vocabulary list. Explain the rule using short definition cards in a horizontal lane. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “mandatory requests snapping whenever scrolling ends, while proximity lets the user agent snap when a point is sufficiently near.” Apply this procedure: Test short and oversized children with wheel, touch and keyboard before selecting strictness. The expected mechanism is: The browser may settle on nearby inline snap points without forcing every scroll ending onto one. For the mobile vocabulary list, add one near-miss that exposes using mandatory for long panels that can trap inaccessible middle content. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: project showcase. Transfer the rule using responsive cards inside a wider page layout. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “mandatory requests snapping whenever scrolling ends, while proximity lets the user agent snap when a point is sufficiently near.” Apply this procedure: Test short and oversized children with wheel, touch and keyboard before selecting strictness. The expected mechanism is: The browser may settle on nearby inline snap points without forcing every scroll ending onto one. For the project showcase, add one near-miss that exposes using mandatory for long panels that can trap inaccessible middle content. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision-card row. Predict the rule using six topic cards of different text lengths. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “mandatory requests snapping whenever scrolling ends, while proximity lets the user agent snap when a point is sufficiently near.” Apply this procedure: Test short and oversized children with wheel, touch and keyboard before selecting strictness. The expected mechanism is: The browser may settle on nearby inline snap points without forcing every scroll ending onto one. For the revision-card row, add one near-miss that exposes using mandatory for long panels that can trap inaccessible middle content. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: school-event gallery. Contrast the rule using landscape and portrait images with captions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “mandatory requests snapping whenever scrolling ends, while proximity lets the user agent snap when a point is sufficiently near.” Apply this procedure: Test short and oversized children with wheel, touch and keyboard before selecting strictness. The expected mechanism is: The browser may settle on nearby inline snap points without forcing every scroll ending onto one. For the school-event gallery, add one near-miss that exposes using mandatory for long panels that can trap inaccessible middle content. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using mandatory for long panels that can trap inaccessible middle content.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test short and oversized children with wheel, touch and keyboard before selecting strictness.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny revision-card row with six topic cards of different text lengths. Include one ordinary case, one boundary and one deliberate failure caused by using mandatory for long panels that can trap inaccessible middle content. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: mandatory requests snapping whenever scrolling ends, while proximity lets the user agent snap when a point is sufficiently near. It shows a trace, not only a final value. The ordinary case should demonstrate “The browser may settle on nearby inline snap points without forcing every scroll ending onto one.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test short and oversized children with wheel, touch and keyboard before selecting strictness. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
scroll-snap-align defines the child’s alignment in the snapport, with one value for both axes or two values for block and inline. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming center changes the child layout rather than its candidate scroll position. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Draw the child snap area and container snapport, then compare start, center and end.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.card{scroll-snap-align:center}Explained result. Each card offers a position where its snap area is centred in the relevant snapport axis. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision-card row. Transfer the rule using six topic cards of different text lengths. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-align defines the child’s alignment in the snapport, with one value for both axes or two values for block and inline.” Apply this procedure: Draw the child snap area and container snapport, then compare start, center and end. The expected mechanism is: Each card offers a position where its snap area is centred in the relevant snapport axis. For the revision-card row, add one near-miss that exposes assuming center changes the child layout rather than its candidate scroll position. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: school-event gallery. Predict the rule using landscape and portrait images with captions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-align defines the child’s alignment in the snapport, with one value for both axes or two values for block and inline.” Apply this procedure: Draw the child snap area and container snapport, then compare start, center and end. The expected mechanism is: Each card offers a position where its snap area is centred in the relevant snapport axis. For the school-event gallery, add one near-miss that exposes assuming center changes the child layout rather than its candidate scroll position. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: worked-example deck. Contrast the rule using step panels with previous and next controls. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-align defines the child’s alignment in the snapport, with one value for both axes or two values for block and inline.” Apply this procedure: Draw the child snap area and container snapport, then compare start, center and end. The expected mechanism is: Each card offers a position where its snap area is centred in the relevant snapport axis. For the worked-example deck, add one near-miss that exposes assuming center changes the child layout rather than its candidate scroll position. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading chapters. Stress-test the rule using full-height sections with long accessible content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-align defines the child’s alignment in the snapport, with one value for both axes or two values for block and inline.” Apply this procedure: Draw the child snap area and container snapport, then compare start, center and end. The expected mechanism is: Each card offers a position where its snap area is centred in the relevant snapport axis. For the reading chapters, add one near-miss that exposes assuming center changes the child layout rather than its candidate scroll position. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming center changes the child layout rather than its candidate scroll position.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Draw the child snap area and container snapport, then compare start, center and end.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny school-event gallery with landscape and portrait images with captions. Include one ordinary case, one boundary and one deliberate failure caused by assuming center changes the child layout rather than its candidate scroll position. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: scroll-snap-align defines the child’s alignment in the snapport, with one value for both axes or two values for block and inline. It shows a trace, not only a final value. The ordinary case should demonstrate “Each card offers a position where its snap area is centred in the relevant snapport axis.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Draw the child snap area and container snapport, then compare start, center and end. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
scroll-padding adjusts the container’s optimal viewing region, which is vital when sticky headers or desired breathing room occupy part of the viewport. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is adding padding to every child and expecting equivalent snap geometry. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Mark the obscured region on the container and express it once with logical scroll-padding.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.page{scroll-snap-type:block proximity;scroll-padding-block-start:5rem}Explained result. Start-aligned sections settle below the reserved five-rem header region. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: worked-example deck. Predict the rule using step panels with previous and next controls. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-padding adjusts the container’s optimal viewing region, which is vital when sticky headers or desired breathing room occupy part of the viewport.” Apply this procedure: Mark the obscured region on the container and express it once with logical scroll-padding. The expected mechanism is: Start-aligned sections settle below the reserved five-rem header region. For the worked-example deck, add one near-miss that exposes adding padding to every child and expecting equivalent snap geometry. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading chapters. Contrast the rule using full-height sections with long accessible content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-padding adjusts the container’s optimal viewing region, which is vital when sticky headers or desired breathing room occupy part of the viewport.” Apply this procedure: Mark the obscured region on the container and express it once with logical scroll-padding. The expected mechanism is: Start-aligned sections settle below the reserved five-rem header region. For the reading chapters, add one near-miss that exposes adding padding to every child and expecting equivalent snap geometry. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: timetable strip. Stress-test the rule using weekday columns and current-period highlighting. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-padding adjusts the container’s optimal viewing region, which is vital when sticky headers or desired breathing room occupy part of the viewport.” Apply this procedure: Mark the obscured region on the container and express it once with logical scroll-padding. The expected mechanism is: Start-aligned sections settle below the reserved five-rem header region. For the timetable strip, add one near-miss that exposes adding padding to every child and expecting equivalent snap geometry. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: science process. Explain the rule using ordered stages with diagrams and notes. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-padding adjusts the container’s optimal viewing region, which is vital when sticky headers or desired breathing room occupy part of the viewport.” Apply this procedure: Mark the obscured region on the container and express it once with logical scroll-padding. The expected mechanism is: Start-aligned sections settle below the reserved five-rem header region. For the science process, add one near-miss that exposes adding padding to every child and expecting equivalent snap geometry. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers adding padding to every child and expecting equivalent snap geometry.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Mark the obscured region on the container and express it once with logical scroll-padding.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny worked-example deck with step panels with previous and next controls. Include one ordinary case, one boundary and one deliberate failure caused by adding padding to every child and expecting equivalent snap geometry. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: scroll-padding adjusts the container’s optimal viewing region, which is vital when sticky headers or desired breathing room occupy part of the viewport. It shows a trace, not only a final value. The ordinary case should demonstrate “Start-aligned sections settle below the reserved five-rem header region.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Mark the obscured region on the container and express it once with logical scroll-padding. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
scroll-margin expands or offsets the child’s scroll snap area without changing ordinary layout spacing. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using layout margin solely to repair where snapping stops. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Keep visual spacing and snap offset as separate decisions and inspect the target child.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.section{scroll-snap-align:start;scroll-margin-block-start:1rem}Explained result. The section’s snap area includes a one-rem start offset for scroll positioning. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: timetable strip. Contrast the rule using weekday columns and current-period highlighting. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-margin expands or offsets the child’s scroll snap area without changing ordinary layout spacing.” Apply this procedure: Keep visual spacing and snap offset as separate decisions and inspect the target child. The expected mechanism is: The section’s snap area includes a one-rem start offset for scroll positioning. For the timetable strip, add one near-miss that exposes using layout margin solely to repair where snapping stops. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: science process. Stress-test the rule using ordered stages with diagrams and notes. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-margin expands or offsets the child’s scroll snap area without changing ordinary layout spacing.” Apply this procedure: Keep visual spacing and snap offset as separate decisions and inspect the target child. The expected mechanism is: The section’s snap area includes a one-rem start offset for scroll positioning. For the science process, add one near-miss that exposes using layout margin solely to repair where snapping stops. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: mobile vocabulary list. Explain the rule using short definition cards in a horizontal lane. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-margin expands or offsets the child’s scroll snap area without changing ordinary layout spacing.” Apply this procedure: Keep visual spacing and snap offset as separate decisions and inspect the target child. The expected mechanism is: The section’s snap area includes a one-rem start offset for scroll positioning. For the mobile vocabulary list, add one near-miss that exposes using layout margin solely to repair where snapping stops. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: project showcase. Transfer the rule using responsive cards inside a wider page layout. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-margin expands or offsets the child’s scroll snap area without changing ordinary layout spacing.” Apply this procedure: Keep visual spacing and snap offset as separate decisions and inspect the target child. The expected mechanism is: The section’s snap area includes a one-rem start offset for scroll positioning. For the project showcase, add one near-miss that exposes using layout margin solely to repair where snapping stops. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using layout margin solely to repair where snapping stops.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Keep visual spacing and snap offset as separate decisions and inspect the target child.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny reading chapters with full-height sections with long accessible content. Include one ordinary case, one boundary and one deliberate failure caused by using layout margin solely to repair where snapping stops. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: scroll-margin expands or offsets the child’s scroll snap area without changing ordinary layout spacing. It shows a trace, not only a final value. The ordinary case should demonstrate “The section’s snap area includes a one-rem start offset for scroll positioning.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Keep visual spacing and snap offset as separate decisions and inspect the target child. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
When both axes matter, two scroll-snap-align values state block alignment first and inline alignment second. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is reversing the logical-axis order. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Label block and inline on a sketch before writing the pair.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.tile{scroll-snap-align:center start}Explained result. The tile aligns centre in the block axis and start in the inline axis when both are relevant. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: mobile vocabulary list. Stress-test the rule using short definition cards in a horizontal lane. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When both axes matter, two scroll-snap-align values state block alignment first and inline alignment second.” Apply this procedure: Label block and inline on a sketch before writing the pair. The expected mechanism is: The tile aligns centre in the block axis and start in the inline axis when both are relevant. For the mobile vocabulary list, add one near-miss that exposes reversing the logical-axis order. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: project showcase. Explain the rule using responsive cards inside a wider page layout. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When both axes matter, two scroll-snap-align values state block alignment first and inline alignment second.” Apply this procedure: Label block and inline on a sketch before writing the pair. The expected mechanism is: The tile aligns centre in the block axis and start in the inline axis when both are relevant. For the project showcase, add one near-miss that exposes reversing the logical-axis order. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision-card row. Transfer the rule using six topic cards of different text lengths. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When both axes matter, two scroll-snap-align values state block alignment first and inline alignment second.” Apply this procedure: Label block and inline on a sketch before writing the pair. The expected mechanism is: The tile aligns centre in the block axis and start in the inline axis when both are relevant. For the revision-card row, add one near-miss that exposes reversing the logical-axis order. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: school-event gallery. Predict the rule using landscape and portrait images with captions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When both axes matter, two scroll-snap-align values state block alignment first and inline alignment second.” Apply this procedure: Label block and inline on a sketch before writing the pair. The expected mechanism is: The tile aligns centre in the block axis and start in the inline axis when both are relevant. For the school-event gallery, add one near-miss that exposes reversing the logical-axis order. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers reversing the logical-axis order.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Label block and inline on a sketch before writing the pair.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny timetable strip with weekday columns and current-period highlighting. Include one ordinary case, one boundary and one deliberate failure caused by reversing the logical-axis order. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: When both axes matter, two scroll-snap-align values state block alignment first and inline alignment second. It shows a trace, not only a final value. The ordinary case should demonstrate “The tile aligns centre in the block axis and start in the inline axis when both are relevant.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Label block and inline on a sketch before writing the pair. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
scroll-snap-stop can request that a snap position not be passed over during fast scrolling, with normal as the default and always as the stronger option. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is setting always on every item and creating a slow, frustrating traversal. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Reserve stronger stopping for genuinely sequential steps and test fling gestures on real devices.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.step{scroll-snap-align:start;scroll-snap-stop:always}Explained result. The browser is asked not to skip that step’s snap position during one scrolling operation. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision-card row. Explain the rule using six topic cards of different text lengths. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-stop can request that a snap position not be passed over during fast scrolling, with normal as the default and always as the stronger option.” Apply this procedure: Reserve stronger stopping for genuinely sequential steps and test fling gestures on real devices. The expected mechanism is: The browser is asked not to skip that step’s snap position during one scrolling operation. For the revision-card row, add one near-miss that exposes setting always on every item and creating a slow, frustrating traversal. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: school-event gallery. Transfer the rule using landscape and portrait images with captions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-stop can request that a snap position not be passed over during fast scrolling, with normal as the default and always as the stronger option.” Apply this procedure: Reserve stronger stopping for genuinely sequential steps and test fling gestures on real devices. The expected mechanism is: The browser is asked not to skip that step’s snap position during one scrolling operation. For the school-event gallery, add one near-miss that exposes setting always on every item and creating a slow, frustrating traversal. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: worked-example deck. Predict the rule using step panels with previous and next controls. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-stop can request that a snap position not be passed over during fast scrolling, with normal as the default and always as the stronger option.” Apply this procedure: Reserve stronger stopping for genuinely sequential steps and test fling gestures on real devices. The expected mechanism is: The browser is asked not to skip that step’s snap position during one scrolling operation. For the worked-example deck, add one near-miss that exposes setting always on every item and creating a slow, frustrating traversal. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading chapters. Contrast the rule using full-height sections with long accessible content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-snap-stop can request that a snap position not be passed over during fast scrolling, with normal as the default and always as the stronger option.” Apply this procedure: Reserve stronger stopping for genuinely sequential steps and test fling gestures on real devices. The expected mechanism is: The browser is asked not to skip that step’s snap position during one scrolling operation. For the reading chapters, add one near-miss that exposes setting always on every item and creating a slow, frustrating traversal. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers setting always on every item and creating a slow, frustrating traversal.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Reserve stronger stopping for genuinely sequential steps and test fling gestures on real devices.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny science process with ordered stages with diagrams and notes. Include one ordinary case, one boundary and one deliberate failure caused by setting always on every item and creating a slow, frustrating traversal. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: scroll-snap-stop can request that a snap position not be passed over during fast scrolling, with normal as the default and always as the stronger option. It shows a trace, not only a final value. The ordinary case should demonstrate “The browser is asked not to skip that step’s snap position during one scrolling operation.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Reserve stronger stopping for genuinely sequential steps and test fling gestures on real devices. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
Flex and grid defaults can shrink or stretch items, changing the snap geometry even when the snapping rules are correct. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is changing snap strictness when the real problem is flex-shrink. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Inspect computed item sizes and set flex-basis, min-size or grid auto tracks explicitly.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.card{flex:0 0 min(85vw,32rem)}Explained result. Each card keeps an explicit responsive base size instead of shrinking to remove overflow. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: worked-example deck. Transfer the rule using step panels with previous and next controls. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Flex and grid defaults can shrink or stretch items, changing the snap geometry even when the snapping rules are correct.” Apply this procedure: Inspect computed item sizes and set flex-basis, min-size or grid auto tracks explicitly. The expected mechanism is: Each card keeps an explicit responsive base size instead of shrinking to remove overflow. For the worked-example deck, add one near-miss that exposes changing snap strictness when the real problem is flex-shrink. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading chapters. Predict the rule using full-height sections with long accessible content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Flex and grid defaults can shrink or stretch items, changing the snap geometry even when the snapping rules are correct.” Apply this procedure: Inspect computed item sizes and set flex-basis, min-size or grid auto tracks explicitly. The expected mechanism is: Each card keeps an explicit responsive base size instead of shrinking to remove overflow. For the reading chapters, add one near-miss that exposes changing snap strictness when the real problem is flex-shrink. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: timetable strip. Contrast the rule using weekday columns and current-period highlighting. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Flex and grid defaults can shrink or stretch items, changing the snap geometry even when the snapping rules are correct.” Apply this procedure: Inspect computed item sizes and set flex-basis, min-size or grid auto tracks explicitly. The expected mechanism is: Each card keeps an explicit responsive base size instead of shrinking to remove overflow. For the timetable strip, add one near-miss that exposes changing snap strictness when the real problem is flex-shrink. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: science process. Stress-test the rule using ordered stages with diagrams and notes. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Flex and grid defaults can shrink or stretch items, changing the snap geometry even when the snapping rules are correct.” Apply this procedure: Inspect computed item sizes and set flex-basis, min-size or grid auto tracks explicitly. The expected mechanism is: Each card keeps an explicit responsive base size instead of shrinking to remove overflow. For the science process, add one near-miss that exposes changing snap strictness when the real problem is flex-shrink. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers changing snap strictness when the real problem is flex-shrink.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Inspect computed item sizes and set flex-basis, min-size or grid auto tracks explicitly.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny mobile vocabulary list with short definition cards in a horizontal lane. Include one ordinary case, one boundary and one deliberate failure caused by changing snap strictness when the real problem is flex-shrink. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Flex and grid defaults can shrink or stretch items, changing the snap geometry even when the snapping rules are correct. It shows a trace, not only a final value. The ordinary case should demonstrate “Each card keeps an explicit responsive base size instead of shrinking to remove overflow.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Inspect computed item sizes and set flex-basis, min-size or grid auto tracks explicitly. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
A child larger than the snapport must still allow its interior to be reached; mandatory snapping deserves special caution here. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is designing only with short sample text. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Insert a deliberately long card and confirm every line can be reached without snap forcing the view away.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.article{min-block-size:100%;scroll-snap-align:start}Explained result. The section can start at a snap point, but content height and strictness must be tested for complete access. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: timetable strip. Predict the rule using weekday columns and current-period highlighting. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A child larger than the snapport must still allow its interior to be reached; mandatory snapping deserves special caution here.” Apply this procedure: Insert a deliberately long card and confirm every line can be reached without snap forcing the view away. The expected mechanism is: The section can start at a snap point, but content height and strictness must be tested for complete access. For the timetable strip, add one near-miss that exposes designing only with short sample text. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: science process. Contrast the rule using ordered stages with diagrams and notes. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A child larger than the snapport must still allow its interior to be reached; mandatory snapping deserves special caution here.” Apply this procedure: Insert a deliberately long card and confirm every line can be reached without snap forcing the view away. The expected mechanism is: The section can start at a snap point, but content height and strictness must be tested for complete access. For the science process, add one near-miss that exposes designing only with short sample text. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: mobile vocabulary list. Stress-test the rule using short definition cards in a horizontal lane. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A child larger than the snapport must still allow its interior to be reached; mandatory snapping deserves special caution here.” Apply this procedure: Insert a deliberately long card and confirm every line can be reached without snap forcing the view away. The expected mechanism is: The section can start at a snap point, but content height and strictness must be tested for complete access. For the mobile vocabulary list, add one near-miss that exposes designing only with short sample text. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: project showcase. Explain the rule using responsive cards inside a wider page layout. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A child larger than the snapport must still allow its interior to be reached; mandatory snapping deserves special caution here.” Apply this procedure: Insert a deliberately long card and confirm every line can be reached without snap forcing the view away. The expected mechanism is: The section can start at a snap point, but content height and strictness must be tested for complete access. For the project showcase, add one near-miss that exposes designing only with short sample text. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers designing only with short sample text.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Insert a deliberately long card and confirm every line can be reached without snap forcing the view away.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny project showcase with responsive cards inside a wider page layout. Include one ordinary case, one boundary and one deliberate failure caused by designing only with short sample text. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: A child larger than the snapport must still allow its interior to be reached; mandatory snapping deserves special caution here. It shows a trace, not only a final value. The ordinary case should demonstrate “The section can start at a snap point, but content height and strictness must be tested for complete access.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Insert a deliberately long card and confirm every line can be reached without snap forcing the view away. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
When scrollers are nested, gesture direction, overscroll and the nearest scrollable ancestor determine which container moves and snaps. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is adding snapping to both ancestors without testing gesture ownership. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Draw container boundaries, test one axis at a time and minimise competing directions.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.outer{overflow-y:auto;scroll-snap-type:y proximity}
.inner{overflow-x:auto;scroll-snap-type:x mandatory}Explained result. Vertical gestures belong to the outer journey and horizontal gestures to the inner rail when layout and device interpretation cooperate. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: mobile vocabulary list. Contrast the rule using short definition cards in a horizontal lane. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When scrollers are nested, gesture direction, overscroll and the nearest scrollable ancestor determine which container moves and snaps.” Apply this procedure: Draw container boundaries, test one axis at a time and minimise competing directions. The expected mechanism is: Vertical gestures belong to the outer journey and horizontal gestures to the inner rail when layout and device interpretation cooperate. For the mobile vocabulary list, add one near-miss that exposes adding snapping to both ancestors without testing gesture ownership. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: project showcase. Stress-test the rule using responsive cards inside a wider page layout. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When scrollers are nested, gesture direction, overscroll and the nearest scrollable ancestor determine which container moves and snaps.” Apply this procedure: Draw container boundaries, test one axis at a time and minimise competing directions. The expected mechanism is: Vertical gestures belong to the outer journey and horizontal gestures to the inner rail when layout and device interpretation cooperate. For the project showcase, add one near-miss that exposes adding snapping to both ancestors without testing gesture ownership. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision-card row. Explain the rule using six topic cards of different text lengths. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When scrollers are nested, gesture direction, overscroll and the nearest scrollable ancestor determine which container moves and snaps.” Apply this procedure: Draw container boundaries, test one axis at a time and minimise competing directions. The expected mechanism is: Vertical gestures belong to the outer journey and horizontal gestures to the inner rail when layout and device interpretation cooperate. For the revision-card row, add one near-miss that exposes adding snapping to both ancestors without testing gesture ownership. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: school-event gallery. Transfer the rule using landscape and portrait images with captions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When scrollers are nested, gesture direction, overscroll and the nearest scrollable ancestor determine which container moves and snaps.” Apply this procedure: Draw container boundaries, test one axis at a time and minimise competing directions. The expected mechanism is: Vertical gestures belong to the outer journey and horizontal gestures to the inner rail when layout and device interpretation cooperate. For the school-event gallery, add one near-miss that exposes adding snapping to both ancestors without testing gesture ownership. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers adding snapping to both ancestors without testing gesture ownership.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Draw container boundaries, test one axis at a time and minimise competing directions.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny revision-card row with six topic cards of different text lengths. Include one ordinary case, one boundary and one deliberate failure caused by adding snapping to both ancestors without testing gesture ownership. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: When scrollers are nested, gesture direction, overscroll and the nearest scrollable ancestor determine which container moves and snaps. It shows a trace, not only a final value. The ordinary case should demonstrate “Vertical gestures belong to the outer journey and horizontal gestures to the inner rail when layout and device interpretation cooperate.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Draw container boundaries, test one axis at a time and minimise competing directions. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
After content changes, the browser may re-snap to a previously snapped element when it remains present, so dynamic updates need observation. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming inserted cards leave scroll position numerically unchanged. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Record the snapped item identity before mutation and compare both identity and scroll offset afterwards.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
rail.prepend(newCard);Explained result. The useful assertion is which item remains meaningfully in view, not only the raw scrollLeft value. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision-card row. Stress-test the rule using six topic cards of different text lengths. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “After content changes, the browser may re-snap to a previously snapped element when it remains present, so dynamic updates need observation.” Apply this procedure: Record the snapped item identity before mutation and compare both identity and scroll offset afterwards. The expected mechanism is: The useful assertion is which item remains meaningfully in view, not only the raw scrollLeft value. For the revision-card row, add one near-miss that exposes assuming inserted cards leave scroll position numerically unchanged. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: school-event gallery. Explain the rule using landscape and portrait images with captions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “After content changes, the browser may re-snap to a previously snapped element when it remains present, so dynamic updates need observation.” Apply this procedure: Record the snapped item identity before mutation and compare both identity and scroll offset afterwards. The expected mechanism is: The useful assertion is which item remains meaningfully in view, not only the raw scrollLeft value. For the school-event gallery, add one near-miss that exposes assuming inserted cards leave scroll position numerically unchanged. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: worked-example deck. Transfer the rule using step panels with previous and next controls. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “After content changes, the browser may re-snap to a previously snapped element when it remains present, so dynamic updates need observation.” Apply this procedure: Record the snapped item identity before mutation and compare both identity and scroll offset afterwards. The expected mechanism is: The useful assertion is which item remains meaningfully in view, not only the raw scrollLeft value. For the worked-example deck, add one near-miss that exposes assuming inserted cards leave scroll position numerically unchanged. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading chapters. Predict the rule using full-height sections with long accessible content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “After content changes, the browser may re-snap to a previously snapped element when it remains present, so dynamic updates need observation.” Apply this procedure: Record the snapped item identity before mutation and compare both identity and scroll offset afterwards. The expected mechanism is: The useful assertion is which item remains meaningfully in view, not only the raw scrollLeft value. For the reading chapters, add one near-miss that exposes assuming inserted cards leave scroll position numerically unchanged. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming inserted cards leave scroll position numerically unchanged.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Record the snapped item identity before mutation and compare both identity and scroll offset afterwards.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny school-event gallery with landscape and portrait images with captions. Include one ordinary case, one boundary and one deliberate failure caused by assuming inserted cards leave scroll position numerically unchanged. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: After content changes, the browser may re-snap to a previously snapped element when it remains present, so dynamic updates need observation. It shows a trace, not only a final value. The ordinary case should demonstrate “The useful assertion is which item remains meaningfully in view, not only the raw scrollLeft value.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Record the snapped item identity before mutation and compare both identity and scroll offset afterwards. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
APIs such as scrollIntoView and scrollTo interact with the scroll container, its padding and the candidate positions. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is fighting snapping with repeated timer-based scroll corrections. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Use one semantic target, respect container geometry and verify the settled state after scrolling ends.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
card.scrollIntoView({behavior:'smooth',inline:'start',block:'nearest'});Explained result. The browser scrolls relevant containers toward the requested alignment, after which snap rules may influence the settled position. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: worked-example deck. Explain the rule using step panels with previous and next controls. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “APIs such as scrollIntoView and scrollTo interact with the scroll container, its padding and the candidate positions.” Apply this procedure: Use one semantic target, respect container geometry and verify the settled state after scrolling ends. The expected mechanism is: The browser scrolls relevant containers toward the requested alignment, after which snap rules may influence the settled position. For the worked-example deck, add one near-miss that exposes fighting snapping with repeated timer-based scroll corrections. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading chapters. Transfer the rule using full-height sections with long accessible content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “APIs such as scrollIntoView and scrollTo interact with the scroll container, its padding and the candidate positions.” Apply this procedure: Use one semantic target, respect container geometry and verify the settled state after scrolling ends. The expected mechanism is: The browser scrolls relevant containers toward the requested alignment, after which snap rules may influence the settled position. For the reading chapters, add one near-miss that exposes fighting snapping with repeated timer-based scroll corrections. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: timetable strip. Predict the rule using weekday columns and current-period highlighting. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “APIs such as scrollIntoView and scrollTo interact with the scroll container, its padding and the candidate positions.” Apply this procedure: Use one semantic target, respect container geometry and verify the settled state after scrolling ends. The expected mechanism is: The browser scrolls relevant containers toward the requested alignment, after which snap rules may influence the settled position. For the timetable strip, add one near-miss that exposes fighting snapping with repeated timer-based scroll corrections. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: science process. Contrast the rule using ordered stages with diagrams and notes. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “APIs such as scrollIntoView and scrollTo interact with the scroll container, its padding and the candidate positions.” Apply this procedure: Use one semantic target, respect container geometry and verify the settled state after scrolling ends. The expected mechanism is: The browser scrolls relevant containers toward the requested alignment, after which snap rules may influence the settled position. For the science process, add one near-miss that exposes fighting snapping with repeated timer-based scroll corrections. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers fighting snapping with repeated timer-based scroll corrections.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Use one semantic target, respect container geometry and verify the settled state after scrolling ends.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny worked-example deck with step panels with previous and next controls. Include one ordinary case, one boundary and one deliberate failure caused by fighting snapping with repeated timer-based scroll corrections. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: APIs such as scrollIntoView and scrollTo interact with the scroll container, its padding and the candidate positions. It shows a trace, not only a final value. The ordinary case should demonstrate “The browser scrolls relevant containers toward the requested alignment, after which snap rules may influence the settled position.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Use one semantic target, respect container geometry and verify the settled state after scrolling ends. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
scroll-behavior may animate programmatic scrolling, but motion preferences and user comfort should shape the final design. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is forcing smooth movement for every user and every navigation path. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Provide a reduced-motion override and ensure navigation remains understandable without animation.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
@media (prefers-reduced-motion:reduce){.deck{scroll-behavior:auto}}Explained result. People requesting reduced motion receive immediate programmatic scrolling while snap structure can remain usable. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: timetable strip. Transfer the rule using weekday columns and current-period highlighting. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-behavior may animate programmatic scrolling, but motion preferences and user comfort should shape the final design.” Apply this procedure: Provide a reduced-motion override and ensure navigation remains understandable without animation. The expected mechanism is: People requesting reduced motion receive immediate programmatic scrolling while snap structure can remain usable. For the timetable strip, add one near-miss that exposes forcing smooth movement for every user and every navigation path. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: science process. Predict the rule using ordered stages with diagrams and notes. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-behavior may animate programmatic scrolling, but motion preferences and user comfort should shape the final design.” Apply this procedure: Provide a reduced-motion override and ensure navigation remains understandable without animation. The expected mechanism is: People requesting reduced motion receive immediate programmatic scrolling while snap structure can remain usable. For the science process, add one near-miss that exposes forcing smooth movement for every user and every navigation path. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: mobile vocabulary list. Contrast the rule using short definition cards in a horizontal lane. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-behavior may animate programmatic scrolling, but motion preferences and user comfort should shape the final design.” Apply this procedure: Provide a reduced-motion override and ensure navigation remains understandable without animation. The expected mechanism is: People requesting reduced motion receive immediate programmatic scrolling while snap structure can remain usable. For the mobile vocabulary list, add one near-miss that exposes forcing smooth movement for every user and every navigation path. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: project showcase. Stress-test the rule using responsive cards inside a wider page layout. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “scroll-behavior may animate programmatic scrolling, but motion preferences and user comfort should shape the final design.” Apply this procedure: Provide a reduced-motion override and ensure navigation remains understandable without animation. The expected mechanism is: People requesting reduced motion receive immediate programmatic scrolling while snap structure can remain usable. For the project showcase, add one near-miss that exposes forcing smooth movement for every user and every navigation path. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers forcing smooth movement for every user and every navigation path.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Provide a reduced-motion override and ensure navigation remains understandable without animation.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny reading chapters with full-height sections with long accessible content. Include one ordinary case, one boundary and one deliberate failure caused by forcing smooth movement for every user and every navigation path. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: scroll-behavior may animate programmatic scrolling, but motion preferences and user comfort should shape the final design. It shows a trace, not only a final value. The ordinary case should demonstrate “People requesting reduced motion receive immediate programmatic scrolling while snap structure can remain usable.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Provide a reduced-motion override and ensure navigation remains understandable without animation. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
A snap gallery still needs reachable content, visible focus, logical tab order and controls that do not require a precise touch gesture. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is treating a horizontal swipe as the only navigation method. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Test Tab, Shift-Tab, arrow-key controls if provided and focus-driven scrolling at several zoom levels.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.card:focus-visible{outline:3px solid currentColor;outline-offset:4px}Explained result. Keyboard users can see which card owns focus even when the scroller moves. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: mobile vocabulary list. Predict the rule using short definition cards in a horizontal lane. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A snap gallery still needs reachable content, visible focus, logical tab order and controls that do not require a precise touch gesture.” Apply this procedure: Test Tab, Shift-Tab, arrow-key controls if provided and focus-driven scrolling at several zoom levels. The expected mechanism is: Keyboard users can see which card owns focus even when the scroller moves. For the mobile vocabulary list, add one near-miss that exposes treating a horizontal swipe as the only navigation method. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: project showcase. Contrast the rule using responsive cards inside a wider page layout. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A snap gallery still needs reachable content, visible focus, logical tab order and controls that do not require a precise touch gesture.” Apply this procedure: Test Tab, Shift-Tab, arrow-key controls if provided and focus-driven scrolling at several zoom levels. The expected mechanism is: Keyboard users can see which card owns focus even when the scroller moves. For the project showcase, add one near-miss that exposes treating a horizontal swipe as the only navigation method. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision-card row. Stress-test the rule using six topic cards of different text lengths. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A snap gallery still needs reachable content, visible focus, logical tab order and controls that do not require a precise touch gesture.” Apply this procedure: Test Tab, Shift-Tab, arrow-key controls if provided and focus-driven scrolling at several zoom levels. The expected mechanism is: Keyboard users can see which card owns focus even when the scroller moves. For the revision-card row, add one near-miss that exposes treating a horizontal swipe as the only navigation method. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: school-event gallery. Explain the rule using landscape and portrait images with captions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A snap gallery still needs reachable content, visible focus, logical tab order and controls that do not require a precise touch gesture.” Apply this procedure: Test Tab, Shift-Tab, arrow-key controls if provided and focus-driven scrolling at several zoom levels. The expected mechanism is: Keyboard users can see which card owns focus even when the scroller moves. For the school-event gallery, add one near-miss that exposes treating a horizontal swipe as the only navigation method. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers treating a horizontal swipe as the only navigation method.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Test Tab, Shift-Tab, arrow-key controls if provided and focus-driven scrolling at several zoom levels.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny timetable strip with weekday columns and current-period highlighting. Include one ordinary case, one boundary and one deliberate failure caused by treating a horizontal swipe as the only navigation method. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: A snap gallery still needs reachable content, visible focus, logical tab order and controls that do not require a precise touch gesture. It shows a trace, not only a final value. The ordinary case should demonstrate “Keyboard users can see which card owns focus even when the scroller moves.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Test Tab, Shift-Tab, arrow-key controls if provided and focus-driven scrolling at several zoom levels. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
Snap geometry can change with viewport width, font size, zoom, text direction and writing mode. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is testing one desktop width with short English labels. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Build a matrix of narrow, wide, zoomed, right-to-left and long-content cases.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
.deck{scroll-snap-type:inline mandatory}Explained result. Using the logical inline axis lets the snapping direction follow the writing mode, but alignment still needs real testing. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision-card row. Contrast the rule using six topic cards of different text lengths. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Snap geometry can change with viewport width, font size, zoom, text direction and writing mode.” Apply this procedure: Build a matrix of narrow, wide, zoomed, right-to-left and long-content cases. The expected mechanism is: Using the logical inline axis lets the snapping direction follow the writing mode, but alignment still needs real testing. For the revision-card row, add one near-miss that exposes testing one desktop width with short English labels. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: school-event gallery. Stress-test the rule using landscape and portrait images with captions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Snap geometry can change with viewport width, font size, zoom, text direction and writing mode.” Apply this procedure: Build a matrix of narrow, wide, zoomed, right-to-left and long-content cases. The expected mechanism is: Using the logical inline axis lets the snapping direction follow the writing mode, but alignment still needs real testing. For the school-event gallery, add one near-miss that exposes testing one desktop width with short English labels. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: worked-example deck. Explain the rule using step panels with previous and next controls. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Snap geometry can change with viewport width, font size, zoom, text direction and writing mode.” Apply this procedure: Build a matrix of narrow, wide, zoomed, right-to-left and long-content cases. The expected mechanism is: Using the logical inline axis lets the snapping direction follow the writing mode, but alignment still needs real testing. For the worked-example deck, add one near-miss that exposes testing one desktop width with short English labels. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading chapters. Transfer the rule using full-height sections with long accessible content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Snap geometry can change with viewport width, font size, zoom, text direction and writing mode.” Apply this procedure: Build a matrix of narrow, wide, zoomed, right-to-left and long-content cases. The expected mechanism is: Using the logical inline axis lets the snapping direction follow the writing mode, but alignment still needs real testing. For the reading chapters, add one near-miss that exposes testing one desktop width with short English labels. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers testing one desktop width with short English labels.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Build a matrix of narrow, wide, zoomed, right-to-left and long-content cases.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny science process with ordered stages with diagrams and notes. Include one ordinary case, one boundary and one deliberate failure caused by testing one desktop width with short English labels. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Snap geometry can change with viewport width, font size, zoom, text direction and writing mode. It shows a trace, not only a final value. The ordinary case should demonstrate “Using the logical inline axis lets the snapping direction follow the writing mode, but alignment still needs real testing.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Build a matrix of narrow, wide, zoomed, right-to-left and long-content cases. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
A readable overflow layout should remain useful even when a browser does not apply scroll snapping; @supports can add optional enhancements. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is hiding controls or content unless snapping works. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Build the plain overflow experience first, then layer snap rules as an enhancement.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
@supports (scroll-snap-type:inline mandatory){.deck{scroll-snap-type:inline mandatory}}Explained result. Supporting browsers receive snapping; others keep the scrollable card row. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: worked-example deck. Stress-test the rule using step panels with previous and next controls. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A readable overflow layout should remain useful even when a browser does not apply scroll snapping; @supports can add optional enhancements.” Apply this procedure: Build the plain overflow experience first, then layer snap rules as an enhancement. The expected mechanism is: Supporting browsers receive snapping; others keep the scrollable card row. For the worked-example deck, add one near-miss that exposes hiding controls or content unless snapping works. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading chapters. Explain the rule using full-height sections with long accessible content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A readable overflow layout should remain useful even when a browser does not apply scroll snapping; @supports can add optional enhancements.” Apply this procedure: Build the plain overflow experience first, then layer snap rules as an enhancement. The expected mechanism is: Supporting browsers receive snapping; others keep the scrollable card row. For the reading chapters, add one near-miss that exposes hiding controls or content unless snapping works. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: timetable strip. Transfer the rule using weekday columns and current-period highlighting. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A readable overflow layout should remain useful even when a browser does not apply scroll snapping; @supports can add optional enhancements.” Apply this procedure: Build the plain overflow experience first, then layer snap rules as an enhancement. The expected mechanism is: Supporting browsers receive snapping; others keep the scrollable card row. For the timetable strip, add one near-miss that exposes hiding controls or content unless snapping works. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: science process. Predict the rule using ordered stages with diagrams and notes. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “A readable overflow layout should remain useful even when a browser does not apply scroll snapping; @supports can add optional enhancements.” Apply this procedure: Build the plain overflow experience first, then layer snap rules as an enhancement. The expected mechanism is: Supporting browsers receive snapping; others keep the scrollable card row. For the science process, add one near-miss that exposes hiding controls or content unless snapping works. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers hiding controls or content unless snapping works.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Build the plain overflow experience first, then layer snap rules as an enhancement.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny mobile vocabulary list with short definition cards in a horizontal lane. Include one ordinary case, one boundary and one deliberate failure caused by hiding controls or content unless snapping works. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: A readable overflow layout should remain useful even when a browser does not apply scroll snapping; @supports can add optional enhancements. It shows a trace, not only a final value. The ordinary case should demonstrate “Supporting browsers receive snapping; others keep the scrollable card row.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Build the plain overflow experience first, then layer snap rules as an enhancement. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
CHAPTER 19 OF 20 . Transfer with judgment
19. Debugging with geometry and computed styles
Effective debugging checks the actual scroll container, computed snap properties, scroll range, child rectangles and settled offsets. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is randomly toggling mandatory and proximity without observing geometry. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Log clientWidth, scrollWidth and bounding rectangles; then change one property at a time.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
console.table({client:rail.clientWidth,scroll:rail.scrollWidth,left:rail.scrollLeft});Explained result. The measurements prove whether overflow exists and where the container settled before visual assumptions take over. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: timetable strip. Explain the rule using weekday columns and current-period highlighting. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Effective debugging checks the actual scroll container, computed snap properties, scroll range, child rectangles and settled offsets.” Apply this procedure: Log clientWidth, scrollWidth and bounding rectangles; then change one property at a time. The expected mechanism is: The measurements prove whether overflow exists and where the container settled before visual assumptions take over. For the timetable strip, add one near-miss that exposes randomly toggling mandatory and proximity without observing geometry. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: science process. Transfer the rule using ordered stages with diagrams and notes. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Effective debugging checks the actual scroll container, computed snap properties, scroll range, child rectangles and settled offsets.” Apply this procedure: Log clientWidth, scrollWidth and bounding rectangles; then change one property at a time. The expected mechanism is: The measurements prove whether overflow exists and where the container settled before visual assumptions take over. For the science process, add one near-miss that exposes randomly toggling mandatory and proximity without observing geometry. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: mobile vocabulary list. Predict the rule using short definition cards in a horizontal lane. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Effective debugging checks the actual scroll container, computed snap properties, scroll range, child rectangles and settled offsets.” Apply this procedure: Log clientWidth, scrollWidth and bounding rectangles; then change one property at a time. The expected mechanism is: The measurements prove whether overflow exists and where the container settled before visual assumptions take over. For the mobile vocabulary list, add one near-miss that exposes randomly toggling mandatory and proximity without observing geometry. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: project showcase. Contrast the rule using responsive cards inside a wider page layout. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Effective debugging checks the actual scroll container, computed snap properties, scroll range, child rectangles and settled offsets.” Apply this procedure: Log clientWidth, scrollWidth and bounding rectangles; then change one property at a time. The expected mechanism is: The measurements prove whether overflow exists and where the container settled before visual assumptions take over. For the project showcase, add one near-miss that exposes randomly toggling mandatory and proximity without observing geometry. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers randomly toggling mandatory and proximity without observing geometry.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Log clientWidth, scrollWidth and bounding rectangles; then change one property at a time.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny project showcase with responsive cards inside a wider page layout. Include one ordinary case, one boundary and one deliberate failure caused by randomly toggling mandatory and proximity without observing geometry. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Effective debugging checks the actual scroll container, computed snap properties, scroll range, child rectangles and settled offsets. It shows a trace, not only a final value. The ordinary case should demonstrate “The measurements prove whether overflow exists and where the container settled before visual assumptions take over.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Log clientWidth, scrollWidth and bounding rectangles; then change one property at a time. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
Scroll snap suits discrete visual stops but should not replace ordinary document scrolling when continuous reading, accessibility or variable content needs freedom. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is adding snapping to a page because the effect looks polished in a short demo. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Compare the learner’s task, content size, input methods, motion needs and fallback before shipping.
Use a two-column trace during a short Punggol home session. On the left, write the predicted state before the interpreter, browser, database or Git command runs. On the right, record the exact observation. Underneath, explain the earliest difference with one causal sentence. That small routine is more diagnostic than copying a finished answer.
Core worked example
/* Begin with readable overflow; add snapping only when the stops help orientation. */Explained result. Mastery is the ability to justify the interaction, recover a plain-scroll fallback and verify all content remains reachable. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: mobile vocabulary list. Transfer the rule using short definition cards in a horizontal lane. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Scroll snap suits discrete visual stops but should not replace ordinary document scrolling when continuous reading, accessibility or variable content needs freedom.” Apply this procedure: Compare the learner’s task, content size, input methods, motion needs and fallback before shipping. The expected mechanism is: Mastery is the ability to justify the interaction, recover a plain-scroll fallback and verify all content remains reachable. For the mobile vocabulary list, add one near-miss that exposes adding snapping to a page because the effect looks polished in a short demo. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: project showcase. Predict the rule using responsive cards inside a wider page layout. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Scroll snap suits discrete visual stops but should not replace ordinary document scrolling when continuous reading, accessibility or variable content needs freedom.” Apply this procedure: Compare the learner’s task, content size, input methods, motion needs and fallback before shipping. The expected mechanism is: Mastery is the ability to justify the interaction, recover a plain-scroll fallback and verify all content remains reachable. For the project showcase, add one near-miss that exposes adding snapping to a page because the effect looks polished in a short demo. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision-card row. Contrast the rule using six topic cards of different text lengths. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Scroll snap suits discrete visual stops but should not replace ordinary document scrolling when continuous reading, accessibility or variable content needs freedom.” Apply this procedure: Compare the learner’s task, content size, input methods, motion needs and fallback before shipping. The expected mechanism is: Mastery is the ability to justify the interaction, recover a plain-scroll fallback and verify all content remains reachable. For the revision-card row, add one near-miss that exposes adding snapping to a page because the effect looks polished in a short demo. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: school-event gallery. Stress-test the rule using landscape and portrait images with captions. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “Scroll snap suits discrete visual stops but should not replace ordinary document scrolling when continuous reading, accessibility or variable content needs freedom.” Apply this procedure: Compare the learner’s task, content size, input methods, motion needs and fallback before shipping. The expected mechanism is: Mastery is the ability to justify the interaction, recover a plain-scroll fallback and verify all content remains reachable. For the school-event gallery, add one near-miss that exposes adding snapping to a page because the effect looks polished in a short demo. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers adding snapping to a page because the effect looks polished in a short demo.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Compare the learner’s task, content size, input methods, motion needs and fallback before shipping.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final syntax. Useful prompts are: “What did you expect?”, “Which state changed first?”, “What evidence would change your mind?”, and “Can you make the example smaller?” These questions return responsibility to the learner while keeping the session calm and concrete.
Practice with an explained answer
Question. Build a tiny revision-card row with six topic cards of different text lengths. Include one ordinary case, one boundary and one deliberate failure caused by adding snapping to a page because the effect looks polished in a short demo. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: Scroll snap suits discrete visual stops but should not replace ordinary document scrolling when continuous reading, accessibility or variable content needs freedom. It shows a trace, not only a final value. The ordinary case should demonstrate “Mastery is the ability to justify the interaction, recover a plain-scroll fallback and verify all content remains reachable.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Compare the learner’s task, content size, input methods, motion needs and fallback before shipping. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
Separate mechanism from project policy. The mechanism is the behaviour guaranteed by the current official documentation. The policy is the choice this project makes about validation, ordering, ownership, performance or recovery. Write both statements before generalising. Keep important work backed up and use disposable examples for destructive or stateful experiments.
Previous chapter . Contents . Next chapter
Parent guide: choose the next useful step
Start with evidence, not a label such as careless. Ask for one prediction and one trace. If the first transition is wrong, rebuild the model. If the model is sound but syntax fails, practise reference use. If routine cases are correct but boundaries fail, vary ties, defaults, unsupported inputs, ownership or missing paths. If explanations transfer, move to a small project.
Keep a weekly record with four lines: concept, prediction, observed difference and next test. Stop when fatigue replaces reasoning. A smaller case tomorrow is more useful than another hour of copying tonight.
Seek specialist help when cause and effect remain invisible after examples are reduced, when accessibility or data-loss implications are unclear, or when an important repository, database or application state may be at risk. Good support should make the learner’s reasoning more independent.
Capstone practice with explained routes
1. revision-card row: model, boundary and recovery
Create a small revision-card row using six topic cards of different text lengths. Combine “The scroll-container mental model” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: Scroll snapping works on a scrolling box whose scroll-snap-type defines the axis and strictness; descendants contribute positions with scroll-snap-align. Apply: Identify overflow, scroll range and viewport first, then mark the real scrolling element. Verify: The deck scrolls horizontally and each card offers a start-aligned snap position. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
2. school-event gallery: model, boundary and recovery
Create a small school-event gallery using landscape and portrait images with captions. Combine “Mandatory versus proximity” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: mandatory requests snapping whenever scrolling ends, while proximity lets the user agent snap when a point is sufficiently near. Apply: Test short and oversized children with wheel, touch and keyboard before selecting strictness. Verify: The browser may settle on nearby inline snap points without forcing every scroll ending onto one. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
3. worked-example deck: model, boundary and recovery
Create a small worked-example deck using step panels with previous and next controls. Combine “The snap area and scroll-margin” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: scroll-margin expands or offsets the child’s scroll snap area without changing ordinary layout spacing. Apply: Keep visual spacing and snap offset as separate decisions and inspect the target child. Verify: The section’s snap area includes a one-rem start offset for scroll positioning. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
4. reading chapters: model, boundary and recovery
Create a small reading chapters using full-height sections with long accessible content. Combine “Sizing items predictably” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: Flex and grid defaults can shrink or stretch items, changing the snap geometry even when the snapping rules are correct. Apply: Inspect computed item sizes and set flex-basis, min-size or grid auto tracks explicitly. Verify: Each card keeps an explicit responsive base size instead of shrinking to remove overflow. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
5. timetable strip: model, boundary and recovery
Create a small timetable strip using weekday columns and current-period highlighting. Combine “Re-snapping after content changes” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: After content changes, the browser may re-snap to a previously snapped element when it remains present, so dynamic updates need observation. Apply: Record the snapped item identity before mutation and compare both identity and scroll offset afterwards. Verify: The useful assertion is which item remains meaningfully in view, not only the raw scrollLeft value. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
6. science process: model, boundary and recovery
Create a small science process using ordered stages with diagrams and notes. Combine “Keyboard and focus access” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: A snap gallery still needs reachable content, visible focus, logical tab order and controls that do not require a precise touch gesture. Apply: Test Tab, Shift-Tab, arrow-key controls if provided and focus-driven scrolling at several zoom levels. Verify: Keyboard users can see which card owns focus even when the scroller moves. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
7. mobile vocabulary list: model, boundary and recovery
Create a small mobile vocabulary list using short definition cards in a horizontal lane. Combine “Debugging with geometry and computed styles” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: Effective debugging checks the actual scroll container, computed snap properties, scroll range, child rectangles and settled offsets. Apply: Log clientWidth, scrollWidth and bounding rectangles; then change one property at a time. Verify: The measurements prove whether overflow exists and where the container settled before visual assumptions take over. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
8. project showcase: model, boundary and recovery
Create a small project showcase using responsive cards inside a wider page layout. Combine “Overflow creates the scroll range” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: A box needs overflow content along the chosen axis before user scrolling and snap selection can occur. Apply: Measure client size and scroll size, then temporarily outline the container and children. Verify: Fixed column tracks can create horizontal overflow; without overflow there is no meaningful horizontal snap journey. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
Frequently asked questions
How long should a practice session be?
Use one complete prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be enough.
Should every option or function be memorised?
No. Memorise the governing distinctions and practise retrieving the official reference. Understanding means predicting and explaining, not reciting a parameter list.
What if the result is correct but the explanation is weak?
Treat it as partial success. Ask for a trace and change one boundary. A reliable model survives controlled variation.
Is the shortest solution the best?
Not automatically. Prefer the solution whose semantics, failure modes and maintenance cost are easiest to justify for the actual project.
When should official documentation be used?
Use it whenever syntax, supported types, SQL dialect behaviour or Git version details matter. Primary documentation settles the current contract.
How can a parent help without technical expertise?
Ask what was predicted, where the first difference appeared, what evidence matters and which smaller example could isolate it.
How do we test transfer?
Change the context, vocabulary and one boundary. Require the learner to identify the invariant before using a tool.
What should be saved after practice?
Keep the corrected rule, one trace, one boundary case and the next question. Avoid storing pages of unexplained output.
Can these exercises replace backups?
No. Use disposable examples and proper backups. Learning should not endanger schoolwork, repositories or personal data.
What counts as mastery?
The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current reference.
