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
|
Click the button below to watch the 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
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 |
project 4: Airline schedule
For this airline website, we want to create a table like the following:
Directions
HTML
Style table with CSS
|
|