This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "HTML & CSS Project Exercise, Part 2" Lesson
[00:00:00]
>> Brian Holt: Okay, so it sounds like most people were able to do pretty well with the project. If not, we're gonna work through it right now, and you can kind of see how you did in different things.
>> Brian Holt: So if you click here, this is kind of what we were looking at.
[00:00:19]
>> Brian Holt: We'll do this title first, and then we'll kind of move down the rows. Does anyone have any questions about it before we move forward?
>> Brian Holt: If you want to see this page, I've made a little bit.ly link for it, it's bit.ly/news-project. Let me just make that a little bit bigger on something so you can see it.
[00:00:47]
>> Brian Holt: So this top link right here, this is if you lost the link to the current project website, intro-web-dev, and this is the news project. That's just gonna take you to this, so just some easy short links for you.
>> Brian Holt: I'm gonna open my project in Visual Studio Code.
[00:01:09]
>> Brian Holt: So to remind you, this is how you open something using your browser from your file system. You hit File >Open File, this should work on Windows, this should work on every operating system. File > Open, well, it's Cmd-O, I also believe it's Ctrl-O for Windows. You'll open this dialogue, and then you just got to go find where you put it.
[00:01:30] For me, it's on my desktop right there, FEM, and find the index.html file. And if you open that, you should see whatever you have written so far, which for me is this profound statement from the scholar Brian.
>> Brian Holt: So let's just talk about how you kinda break this down into a smaller problem that you can solve.
[00:01:59]
>> Brian Holt: So pretending that someone gave me this, not the complete product, we'll ignore that for now, but pretending more that someone gave me this image, right, this non-interactive image. He's like, here, I've made this in InDesign, I want you to turn this into HTML and CSS, right? This is very common, this is how you'll interact a lot of times with designers, here's my design, now go make this a thing, go make it work.
[00:02:27] So the first thing, what I would do is, look at this. I kinda see three kind of hard sections. I see the title part, The News Times at the top. I see this top row here, and then I see the bottom row. And so those are kind of like the things that I'm gonna break this problem down into.
[00:02:39] So the first thing I'm gonna start with here is The News Times part. So get rid of this, and I'm gonna make this something like. You can make it a div, you can make it a section, we'll go with a section. Like I said, there's no difference between a div and a section, but you're kind of just, here's a partition, right?
[00:03:02] Some sort of partition of your website is a good place to use a section instead of a div. It has more meaning than a div, so it doesn't actually matters. it's not actually going to change anything, except for documentation for your future self. That's how you choose what kind of tag you're gonna use.
[00:03:17] So we are gonna use a section, it actually says right there. A section element represents a generic section of a document or an application, thanks Code [LAUGH]. So that's pretty cool. You could even just make this an h1 altogether.
>> Brian Holt: We can do that, let's do that. Each one class, we're gonna call it the main-title or main-brand, let's go with main-brand.
[00:03:46] And whatever you want to call your fictitious paper, it doesn't have to be The News Times. I kinda of based this on the New York times, that's why I came up with News Times [LAUGH] but up to you. Okay, so now I have the News Times. I come over here and I have this now very, very nice looking whoever, right here, The News Times.
[00:04:08] This is exactly what I wanted to do.
>> Brian Holt: So I'm gonna come over here and I'm gonna go to my style.css. I'm gonna change this to main-brand, and I'm gonna make this much larger, font-size. And when writing CSS, it is a ton of guess and check, right? So I'm just gonna say, what happens if this is 50 pixels big?
[00:04:35] Refresh the page. Eh, maybe a bit bigger, let's do 60 pixels. Cool.
>> [SOUND]
>> Brian Holt: Bless you.
>> Brian Holt: So I have that, and now I'm gonna come back over here. I was like, okay, I want this to be centered, so I'm gonna say text-align: center, and I'm gonna say font-weight: normal, cuz I don't want it to be bold.
[00:05:01] And then I'm gonna do font-family and cursive, sounds nice.
>> Brian Holt: So now, if I come over here and refresh, that's kind of a weird looking News Times, but sure, it's close enough. [LAUGH] What did I actually do? I actually used some specific font on here, if you wanna see what I actually used.
[00:05:25] Snell Roundhand, you should have guessed that, I'm very disappointed in all of you. [LAUGH]
>> [INAUDIBLE]
>> Brian Holt: Yep, this is all of your faults [LAUGH]. No, there's a thing on Mac called Fontbook that you can just kinda browse through and see what's actually stored on your computer. So here's Brush Script MT, that's what that looks like.
[00:05:48] This is not typically what you would do, this is more for fun stuff. Because these are things that'll be on Macs, and they won't be on other things, which is obviously an unacceptable tradeoff if you were working on something like Netflix.com. But nonetheless,
>> Brian Holt: All right, we will do this.
[00:06:05] Just for fun, there's a thing called Google Fonts, click on this. And a ton, a ton, a ton of fonts, right? I want something that's gonna be cursive. Here you go. We actually just want handwriting.
>> Brian Holt: So there's this, this looks kind of nice, right? The Dancing Script.
[00:06:29] Or how about here? Great vibes, that looks perfect right? So we click on Great Vibes, you can see what the font looks like. Then down here at the bottom somewhere, where is it? I haven't used this one. Select this font, okay, and then you click on that and then you get this link tag right here.
[00:06:53] You just copy and paste this, this little thing right here.
>> Brian Holt: You come into your index.html and you just paste it above your CSS. So this is gonna bring in a CSS file from Google, and it's gonna bring this Great Vibes. This is okay, because now this is going to download that font onto every person that visits your website.
[00:07:14] Which is pretty cool, right?
>> Brian Holt: So I'm gonna then copy and paste this font-family right here, down here at the bottom, and we're gonna put that into my CSS where I wanna use it.
>> Brian Holt: So instead of cursive here, I'm gonna have font-family: 'Great Vibes', cursive;. What does this mean?
[00:07:34] It means that it's gonna try for Great Vibes. If it doesn't find that, it's gonna say cool, just put on cursive of some sort, which just means you're gonna get this weird one that we have on there already.
>> Brian Holt: So it's gonna look like that. But now, if I refresh the page, it's gonna wait for a second and then, I need to save first.
[00:07:54] Now if I refresh the page, now I'm gonna get that instead.
>> Brian Holt: That's pretty cool, right? And that will work in every modern browser. I wanna tell you why this is possibly why you wouldn't wanna do this. This adds a lot of page wage, right? Cuz you're gonna download an entire font, that's a lot of stuff, especially for just the title of something.
[00:08:14] You probably just wanna make that an image instead, right? So that's how you would bring another font, that's not something you always wanna do. If you going to bring another font you are probably wanna use it a lot, right? Does that make sense? The other thing is now Google has a little bit of tracking in your website, right?
[00:08:31] Cuz now there, yeah?
>> Speaker 2: I just gonna ask, is the browser smart enough to only get the font once, or does it follow every page and reload every time?
>> Brian Holt: No, it caches it, pretty smartly, no. That's a good question is how often is it downloading it? It should cache it, and keep it for let's look you can actually see.
[00:08:51] So I'm gonna come in here there's in my dev tools there's a thing called network monitor over here. So if I refresh this again, you can see this font family thing. And you can see how long the cash control, it says never get rid of this. So it's always going to keep it until your browser just decides to throw it away.
[00:09:10] So that's a long time. [LAUGH] Cuz your browser will keep quite a bit.
>> Brian Holt: So that's a good question. But what I was gonna say before is now Google does have a little bit of tracking on your webpage, right? Every time that someone comes to your website they're gonna download the font, and Google keeps track of that.
[00:09:28] So it's all tradeoffs.
>> Brian Holt: Okay, but it's worth it, again, it is cool.
>> Brian Holt: Things to think about.
>> Brian Holt: Okay, so now we have this News Times thing. I want it to be a little bit more spacious, right? Cuz if we're looking at this, there's a decent amount of space right at the top.
[00:09:50] So what am I gonna do? I'm gonna put a little bit of margin on top and bottom. So I'm gonna say margin maybe 15 pixels, that's actually less. I want it to may be 30 pixels, 50 pixels, and let's actually do. We'll set this as margin top and margin bottom, cuz we don't actually wanna one on the side we just another top and bottom.
[00:10:19]
>> Brian Holt: Okay, pretty good, maybe about 60.
>> Brian Holt: There we go. Now, it looks a little bit better. Now, we were talking about, yeah, go ahead.
>> Speaker 3: Isn't it easier to use the flex stuff for this, just do it center?
>> Brian Holt: Particularly for text, text is quite easy to do just without flex.
[00:10:44]
>> Speaker 3: Okay.
>> Brian Holt: So you could definitely do this with flex as well, that would work. So were talking about using combined things. Remember, we did like border: 3px solid pink Margin has one of these as well. So have, notice that margin-top and margin-bottom are the same. I can actually do margin: 60px 0; like that and get rid of this bottom too.
[00:11:16] And what that means is top and bottom 60, left and right 0. Now, you ask me like how do I know that? I've just done this enough times that I can remember it off the top my head. There's also if you wanted to do different things for like top, bottom, left, right you can also do margin: 60px 0 60px 0, and this would be the same as this and this.
[00:11:44] It's north, east, south, west, just like that's how I remember it anyway. There's also one that you can do it with three, and I can never remember what the order of the three is. So I never use it, of consequence is I never used a three version. And then, the other one, if you just do one margin: 60px, that would be 60px on every side.
[00:12:10] And padding works the same way, just so you know.
>> Brian Holt: But I show you that because you will see this a lot. So if you see just with two, it's North South is the first one, East West is the second one. Cool, feel good about that. So we got that.
[00:12:30] Something that I will do just when I'm trying to figure out where stuff is being laid out. I'll inspect element and I'll just throw a border on it so I can tell like, where is this actually sitting. Cuz right now you can't really tell where it is, right?
[00:12:44] But if I just throw in a quick border and say, border: 1px solid black, I can see that is actually the space that it's taking up, it's just helpful. Now, when I refresh the page till it's gone, because every time you refresh the page it drops all the stuff that you've just written to it.
[00:13:01] So cool, good stuff. Coming back here. Okay, so we're gonna tackle this next piece first. I'm gonna have some sort of section that's gonna have all this HTML, CSS in it, and I have three subsections in it. And I notice that I can still have a left one, and the right one the same, and it's just the middle one that's gonna be any different.
[00:13:26] So come back with index.html, I'm gonna do a section, I'm gonna call it,
>> Brian Holt: I don't know, row, maybe?
>> Brian Holt: So we talked a little bit about Emmet yesterday. I'm so used to doing this, I'm just always do it. So I could use section class = roh, whatever and write it up by hand.
[00:13:55] But if you are using VS Code or for using Emmet which you can find EMMET.io this will show you how to install it and everything else, if you're using like sublime or something like that. But if I do section.row, like I actually put the real CSS selector right there, and I just hit tab.
[00:14:17] It just auto completes it out for me. So it makes it really fast to write. Does makes sense?
>> Brian Holt: You could do the same thing if I did pound row as you might imagine that's the CSS selector for having an ID of row. So you can go really fast with this.
[00:14:36]
>> Brian Holt: Okay, so now I have a row, and I'm gonna have kind of two different sections in it, or three different, rather. I'm gonna have, and I'm gonna call these articles because these are kinda article looking, right? So we're gonna go with article.
>> Brian Holt: And I could just in there as well, article., we'll call this like story, like a new story, something like that.
[00:15:04] And these one are gonna be quarter stories, right? And this one's going to be a half story, because it takes up a quarter of the row, the middle one takes up half of the row. So I'm gonna call this quarter as well. These ones have a title, you could put this as a h1, you could put it as a h2, you could make a case for either one of them.
[00:15:26] This is the h1 of the article, but it's the h2 of the page. I would personally probably call this an h1. I tend to use a lot of h1s, but there are people that would disagree with me. So that is definitely your judgement call. So I'm gonna call this story-title.
[00:15:44]
>> Brian Holt: And what do I call? I don't know, would just say student learn CSS, okay? Then Benita has well, two paragraphs of text, so I'm gonna do story Text. Now, inside of them, I wanna put this Lorem Ipsum text, right? Code will actually generate Lorem Ipsum text for you, which is quite nice.
[00:16:11] So, I wanna say that I put that angle bracket there to say, put this inside of there, that's what the angle bracket means. And I'm gonna say Lorem maybe 40 words, so lorem40. And if I hit Tab, then I just get this paragraph of Lorem Ipsum text which is pretty nice.
[00:16:30] And then, I actually need two of them. So I can actually come in here and say hey, I actually need two of these, times two.
>> Brian Holt: Okay, then you can actually see the preview here. It shows you what you're actually gonna auto complete out if you're curious. So now if I tab here I get two of those.
[00:16:53]
>> Brian Holt: Then I come back over here, oops this one. Yep, looks pretty good.
>> Brian Holt: Questions so far?
>> Brian Holt: Now, if I look like I'm going really fast, and it's kinda hard to keep up with this, I've been doing this a really long time, right? This has literally been my day job for a decade.
[00:17:19] So, you can feel okay if you're not going quite the speed.
>> Brian Holt: I have done this so many times, I used to work on a news website, literally. So, [LAUGH] this is stuff that I've all done before a bunch of times. So please don't feel bad if you're going a little bit slower than I am.
[00:17:44]
>> Brian Holt: Cool. So I'm actually gonna do the whole HTML for the row first, and then I'm gonna do the CSS for it. Cuz I think that would be the easiest way to kinda get all the layouts correct. So the next article I'm gonna have here, it's gonna be another article.
[00:18:06]
>> Brian Holt: It's gonna be another story, and it's gonna be a half this time, right? Cuz it's gonna take up half the page. Inside of that, I'm gonna have another h1 with story-title. And this one is that dogs are adorable.
>> Brian Holt: Are adorable, okay? This one has an image tag.
[00:18:34] So the source was, if you remember correctly, http://placecorgi.com, actually I think this has to be s, https.
>> Brian Holt: / I think I did 500 whoops, /500/300. This is gonna give me a 500 by 300 image of a corgi, which is everything that I've always wanted. And I'm gonna put here a picture of an adorable corgi dog.
[00:19:16]
>> Brian Holt: There's a big temptation inside of alt txt to say picture of, right? But it's always a picture, right? It's inside of an image tag, the screen reader knows it's an image. It's redundant to put picture of something, just say what's actually in the picture, just pro tip for you.
[00:19:34] Okay, then underneath that it's gonna need one text paragraph, so I'm gonna put story-text. And inside of that, Lorem 40 or something like that.
>> Brian Holt: Okay, I refresh here, and it looks like that link is not working. Why are you not working?
>> Brian Holt: What did I do? Let's look at here.
[00:20:05] Inspect element, nope, you do have to do HTTP. Okay, sorry.
>> Brian Holt: There we go. Okay so this is not secure, it's http:, I messed that up
>> Brian Holt: So make sure you get that. We need one more article and for the sake of time we're just gonna say it's literally the same as the first one.
[00:20:31] So let's just put that down here as well. And this will be student learns HTML.
>> Brian Holt: So coming back over here.
>> Brian Holt: We now have our kind of three stories for the top, right?