Learn the code underneath the AI.

Understand document structure, semantic elements and meaning before styling.

• Build a one-page document.
• Make the structure make sense without CSS.

Learn layout, sizing, spacing and responsive changes by testing the same page at different viewport widths.

• Desktop, tablet and mobile.
• Fix one broken layout at a time.

Learn variables, functions, conditions, events and state through a tiny interactive calculator.

• Normal inputs first.
• Then deliberately try invalid inputs.

Understand what travels between browser and server, including methods, status codes and response bodies.

• Build one GET and one POST endpoint.
• Observe successful and failed cases.

Learn routing, middleware and server-side execution without hiding everything behind a framework.

• Make three deliberately simple routes.
• Trace what happens to a request.

Understand why client code is public and why secrets belong on the server with environment-aware configuration.

• Put a fake secret in client code.
• Move it server-side and verify it is no longer exposed.

Assume external input can be malformed. Validate syntactic and semantic constraints before processing it.

• Missing, empty, wrong-type and huge values.
• Malformed JSON and unexpected fields.

Design useful failures without exposing internal implementation details.

• Try dependency failures and malformed requests.
• Return deliberate status codes and safe messages.

Write tests before and after a change, deliberately introduce a bug, watch the test fail, then fix it.

• Test normal behaviour.
• Add failure and edge cases.

Understand authentication states before adding a large identity provider to a real app.

• Build /, /login, /logout and /protected.
• Test unauthenticated and expired-session cases.

Learn to distinguish your application from a dependency you do not control.

• Handle success, empty and upstream failure.
• Record what is observed versus inferred.

Give the model a narrow role and treat its output as untrusted input until validated.

• Define a small tool contract.
• Test malformed and unexpected model arguments.

Split responsibilities only when the current structure creates a real maintenance problem.

• Extract one responsibility at a time.
• Run tests after each change.

Learn common web risks and test your assumptions in a disposable environment.

• Think about access control, injection and misconfiguration.
• Fix one real risk at a time.

Learn how semantic HTML, focus, labels and mobile interaction affect real users.

• Navigate without a mouse.
• Try mobile accessibility features.

Design flexible layouts rather than shrinking a desktop layout after the fact.

• Start narrow.
• Add layout as space becomes available.

Learn to measure real user-facing performance before changing code for speed.

• Measure page load and responsiveness.
• Change one thing and measure again.

Understand the difference between local assumptions and production reality.

• Deploy a simple app.
• Document configuration and rollback steps.

Make failures visible rather than relying on users to tell you something broke.

• Add a simple health endpoint.
• Log useful context without secrets.

Move repeatable checks out of your memory and into automation.

• Run tests automatically.
• Fail the check when verification fails.

Learn visual hierarchy, typography, alignment, whitespace, user-centred design and common interface patterns.

• Identify what the user should notice first.
• Compare two designs and explain the trade-off.