A4 - Lists and Tables

Run update within your Google Drive folder for this class to download the new files. Next, inside Visual Studio Code, open your Unit 2 folder (if it's not already open) and then navigate to the A4 subfolder. Inside, open the files a4.html and a4.css. Then from a4.html open a Live Preview tab.

This HTML file demonstrates how we create lists. There are two types:

An Unordered List renders with bullet points. The full list goes inside of a set of <ul> tags, and each list item goes inside a set of <li> tags.
```
<ul>
    <li>Spring</li>
    <li>Summer</li>
    <li>Fall</li>
    <li>Winter</li>
</ul>
```
An Ordered List renders with numbers. The full list goes inside of a set of <ol> tags, and each list item goes inside a set of <li> tags.
```
<ol>
    <li>Wake up</li>
    <li>Get out of bed</li>
    <li>Shower</li>
    <li>Brush teeth</li>
</ol>
```

The final example you'll see in the file is an unordered list, but it renders quite differently than the other lists becuase both the <ul> and <li> have class attributes. Try hovering your mouse over the list to see its behaviour. Something like this could work well as a navigation bar on a web page.

Read through the a4.css file to see how this effect has been done. I've included several comments in this file to explain it through.

Your Task

Part 1

Add two lists to a4.html - an ordered list and an unorderd list, each with five items or more. This should be pretty simple, because they will be structured in the exact same way as the first two lists that are already there.

Part 2

In a4.css, add more styling to the .blue-list-item:hover section, to make it look even fancier when the user hovers over an item.

Here are some examples of CSS properties you could consider adding (obviously, changing the blanks to actual values):

color: ________;
text-transform: ________;
font-family: ________;
font-style: ________;
border-width: ________;
letter-spacing: ________;
text-shadow: ________; /* have a look back at the css in assignment 2 for an example of text-shadow */
font-size: ________;

Another fun one you might want to play around with is gradients. Try replacing the background-color with this line and experimenting with it:

background-image: linear-gradient(to right, rgb(48, 47, 129) , rgb(6, 129, 16));

Here is a screenshot of what I was able to produce using some of these ideas:

Optional Extension - Tables

Tables are a little trickier in HTML. You can see an example of one in a4-extension.html, and you can get a full explanation here.

The file a4-extension.css shows how we can add styling to a table. There are a few new concepts in this css file, explained in the comments.

Your Task (extension)

In a4-extension.html:

Create a new row in the table.
Create a new column in the table, and add data for the new column into each existing row.

In a4-extension.css:

Use some of the CSS we know to style the various parts of the table to your liking.