-
STEP-7XX
1-
Lecture1.1
-
-
STEP-700
11-
Lecture2.1
-
Lecture2.2
-
Lecture2.3
-
Lecture2.4
-
Lecture2.5
-
Lecture2.6
-
Lecture2.7
-
Lecture2.8
-
Lecture2.9
-
Lecture2.10
-
Lecture2.11
-
-
STEP-701
9-
Lecture3.1
-
Lecture3.2
-
Quiz3.1
-
Lecture3.3
-
Lecture3.4
-
Lecture3.5
-
Lecture3.6
-
Lecture3.7
-
Lecture3.8
-
-
STEP-702
5-
Lecture4.1
-
Lecture4.2
-
Lecture4.3
-
Lecture4.4
-
Lecture4.5
-
-
STEP-703
4-
Lecture5.1
-
Lecture5.2
-
Lecture5.3
-
Lecture5.4
-
-
STEP-704
4-
Lecture6.1
-
Lecture6.2
-
Lecture6.3
-
Lecture6.4
-
-
STEP-705
4-
Lecture7.1
-
Lecture7.2
-
Lecture7.3
-
Lecture7.4
-
iop-700.0 | Build A Snowman | Exercise Assignment
In this lesson we learn how to make round divs and stack them on top of each other to create the frosty friendly snowman. As a result of doing this we are exposed to relative positioning and z-index rules in css and learn how we can leverage them to creatively place divs on a html page.
- Complete all steps completed in the video “inside out – STEP 700.0 | Build A Snowman”.
- 00:00 – Introduction
- 00:24 – overview
- 01:33 – replace h1 with snowman div
- 02:04 – create the snowman head div
- 02:15 – create the snowman body div
- 02:22 – create the snowman feet div
- 03:02 – create the assets folder
- 03:06 – create the assets/css folder
- 03:10 – create the assets/css/style.css file
- 03:24 – link the style.css file in index.html
- 03:44 – set DW view to split code/live
- 04:14 – body: background-color:
- #CCC;
- 04:33 – add .snowman styles
- 05:12 – add common styles (body feet head)
- 06:16 – adjust snowman head
- 06:46 – adjust snowman body
- 07:33 – adjust snowman feet
- 08:35 – adjust position of body
- 08:58 – adjust position of head
- 09:19 – adjust z-index of head
- 09:36 – adjust z-index of body
- 09:46 – adjust z-index of feet
- 10:08 – review on localhost
- 10:27 – remove border on body div
- 11:05 – git status
- 11:17 – git add .
- 11:27 – git commit