HTML code FYI was developed with AI assistance in planning, writing and programming. That is part of its identity, not a hidden production detail. Mario brings his web experience, direction and decisions; neither human involvement nor AI assistance makes an example automatically correct.
Read Mario’s journey from the 1990s to working with AI · Read the full AI disclosure.
A repeatable review
- State what the code should do and which constraints it must respect.
- Read the controls, dependencies and data flow before running it.
- Predict the outcome and identify claims the code cannot prove.
- Test one behaviour at a time, including keyboard use and errors.
- Check important platform details against the linked primary documentation.
The deliberately incomplete snippets below were written for these exercises. They are not quotations from another provider or evidence about a particular AI model. All snippets are displayed as text; the fictional remote address is never requested.
1. A field without a dependable label
Displayed code only: this snippet is not executed.
Read the code and explanation without the quiz
<!-- Deliberately incomplete practice suggestion -->
<input type="email" placeholder="Email address">
<button type="button">Check</button>What is the clearest first improvement?
Yes. A persistent, associated label gives the field a clear name and remains visible while typing. A placeholder is not a replacement for it.
Take it further
Add a label with for="practice-email" and a matching input id. Then check what the Check button actually does: this snippet supplies no checking behaviour.
2. A confident message without delivery
Displayed code only: this snippet is not executed.
Read the code and explanation without the quiz
<button id="send" type="button">Send message</button>
<p id="result" role="status"></p>
<script>
document.querySelector('#send').addEventListener('click', () => {
document.querySelector('#result').textContent = 'Your message was delivered.';
});
</script>What claim is unsupported by this code?
Exactly. No delivery request or verified delivery result exists here. A local UI change is not proof of an external outcome.
Take it further
For a local exercise, rename the action and result honestly: Check practice message and Nothing was sent. A real sending service would need a separate, verified implementation.
3. A dependency you did not ask for
Displayed code only: this snippet is not executed.
Read the code and explanation without the quiz
<!-- Fictional suggestion: displayed only, never loaded -->
<script src="https://metrics.example/visitor.js"></script>
<button type="button">Show a local hint</button>Your brief requires local assets and no visitor tracking. What should you do?
Yes. The source cannot tell us everything this remote script does. It already creates an external dependency that the brief does not require.
Take it further
Review every external script, image and font reference in a proposed page. Ask why it is needed, what it requests and what permission or licence applies before using it.
What these exercises cannot certify
Finding one issue does not prove that every other part is correct. These short cases teach a review habit, not a complete security or accessibility audit. Keep context, source licences and current platform documentation in view.
Practise predicting outcomes · Follow a complete learning path