1
00:00:00,000 --> 00:00:06,000
[Master Class Fluid Grids] [HTML Markup]

2
00:00:06,000 --> 00:00:11,000
In the previous master class about responsive web design, we learned how to create

3
00:00:11,000 --> 00:00:15,000
low fidelity and high fidelity markups when planning for responsive layouts.

4
00:00:15,000 --> 00:00:20,000
Now, we're going to start building our project using just html and css 

5
00:00:20,000 --> 00:00:26,000
and when we're writing our style sheet we'll do all of our fluid grid calculations. 

6
00:00:26,000 --> 00:00:30,000
Before we get started, we should take a look at the directory structure 

7
00:00:30,000 --> 00:00:32,000
that we're starting off with.

8
00:00:32,000 --> 00:00:38,000
This is our web root, and we have a folder called "images" that I've created,

9
00:00:38,000 --> 00:00:43,000
and we have a folder called "videos" that I've also created.

10
00:00:43,000 --> 00:00:48,000
First, we'll jump into the images folder, and the first image we have here

11
00:00:48,000 --> 00:00:56,000
is called "app.screenshot.jpeg", and this is simply a screenshot of our application

12
00:00:56,000 --> 00:01:03,000
which we'll be using for the poster image in our HTML5 video tag, and we'll also be using it

13
00:01:03,000 --> 00:01:08,000
as a fall back should a browser not support HTML5 video.

14
00:01:08,000 --> 00:01:16,000
So we'll go back and the next image is geonotation.png, and that's the image that

15
00:01:16,000 --> 00:01:22,000
we created in Photoshop which is the logo for our application.

16
00:01:22,000 --> 00:01:29,000
We have noise.png which in the browser here you can't really see, but we'll be overlaying

17
00:01:29,000 --> 00:01:34,000
this image on top of the gradient on our call to action button.

18
00:01:34,000 --> 00:01:38,000
Next we have phone.png.

19
00:01:38,000 --> 00:01:46,000
This is quite a large image, and this will be the container for our HTML5 video.

20
00:01:46,000 --> 00:01:53,000
Next we have phonestatic.jpg, and this is yet another fall back image

21
00:01:53,000 --> 00:01:58,000
should a browser not support HTML5 video.

22
00:01:58,000 --> 00:02:00,000
We'll get more into that later.

23
00:02:00,000 --> 00:02:06,000
We'll go back here and we're going to jump inside the icons folder, which is inside of our

24
00:02:06,000 --> 00:02:12,000
images folder, and here we have 4 images that we've picked up from the Crystal Project

25
00:02:12,000 --> 00:02:16,000
for KDE, and we have our lightning bolt.

26
00:02:16,000 --> 00:02:19,000
We have a globe.

27
00:02:19,000 --> 00:02:22,000
There is a heart.

28
00:02:22,000 --> 00:02:24,000
And we have a notepad.

29
00:02:24,000 --> 00:02:26,000
So we'll go back here.

30
00:02:26,000 --> 00:02:33,000
We'll go back into the images folder, and then we'll go back all the way up to the web root

31
00:02:33,000 --> 00:02:37,000
and then we're going to jump into the videos folder here, 

32
00:02:37,000 --> 00:02:41,000
and here we have 4 different videos.

33
00:02:41,000 --> 00:02:48,000
The first one is just the original screen cast that I took of the HTML5 mobile application

34
00:02:48,000 --> 00:02:55,000
that we're advertising in this project, and I've re-encoded this video into 3 different formats.

35
00:02:55,000 --> 00:03:01,000
We have mp4, ogv, and a newer format called webm.

36
00:03:01,000 --> 00:03:06,000
Currently, there isn't a single codec that is supported across all browsers, 

37
00:03:06,000 --> 00:03:12,000
we do need to encode our HTML5 videos into multiple codecs.

38
00:03:12,000 --> 00:03:20,000
So go ahead and click on app_demo.mp4 and this is basically what the video looks like.

39
00:03:20,000 --> 00:03:26,000
It's just a screen cast of an iphone and it doesn't necessarily have to be an iphone.

40
00:03:26,000 --> 00:03:30,000
This could be representative of really any phone since we're advertising 

41
00:03:30,000 --> 00:03:33,000
a web application.

42
00:03:33,000 --> 00:03:35,000
So we'll go ahead and go back here, 

43
00:03:35,000 --> 00:03:39,000
and now we're ready to go ahead and jump into our text editor.

44
00:03:39,000 --> 00:03:43,000
So again, we have the same directory structure here.

45
00:03:43,000 --> 00:03:51,000
We have our images folder, and we have our videos folder, and 

46
00:03:51,000 --> 00:03:58,000
now we're going to go ahead and create our first file.

47
00:03:58,000 --> 00:04:02,000
So first we're going to type out our HTML5 doc type,

48
00:04:02,000 --> 00:04:07,000
which looks like this, DOCTYPE in all caps.

49
00:04:07,000 --> 00:04:11,000
Then we'll type out our HTML tag.

50
00:04:11,000 --> 00:04:14,000
The language will be English,

51
00:04:14,000 --> 00:04:19,000
and we'll go ahead and close that.

52
00:04:19,000 --> 00:04:22,000
We'll open up the head tag

53
00:04:22,000 --> 00:04:24,000
and close it

54
00:04:24,000 --> 00:04:27,000
and we'll open up the body tag

55
00:04:27,000 --> 00:04:29,000
and close that.

56
00:04:29,000 --> 00:04:32,000
So let's start out with our head tag.

57
00:04:32,000 --> 00:04:43,000
First, we'll go ahead and set the character set to utf-8,

58
00:04:43,000 --> 00:04:48,000
and then we're going to put a title tag on this

59
00:04:48,000 --> 00:04:55,000
and the project we're advertising is called "GeoNotation" so we'll put that

60
00:04:55,000 --> 00:05:02,000
for our title, and for now that'll wrap it up for our head tag, but we'll be revisiting this later.

61
00:05:02,000 --> 00:05:07,000
So let's go ahead and move onto our body tag, and the first thing we're going to do is we're

62
00:05:07,000 --> 00:05:11,000
going to create a div with the id "wrapper",

63
00:05:11,000 --> 00:05:17,000
and this will contain pretty much everything that's going to be on our site.

64
00:05:17,000 --> 00:05:24,000
Next, we need another div called "main_content."

65
00:05:24,000 --> 00:05:30,000
We'll go ahead and close that.

66
00:05:30,000 --> 00:05:36,000
Moving further in, we're going to create a div with the id "header"

67
00:05:36,000 --> 00:05:43,000
and close that and then inside of our header, we're going to create another nested div

68
00:05:43,000 --> 00:05:50,000
with the id "logo."

69
00:05:50,000 --> 00:05:58,000
Inside of our logo div, we're going to create a first level headline,

70
00:05:58,000 --> 00:06:06,000
and this will be where our logo will go for our site, and inside of the first level headline we'll 

71
00:06:06,000 --> 00:06:10,000
put the name "GeoNotation."

72
00:06:10,000 --> 00:06:19,000
We need to put the actual image that is our logo, which again is in the images folder,

73
00:06:19,000 --> 00:06:25,000
and we named it "geonotation.png"

74
00:06:25,000 --> 00:06:34,000
and we should put some alternate text on here, and we'll just say "Logo for the Geonotation

75
00:06:34,000 --> 00:06:42,000
application" and then after our image we'll create a second level headline,

76
00:06:42,000 --> 00:06:48,000
and this will be our tagline just below our GeoNotation logo, and it will say

77
00:06:48,000 --> 00:06:52,000
"Take notes anywhere."

78
00:06:52,000 --> 00:06:58,000
Go ahead and save this out and we'll scroll down a little bit here, 

79
00:06:58,000 --> 00:07:03,000
and just outside of our logo we'll go ahead and open up a paragraph, 

80
00:07:03,000 --> 00:07:14,000
and inside of our paragraph, we'll say "Have you ever written something down, only to later

81
00:07:14,000 --> 00:07:23,000
be  confused by your own note?" and then expounding upon that, 

82
00:07:23,000 --> 00:07:28,000
we'll go ahead and create another paragraph

83
00:07:28,000 --> 00:07:32,000
and inside of this one we'll just actually go ahead and copy and paste 

84
00:07:32,000 --> 00:07:37,000
some text from off screen, so I think you get the idea,

85
00:07:37,000 --> 00:07:41,000
and then we're done with our header div.

86
00:07:41,000 --> 00:07:45,000
So let's go ahead and skip down here and make some room to work.

87
00:07:45,000 --> 00:07:52,000
So just after our header div, we'll create another div with the id "phone",

88
00:07:52,000 --> 00:07:57,000
and we'll go ahead and close that

89
00:07:57,000 --> 00:08:07,000
and inside of our phone div, we're going to create a video container.

90
00:08:07,000 --> 00:08:12,000
Now, this phone div is what will actually contain an image of our phone. 

91
00:08:12,000 --> 00:08:17,000
This video container will contain an HTML5 video.

92
00:08:17,000 --> 00:08:20,000
So let's go ahead and create that now.

93
00:08:20,000 --> 00:08:23,000
We'll type out our video tag.

94
00:08:23,000 --> 00:08:29,000
We're going to give it a width of 100%,

95
00:08:29,000 --> 00:08:33,000
and this will be for our fluid grid, which we'll be talking about later on.

96
00:08:33,000 --> 00:08:37,000
We're going to create a poster image for our video

97
00:08:37,000 --> 00:08:43,000
and this will be the image that is shown when the video is not playing.

98
00:08:43,000 --> 00:08:46,000
This will be taken from the images folder, 

99
00:08:46,000 --> 00:08:54,000
and this is the file called "app_screenshot.jpg"

100
00:08:54,000 --> 00:08:59,000
and then finally, we just need to add the controls attribute,

101
00:08:59,000 --> 00:09:04,000
and this will just put some video controls on top of our video.

102
00:09:04,000 --> 00:09:08,000
So we'll go ahead and close our video tag,

103
00:09:08,000 --> 00:09:13,000
and then inside we need to put our sources.

104
00:09:13,000 --> 00:09:18,000
Now, I've already encoded our video to several different sources because that's not really

105
00:09:18,000 --> 00:09:23,000
 the focus of this Master Class, but we'll just go ahead and drop in those sources now.

106
00:09:23,000 --> 00:09:30,000
So our first source tag will be from the videos folder,

107
00:09:30,000 --> 00:09:46,000
and we're going to pick up "app_demo.mp4", and this is going to be of type "video/mp4",

108
00:09:46,000 --> 00:09:52,000
and the codecs we're using on this are going to be inside of double quotes which are then 

109
00:09:52,000 --> 00:10:10,000
inside of single quotes and will be avc1.42E01E,mp4a.40.2",

110
00:10:10,000 --> 00:10:14,000
and then we'll skip down to the next line

111
00:10:14,000 --> 00:10:20,000
and put in our next source, and this will again be from the videos folder

112
00:10:20,000 --> 00:10:30,000
File name is "app_demo.webm" and this is a newer codec that works in Google Chrome

113
00:10:30,000 --> 00:10:42,000
and a few other browsers and the type for this will be "video/webm" and the codecs

114
00:10:42,000 --> 00:10:49,000
will be "vp8, vorbis."

115
00:10:49,000 --> 00:10:53,000
We just have one more source here.

116
00:10:53,000 --> 00:10:58,000
The next one will again be from the videos folder.

117
00:10:58,000 --> 00:11:06,000
It will be "app_demo.ogv." 

118
00:11:06,000 --> 00:11:21,000
Type will be "video/ogg" and the codecs will be "theora, vorbis."

119
00:11:21,000 --> 00:11:27,000
So now we're done with our video sources, but we still need to add in one more thing,

120
00:11:27,000 --> 00:11:35,000
and that is an image that is again our app_screenshot,

121
00:11:35,000 --> 00:11:42,000
and this will occasionally show up in browsers that do not support the HTML5 video tag, 

122
00:11:42,000 --> 00:11:44,000
but will still show this image.

123
00:11:44,000 --> 00:11:55,000
So the alt text for this will just be "Screenshot of GeoNotation" and we're going to give it 

124
00:11:55,000 --> 00:12:00,000
an id so that we can target it with css later,

125
00:12:00,000 --> 00:12:07,000
and the id will be "video_app_screenshot."

126
00:12:07,000 --> 00:12:09,000
So we'll go ahead and skip down here.

127
00:12:09,000 --> 00:12:13,000
We're done with our HTML5 video container there.

128
00:12:13,000 --> 00:12:18,000
We'll save that out and make a little bit of room to work here, 

129
00:12:18,000 --> 00:12:27,000
and we'll move on to the 3rd column in our layout which will give the id "misc."

130
00:12:27,000 --> 00:12:30,000
We'll close that

131
00:12:30,000 --> 00:12:40,000
and the first thing inside of this column will be a link with the id "call_to_action" 

132
00:12:40,000 --> 00:12:59,000
and we also need to give it the href of "http://mc-mobile-app.s3.amazonaws.com/

133
00:12:59,000 --> 00:13:08,000
index.html" and this will just link to the project that was created in a previous Master Class.

134
00:13:08,000 --> 00:13:20,000
Inside of this link we'll put the text "Start Taking Notes" and then below this link

135
00:13:20,000 --> 00:13:26,000
we're going to create a few block quotes here which will be testimonials about the app

136
00:13:26,000 --> 00:13:37,000
and our first block quote will be "Holy heck, it's awesome!" and then after that we'll create a 

137
00:13:37,000 --> 00:13:46,000
div with a - Ryan Carson and close the div

138
00:13:46,000 --> 00:13:51,000
and then we'll create a 2nd block quote

139
00:13:51,000 --> 00:13:58,000
and inside of this one we'll go ahead and put a quote from myself that says

140
00:13:58,000 --> 00:14:02,000
"This changes everything."

141
00:14:02,000 --> 00:14:07,000
And we'll go ahead and open a div here and say it's from Nick Pettit 

142
00:14:08,000 --> 00:14:11,000
and we'll go ahead and close that.

143
00:14:11,000 --> 00:14:14,000
So that about finishes things up for our main content div 

144
00:14:14,000 --> 00:14:20,000
so we can go ahead and delete this extra space here.

145
00:14:20,000 --> 00:14:27,000
However, just after our main contect div we're going to create an unordered list with the id

146
00:14:27,000 --> 00:14:36,000
"features" and this will be where we put all of the features that are listed

147
00:14:36,000 --> 00:14:38,000
at the bottom of the page.

148
00:14:38,000 --> 00:14:48,000
So our first list item will have the id "global" and we're going to give it the class "feature."

149
00:14:48,000 --> 00:14:54,000
And we'll go ahead and close that list item and we'll create a div inside of it

150
00:14:54,000 --> 00:14:58,000
with the class icon

151
00:14:58,000 --> 00:15:04,000
and we're going to put an image inside of this div

152
00:15:04,000 --> 00:15:13,000
from the images folder inside the icons folder and it will be "globe.png",

153
00:15:13,000 --> 00:15:21,000
and we''ll give it the alternate text "An icon of a globe."

154
00:15:21,000 --> 00:15:29,000
And then still inside of our list item we'll create another div with the class info and

155
00:15:29,000 --> 00:15:33,000
this will be information that's placed next to our icon.

156
00:15:33,000 --> 00:15:37,000
So it will create a 3rd level headline tag

157
00:15:37,000 --> 00:15:44,000
and we'll say "Global" and then we'll expound upon that point and we'll say

158
00:15:44,000 --> 00:15:55,000
"Keep track of your notes using advanced geolocation technology."

159
00:15:55,000 --> 00:16:02,000
So that about wraps things up for our first list item, but we need to create 3 more, 

160
00:16:02,000 --> 00:16:11,000
so we'll go ahead and and copy this, and we'll paste it 3 times, one, two, and three,

161
00:16:11,000 --> 00:16:15,000
and then we just need to change the information inside of 

162
00:16:15,000 --> 00:16:18,000
teach one of these ones that we pasted.

163
00:16:18,000 --> 00:16:24,000
So this first one that we pasted will have the id "easy."

164
00:16:24,000 --> 00:16:32,000
We're going to change the source on the image to "notes.png"

165
00:16:32,000 --> 00:16:41,000
and we'll change the alternate text to say "An icon of a notepad." and then we just need to 

166
00:16:41,000 --> 00:16:51,000
change the description here to say "This app is even easier to use than regular old pen 

167
00:16:51,000 --> 00:16:59,000
and paper" and of course we do need to change this h3 as well and it'll say "easy."

168
00:16:59,000 --> 00:17:02,000
Now we just have have 2 more here.

169
00:17:02,000 --> 00:17:06,000
We need an id of "friendly."

170
00:17:06,000 --> 00:17:16,000
We'll change the image to the icon of a heart and we'll change the alt text appropriately.

171
00:17:16,000 --> 00:17:23,000
We need to again change our description, and for this one we'll say "You'll love 

172
00:17:23,000 --> 00:17:33,000
the experience of taking notes and interacting with GeoNotation."

173
00:17:33,000 --> 00:17:41,000
And then for the h3 we'll also say "friendly" and now we're onto our final list item here,

174
00:17:41,000 --> 00:17:49,000
and we'll change the id to say "fast" and we'll use our lightning bolt to represent the 

175
00:17:49,000 --> 00:17:51,000
speediness of the app.

176
00:17:51,000 --> 00:18:00,000
We'll change the alternate text appropriately and say "An icon of a lightning bolt."

177
00:18:00,000 --> 00:18:08,000
We'll change our description to say "GeoNotation is, quite simply, 

178
00:18:08,000 --> 00:18:17,000
the fastest note-taking app on the market."

179
00:18:17,000 --> 00:18:25,000
and then we'll go ahead and change our h3 to say "fast"

180
00:18:25,000 --> 00:18:30,000
and then we'll delete our extra space here,

181
00:18:30,000 --> 00:18:40,000
and we can get rid of the extra space in between each one of our list items,

182
00:18:40,000 --> 00:18:45,000
and then we'll go ahead and save that out and switch back to the browser,

183
00:18:45,000 --> 00:18:52,000
and when we refresh the page here, you can see that we now have a fist level headline

184
00:18:52,000 --> 00:18:54,000
that says "GeoNotation."

185
00:18:54,000 --> 00:19:02,000
Just below that inside of our logo div we have the GeoNotation logo.

186
00:19:02,000 --> 00:19:08,000
We have a 2nd level headline which is our tagline that says "Take notes anywhere."

187
00:19:08,000 --> 00:19:18,000
We have a brief description of our app and all of these things will go in the left hand column.

188
00:19:18,000 --> 00:19:25,000
We then have a very large image of our application, and that's actually just the poster

189
00:19:25,000 --> 00:19:28,000
for this HTML5 video.

190
00:19:28,000 --> 00:19:35,000
Now remember, we put width of 100% on this, which is why it appears to be so large.

191
00:19:35,000 --> 00:19:40,000
We'll go ahead and pause that.

192
00:19:40,000 --> 00:19:47,000
Then on the right side of our page we have the "Start Taking Notes" call to action button.

193
00:19:47,000 --> 00:19:52,000
We have a few block quote testimonials, "Holy heck it's awesome" and "This changes

194
00:19:52,000 --> 00:20:01,000
everything" and then we have a few very large icons here with the headers "Global", "Easy"

195
00:20:01,000 --> 00:20:10,000
"Friendly" and "Fast" and that should about wrap things up for our html markup,

196
00:20:10,000 --> 00:20:14,000
having good semantic markup like this is the foundation for creating 

197
00:20:14,000 --> 00:20:18,000
a very good, responsive design.