Tags
Tags are the labels on each end of the foil: it is the text between them, at the element with both tags, and 2it reaches the next element out.
Tuesday, 3:10 p.m. The website reads the new menu.json, but the template doesn't yet: every item on the page says TODO where its name should be. menu.html is angle brackets from top to bottom.
The names sit between an opening tag and a closing tag, which is a wrapping of its own.
Warm-up from earlier chapters
Two from earlier chapters, from memory, before the new idea. Two wrong tries show the answer.
Labels on the foil
Think of the tags as labels printed on each end of the foil: <span class="name"> at one end, </span> at the other. it is the filling between the two labels, and at is the whole element, both labels included. From anywhere in the element (even on the class in its opening tag), cit replaces the text.
<li class="item"><span class="name">Al Pastor</span> <b>$9.50</b></li><li class="item"><span class="name">Al Pastor</span> <b>$9.50</b></li><li class="item"><span class="name">Al Pastor</span> <b>$9.50</b></li>Names on the page
Three TODOs where the names belong. cit from anywhere in each <span>, and type the name.
This exercise needs a keyboard. Read on, and play it at your computer.
Labels, and nothing else
aw and a" take a space with them; at doesn't. The element's foil is its two labels and nothing more, so deleting an element in the middle of a sentence leaves the spaces from both sides behind.
What does at leave?
The cursor is in items. You press dat. What is left?
Lost text
Text between tags lost across the HTML files. cit and type it back.
The first exercise of every lesson is free. Pro unlocks the rest, every track, for good.
See ProThis exercise needs a keyboard. Read on, and play it at your computer.
Labels, fillings, whole items
Three changes from the kitchen. Al Pastor gets a second class: its <li> becomes class="item spicy" (that value sits in quotes, not between tags). Carnitas now costs $10.50. And Garden Veggie is sold out: everything inside its <li>, name and price, becomes Sold out today.
Stuck? Show a hint
The first exercise of every lesson is free. Pro unlocks the rest, every track, for good.
See ProThis exercise needs a keyboard. Read on, and play it at your computer.
Tags, from memory
Press the keys. The cursor is inside the element.
Template sweep
Ten lost texts and wrong attributes across the HTML files. Tags and quotes.
The first exercise of every lesson is free. Pro unlocks the rest, every track, for good.
See ProThis exercise needs a keyboard. Read on, and play it at your computer.
The menu template
3:40. The template, top to bottom: the heading is still placeholder text, Carnitas costs $100 instead of $10, Garden Veggie is a TODO, and the note's emphasis should say just red. Four fillings, four pairs of labels.
Stuck? Show a hint
The first exercise of every lesson is free. Pro unlocks the rest, every track, for good.
See ProThis exercise needs a keyboard. Read on, and play it at your computer.
Extra practice optional
The chapter is done. These rounds keep going as long as you like: stop whenever it stops being useful.
Tags, endlessly
Endless lost texts and attributes in the HTML files.
The first exercise of every lesson is free. Pro unlocks the rest, every track, for good.
See ProThis exercise needs a keyboard. Read on, and play it at your computer.