-
Notifications
You must be signed in to change notification settings - Fork 171
/
video.yaml
218 lines (218 loc) · 9.91 KB
/
video.yaml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
{
title: "30 Add Semantic Containers - YouTube",
host_url: "https://www.youtube.com/watch?v=xrDw6I4MSBk",
presenter: "Jonathan Grover",
length: "9:41",
slides_summary: [
{
start_offset: "00:00",
end_offset: "00:57",
bullets: [
"next let's add the html5 semantic tags",
"into our layout okay and i think i'm",
"going to create a feature branch for",
"this and we will call this branch html5",
"layout and will pop this up in sublime",
"text so i might go through and add the",
"semantic tags to each page but to start",
"off with we will just for this video be",
"adding the html5 layout to this index"
]
},
{
start_offset: "00:57",
end_offset: "01:49",
bullets: [
"page so the first thing I'm going to do",
"here is inside the body section here I'm",
"going to go ahead and get rid of this",
"comment since we already know what the",
"body section is for and I'm going to use",
"the HTML semantic tag known as header",
"and inside of the header here i'm going",
"to make sure i have my h1 and h2 which",
"are the name of the company and i also",
"want all of my links to be inside of",
"here so i'm going to close the header",
"down here and these links can actually",
"go inside of the nav element because",
"this is going to be the main navigation",
"here so we'll go ahead and close the nav",
"links there and all of that will get",
"nested inside now a nice shortcut for",
"indenting if you want to indent an"
]
},
{
start_offset: "01:49",
end_offset: "02:35",
bullets: [
"entire block of code rather than having",
"to go to each individual line and hit",
"tab like that what you can do is you can",
"highlight the entire block of text and",
"you can do the command and square",
"bracket key so if you go to the sea it's",
"the letter P on your keyboard in the",
"upper right hand corner if you go to",
"keys over from the letter P",
"just to the left of the backslash and",
"just to the right of the open bracket",
"there should be a close square bracket",
"key so if you do the command and",
"brackets it will indent everything so",
"you can use either the open bracket to",
"slide to the left or the closed bracket",
"to slide to the right so I'm going to"
]
},
{
start_offset: "02:35",
end_offset: "03:37",
bullets: [
"save that and let's go ahead and move on",
"to the next part of the page now this",
"image tag here and all of this text",
"below it is going to be one section of",
"the page so in html5 we can semantically",
"section off a part of the page using the",
"section element like so so this is going",
"to be a main piece of content here and",
"it's going to end here just below these",
"two paragraphs so i'll put a closing",
"section there all right and abiding by",
"best practices we're going to make sure",
"to indent all of the content inside of",
"this section and this is going to just",
"make it easier on our eyes to see that",
"all of this content is within the same",
"section so this section here is going to",
"be about the featured property so I'm",
"going to go ahead and give this section",
"an identity i'm going to say ID equals",
"featured property like that and then"
]
},
{
start_offset: "03:37",
end_offset: "04:16",
bullets: [
"down here we're going to have another",
"section that is our promotional section",
"so i'm going to go ahead and create a",
"new section here and we'll go ahead and",
"give this one an ID of promotional okay",
"and then we're going to go ahead and",
"close this off right there okay and",
"again we want to make sure we indent the",
"content inside of it and then we have a",
"featured property section on the page",
"and another promotional section so"
]
},
{
start_offset: "04:16",
end_offset: "05:29",
bullets: [
"lastly what I'd like to do is I would",
"like to create a footer at the very",
"bottom of the page so I'm going to",
"create a footer",
"element here with an opening and closing",
"footer tag and inside the footer section",
"we're going to put the copyright symbol",
"and a neat trick to make an ascii",
"character of the little circle with the",
"sea in it is if you say an symbol C opy",
"semicolon that will make the copyright",
"symbol and will say copyright 2014",
"exceptional Realty all rights reserved",
"another html5 tag that's nice to add for",
"images and videos and things is the",
"figure and fig caption elements so",
"figure allows us to surround the content",
"with a box and then allows us to then",
"insert a caption that gives a little",
"snippet of information about the image",
"or the video inside of that figure so"
]
},
{
start_offset: "05:29",
end_offset: "07:00",
bullets: [
"let's go ahead and see what that looks",
"like so we'll add the opening figure",
"element here around this image and then",
"we'll come down here and put the closing",
"figure tag like so and we can indent all",
"of that forward and now inside of the",
"figure element we can put a child called",
"fig caption so this represents a caption",
"for the figure ok so in here we're",
"expected to put a little piece of",
"information that will appear under the",
"image often times the caption will say",
"something about whom the photography is",
"by or any other details that you wish to",
"put that are related to the the image or",
"the figure above ok so here we're just",
"going to write",
"apartment",
"of",
"Carol road brooklyn new york and will",
"say photo by denise richards so there's",
"a small caption for our image here so",
"again figure surrounds both the caption",
"and the image okay so we'll go ahead and"
]
},
{
start_offset: "07:00",
end_offset: "08:30",
bullets: [
"save that and we can make one more of",
"these for the video I'll go ahead and go",
"down here so once again will say figure",
"we'll go ahead and indent the video will",
"close it off and just below the video",
"will add the fig caption great so here",
"we will say",
"exceptional realty group promotional",
"video we'll just say something like",
"source will be honest end and say",
"sources archive org okay so let's go",
"ahead and save the page then we will",
"jump over to the browser now the",
"navigation is separated into its own",
"element that is displaying above the",
"figure and you can see the fig caption",
"down below the figure here and we can",
"also see below the video here is the",
"other fig caption okay so I'm pretty",
"happy with these changes I'm going to"
]
},
{
start_offset: "08:30",
end_offset: "9:41",
bullets: [
"jump back to terminal and we're going to",
"go ahead and staged these changes",
"and commit we will say add semantic",
"containers to index so again you'd",
"probably want to do this to all the",
"different pages and I'll go ahead and do",
"that for you and you can just come see",
"the updated code on github so we'll push",
"to origin all right and since I'm",
"satisfied with this we can go ahead and",
"merge into master and we can push master",
"up as well",
"3:06",
"Jonathan Grover",
"2:17"
]
}
]
}