#100DaysOfWeb in Python Transcripts
Chapter: Days 5-8: HTML and HTML5
Lecture: Building Yaahoo
0:00 So, if you were going to rebuild the home page
0:02 of a $100 billion tech company
0:06 you would think that might take a little while, right?
0:08 Well, give it five to 10 minutes
0:10 and we're going to build Yahoo.
0:12 Well, at least its homepage right?
0:13 So, this is the sites that we're going to build.
0:17 Here we are over in our repo.
0:19 I open this in WebStorm.
0:20 I'm going to drag and drop this folder
0:23 onto the icon in the Dock
0:24 and this only works on macOS, unfortunately
0:28 it doesn't work on the other ones.
0:29 On Windows and Linux you just
0:32 say file, open directory.
0:33 Never mind this for now.
0:35 You can see there's nothing in here
0:36 we have our Yahoo clone directory
0:38 we have some images, these are images that
0:40 we're going to use across the top
0:43 they're red because they're not yet
0:44 committed to GitHub, I'll do that in
0:45 just a moment. So let's go and add a new H
0:48 I don't want to add a new HTML file
0:50 normally you would but I want to add a new
0:51 plain file and just call it index.html.
0:54 The reason I didn't add the HTML one
0:56 is that it already has some of the structure.
0:57 So, what do we have to have here for our document?
0:59 Well, if it's going to be treated as HTML5
1:01 it has to have a doctype of HTML.
1:06 So, doctype HTML, that used to be really complicated
1:09 for other older versions of HTML and now like
1:11 no, just HTML. This is great for HTML5.
1:14 Then we have two main parts, we have the head
1:17 and we have the body. Now, notice in WebStorm
1:20 I can hit Tab and it'll autocomplete stuff
1:22 so if I hit p, hit Tab.
1:24 Not all editors do that
1:25 but be sure to take advantage of that.
1:26 Up here we're going to have title, it's Yahoo
1:30 and we're going to not create the exact one because
1:33 hey, they own Yahoo, we're creating Yaaahooo.
1:36 Anyway, it'll be silly but that's what
1:38 we're going to create. So we can put this up here
1:40 and we can put all sorts of stuff, like style sheets
1:42 and meta information, and whatnot
1:44 but in our simple little version
1:45 we're just going to have that.
1:47 Over here, we're going to need to have
1:50 these little bits here, these images.
1:52 Now, when we start to design elements on a page
1:54 one of the most important things that you
1:56 have to think about is
1:57 what is the, they call it display
2:00 what is the flow layout style? Is something
2:02 treated as a new line or is it treated as
2:05 an inline element that flows around other ones?
2:07 So the most important thing we're going to work with
2:09 or the most common, at least is div.
2:11 It's the most flexible, it has no semantic meaning
2:13 it's just containers of things
2:15 and this can act as a paragraph but
2:18 it's just going to hold the stuff at the top.
2:21 Now, we want to have some images.
2:22 So, the way that we're okay, image is img
2:25 and you have to set the source
2:26 and you're supposed to set the alt
2:28 like, for some reason
2:30 if you're visually impaired or something
2:32 you can't see the image
2:33 a screen reader could read the alt
2:34 and make sense of it.
2:36 So what we're going to do is we're going to have
2:37 and then start grabbing some of
2:38 those simple images.
2:40 So, we come in here and we can get
2:41 how to go, start with new
2:45 and then we come in here and, I like this one
2:48 what's the next one, it's going to be cool.
2:51 Yahoo. News, and the last one was more.
2:59 All right, so, now if we go and just go back here
3:02 and just double click this.
3:05 Well, that's super looking isn't it?
3:07 Oh my goodness, there's a few little
3:10 things that we need to do so these are
3:12 the images but right now they're huge.
3:13 We have two choices. One, we could size them
3:16 to exactly match the size we're using them
3:18 as long as we're only using the one size
3:21 or in old style here we could set the style
3:24 to have the height of the element
3:27 to be, you know something fun like 42 pixels.
3:31 We'll just put that on all of them.
3:33 Of course when we use style sheets later but we're not there yet.
3:35 There you go, that looks
3:37 better. That looks more like Yahoo not exact
3:42 we have this stuff in the center so let's go over
3:44 here and put a style on this.
3:48 Say text align in WebStorm and PyCharm have
3:51 these little shortcuts so you'll have to hit
3:53 Tab and then type c.
3:56 So, now it's getting there.
3:58 All right, not quite the same images
4:00 'cause I recreated them. Not sure what
4:02 the copyright's on those are and they're pretty
4:04 cut down on quality in The Wayback Machine.
4:06 Here we have our Yahoo with our little image
4:09 so what's next? We need to have a couple
4:11 of things here that are not super easy to see
4:13 so let's do another div.
4:19 Again, that's going to be aligned in the center.
4:21 So, now we're going to have some hyperlinks
4:23 you probably know hyperlinks but
4:24 just going to have 'a' inside the href
4:27 that's where it's going to go to
4:28 the hyperlink reference.
4:30 Now, I'm just going to put hash because we don't really have more
4:32 of the site to go to but, what do we have?
4:35 We have Yahoo Finance, Yahoo Finance.
4:40 We have Net Radio and we have the World Series.
4:44 We hit Command + D to duplicate that
4:46 so we have Net Radio and World Series.
4:56 All right that's looking pretty good.
4:58 A little bit of spacing but we're not going to
5:00 stress too much about the layout and stuff
5:02 this is just the HTML.
5:04 Now we need to put a form that we can
5:06 submit a search into.
5:07 I've no idea what would happen if I tried to search this
5:09 surely some kind of error.
5:11 But, we're going to have another section
5:13 it's going to be similar to this
5:14 so let's just grab that.
5:17 Now, in order to submit data
5:18 at least using traditional web stuff
5:23 like we'll cover at the end of the course
5:25 but to submit stuff back to the server
5:26 we have to have the form
5:28 and the form typically has an action
5:30 actually we can just leave it like this
5:31 so it'll go back to the page and often
5:33 it has a method which is GET or POST, we'll say POST.
5:36 So, here we have our elements.
5:38 We're going to have, first thing is the textbox, and a textbox in HTML
5:40 are input and the default is text.
5:43 If this was cool and modern we would
5:45 go in here and see things like, placeholder
5:47 and all sorts of stuff but remember what
5:49 we're trying to recreate looks like this.
5:52 So, we're just going to leave it alone.
5:53 The next thing we have is a button
5:57 and it says, Submit, I believe.
6:01 And, we have a hyperlink that says
6:05 Options. Let's see how we've done.
6:09 Coming along pretty well
6:10 I out of do a little back and forth.
6:12 Now, we have some spacing
6:14 maybe we could set some margins.
6:16 And, let's just go and copy these real quick.
6:21 So, the final thing for that little top part
6:23 before we get into the main directory listing.
6:28 I'm going to try to put those
6:30 into a bunch of hyperlinks.
6:31 Let me just zoom ahead and do that for us.
6:39 All right, there we have it
6:40 I've typed those all out
6:41 and let's see how we're doing now.
6:44 Those are looking pretty good, again, font size
6:48 maybe a little margin, other than that
6:50 we're pretty much, we're like, halfway there
6:52 with the Yahoo. So, what have we got left?
6:54 We've got these Arts and Humanities
6:57 and Architecture sub-listings.
6:58 So, for that, we're going to have another div.
7:04 Now, this one does not align in the center
7:07 so we don't have to do anything
7:08 in terms of styles for it
7:10 and over here we have our little
7:11 unordered list.
7:13 So, the way we do that in HTML
7:15 is we say, 'ul'.
7:16 Now, here's a really cool editor trick.
7:19 How many of these do we want?
7:20 We have one, two, three, four, five, six.
7:22 Let's just say want four 'cause I'm going to
7:25 just, do some copying in a bit.
7:27 But, if we wanted four.
7:28 You knew you wanted an unordered list
7:30 and in there you wanted four list items.
7:33 The way you do that is you'd say
7:35 Angle Bracket + li like this.
7:38 We can leverage this cool feature
7:39 called Zen Coding where you do an <
7:42 this is a CSS type of language, so you say
7:45 'ul' immediately contains li times four
7:48 and if I hit Tab.
7:50 Check that out, even automatically
7:53 moves you from the things as you hit Enter
7:56 and fill out the values.
7:57 That is pretty awesome, although
7:59 I'm not going to use it here because we have
8:02 a whole bunch of stuff that goes in there
8:03 I'd like to copy.
8:05 So, we have a bold element and then
8:08 a bunch of sub elements. Let's just copy
8:10 this one for starters.
8:15 Turn this into a hyperlink.
8:20 Then wrap this round and make
8:21 each one of these little ones also a hyperlink.
8:25 This one we want to be bold and the proper way
8:28 to do that these days is to put it inside
8:29 of a Strong element or to use CSS
8:32 and we're just not doing CSS yet.
8:33 How have we done? Looks pretty good right?
8:36 It's not that hard to build Yahoo.
8:38 Okay, I'm going to zoom ahead
8:41 and just duplicate this part over here
8:45 over and over and over again
8:46 fill out the details and we'll resume the video.
8:51 Okay, I've done a whole bunch of typing
8:53 in that text and formatted it
8:55 so now we just have a bunch of hyperlinks
8:57 going to these locations, again, we don't actually have Yahoo
8:59 we don't have that underlying data
9:01 so we can't do much more than that here.
9:03 I'm just going to throw in a couple of these
9:05 other bits so that visually
9:06 these two sites line up.
9:09 All right, so now got something like this
9:11 and we got something like that.
9:14 Now, let's do just a little bit more work
9:16 to make this look you know, legit.
9:19 On these, we need a little more spacing.
9:21 So, on each one at the top, let's just go
9:23 and have a margin-bottom 10 pixels.
9:33 On those, a little more space
9:36 and then these have a lot of distance
9:37 between the lines and the way set that
9:39 is we want to set the line height
9:41 and just do that here. I'll make it 1.75em.
9:48 Now, em is a measurement that means
9:50 however big this thing is now
9:52 multiply it by 1.75.
9:54 So, if the line-height is, I dunno, 20
9:57 now it's going to be, you know, 30-something.
10:02 We run that again and it looks like
10:04 it maybe needs even more, let's say 2.25.
10:08 2.5. There we go.
10:11 I'll make this little top part go away again.
10:14 Yeah, those are looking pretty good.
10:15 They're not exactly identical
10:16 one I got to scroll to the top, there we go
10:18 but, feel like we're building Yahoo.
10:20 Now, the last thing to do
10:21 let's just put this little divider
10:23 and that little bit on the bottom
10:24 and I'll just say, actually.
10:28 Move this down here at the bottom.
10:31 Another div, whoops.
10:34 A div, now then we want to horizontal line
10:36 looks like that.
10:37 Notice, this is not closed.
10:38 This is one of the parts where HTML5
10:41 differs from XHTML.
10:44 In here, we're just going to put
10:48 these in hyperlinks.
10:51 Now, if we just wanted a new line
10:52 we could use a little br tag
10:55 not always the best way to do it
10:56 but let's just bring it in the mix here.
11:00 All right, there we have it. We've added our hr, we've added the links
11:03 a couple of line breaks, let's see how we're doing?
11:06 Pull down, close those down there
11:10 were definitely centered so let's go
11:12 and throw that on here again.
11:13 Remember, style sheets, we'll get to them.
11:18 There we go, so, not a perfect replica
11:21 but it pretty close to Yahoo
11:23 what we've built over here.
11:25 So, this is a quick little introduction
11:27 to basic HTML.
11:28 We're going to do another demo
11:31 where we talk about working with forms
11:33 and some of the HTML features
11:34 but we wanted to kick it off with rebuilding Yahoo.
11:37 Just, thinking back on this, here's a site
11:40 where basically you could have done it through
11:43 really static files, maybe it had a database
11:45 behind some of it, I'm sure it did
11:47 but it's super easy to create.
11:50 Hundred billion dollar company
11:52 I guess it was good to create a company in 1996 on the internet.
11:55 Well, it's still good to create companies
11:56 on the internet but it's not as easy as
11:59 oh, well let's rebuild this thing in a few
12:00 minutes and try to go with that.
12:03 All right, hopefully that was enlightening
12:04 for you and we'll move onto the next one.
12:06 Remember, all the cool editor tricks
12:08 that you can take advantage of.
12:10 It really helps you get HTML correct
12:12 because it auto-closes the tags
12:14 and even if you wanted to change them
12:15 from say a div to a span you'd notice
12:18 it's changing the bottom as well.
12:19 Super nice.