Emmet Self-Reference / Practice

Good tutorial to follow: codeSTACKr's Emmet Video

h3{Hello Emmet!}

Hello Emmet!

h2.customh2class#customh2id{cool h2 heading}

cool h2 heading

p{paragraph 1}+p{paragraph 2}

paragraph 1

paragraph 2

ul>li{Item $}*5

• Item 1
• Item 2
• Item 3
• Item 4
• Item 5

p>lorem30

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem excepturi iure cum quibusdam architecto sed quam. Consequuntur rerum non nam reiciendis, ab molestias aperiam nostrum officiis. Vero expedita dolores consequuntur?

img#emmet-cookie[src="images/cookie.png" width=10%]

p>{Click }+a[href="#"]{here}+{ to continue}

Click here to continue

div#useless-div>h2#useless-header{Useless Header}+p#useless-text{Lorem ipsum $}*3

table>thead>tr>th{Head $}*5^^tbody>tr*2>td{Item $}*5

form[action="server.php"]>(fieldset.form-fieldset>legend{Section $}+input:b#button$[value="Button $"])*3+input:submit[value="Finish!"]

ol[style="color:green;"]>li#item$$$@10{This is #$@10}*3

1. This is #10
2. This is #11
3. This is #12

h2.emmet-class-1{A heading}

.emmet-class-1 { c#f0f }

A heading

h2.emmet-class-2{Another heading}

.emmet-class-2 { bc#0ff c#f00 dib pl100 pr50 mt50 mb100 fft fsi }

Another heading

nav#sidebar>ul>(li>a[href="#"]{This is link $})*3

#sidebar { flr } #sidebar li { bc#ccc lstylet:none p1em } #sidebar a { c tdn p2em } #sidebar a:hover { c#f }