Add a template holding a list item.
Acceptance criteria
- 1.Add a template holding a list item.
HTML Tutorial · HTML Tags
These 10 tasks go with the HTML <template> Tag chapter. 5 of them ask you to build something small from scratch; 5 give you code that is already broken and ask you to work out why. Set aside about 90 minutes for the whole set, though you can do them in any order.
Nothing here is marked by a person. When you press Submit, the editor checks your code against the points listed under each task and tells you straight away what passed and what didn't (you need a free account to submit). If you get stuck, there are hints, and a worked solution once you've had a go. The first 2 tasks are free; the rest are part of the practice plan.
If it's been a while since you read the chapter, here is how it starts: “The tag in HTML is used to define HTML fragments that are not rendered immediately when a page loads . Its content remains inactive until it is activated via JavaScript. This makes it ideal for creating reusable content blocks such as cards, modals, or list items dynamically.” .
1.Declare a templateexercise · easy · 10 min
Add a template holding a list item.
Passes when: Add a template holding a list item.
2.Give it an idexercise · easy · 10 min · practice plan
Add an id so a script can find the template.
Passes when: Add an id so a script can find the template.
3.A richer templateexercise · easy · 10 min · practice plan
Put a heading and a paragraph inside the template.
Passes when: Put a heading and a paragraph inside the template.
4.Template plus a targetexercise · easy · 10 min · practice plan
Add a template and the empty list it will fill.
Passes when: Add a template and the empty list it will fill.
5.A card templateexercise · medium · 10 min · practice plan
Build a template holding a titled card, plus its container.
Passes when: Build a template holding a titled card, plus its container.
6.Fix the markup that renders immediatelybug fix · easy · 8 min
A blueprint belongs in a template so it stays inert.
Passes when: A blueprint belongs in a template so it stays inert.
7.Fix the template with no idbug fix · easy · 8 min · practice plan
A script cannot find an unnamed template.
Passes when: A script cannot find an unnamed template.
8.Fix the template with the wrong idbug fix · easy · 8 min · practice plan
The script looks for the card template.
Passes when: The script looks for the card template.
9.Fix the missing containerbug fix · easy · 8 min · practice plan
There is nowhere to put the cloned rows.
Passes when: There is nowhere to put the cloned rows.
10.Fix the div used instead of a templatebug fix · easy · 8 min · practice plan
A hidden div still renders and is still found by scripts.
Passes when: A hidden div still renders and is still found by scripts.
Between them these tasks cover Inert markup, Cloning and id references.
Looking for a different chapter? See every practice set, or switch to the interview theory questions.