Class Project 01 – Div Tags

Did he say, "Homework, in the last video?" I did. I think of it more of it like an awesome way of getting your skills better. So I'll set projects throughout the course. You'll find the details of them, I'll make a little video like this to explain it, but also, in your Exercise Files there'll be a folder called Class Projects. There'll be a Word document in there, and that's what it looks like. We're upto Class Project 01. So we're going to work through what you need to do, and I'll keep adding to this as we go through the course. 

If you don't have Microsoft Word, you can open this document in lots of other programs. If you get really stuck, try Google Docs. You can use that to open a Word doc. So what do you have to do? You have to create two separate websites. So what I do is, in VS code close down everything, and make - I'll save it - and make a new document. So we're going to make a new one. The first one's going to be called Class Project 1A. There's two parts to this, 1A and 1B. The first one is this. I want you to make this. 

I've given you a bit of the details. So the name of it, these are the boxes, and you can kind of see in this visual here, the nesting I want you to do. Green box is inside the blue box, etc., etc. The sizes are down here because my handwriting is not great. There are larger versions of this, you can either make it bigger here in Word, or in your Exercise files, I'll put a copy of them in Wireframes, and it is Div3, here it is, there, and Div4. So those are the two things you’re going to be making. 

This one's pretty easy, we've done it before, this one's a bit of a curveball. Because I want you thinking about Div tags, and how they work. So this one, let's look at the second one. The difference is we've got two boxes inside of each other, that's easy, yellow box, gray box, but then I want you to put it in two H1s, there's one inside this yellow box, and put some text in it. Doesn't have to be what I've written here, but some text in this one, and then another H1 out here. 

How do you get it out there? So it's kind of like, it's outside the yellow box but inside the gray box. So I want you to play around with that. Once you've done it, say you build it all in Visual Studio Code, which we'll preview it in Chrome, and take a screenshot. Now on a Mac you hold down 'Command-Shift-4'. and you can drag a box around it. Click, hold, and drag. And that gives you a screenshot, you should put it on your desktop. Kind of see mine down here. And I want you to share that with me. On a PC it's different, you've got a Print Screen button on your keyboard. You might have to double check that, how to do, on your version of Windows. It's different on lots of different versions of Microsoft Windows. I'm not up to date with them all, so just check out how you do a screenshot. I think it's just Print Screen on your keyboard, then you can paste it, but the reason is, I want you to share it for me, because I want to hold you accountable to these things. 

I want you to prove to me you've done it. All you need to do is share it in the comments here, to say, "Look, I did it." And if you run into any problems, drop it in the Comments. What I'd like to do-- because we're at a reasonably simple stage. If you do run into a problem, and you're like, "I can't make this one work", post your questions in the Comments, and ask for help. And for the people that are doing this course, that do do it successfully, I want to kind of instill a bit of, helping everybody else out. So if you're in there, and you're posting yours, and you did it, and you're like, "Yeah, I did it," go in there, and if somebody has a problem, like, “Mine's not working because of this X, Y, & Z,” you can help them, just explain what you did to make it work. "Get this, like bit of text outside of this tag." 

I want to kind of instill this in the group so that we're not just all relying on me to kind of go in, and start working on everybody's code. I'd like you kind of to help other people so that you learn it better. You get what I mean. So where do you post these things? You've taken two screenshots, and your Microsoft Doc explains it. It says, depending on what website you're viewing this on, you might have an Assignments section. There might be a place to actually put it, or there might just be a place in the Comments, so just stick it in the Comments. 

Also, like this, this, all of this, or do them all in social media. So stick it on Instagram, tag me, Twitter, tag me, Facebook group, here, tag me. Just so I can see that you've done it, and what you should do on all of these is add a hash tag. I thought about this earlier. Add a hash tag when you are-- so tag me, and add the hashtag BYOLweb. Just so that I can group them all together, and all them. So that when I'm reviewing it I can look at web stuff different from my other courses. So Instagram, Twitter are good places to post visual stuff. And in Facebook there's a group here. It's got a terrible name so I've added a link. It's called the, what's it called? Bring your own laptop online group. It's a group, hello me, where we share lots of-- at the moment there's not a lot of web stuff, lot of UI stuff, lot of Illustrator, Photoshop, InDesign, bit of UX/UI, and now we're going to introduce the web stuff with this course. 

So post it in here, add that hashtag, and say, "Yes, I did it', or 'It's broken." Hopefully somebody will jump in and help you. I'll try my best to get in there as well, and help out. That is your homework. Don't think of it as homework. Think of it as getting more awesome at Web Design. Is that it? That's it. Class project over. I will see you in the next video