Tools & Generators

Emmet Exercise Answer Key

Note: on this web page, some lines in the answers will wrap to the next line. They are still one uninterrupted line of code each, however.

Note, also, that WordPress madeĀ smart quotation marksĀ in my code. On other pages on the site, this is fixed by a plugin, but this content was made before I installed that plugin. In other words, these answers will work if you type them out yourself, but will not work if you just copy and paste them from this page into your editor.

1. Make a list menu with 12 links (“#”), with link text that increments with each link. For example: link01, link02, link03.

ANSWER:
ul>(li>a[href=”#”]{link$$})*12

2. Make a list menu with 12 links, but “prewired” with spans and classes for Font Awesome.

ANSWER:
ul>(li>a[href=”#”]>span.fa.fa-+{link$$})*12

3. Make a list menu with with 12 links, but “prewired” with spans and classes for Font Awesome and with the visuallyhidden class.

ANSWER:
ul>(li>a[href=”#”]>span.fa.fa-+span.visuallyhidden>{link$$})*12

4. Make three rows of DIVs with classes of clearfix and row. Each row will have 4 articles inside. Each article will have an h1 with 3 words of lorem ipsum, an h2 with 2 words of lorem ipsum, and a p with 17 words of lorem ipsum.

(div.clearfix.row.row$>(article>h1>lorem3^h2>lorem2^p>lorem17)*3)*4

5. Make a table with:

-a caption that says “Bus Schedule”
-one header row with three cells
-four rows with three cells

ANSWER:
table>caption{Bus Schedule}+(tr>td*3)*4
(header>nav.menu-main>ul>(li>a[href=”#”]{link$$})*12)+((div.clearfix.row.row$>(article>h1>lorem3^h2>lorem2^p>lorem17)*3)*4)+(table>caption{Bus Schedule}+(tr>td*3)*4)

Standard