---
title: Recap from last class (02/20)
tags: 107-2 Ric's Web Programming
slideOptions:
theme: league
transition: 'fade'
slidenumber: true
# parallaxBackgroundImage: 'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'
---

## Recap from last class (02/20)

---

### In-Class Practice 01<i class="fa fa-firefox fa-spin fa-1x"></i>
* Draw 4 boxes with (w,h) = (150px, 100px), put them in a row separeted with 20px. Color them "orange".
* How to draw a "box" HTML? Using "div", "span"?

----

### Let's beautify the boxes by making them 立體感<i class="fa fa-firefox fa-spin fa-1x"></i>
* Making a "round border"
* Add "blurred shadow"

----

### Let's make some "animation"
* First, let's align boxes horizontally on the center of the browser window
* When mourse hover, make the box "pop-up", while others remain intact
* Please check: when browser window is resized, the last box(es) is(are) "wrapped" to the next line!

----

### Let's improve the user experience!
* When window gets smaller, the boxes should get smaller accordingly. (note: use "@media" queries)
* The boxes should remain in a line. However, when the window gets too small, the boxes should alter to align vertically.

---

## End