Complete Intro to Web Development, v2 HTML & CSS Project Exercise, Part 1

[00:00:00]
>> Brian Holt: This is actually gonna be pretty good. We're gonna have enough time for me to explain the project for you and then we can break for the day. And you all can come back, and we can work out this project together. So, this is actually gonna be you creating a file, an index file with a separate CSS file and creating this kind of layout.

[00:00:27] So this is gonna be an HTML in a CSS project. You should have an index.html file. I would suggest creating, like, it's own folder, you can put it, like, on your desktop or something like that. And inside of that folder we have an index.html and have like a styles.css.

[00:00:43] Doesn't actually matter what you call it as long as you are consistent and you're going to create this website. So this is something that a designer would hand you this hey I created this in Photoshop or InDesign or sketch, whatever the hipsters are using these days, napkins, I'm not sure.

[00:01:05]
>> Brian Holt: And I want it to like this, right? And so you would go back and you would use HTML and CSS to recreate basically something of this nature.
>> Brian Holt: So you have all the tools, this is a far bigger project than I've given you before but I also think it's useful for you to kind of try and struggle and Google and collaborate.

[00:01:31] Feel free to talk each other and all these sort of things
>> Brian Holt: And yeah, one thing I wanted to show you. So if I open my Visual Studio Code here.
>> Brian Holt: I'm gonna create a new file, and let's just say this goes on desktop. I'm gonna call it fem for FrontEnd Masters, and inside of here I'm gonna put index.html.

[00:02:08]
>> Brian Holt: Well, one thing I'll show you that's really useful specifically with code, if I put html:5 and just hit tab, it generates all that stuff for me. And I wanna have to, I can't t remember all that at the top of my head. You can leave the meta stuff as well.

[00:02:28] They are basically just saying like this is encoded in this particular way. This is how big I want the view port so just you can leave that. And like I don't really actually know what this one does, I just leave it. [LAUGH] It's one of those things that like yeah, just leave it, it's fine.

[00:02:45] We'll call this Frontend Masters and we'll just put like h1 in here that says lol. Okay, so now I have this HTML document, I wanna show you how to open it in your browser. So I have my browser open, this works with Chrome or this works with, well, basically any of them.

[00:03:07] I'm going to hit File, Open File, or Cmd + O. That's usually what I do, I'm going to find it, which is on my desktop. I'm gonna go FEM, I'm gonna go to index.html and I'm gonna say Open. So you open it just like you would a word document, but you do it with your browser.

[00:03:28] Normally you go to http:// with this it's going to be file:///. What's happening here is your computer is acting like a server. So your computer is acting like a server and serving itself. Your file system is basically a server. That's what's going on behind the server, like literally your browser is making requests to your same computer.

[00:03:55] That's how that works. So yeah, make sure you have this open. And then, if I come in here and change this to say omg, like that. And I save it, then I come over here. And if I hit Cmd + R, it'll refresh the page and I can see my changes.

[00:04:14] So you can kind of do that rapid iteration. Same thing, if you wanna create your index.css. I'm gonna come in here to this. I'm gonna create a new file by hitting Cmd+N, I'm gonna say styles.css. Again there's no reason it has to been called that.
>> Brian Holt: I'm gonna put a new link tag in here.

[00:04:41] So the nice thing again about code is I don't have to remember everything. I can just type link and then if I hit tab it just generates a link tag for me which is really nice. This is called Emmet, this is available in Sublime and other things, E-M-M-E-T.

[00:04:57] I'm not gonna show you how to do it. In fact there's a course on it from Mike North on Frontend Masters. I feel like I haven't plugged Frontend Masters enough today so I'm gonna do it again. Check that one out. Anyway so I'm gonna say ./styles.css. It's gonna save that and now I'm gonna say h1s have color red, come back over here, refresh, now it's red, okay?

[00:05:23] I wanted to show you that cycle cuz I don't want you to be confused about setting these things up. I don't really care about that, I want you to learn the code, you can figure that other stuff out later. You are gonna do this, I suggest taking this one road at a time.

[00:05:38] The first thing you should do is you should make the title at the top which is the new times or whatever you want to call it the name of your Fake newspaper. I want you to make a row of stories, the one on the left and the one on the right are gonna be 25% and the one in the middle is gonna be 50%.

[00:05:58] There's gonna be an image here in the middle and these are gonna be titles. And these are gonna be text right here. So I would finish all of that first. So in order to get these to layout correctly what does that look like to you? Like what are you gonna use that we talked about?

[00:06:15]
>> Speaker 2: Is this the flex?
>> Brian Holt: Yeah it's gonna be flex, good job. And they're the same height so how are we gonna do that?
>> Brian Holt: Stretch, maybe? If, what is it, a line item stretch.
>> Brian Holt: So that's how you're gonna start with that, and let's see. And then I would finish this entire top row first, right?

[00:06:44] Before you even start on this one, then on the second row this is gonna be 25%, this one's going to be 75%, and I don't really care what the colors are. Just make these different colors. But notice that they're equally spaced, and they're in a column direction, right?

[00:07:01] So that was gonna be something more like flex column, right? Flex direction column, so other things. Google everything, [LAUGH] when you forget it Google it again. It's not cheating, it's literally what you're supposed to do. It's kind of the point, you are professional Googlers. So please, please, please Google everything, it´s not cheating.

[00:07:28]
>> Speaker 3: Actually to that point, I saw a couple of people on Windows having trouble figuring out how to open up an HTML file in Chrome. And I forget even though I use Windows everyday, so I Googled its and its Ctrl+O will let you get into your File Explorer.

[00:07:43] That will then let you open your HTML file.
>> Brian Holt: So, cool, perfect.
>> Brian Holt: The image, the one that's being displayed there is from a thing called PlaceCorgi, [LAUGH] Which I just love this website. So they're just random images of corgies, [LAUGH] that's fantastic, right? So what this is, remember we were talking about Lorem Ipsum text?

[00:08:21] These are like place for the images, so instead of like Lorem Ipsum something it's like images. So with this you can put a number, so placecorgi.com/500/300 would be 500 with 300 height, and if you want it to be 600, then you'll do 600/300 right. So you just give it dimensions, and it gives you back in image of a corgi in that dimension so I wanted it to be more wide than it is tall, so I gave it 500/300.

[00:08:46] That's just useful for like laying out websites. So that's a good thing to know, yet the navigation box, which is this part down here, that's the hardest part. So this actually, this uses display flex. And then inside of it, it uses display flex again. So you have like nested display flexes, that'll be useful to know.

[00:09:13] There's a lot of room to reuse classes on this. Like you could probably make all the titles one class, for example, right? So that's a good thing to keep in mind, take it one step at a time. That's actually a big part of programming just in general. When you're a programmer they give you large problems and the point is to take a very large problem that you don't know how to solve and split it into two problems that are hopefully a little bit easier to solve.

[00:09:36] And then break those into smaller problems and smaller problems until eventually you arrive at something that's like I can do that. I know how to do that. So break big problems into small problems.
>> Brian Holt: Let's see, so if you see here I said here's my complete version, if you click on it.

[00:09:57] That's an awesome picture. You can see how I did it here, I gave you the complete thing. You can open the inspector and say, Inspect Element right here. The point here, this is not a test, right? I just want you to learn, so that's why it's there. You can see here everything is all there.

[00:10:19] Personally, for me, the way that I learn, I need to struggle. So I would not first do this, but if you get stuck and you're just frustrated, and about to throw your computer against the wall, don't. Don't do this right now, you should probably take an hour off and breathe a little bit.

[00:10:38] But after that, just take it easy. Do what's best for you and your learning style, that's what I wanna say.
>> Brian Holt: So you can cheat, that's fine. How I solved it is not the correct answer, that's what I wanted to say. There are so many ways you could do this.

[00:10:58] You could totally do this using floats, and that's just fine, right? You could totally do this without using flex and flex regression column. It's gonna be a million times easier if you do it that way, but totally up to you.
>> Brian Holt: Yeah, like saying there's a correct way is like saying there's a correct way to write a poem or a correct way to paint a portrait.

[00:11:22] Like there's artistry in here as well.
>> Brian Holt: And yeah, good luck. Does anyone have any questions about the requirements or anything that we've talked about at all today? Okay, thank you for attending the first day. You survived,like that's a big deal. You're 50% done, and you have learned two of the three languages.

[00:11:45] We are done with HTML and CSS, this is like your HTML and CSS capstone. So you learned two languages today, which is pretty damn cool and not easy. You can seriously feel pretty good about yourself. This is difficult stuff that you have accomplished here. So, one, I'm proud of you for sticking with it, [LAUGH] and, two, you just have to learn one language tomorrow.