Emmet Lab Exercise

As you work your way through this exercise, it will give you a sense of the power that tools like Emmet can give you.

Emmet is available for most good web text editors—including Sublime Text, Atom, and Brackets. If you’re using Visual Studio Code, it’s built in.

Using the official Emmet documentation and (especially) cheatsheet, do the following tasks:

1. Make a list menu with 12 links (“#”), with link text that increments by one with each link. For example link01, link02, link03.
2. Make a list menu with with 12 links, but “prewired” with spans and classes for Font Awesome.
3. Make a list menu with with 12 links, but “prewired” with spans and classes for Font Awesome and with the visuallyhidden class.
4. Make three rows of DIVs with classes of row and article-group-wrapper. 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.
5. Make a table with
   – a caption that says “Bus Schedule”
   – one header row with three cells
   – four rows with three cells. (If we haven’t done tables yet in class, here’s the basics.)

FONT AWESOME EXAMPLE SYNTAX:
Each list item will look like this:

<li><a href="#><span class="fab fab-facebook"></span><span class="visually-hidden">Link01</span></a></li>