project 1: css hamburger

Directions:
Click on the hamburger picture to open the starter project.
​
You are given a top-bun div with CSS styling to start with. You can change this bun to make it your own, however you want your bun to look! Start by looking at the CSS and figuring out, what does each of those properties do? Try changing the numbers around and clicking run, especially with the border and border-radius properties.

Make your own bottom bun, patty, lettuce, pickles, onion and more! You must create at least 8 ingredients of your own. 

---

project 2: Hover practice

pt. 1  Hover effects

Directions:
Default (non-hover) styling is already done for you. Your task is to add a hover effect to each of the buttons

1. The first button, "Grow" should get both wider and taller on hover. Look at the HTML to figure out what classname you will need to use to select this button. On hover, increase the width and the height of the button.
2. Add a transition to the Grow hover effect
3. On hover of the "Background" button, change the background-color.
4. Add a transition to the "Background" button hover effect
5. On hover of the "Border" button, add a border of your choice
6. On hover of the "Spin" button, use the transform property to make the button spin in a complete circle. Must use a transition for this to show on the screen.

Click the button below to watch the video.

Video

Click the picture below to open the starter code.

pt. 2  Picture dictionary

Your task is to create a picture dictionary to help non-English speakers learn vocabulary words! On hover over each div with a vocabulary word, we'll be inserting a picture of the word!

See the first word "Apple" as an example. We have a div with a class of "apple", then in CSS we select ".apple" and add a background-image on hover. Then we can use the background-size property to make the image the same size as the element. Feel free to change the size of your divs by editing the div CSS provided.

Add at least 3 more vocabulary words, where the background-image on hover is a picture that matches the word.

---

project 3: Animations

Your task is to make this Jellybean factory website animated! You do not need to edit the CSS, you must animate by adding the correct classNames as defined by the Animate.CSS library

1. Make the header animate on load
2. Make the sidebar animate on load
3. Each of the beans should animate infinitely

BONUS:
Look at the CSS and change the values around, making sure you know what each property is doing to make this website. See how the sidebar and the beans section line up side by side? This is due to the display property, with a value of inline-block. We'll be going over this in the next section

animate.css

---

project 4: Airline schedule

For this airline website, we want to create a table like the following:

Directions
​HTML

1. Change the name of your airline to something of your choice.

CSS

1. Add a background-color or a background-image to the body tag
2. Add a background-color to the h1
3. Add padding to the h1

HTML Table

1. Your task is to add a table for flight information underneath the <h3>Schedule</h3>.
2. We have a <table></table> element started for you already with three table rows (<tr></tr>). Inside the first row, add four table heading <th></th> tags. They should say "From", "To", "Date and Time", "Price".
3. In the next two table rows, add four <td></td> (table data) tags. These values should match the header over that column

Style table with CSS

1. Select the th and td tags in CSS, and add a padding of 20px;
2. Add a border to the th and td tags.
   
3. Add border-collapse: collapse; to the table tag if you do not want double borders.
4. Add a background-color to the th tag.
5. You can also add a background color to the table tag, if you would like to do so.