☰
1. Create our First Box 2. Our First Event Listener 3. Color the Box with Mouseovers. 4. Add a Timeout and Create more Boxes 5. Extending the Box's Event Listener and Deliberation. 6. Looping! 7. Randomly Colored Boxes 8. (Optional) Add new Shapes 9. (Optional) Add a Different Style to Mouseover Events

Project 373: Hover Squares

1. Create our First Box

Let's create our first box using a the generic "div" tag in HTML, then personalize it with some CSS properties. We'll need to use a class called "box" too!
This challenge doesn't have a starting point

Your goal

Hint: show steps

Steps

1. Create a Generic Tag

Use a generic "div" tag to build the basis for our box.  Don't forget to use the auto-complete feature in Codpen.  Just type "div" and press the tab key.  Let's fill the div tag with placeholder text.

Hello, world!

2. Get Serious about Classes

Inside the lead HTML tag, let's add the a class called box.  This let's codepen know that later we will use CSS to modify the appearance of this section of the page.  Use the format:  class = "box" 

3. First Pass at CSS

OK, we have a class!  Now how do we specify the fun stuff like color?  Well we will fill a ".box" class in CSS.  Make sure to include { } after the class name.  All the styling we want to do must go inside the curly braces.  Add an attribute called "background-color" and set it too green to see the whole line of text change color. 

.box{ background-color: green; }

4. Square the Box.

Well a colored line of text isn't a box.  Let's try to think of two measurements that determine a box. Pause for a second and try to think about it.....  


Width and Height that's great!  Add them to your CSS like we did the "background-color".  We'll start with a Square box of "50px" or 50 pixels.
.box{ width: 50px; height: 50px; background-color: green; }