1
00:00:00,000 --> 00:00:02,240
[?music playing?]

2
00:00:02,240 --> 00:00:04,019
[Treehouse presents]

3
00:00:04,019 --> 00:00:08,810
[Exercise Your Creative]

4
00:00:10,570 --> 00:00:12,810
In this episode of Exercise Your Creative, 

5
00:00:12,810 --> 00:00:14,350
we will be building a very simple 

6
00:00:14,350 --> 00:00:16,820
iconography web application. 

7
00:00:16,820 --> 00:00:18,200
We will be using the icons 

8
00:00:18,200 --> 00:00:20,400
we created in our last video. 

9
00:00:20,400 --> 00:00:22,080
For this project, 

10
00:00:22,080 --> 00:00:24,260
you will need a basic understanding of HTML,

11
00:00:24,260 --> 00:00:26,920
CSS, and jQuery. 

12
00:00:26,920 --> 00:00:29,570
Let's get started.

13
00:00:29,570 --> 00:00:31,680
Before we begin any development, 

14
00:00:31,680 --> 00:00:34,150
let's take a look at what we're going to build.

15
00:00:34,150 --> 00:00:36,640
We're going to be building a very simple 

16
00:00:36,640 --> 00:00:39,310
parallax application, which displays the icons

17
00:00:39,310 --> 00:00:41,370
we made in our last video. 

18
00:00:41,370 --> 00:00:43,110
If you don't have these assets, 

19
00:00:43,110 --> 00:00:45,840
no worries, you can either download the assets

20
00:00:45,840 --> 00:00:49,990
or use any images with a 500x500 pixel dimension. 

21
00:00:49,990 --> 00:00:53,670
We are going to develop this application in sprints, 

22
00:00:53,670 --> 00:00:56,920
just as we did with our icons in episode 6. 

23
00:00:56,920 --> 00:00:59,490
If you choose to take breaks in between these sprints, 

24
00:00:59,490 --> 00:01:01,400
it's up to you. 

25
00:01:01,400 --> 00:01:03,780
I simply want to break the project up

26
00:01:03,780 --> 00:01:05,269
into segments for a fast build

27
00:01:05,269 --> 00:01:07,600
and without backtracking. 

28
00:01:07,600 --> 00:01:09,140
We are going to approach this 

29
00:01:09,140 --> 00:01:11,150
like any other HTML app.

30
00:01:11,150 --> 00:01:14,380
First, we will set up the folders and files

31
00:01:14,380 --> 00:01:17,570
and grab any additional assets we might need,

32
00:01:17,570 --> 00:01:20,990
then construct our HTML documentation.

33
00:01:20,990 --> 00:01:23,210
Next, code the CSS.

34
00:01:23,210 --> 00:01:26,850
Lastly, implement jQuery to the application

35
00:01:26,850 --> 00:01:28,200
to make the magic happen. 

36
00:01:28,200 --> 00:01:30,850
For our file structure, 

37
00:01:30,850 --> 00:01:32,360
let's start off on the desktop

38
00:01:32,360 --> 00:01:34,440
and create a new folder 

39
00:01:34,440 --> 00:01:36,130
called, App. 

40
00:01:36,130 --> 00:01:39,240
Inside that folder, make 3 other folders

41
00:01:39,240 --> 00:01:41,520
labelled CSS, 

42
00:01:41,520 --> 00:01:44,200
Images, and Scripts. 

43
00:01:44,200 --> 00:01:48,470
[?music playing?]

44
00:01:48,470 --> 00:01:50,780
Then put the images you would like to use

45
00:01:50,780 --> 00:01:53,910
in the Images folder, inside the App. 

46
00:01:53,910 --> 00:01:57,630
[?music playing?]

47
00:01:57,630 --> 00:01:59,310
If you completed the previous video, 

48
00:01:59,310 --> 00:02:02,010
this will be your icons in PNG format. 

49
00:02:02,010 --> 00:02:04,670
[?music playing?]

50
00:02:04,670 --> 00:02:07,440
Next, let's open up Sublime Text 2

51
00:02:07,440 --> 00:02:09,880
and drag in our App folder. 

52
00:02:09,880 --> 00:02:11,950
Then, let's create a file labelled, 

53
00:02:11,950 --> 00:02:13,320
index.html 

54
00:02:13,320 --> 00:02:16,560
and save it to the App directory. 

55
00:02:16,560 --> 00:02:19,180
Next, 

56
00:02:19,180 --> 00:02:22,380
create a file and save it as style.css

57
00:02:22,380 --> 00:02:25,740
to the CSS directory in the App folder. 

58
00:02:25,740 --> 00:02:27,010
[?music playing?]

59
00:02:27,010 --> 00:02:29,640
We will also need a reset file for our app,

60
00:02:29,640 --> 00:02:31,710
as it is always good practice. 

61
00:02:31,710 --> 00:02:34,970
Copy and paste the CSS reset code

62
00:02:34,970 --> 00:02:37,980
from Eric Meyer in a CSS file

63
00:02:37,980 --> 00:02:40,540
labelled reset.css 

64
00:02:40,540 --> 00:02:42,940
and save it in our CSS folder.

65
00:02:42,940 --> 00:02:44,460
[?music playing?]

66
00:02:44,460 --> 00:02:46,870
Next, grab the latest version of jQuery.

67
00:02:46,870 --> 00:02:50,610
You can do this by going to jQuery.com

68
00:02:50,610 --> 00:02:52,270
and clicking on the Download button. 

69
00:02:52,270 --> 00:02:54,340
Copy all of the code from the page,

70
00:02:54,340 --> 00:02:56,510
and create a new file in Sublime. 

71
00:02:56,510 --> 00:02:59,400
Then, paste the code in that file

72
00:02:59,400 --> 00:03:01,590
and save it in the Scripts folder

73
00:03:01,590 --> 00:03:03,910
labelled jquery.js. 

74
00:03:03,910 --> 00:03:05,680
[?music playing?]

75
00:03:05,680 --> 00:03:07,820
Now, let's grab the parallax plugin

76
00:03:07,820 --> 00:03:09,570
from the URL below.                                              [http://curtain.victorcoulon.fr]

77
00:03:09,570 --> 00:03:13,310
This plugin was created by Victor Coulon.

78
00:03:13,310 --> 00:03:16,900
We only need 2 main files:

79
00:03:16,900 --> 00:03:20,280
curtain.js and curtain.css.

80
00:03:20,280 --> 00:03:23,750
[?music playing?]

81
00:03:23,750 --> 00:03:26,600
Simply put curtain.js 

82
00:03:26,600 --> 00:03:28,690
in the Scripts folder 

83
00:03:28,690 --> 00:03:30,690
and curtain.css 

84
00:03:30,690 --> 00:03:32,700
in the CSS folder. 

85
00:03:32,700 --> 00:03:37,930
[?music playing?]

86
00:03:37,930 --> 00:03:40,300
That's it, our first sprint is done,

87
00:03:40,300 --> 00:03:42,170
our file structure is set,

88
00:03:42,170 --> 00:03:45,740
and we're ready for our next step--HTML. 

89
00:03:46,830 --> 00:03:49,870
Next, we're going to open up our index.html file

90
00:03:49,870 --> 00:03:53,600
and input a basic HTML5 structure. 

91
00:03:53,600 --> 00:03:55,910
This will include the file and code,

92
00:03:55,910 --> 00:03:59,230
HTML5 doc type, 

93
00:03:59,230 --> 00:04:00,960
<html> tag,

94
00:04:00,960 --> 00:04:02,080
<meta> tag, 

95
00:04:02,080 --> 00:04:05,290
[?music playing?]

96
00:04:05,290 --> 00:04:07,560
<head> tag, 

97
00:04:07,560 --> 00:04:09,330
<title> tag, 

98
00:04:09,330 --> 00:04:19,700
[?music playing?]

99
00:04:19,700 --> 00:04:21,709
and our <body> tag. 

100
00:04:21,709 --> 00:04:23,680
Remember to close up all of your tags. 

101
00:04:23,680 --> 00:04:28,700
[?music playing?]

102
00:04:28,700 --> 00:04:32,000
Next, fill in the <title> tag and input

103
00:04:32,000 --> 00:04:37,180
Interactive Iconography. 

104
00:04:37,180 --> 00:04:39,490
 	  [?music playing?]

105
00:04:39,490 --> 00:04:42,980
Then, let's link up the style.css file

106
00:04:42,980 --> 00:04:45,120
found in the CSS folder.

107
00:04:45,120 --> 00:05:04,530
 	  [?music playing?]

108
00:05:04,530 --> 00:05:06,790
Now, jump down to the <body> tag

109
00:05:06,790 --> 00:05:09,070
and add in an ordered list

110
00:05:09,070 --> 00:05:11,400
with 10 list items for each icon ID'd

111
00:05:11,400 --> 00:05:14,470
in order of your choice. 

112
00:05:14,470 --> 00:05:16,470
Each list item

113
00:05:16,470 --> 00:05:19,700
should have the appropriate image inside of it. 

114
00:05:19,700 --> 00:05:51,000
[?music playing?]

115
00:05:51,000 --> 00:05:53,050
After you have completed that, 

116
00:05:53,050 --> 00:05:55,440
let's add a class to the ordered list

117
00:05:55,440 --> 00:05:59,130
labelled, curtains. 

118
00:05:59,130 --> 00:06:01,190
Directly below the ordered list, 

119
00:06:01,190 --> 00:06:03,800
let's add in an unordered list

120
00:06:03,800 --> 00:06:06,270
with a class of menu, 

121
00:06:06,270 --> 00:06:08,210
containing 2 list items. 

122
00:06:08,210 --> 00:06:17,560
[?music playing?]

123
00:06:17,560 --> 00:06:19,280
Each list item should have 

124
00:06:19,280 --> 00:06:21,130
an <a> tag.

125
00:06:21,130 --> 00:06:24,840
The first, linking to #?

126
00:06:24,840 --> 00:06:27,200
and containing the HTML entity number

127
00:06:27,200 --> 00:06:30,000
for the up arrow symbol

128
00:06:30,000 --> 00:06:39,430
[?music playing?]

129
00:06:39,430 --> 00:06:46,050
which is ↑

130
00:06:46,050 --> 00:06:50,360
The second linking to #? 

131
00:06:50,360 --> 00:06:53,320
containing the HTML entity number for the down symbol, 

132
00:06:53,320 --> 00:06:59,930
which is ↓

133
00:06:59,930 --> 00:07:03,130
Lastly, let's link up jquery.js

134
00:07:03,130 --> 00:07:05,640
and the curtain.js

135
00:07:05,640 --> 00:07:08,260
found in the Scripts folder using the script tags. 

136
00:07:08,260 --> 00:07:40,880
[?music playing?]

137
00:07:40,880 --> 00:07:43,080
And that's all we need for our HTML.

138
00:07:43,080 --> 00:07:45,340
Our second sprint is complete. 

139
00:07:45,340 --> 00:07:48,550
When you render your index.html file in the browser, 

140
00:07:48,550 --> 00:07:51,530
you will notice it's not looking so good. 

141
00:07:51,530 --> 00:07:55,520
No worries. We are only a couple sprints away from being complete. 

142
00:07:55,520 --> 00:07:58,420
Next, let's input our CSS.

143
00:07:58,420 --> 00:08:00,560
To start off with our CSS, 

144
00:08:00,560 --> 00:08:02,770
let's open up style.css

145
00:08:02,770 --> 00:08:06,870
and import reset.css and curtain.css

146
00:08:06,870 --> 00:08:09,720
located in the CSS folder. 

147
00:08:09,720 --> 00:08:12,930
When importing the curtain.css,

148
00:08:12,930 --> 00:08:15,260
we will use the previous code

149
00:08:15,260 --> 00:08:17,660
as it applies to the HTML

150
00:08:17,660 --> 00:08:19,220
in curtains class. 

151
00:08:19,220 --> 00:08:21,470
Under the CSS imports, 

152
00:08:21,470 --> 00:08:23,370
let's add a line for the list items

153
00:08:23,370 --> 00:08:25,180
under curtains. 

154
00:08:25,180 --> 00:08:27,090
Let's add a black box shadow under it

155
00:08:27,090 --> 00:08:30,170
at 50 pixels and set its height to 100%.

156
00:08:30,170 --> 00:08:32,070
We can do this by 

157
00:08:32,070 --> 00:08:34,400
positioning them absolute at 50%

158
00:08:34,400 --> 00:08:36,789
from the top and left

159
00:08:36,789 --> 00:08:40,730
and margined at -250 pixels

160
00:08:40,730 --> 00:08:42,010
from the top and bottom. 

161
00:08:42,010 --> 00:08:44,590
This works because the image 

162
00:08:44,590 --> 00:08:46,760
is 500x500 pixels,

163
00:08:46,760 --> 00:08:49,790
thus always positioning them in the middle of the list item. 

164
00:08:49,790 --> 00:08:52,960
Next, let's add custom background

165
00:08:52,960 --> 00:08:55,200
colors to each of our list items

166
00:08:55,200 --> 00:08:57,630
by using their specific ID

167
00:08:57,630 --> 00:08:59,230
to identify them. 

168
00:09:00,300 --> 00:09:03,800
I chose background colors as they applied to the icons. 

169
00:09:03,800 --> 00:09:05,930
[?music playing?]

170
00:09:05,930 --> 00:09:07,260
Like for WordPress, 

171
00:09:07,260 --> 00:09:09,220
I use a darker blue

172
00:09:09,220 --> 00:09:11,110
and an orange for HTML. 

173
00:09:12,140 --> 00:09:15,010
After you have completed all of the background colors, 

174
00:09:15,010 --> 00:09:17,330
let's style our menu next. 

175
00:09:17,330 --> 00:09:20,090
First, let's identify our menu

176
00:09:20,090 --> 00:09:23,130
and position it fixed at the bottom right of the page

177
00:09:23,130 --> 00:09:25,140
and give it a background color.

178
00:09:25,140 --> 00:09:27,860
Then, let's float it to the left,

179
00:09:27,860 --> 00:09:29,600
add some padding

180
00:09:29,600 --> 00:09:31,230
and color to the arrows 

181
00:09:31,230 --> 00:09:33,340
as well as remove the underline decoration. 

182
00:09:33,340 --> 00:09:36,290
Lastly, we want to add a hover change

183
00:09:36,290 --> 00:09:38,240
to the arrows. 

184
00:09:38,240 --> 00:09:40,220
We can do this by changing the background

185
00:09:40,220 --> 00:09:42,710
color and arrow color. 

186
00:09:42,710 --> 00:09:44,520
That's it for our CSS. 

187
00:09:44,520 --> 00:09:47,600
We are now ready to add a simple jQuery function

188
00:09:47,600 --> 00:09:50,250
to activate our parallax plugin. 

189
00:09:50,250 --> 00:09:54,700
Open up your index.html file in Sublime

190
00:09:54,700 --> 00:09:56,450
and scroll down to the bottom. 

191
00:09:56,450 --> 00:09:59,040
Directly below your script tags, 

192
00:09:59,040 --> 00:10:02,200
we want to create another <script> tag,

193
00:10:02,200 --> 00:10:04,120
where we will activate our plugin. 

194
00:10:04,120 --> 00:10:06,860
We will do this by running a function 

195
00:10:06,860 --> 00:10:08,860
for the curtains class

196
00:10:08,860 --> 00:10:12,140
and giving it the following parameters--

197
00:10:12,140 --> 00:10:14,530
scroll speed and controls. 

198
00:10:14,530 --> 00:10:17,120
The scroll speed tells the app how fast

199
00:10:17,120 --> 00:10:20,540
to scroll, with the larger number being the slower scroll.

200
00:10:20,540 --> 00:10:23,810
The controls parameter tells the app 

201
00:10:23,810 --> 00:10:25,720
it should use the menu class 

202
00:10:25,720 --> 00:10:28,260
to control the direction of the icons displayed. 

203
00:10:30,480 --> 00:10:32,150
If you want to take your app 

204
00:10:32,150 --> 00:10:34,010
one step further, 

205
00:10:34,010 --> 00:10:36,130
add in a welcome image before your icon. 

206
00:10:36,130 --> 00:10:38,720
I simply made an image

207
00:10:38,720 --> 00:10:41,120
that says, "I may not be the master of the universe, 

208
00:10:41,120 --> 00:10:44,130
but I am a master at..."

209
00:10:44,130 --> 00:10:46,760
[?music playing?]

210
00:10:46,760 --> 00:10:49,050
Then, I added it to a list item 

211
00:10:49,050 --> 00:10:52,600
in the order list before my first icon

212
00:10:52,600 --> 00:10:55,170
and gave it an id, welcome.

213
00:10:55,170 --> 00:10:59,270
Then, I set the background color to the welcome id

214
00:10:59,270 --> 00:11:01,820
in my style.css file,

215
00:11:01,820 --> 00:11:03,100
along with the others. 

216
00:11:03,100 --> 00:11:05,150
[?music playing?]

217
00:11:05,150 --> 00:11:07,180
When we build our app in segments,

218
00:11:07,180 --> 00:11:09,660
or sprints, you can see how you can save time,

219
00:11:09,660 --> 00:11:12,150
and we don't have to backtrack. 

220
00:11:12,150 --> 00:11:14,250
We can complete 1 sprint,

221
00:11:14,250 --> 00:11:16,650
leave the project and come back to it,

222
00:11:16,650 --> 00:11:18,210
knowing our next step,

223
00:11:18,210 --> 00:11:20,350
without having to dig through a bunch of code. 

224
00:11:20,350 --> 00:11:26,620
[?music playing?]

225
00:11:26,620 --> 00:11:28,670
As always, have fun

226
00:11:28,670 --> 00:11:30,420
and exercise your creative. 

227
00:11:30,420 --> 00:11:32,550
[Exercise Your Creative]