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

2
00:00:02,000 --> 00:00:04,000
[Master Class: Designer and Developer Workflow]

3
00:00:04,000 --> 00:00:07,000
[Styling the Index View]

4
00:00:07,000 --> 00:00:13,000
[Nick Pettit] To get started, let's go ahead and start our Rails server

5
00:00:13,000 --> 00:00:15,000
and we'll refresh our page,

6
00:00:15,000 --> 00:00:21,000
and here, we have our current Easy Jobs layout for our index view.

7
00:00:21,000 --> 00:00:28,000
We'll go ahead switch back, and we can go ahead and stop our server

8
00:00:28,000 --> 00:00:31,000
and open this up in TextMate.

9
00:00:31,000 --> 00:00:37,000
First, let's go ahead and open up our application layout

10
00:00:37,000 --> 00:00:43,000
and let's just change this title so it looks a little bit more friendly. 

11
00:00:43,000 --> 00:00:47,000
%title Easy Jobs! There we go.

12
00:00:47,000 --> 00:00:54,000
And now, let's go ahead and open up our index view for our jobs. 

13
00:00:54,000 --> 00:00:58,000
So here we have our index view and it says Listing Jobs

14
00:00:58,000 --> 00:01:02,000
and we don't really need that, so we'll go ahead and delete it. 

15
00:01:02,000 --> 00:01:07,000
And you'll also notice that all of our jobs are in a table right now. 

16
00:01:07,000 --> 00:01:11,000
We don't want that, either, so let's get rid of all of that. 

17
00:01:11,000 --> 00:01:18,000
We'll get rid of the table row and just so we keep careful track of this, 

18
00:01:18,000 --> 00:01:22,000
we'll remove the indentation by one.

19
00:01:22,000 --> 00:01:29,000
And then we'll go ahead and delete all of these table cells because we don't need them.

20
00:01:29,000 --> 00:01:34,000
We'll get rid of the Destroy link for now.

21
00:01:34,000 --> 00:01:37,000
We don't need this break,

22
00:01:37,000 --> 00:01:43,000
and we'll go ahead and keep this link to the new_job_path down at the bottom of this view.

23
00:01:43,000 --> 00:01:47,000
We're going to eventually move this link, but we'll keep it there for now

24
00:01:47,000 --> 00:01:53,000
just to remind ourselves that we do indeed need to include it somewhere in our layout.

25
00:01:53,000 --> 00:01:58,000
So we'll go ahead remove some indentation here that we don't quite need,

26
00:01:58,000 --> 00:02:03,000
and remember, this is our index view, so there's a few additional details here 

27
00:02:03,000 --> 00:02:08,000
that we don't need, like the details link and the company name.

28
00:02:08,000 --> 00:02:13,000
All we want is the title, description, and the link to the Show view,

29
00:02:13,000 --> 00:02:17,000
and eventually, we'll put in the Edit view someplace, but for now, 

30
00:02:17,000 --> 00:02:20,000
we won't really pay too much attention to that.

31
00:02:20,000 --> 00:02:22,000
So we'll go ahead and save that out.

32
00:02:22,000 --> 00:02:24,000
We'll save out our application layout,

33
00:02:24,000 --> 00:02:29,000
and if we switch back to the browser and refresh the page,

34
00:02:29,000 --> 00:02:35,000
you can see that now we have what looks like just a giant blob of text. 

35
00:02:35,000 --> 00:02:39,000
Now, we need to organize this a little bit more, so let's go ahead and do that

36
00:02:39,000 --> 00:02:41,000
with some markup.

37
00:02:41,000 --> 00:02:45,000
We'll switch back and go into our index view here,

38
00:02:45,000 --> 00:02:51,000
and let's go ahead and add an unordered list. 

39
00:02:51,000 --> 00:02:53,000
We'll indent our job loop by one,

40
00:02:53,000 --> 00:03:01,000
and then inside of the job loop, we want to go ahead and add a list item

41
00:03:01,000 --> 00:03:04,000
and then we'll put all of our details inside of that.

42
00:03:04,000 --> 00:03:09,000
So we'll save that out, switch back to the browser, and watch carefully.

43
00:03:09,000 --> 00:03:14,000
When we refresh, you can see that the text changed just slightly

44
00:03:14,000 --> 00:03:17,000
and that's because we now have just a little bit more separation 

45
00:03:17,000 --> 00:03:21,000
between each one of our job postings, but not much,

46
00:03:21,000 --> 00:03:24,000
and that's where the styling will come in. 

47
00:03:24,000 --> 00:03:28,000
So let's go ahead and switch back to our markup and we'll go ahead and apply

48
00:03:28,000 --> 00:03:32,000
a little bit of markup just so we can split out some of the details here

49
00:03:32,000 --> 00:03:35,000
a bit more easily in our styling.

50
00:03:35,000 --> 00:03:40,000
First, for our job title, we'll go ahead and apply a strong tag

51
00:03:40,000 --> 00:03:46,000
and we'll give it the class job title, and then for our description,

52
00:03:46,000 --> 00:03:53,000
we'll go ahead and apply a span tag and give it the class description

53
00:03:53,000 --> 00:04:00,000
and we'll put our title and our job description indented by one

54
00:04:00,000 --> 00:04:03,000
and we'll save that out.

55
00:04:03,000 --> 00:04:06,000
In addition, we want each one of these

56
00:04:06,000 --> 00:04:11,000
to link to the Show page for the job, so we need to move our Show link 

57
00:04:11,000 --> 00:04:19,000
up to the top, and then we need to actually change the way this is structured.

58
00:04:19,000 --> 00:04:27,000
So inside of the link_to, we'll pass (job) as our URL 

59
00:04:27,000 --> 00:04:33,000
and then we'll indent everything underneath it just so that when we click on it,

60
00:04:33,000 --> 00:04:35,000
it actually links to it.

61
00:04:35,000 --> 00:04:38,000
So if we switch back to the browser and refresh the page, 

62
00:04:38,000 --> 00:04:45,000
it looks like we have a syntax error and that's because we got an unexpected end there

63
00:04:45,000 --> 00:04:48,000
and it looks like we just messed up the link_to a little bit.

64
00:04:48,000 --> 00:04:52,000
So let's go ahead and switch back and see if we can't fix this up.

65
00:04:52,000 --> 00:04:57,000
The problem came in because we didn't actually pass a block to the link_to

66
00:04:57,000 --> 00:05:02,000
so we just need to say do there, and when we refresh the page,

67
00:05:02,000 --> 00:05:07,000
we should now have some nice links to each one of our job postings.

68
00:05:07,000 --> 00:05:12,000
So when we click on these, it will go through to the Show view for our job posting.

69
00:05:12,000 --> 00:05:14,000
Pretty nifty. 

70
00:05:14,000 --> 00:05:19,000
Now, this page is pretty ugly, so let's go ahead and get into our style sheet.

71
00:05:19,000 --> 00:05:25,000
So we'll jump into the public folder, go into style sheets,

72
00:05:25,000 --> 00:05:33,000
sass, and we'll open up application.sass

73
00:05:33,000 --> 00:05:40,000
Now, just as a little bit of housecleaning, we need to go ahead and remove scaffold.css,

74
00:05:40,000 --> 00:05:43,000
so we'll move that to the trash.

75
00:05:43,000 --> 00:05:47,000
So in application.sass here, we have some styling applied to the body,

76
00:05:47,000 --> 00:05:49,000
but we don't really need any of that. 

77
00:05:49,000 --> 00:05:51,000
We'll just go ahead and delete it

78
00:05:51,000 --> 00:05:55,000
because most of what we need is already in the reset code for Blueprint.

79
00:05:55,000 --> 00:05:59,000
So we'll go ahead and save our empty application.sass,

80
00:05:59,000 --> 00:06:01,000
switch back to the browser and refresh,

81
00:06:01,000 --> 00:06:07,000
and all that really visibly did is gave us the default white background 

82
00:06:07,000 --> 00:06:10,000
which, in this case, is what we want. 

83
00:06:10,000 --> 00:06:13,000
For now, we're just working on the layout of the site

84
00:06:13,000 --> 00:06:18,000
and we'll worry about more detailed styling in a later iteration.

85
00:06:18,000 --> 00:06:20,000
So let's go ahead and switch back, 

86
00:06:20,000 --> 00:06:25,000
and first, we're going to go ahead and select our list items

87
00:06:25,000 --> 00:06:30,000
and let's just go ahead and put some padding on the top and bottom of them

88
00:06:30,000 --> 00:06:33,000
just to give them some cleaner separation. 

89
00:06:33,000 --> 00:06:36,000
So that's a little bit easier to look at. 

90
00:06:36,000 --> 00:06:40,000
We may adjust that styling later on, but for now, it looks fine. 

91
00:06:40,000 --> 00:06:43,000
Now, these descriptions look pretty lengthy

92
00:06:43,000 --> 00:06:46,000
and we actually want to tighten those up.

93
00:06:46,000 --> 00:06:52,000
Now, you'll notice that the text is just spreading all the way from the left side of the page

94
00:06:52,000 --> 00:06:57,000
to the right side of the page, and that's because we don't have any kind of wrapper div

95
00:06:57,000 --> 00:07:01,000
or even any kind of grid applied to this page.

96
00:07:01,000 --> 00:07:05,000
Now, of course, we did include Blueprint, so adding in Blueprint 

97
00:07:05,000 --> 00:07:08,000
would be a really easy way to do that. 

98
00:07:08,000 --> 00:07:13,000
So let's go ahead and switch back to our style sheet 

99
00:07:13,000 --> 00:07:19,000
and up at the top, we're just going to say @import blueprint

100
00:07:19,000 --> 00:07:27,000
and for $blueprint_grid_column which should be a $ there because it's a variable.

101
00:07:27,000 --> 00:07:30,000
We're going to say 24.

102
00:07:30,000 --> 00:07:36,000
And then for $blueprint_grid_width, 

103
00:07:36,000 --> 00:07:38,000
we're going to say 30px. 

104
00:07:38,000 --> 00:07:41,000
And then, finally, for blueprint_grid_margin, we're going to say 10px.

105
00:07:41,000 --> 00:07:49,000
And actually, these underscores need to be dashes,

106
00:07:49,000 --> 00:07:53,000
so let's just go ahead and change that right now 

107
00:07:53,000 --> 00:07:58,000
and we'll line up all of these colons just so our CSS is a little bit more readable

108
00:07:58,000 --> 00:08:01,000
and we'll save that out. 

109
00:08:01,000 --> 00:08:03,000
Now, right now, that's not going to do anything

110
00:08:03,000 --> 00:08:07,000
because first we need to switch back to our application layout 

111
00:08:07,000 --> 00:08:10,000
and we're going to go ahead and add in a wrapper div, 

112
00:08:10,000 --> 00:08:14,000
so let's just add that in right now and we'll indent our yield

113
00:08:14,000 --> 00:08:17,000
so that it will go inside of our wrapper. 

114
00:08:17,000 --> 00:08:21,000
And then, also inside of our wrapper, before we yield all of the content, 

115
00:08:21,000 --> 00:08:27,000
we want to include some kind of header and then we're going to include a logo.

116
00:08:27,000 --> 00:08:35,000
Now, actually, I want this logo to be an h1, but we'll still apply the logo as an ID.

117
00:08:35,000 --> 00:08:42,000
And inside of this logo, we're just going to put the text "Easy Jobs!" 

118
00:08:42,000 --> 00:08:44,000
And before we get ahead of ourselves,

119
00:08:44,000 --> 00:08:49,000
let's just go ahead and switch back to the browser and refresh the page.

120
00:08:49,000 --> 00:08:54,000
And indeed, it looks like we have some sort of syntax error.

121
00:08:54,000 --> 00:08:59,000
It looks like we just didn't include a % sign in front of our h1,

122
00:08:59,000 --> 00:09:03,000
so let's go ahead and fix that and see if it fixes the page. 

123
00:09:03,000 --> 00:09:04,000
And there we go. 

124
00:09:04,000 --> 00:09:10,000
Now, we have our h1 up at the top here, which of course is unstyled 

125
00:09:10,000 --> 00:09:14,000
and reset from the browser defaults, but we'll change that later,

126
00:09:14,000 --> 00:09:16,000
and it looks like we're doing pretty good.

127
00:09:16,000 --> 00:09:20,000
So let's go ahead and apply Blueprint to that wrapper.

128
00:09:20,000 --> 00:09:28,000
So we'll switch back to our application.sass and we'll select our wrapper div

129
00:09:28,000 --> 00:09:33,000
and we just want to include the mixin container

130
00:09:33,000 --> 00:09:38,000
and this is gonig to turn our wrapper into a Blueprint container. 

131
00:09:38,000 --> 00:09:42,000
Now, if you haven't watched our SASS or Compass videos, 

132
00:09:42,000 --> 00:09:47,000
the advantage of doing things this way is that you get all of the benefits of Blueprint

133
00:09:47,000 --> 00:09:53,000
like the reset code and the grid framework without all the presentational class names

134
00:09:53,000 --> 00:09:55,000
in the markup.

135
00:09:55,000 --> 00:10:01,000
Rather, all of that styling gets applied to the actual element, as it should be.

136
00:10:01,000 --> 00:10:06,000
So we'll go ahead and save that, and when we switch back to the browser and refresh, 

137
00:10:06,000 --> 00:10:11,000
you can see that our wrapper is now being applied appropriately. 

138
00:10:11,000 --> 00:10:15,000
Now, let's go ahead and first work on this h1, so we'll go ahead 

139
00:10:15,000 --> 00:10:18,000
and just switch back to our style sheet

140
00:10:18,000 --> 00:10:22,000
and we'll go ahead and select the h1

141
00:10:22,000 --> 00:10:28,000
and all we're going to do is apply a large font-size of about 3em

142
00:10:28,000 --> 00:10:31,000
and we'll go ahead and say font-weight: bold.

143
00:10:31,000 --> 00:10:34,000
So we'll save that out, switch back and refresh,

144
00:10:34,000 --> 00:10:38,000
and now, we have a nice, large logo.

145
00:10:38,000 --> 00:10:42,000
Now, of course, we'll style this a little bit more, maybe apply a font

146
00:10:42,000 --> 00:10:46,000
or maybe even turn it into an image and create an actual logo.

147
00:10:46,000 --> 00:10:51,000
However, for now, when we're just working on the page layout, this looks fine. 

148
00:10:51,000 --> 00:10:55,000
So we'll go ahead and switch back,

149
00:10:55,000 --> 00:10:59,000
 and now, let's go ahead and work on those links a little bit.

150
00:10:59,000 --> 00:11:04,000
Now, if you remember, we actually applied class names to those links, 

151
00:11:04,000 --> 00:11:06,000
so let's go ahead and use those. 

152
00:11:06,000 --> 00:11:10,000
Switch over to our index, and it looks like for the job title, 

153
00:11:10,000 --> 00:11:14,000
we have a class name job title, and for the description, 

154
00:11:14,000 --> 00:11:16,000
we have the class name description.

155
00:11:16,000 --> 00:11:18,000
So let's go ahead and use these.

156
00:11:18,000 --> 00:11:25,000
They're nested inside of our li, so for job title, 

157
00:11:25,000 --> 00:11:29,000
you want to just go ahead and make the font a little bit larger

158
00:11:29,000 --> 00:11:32,000
and we want to put some margin on the right side,

159
00:11:32,000 --> 00:11:37,000
so we'll put about 10px, we'll save that out and refresh this page.

160
00:11:37,000 --> 00:11:43,000
And now, these job titles are nice and bold, so it's a lot easier

161
00:11:43,000 --> 00:11:46,000
to just scan the page and actually see these job titles. 

162
00:11:46,000 --> 00:11:51,000
I think I will make them a little bit larger, but the spacing between the description

163
00:11:51,000 --> 00:11:54,000
does look pretty good, so we'll go ahead and switch back 

164
00:11:54,000 --> 00:11:58,000
and maybe change this to 1.4, save that out and refresh,

165
00:11:58,000 --> 00:12:01,000
and I think that looks pretty good. 

166
00:12:01,000 --> 00:12:04,000
Now, let's go ahead and tackle these descriptions. 

167
00:12:04,000 --> 00:12:07,000
You'll notice that these descriptions just run on and on 

168
00:12:07,000 --> 00:12:11,000
and they wrap down by several lines, especially this one down here,

169
00:12:11,000 --> 00:12:14,000
and that just doesn't look good at all. 

170
00:12:14,000 --> 00:12:17,000
We actually want each one of these just to take up one line. 

171
00:12:17,000 --> 00:12:21,000
Now, in order to do that, we're going to just go ahead and wrap the text

172
00:12:21,000 --> 00:12:24,000
and add an ellipsis, so let's go ahead and do that.

173
00:12:24,000 --> 00:12:27,000
So we'll go ahead and switch back to TextMate

174
00:12:27,000 --> 00:12:33,000
and before we apply the styling, let's just go ahead and take a look at our markup.

175
00:12:33,000 --> 00:12:38,000
I think the smartest place to apply this would be actually to our link.

176
00:12:38,000 --> 00:12:42,000
However, we don't want to apply this to all the <a> tags inside of our li 

177
00:12:42,000 --> 00:12:46,000
because of course, we have this 'Edit' link right here. 

178
00:12:46,000 --> 00:12:50,000
So let's go ahead and apply a class name to this link.

179
00:12:50,000 --> 00:12:55,000
So we'll just pass in some parameters here, and we'll say class 

180
00:12:55,000 --> 00:13:01,000
and we'll just call this something simple like job_link.

181
00:13:01,000 --> 00:13:05,000
So we'll go ahead and switch back to the browser and refresh the page

182
00:13:05,000 --> 00:13:10,000
and let's just go ahead and look at the source to make sure that that class name 

183
00:13:10,000 --> 00:13:14,000
is indeed appearing on our links, and it looks like it is. 

184
00:13:14,000 --> 00:13:19,000
There it says class= "job_link" so that's good. 

185
00:13:19,000 --> 00:13:22,000
So now let's go ahead and switch back to our style sheet 

186
00:13:22,000 --> 00:13:25,000
and go ahead and use that. 

187
00:13:25,000 --> 00:13:30,000
So inside of our li, we'll say job_link and let's just skip down

188
00:13:30,000 --> 00:13:33,000
and make some room to work here.

189
00:13:33,000 --> 00:13:35,000
There we go. 

190
00:13:35,000 --> 00:13:42,000
And for our job link, we're going to say white-space: nowrap;

191
00:13:42,000 --> 00:13:46,000
overflow: hidden; 

192
00:13:46,000 --> 00:13:51,000
and text-overflow: ellipsis.

193
00:13:51,000 --> 00:13:55,000
And of course, we don't need semicolons because we're using SASS.

194
00:13:55,000 --> 00:13:58,000
So I'll go ahead and save that out, switch back to the browser,

195
00:13:58,000 --> 00:14:01,000
and refresh, and as you can see, 

196
00:14:01,000 --> 00:14:05,000
it looks like our text is actually getting cut off,

197
00:14:05,000 --> 00:14:09,000
so let's see if we can figure out whats going on here. 

198
00:14:09,000 --> 00:14:13,000
I think our description actually needs to be a block-level element

199
00:14:13,000 --> 00:14:19,000
in order for this to work, so let's go ahead and try that out.

200
00:14:19,000 --> 00:14:27,000
So we'll go ahead and set this job description to display: block

201
00:14:27,000 --> 00:14:32,000
and we'll just put a width: 100% on it for now.

202
00:14:32,000 --> 00:14:36,000
And actually, we need to go ahead and move all of the styling

203
00:14:36,000 --> 00:14:40,000
down to the description if this is going to work. 

204
00:14:40,000 --> 00:14:44,000
So let's just go ahead and save this and see where it gets us in the browser.

205
00:14:44,000 --> 00:14:49,000
And it looks like everything still looks the same, so let's switch back to our CSS

206
00:14:49,000 --> 00:14:53,000
and try to figure out what's going on.

207
00:14:53,000 --> 00:14:55,000
I think our class name is incorrect.

208
00:14:55,000 --> 00:15:00,000
We have job_description here whereas we actually just want description.

209
00:15:00,000 --> 00:15:05,000
So we'll go ahead and change that to say description,

210
00:15:05,000 --> 00:15:08,000
save that, and now if we refresh, 

211
00:15:08,000 --> 00:15:11,000
it looks like we have a nice ellipsis over on the right.

212
00:15:11,000 --> 00:15:15,000
Now, this isn't quite what we want, though.

213
00:15:15,000 --> 00:15:19,000
We want these descriptions to actually appear next to the job titles,

214
00:15:19,000 --> 00:15:23,000
so let's go ahead and try to figure that out. 

215
00:15:23,000 --> 00:15:26,000
We'll switch back, and I think the strategy I'm going to take

216
00:15:26,000 --> 00:15:32,000
is just to float these to the left, so we'll float the job description to the left, 

217
00:15:32,000 --> 00:15:37,000
and of course, that means we need to float a few other things, including the job title

218
00:15:37,000 --> 00:15:43,000
and the job link, so we'll go ahead and save those out.

219
00:15:43,000 --> 00:15:46,000
So if we switch back to the browser and refresh, 

220
00:15:46,000 --> 00:15:50,000
we can see that that didn't quite work. 

221
00:15:50,000 --> 00:15:55,000
So maybe a better way to do this would be to actually use Blueprint columns,

222
00:15:55,000 --> 00:15:57,000
so let's go ahead and try that out. 

223
00:15:57,000 --> 00:16:02,000
First, we'll get rid of this margin because Blueprint will apply its own margin.

224
00:16:02,000 --> 00:16:07,000
We'll get rid of these floats because each column will be floated on its own,

225
00:16:07,000 --> 00:16:11,000
and let's go ahead and add in the mixin. 

226
00:16:11,000 --> 00:16:17,000
So we'll say this is a column and we'll say that this is 6 columns wide

227
00:16:17,000 --> 00:16:20,000
and we'll add in the mixin here

228
00:16:20,000 --> 00:16:24,000
and make up for the remaining 18. 

229
00:16:24,000 --> 00:16:27,000
We'll go ahead and remove this width: 100% 

230
00:16:27,000 --> 00:16:29,000
because we're setting the width with the column, 

231
00:16:29,000 --> 00:16:32,000
and this is going to be the last column in our layout,

232
00:16:32,000 --> 00:16:35,000
so we need to let the column mixin know that 

233
00:16:35,000 --> 00:16:38,000
by passing true as the second argument.

234
00:16:38,000 --> 00:16:42,000
So we'll go ahead and save that out, switch back and refresh, 

235
00:16:42,000 --> 00:16:45,000
and it looks like we now have a nice 2-column layout 

236
00:16:45,000 --> 00:16:50,000
where we have the job titles on the left and the job descriptions over on the right.

237
00:16:50,000 --> 00:16:56,000
Now, as one final touch, I'd like to go ahead and move this new job link 

238
00:16:56,000 --> 00:16:58,000
over to the upper right. 

239
00:16:58,000 --> 00:17:03,000
But other than that, I think the layout for our index view is really coming together. 

240
00:17:03,000 --> 00:17:08,000
Remember, we'll be adding additional details in upcoming iterations.

241
00:17:08,000 --> 00:17:11,000
So let's go ahead and switch back,

242
00:17:11,000 --> 00:17:15,000
and we'll switch over to our index view, 

243
00:17:15,000 --> 00:17:21,000
and let's just move this new_job_path up to the top of the page. 

244
00:17:21,000 --> 00:17:24,000
So we'll go ahead and save that out, 

245
00:17:24,000 --> 00:17:26,000
and let's see what that looks like in the browser.

246
00:17:26,000 --> 00:17:35,000
So now, our New Job link is right there, and we can just go ahead and float that to the right

247
00:17:35,000 --> 00:17:38,000
or actually just change the text alignment. 

248
00:17:38,000 --> 00:17:45,000
But in order to do that, we need to actually add a class name, so let's go ahead and add that. 

249
00:17:45,000 --> 00:17:52,000
We'll say class ==> "new_job_link"

250
00:17:52,000 --> 00:17:57,000
and then let's go ahead and include that in our style sheet.

251
00:17:57,000 --> 00:18:04,000
So we'll say new_job_link and we'll float: right and let's just see what that does. 

252
00:18:04,000 --> 00:18:08,000
So it goes ahead and puts the new job link over here, 

253
00:18:08,000 --> 00:18:14,000
and let's just go ahead and set the font-weight: bold 

254
00:18:14,000 --> 00:18:20,000
and we'll go ahead and change the font-size to something fairly large 2em

255
00:18:20,000 --> 00:18:23,000
just so we can make sure that we actually see that. 

256
00:18:23,000 --> 00:18:28,000
Now, in doing that, it looks like we forgot one final detail.

257
00:18:28,000 --> 00:18:31,000
You'll notice that we still have bullet points on our list items,

258
00:18:31,000 --> 00:18:34,000
so let's just go ahead and remove those. 

259
00:18:34,000 --> 00:18:38,000
We'll go up to the li and we'll say list-style: none,

260
00:18:38,000 --> 00:18:40,000
save that out, refresh the page, 

261
00:18:40,000 --> 00:18:44,000
and now we've gotten rid of those bullet points. 

262
00:18:44,000 --> 00:18:48,000
Now, this layout might look pretty unrefined, but it's enough to get us started 

263
00:18:48,000 --> 00:18:53,000
and it's enough so that we can start adding detail later on.