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