00:02:00
and and and

00:03:00
Oh, I don't think we ever let it go along with this. Hey. What's up? Good morning. Good afternoon. Good evening. No matter where you're coming from. Hope you all are doing well. What's going on, everybody. Hey, welcome back. Hope y'all had a wonderful weekend. The yas, the yas in the beginning are just to check the closed captioning. That's what it's all about. So you hear the

00:04:00
yas, you know the closed captioning's working, looks like we're doing good today. What's going on everybody? Hope y'all had a great weekend. Glad you decided to give us some time on Tuesday to get into some more CSS. I'm so happy to have you. Let's do this thing. So if you're new around these parts, welcome, we are doing a free 30-week software engineering bootcamp. All right, I don't even know what that sound was. What's that sound for? Thank you for the gifted sub. We are doing a free 30-week software engineering bootcamp. We are on class five. We're just getting into some more depth CSS. So if you're new to coding, you're new to HTML, You're new to CSS. We got a great stream for you. We're gonna get into a lot of other fun stuff tonight We're gonna touch on layout for the very very first time and we're just gonna start building bigger and better sites I think we bring down

00:05:00
glitch every time. I think we have to like actually go talk to them about this So if you can't use glitch code pen works If you can't use CodePen, you can use a Repl.it. So Repl.it, CodePen, Glitch, anywhere you can just put your HTML so that we have it, you're good. Don't worry about it being specifically Glitch. The only thing I don't want you to use is like Git and GitHub for right now. Yeah, just give me something that's like an actual link to the HTML. Glitch, CodePen, Repl.it, any of those are good for right now. Just, we'll get the Git and GitHub down the line. But yeah, any of those three for right now are totally fine. Don't worry about if it broke on you right now, you can do it until the end of class, don't worry. When you take a break, feel free to use it. OCC through the Repl.it in chat for those that need that link. But yeah, don't sweat it too much. All right, as always, as we let folks get in here, I like to start

00:06:00
off with some questions. And so the main question of the day was, Would you rather have a one minute conversation with your past self or your future self? So go ahead and put past or future, past or future in chat for me, please. I really do like these questions. And I said this before, but I feel like I get to know y'all a little bit better. Over time, I start to recognize the names and these answers are the fun ones that enable that to happen. So past versus future. I, I, I need to, I need to go shake Leon a couple of years ago, real hard. It's not even me talking. It's just me violently shaking myself. They future Leon just appears. And I'm just like doing this for a minute. And then I just disappear again. Yeah. It's so balanced though. I think a lot of people were saying past, but then we got like a big shipping of future and so it's

00:07:00
interesting. I think it makes sense. A lot of folks are like wanting to talk to their future self. Like, Hey, did this coding thing, like, did it happen? Did it work out? That makes sense. We're all here to learn how to code. It'd be nice to know that like all the hard work you're putting in like, yeah. And like 10 years, you're like, yeah, that was, that was fucking worth it. Right. I can see that being a, while you're in a bootcamp experience, future could be really helpful at this like particular point in time would make the trough of sorrow maybe just a little bit sweeter, a little bit easier. But uh, yeah, I need to go back and talk to pass Leon. We got some we got some stuff to clean up All right folks As always like to give folks a little bit of time to get in here. So I like to answer a few questions I'd like to answer a few questions while we get started I don't give stock or nft advice on stream Mainly for the

00:08:00
sole reason I don't want you to come back in like a week and be like, Leon, my life savings is gone. So yeah, I know that you'll never hear about that from me. Maybe some fun projects that I like, but yeah. Seven minute, you're fine. What do you think of data science as a career? I think it'd be a cool career. I think it's slightly harder to get into than full stack web development. And that's why this is a full stack web development bootcamp and not a data science. I think there's slightly more jobs right now for well, not slightly There's more jobs for full-stack web development and a lot of folks that I know that go into Data science they typically have a little bit more advanced like schooling not that you need it to necessarily go into data science It's just that it tends to help if you have a degree and stuff like that And so I like full-stack web development because you very much don't need a degree to get into it How much time will we spend on recursive functions? I think we'll have like a class where it

00:09:00
comes up. Cyber security. No, I just tell people to stay away from cyber security, unless it's like your passion, uh, cyber security is just so scammy right now. It's just, it's just, it's just what web development was five years, 10 years ago, where everyone's trying to sell you a shovel and it's just really hard for new folks to get started. it. Um, I, I think it's just, it's just scary. Not that it's not this, that it's not, not that it's not a great career. And that is not something that you should do. If you're interested in it, just be careful. That's all I say. When folks want to do cyber security, just be careful. Don't ever let me or anybody else tell you not to do it. Right. But just be extra careful. A lot of people selling shovels right now. Can you kickflip? No, I have a skateboard right now and I haven't skated in a very long time and I had muscles that I didn't know were muscles that were hurting after I was just like skating around in a

00:10:00
parking lot. And this is after skating for like years, probably 10 plus years of my life. And I was just skating around the parking lot and I'm like, damn, I'm old there's there's I'm just feeling things I haven't felt in a long long time Whiz or prevalent off whiz all day. What are you talking about? Yeah, it wasn't even like my knees it was just it was just like other stuff Yeah. Bootstrap or Tailwind? I've been playing around with Tailwind recently. I'm a fan. Just so much of my stuff is bootstrapped though. I've just used it for so long. But yeah, I've been playing around with Tailwind. I think it's fun. Is it okay to use divs sometimes? Of course. Of course it's okay to use divs sometimes. Did I get any shinies today? No, I did not

00:11:00
get any shiny Pokemon today. I've never played Star Citizen. I've watched it, you know, all right, folks, maybe one or two more questions and then we'll get started. I always like to just give a folks a few minutes to get in here. Do I have a VR headset? I do not. I every, every once in a while, I don't know if I should actually say this with this many people here. I'll say it now. Maybe I'll say it. They can't get me. Maybe they can. I don't know. But Best Buy has a loaner program. I don't know if you ever heard about this Best Buy loaner program, folks. So the Best Buy loaner program is that Best Buy, if you are a Best Buy rewards member, they give you 30 days to return stuff. And if you buy enough, they actually give you 45 days to return stuff. And they often don't pay restocking fees.

00:12:00
You don't have to pay restocking fees on most of this stuff. So if you want a VR headset, I mean, you can like go get a VR headset, that use it for 43 days and then just return it. That's the Best Buy Learner program. So I've done that once. I just, I think VR was fun. I just don't think I would use it regularly yet, but I could see in the near future. They actually have a restocking fee on cameras now specifically because of this. Because so many, not me, I would never do this. So many people used to go to Best Buy, get a really nice camera when they went on vacation, and then as soon as they came back from vacation, return the camera. And yes, now there's a restocking fee on cameras. Don't ask me how I know it, because I totally didn't do it, but yeah. Alrighty, folks, let's get into it. Let's talk about what we're going to learn today or work on today.

00:13:00
We're gonna be covering our CSS fundamentals again. So if last class the CSS didn't fully click, that's okay. Lots of review to be had tonight. We're gonna be covering specificity again, making sure that we understand kind of the point values behind using tags, classes, IDs, and others. We're gonna look at our relationship selectors again. We're gonna see those really funky kind of sibling, parent, child, direct parent, child, and get some fun practicing with those. We're probably gonna go a little overboard with the selectors today, just because I really like a game that we're gonna play with the selectors. Then we're gonna talk about the box model. So many of you had questions about the box model. It even came up on Sunday during office hours. So we're gonna spend a lot of time talking about the box model. Everything in web development's a box, folks. Every single thing in web development's a box. Then we're gonna look at some simple layouts. We're gonna create a simple layout together live and then your homework will be

00:14:00
able to create three more. So lots of good review to get into folks, lots of new things to cover and so we're gonna jump right into it and let's start off with checking in. If you haven't checked in, right? If you haven't checked in, go ahead and do exclamation point check in. You can always grab the check in tweet on Discord in the follow along materials channel or the live channel. Thank you for all the gifted subs. I'm gonna turn that down for right now. There we go. So you can always check in if you would like. I appreciate it, helps grow our community, helps folks find us. They don't spend all that money on a bootcamp. So yeah, go ahead and check in. Go ahead and give it a like, a retweet please. And let's talk about submitting that homework. Seems like we brought down Glitch again. So RIP, if you wanna use something

00:15:00
other than Glitch, like a code pen or a replete, you can, but I want the Khan Academy and I want the TechCrunch HTML. So there should be no CSS, it's just the HTML. I would like them in separate links, please. And then there's the form to submit it. And of course that form is on Discord as well. So go ahead and submit the form and you will have submitted your homework. For folks that want to be in Turing or Hopper, the homework is always due before class starts and then for everybody else, 24 hours later. Cool. We've been working hard, my team, myself, on getting our study communities together. On Thursday, we'll be sharing more about the study communities. We'll be sharing the actual survey for you to jump into them. And we'll be sharing more about

00:16:00
kind of the other houses as well. So that's coming on Thursday. I'll be just gonna tweak a few more things and get you all ready. And then we'll start getting you into these study communities. I'm really excited for these. I really think it's gonna give you a smaller group to connect with. there are so many things that tie different pockets of our community together. And I'm really excited for y'all to have smaller homes to work together, to commiserate together and to be able to get the help and support that you need. And so we're gonna have lots of different things, lots of different things that people might have an affinity for or something that they deal with or something that they just wanna organize around. And so, yeah, we're gonna have these lovely study communities coming on Thursday. We'll be sharing out that survey and then we'll start adding everyone to them. So it's gonna be a lot of fun. It's gonna be a lot of work for the mod team over the next couple of days. So if you see a mod give them a thank you every once in a while. I think you don't realize how much work

00:17:00
the mods are putting in to like keep the Discord an amazing space, to keep Twitch an amazing space. And so as always, super huge thank you to the mod community. it's what keeps all this going. Cool. Alumni Twitter space. So many of y'all love Twitter spaces, so we'll be doing our first one on Friday. That's right, folks, Friday, this Friday, January 28th at 6 p.m., we'll be having the Twitter space. We have a couple of alumni that are signed up that are just gonna come, share their story, share about their experience at 100Devs, Share their experience about getting a job and then answer your questions. And so we have it. We have it slated for an hour It might come a little bit later and it'll be recorded. So if you can't make it, we'll have it recorded as well. Yeah, I Don't think it'll be uploaded to YouTube or anything like that because a lot of

00:18:00
times we share a lot of stuff that maybe should stay in the Twitter space Yeah Yeah, so maybe, maybe, maybe not going to get uploaded anywhere else, but the recording will be on Twitter. Yeah. So a lot of you like the Twitter spaces, so we're going to try this format. We've used a different platform in the past, so this will be our first time trying it. And we're going to bring alumni back regularly, right? And so this won't be a one and done thing. This is something that we're going to try and bring every week, every, every couple of weeks or so just to get folks that have gone through the program back talking to you telling you about their struggles, the things that went well, the things that went right, things that went wrong, the things they wish they could redo, right? And so we're gonna start that on Friday. And so shout out to all the alumni that are always here on Discord, et cetera. And just a shout out to like, I know we shout out the alumni, shout out the mods, but like shout out to all y'all too. Like the thing

00:19:00
that makes me the happiest in the world right now is if I go to, let's see, I'm gonna do this live right in front of myself now. I am going just into the Homework Help channel on our Discord and every single question has answers. Nine, six, 14, 12, 50 plus, 24, three, five, 17, one, eight, two, 27, three, 12, two, 32, two, three, 50 plus, six, four, six, nine. Like I'm just reading, right? Just reading from that community. And so that's y'all, right? And so we keep talking about this idea that we switched to the threads and the threads have been amazing because y'all show up time and time again to help each other, to answer each other's questions. And I've honestly never seen anything

00:20:00
like it. Find me another forum where every single question's getting answers, right? Find me a forum where every single question's getting answers, where they're getting 50 plus answers on a singular question. It doesn't exist, except for right here. This is hands down the best community to learn how to code live, online, I don't care, anywhere. It's just, I've never seen anything like it and I've been in this game for a long time. Been in this game for a long, long time. So thank you to all y'all too. All right. Channel points. Uh, right now I'm playing with the channel points. Uh, I feel, I feel bad because some folks, I don't always see the channel points cause there's so much going on. And so I fixed a lot of things on my end. Uh, one, I made sure that all the things are now more expensive. Uh, they are more expensive for right now. Uh, just right now, just while we're playing with it and I'm trying

00:21:00
to get dialed in, uh, the things are more expensive and some of them are rate limited. So like some of them can only be, um, used once a class, right? Uh, eventually once we figure it out, dialed in the prices will come down, right? The prices will come down. Uh, but some things for right now, yeah, inflation, uh, for right now, the prices are high and some things are limited it to maybe like one or two a stream. Electro G's with the bruh. All right. And so the idea here is that they, they will, they will be a little bit more sparse, which I think will be good. That way I can see them come through on my screen and I have it set up now to see the requests that come in a little bit easier. And so I'll be able to pay attention to a little bit more. I'll be able to do the things that show up on it. Um, but that, that we're, we're working on it. I'm trying to get it dialed in a little bit more. It's just, there's a lot going on and, uh, yeah, now it's a a little bit more expensive and some of them are limited. I should be able to see them all. And when

00:22:00
y'all make me hydrate, I can hydrate things like that. I will note that the OnlyFans price did not change. All right. OnlyFans has been the same price. It'll stay the same price. Better lady, thank you for the bits. Alrighty. Typing, we had a lot of questions over, can you all hear the we go get? Did you all hear the we go get? We don't get got, we go get. Were you able to hear it? Yeah, okay, cool, cool. I'm turning off monitoring of my system sounds and so I just wanna make sure that y'all can hear too. Cool, all right. Some of the things, oh, also, some of the things right now, channel points have been turned off. Now there are some bigger things that have been turned off just while we figure out a process for them. With so many folks,

00:23:00
we just got to figure out a better process for it. And so the bigger ones that we're taking off will be coming back. Just finding a process for a lot of them. Yeah. Cool. Typing. A lot of folks have been reaching out about feeling bad about their typing or having lots of questions about their typing. Don't. Here's thing. A lot of folks start off using two fingers to type. That's okay. The idea is that while you're going throughout this process, you want to get better at your typing. You want to invest time over the next 30 weeks getting better at your typing, bringing up your words per minute, right? But also making sure you're using all of your fingers. Now, I'm not here to tell you that You have to use all your fingers. You do you the passionate peel that I want to make to you and indifferent was indifferent. Ghost was on, um, and the asking on channel, helping folks with this too, is the thing that I want you to, to remember

00:24:00
is that you're doing a lot of stuff with your fingers that you might never have done before, even if you've been playing video games since you were little and you're an MMO champion, and there's just certain like keys that will be hitting every single day over and over and over again. The flexion on your pinky every day will be just over and over and over again. And so the touch typing, using all your fingers, it's really not necessarily about the speed, it's about reducing the stretch, reducing the strain on your fingers, right? I say this every single cohort at resilient coders. I tell them three of you are going to the hospital. Every single cohort, I tell them, and every single cohort, it happens. At least one to three folks go to the hospital every single cohort I run of my RC cohorts.

00:25:00
And those are smaller cohorts. So there's thousands of us here. I can only imagine how many of you will eventually injure yourself if you don't take your typing seriously, if you don't take your posture seriously, if you don't take your breaks seriously, it is a lot of hard work putting stress on a lot of these bones and fingers and ligaments that you might not have ever done. And so, like I said, typing's not necessarily about speed, it's about being able to do this for the rest of your career. So if you're able, make sure you can transition to maybe using all your fingers, sitting in a good way, maybe being a little bit more conscious about kind of how you are working throughout the day and making sure you're doing things ergonomically, make sure you're taking your breaks at the top of every hour, make sure you're getting your stretches in all these wonderful things.

00:26:00
We shared the Dr. Levi, the fitness doctors video, I'll put that in discord again after class, because I think it's just a really good video to make sure that you're taking care of your hands and getting the good stretches in, take care of yourself and other ways to maybe use flux to lower the to change the temperature of your screens, right? I'll just take a little bit of time in your setup and thinking through how you can do this healthfully for the longest amount of time. Flux is a program that's free that helps change the temperature of your screen so that it's not burning your eyeballs all the time. Basically a night mode all the time. Or or it even has like as the day gets long later it like it it changes with the day. Yeah

00:27:00
Leon our special glass is helpful, too I have blue light blocking my glasses when I got them for Warby Parker. I've seen like different like Science on it. Some people say it works. Some people say it doesn't I don't think I would I think that if you have the Option then yeah sure why not But I'm not sure like running out and getting blue light blocking glasses will do it for you But it's not if you're if you're having really strong sensitivity to it. You're maybe try it, but for me, I don't really know honestly, the science is a little wishy-washy in my point but Try it better than nothing Lady is stressing me out. I'm sorry This is this is what this is what it looks like when I this is remember I told you about like 10 minutes until the client project is due this is what I look like 10 minutes until the client project Is due it's just really loud trap music and me just like gritting my teeth and just Mashing my keyboard as fast as I can

00:28:00
Cool Somebody said what our channel points? Trattle points are points you get just by watching and tuning into class. And so while you're here, you're accumulating channel points and you can use those for fun, silly, or useful things by clicking my little face at the bottom of the chat window. How did I survive without flux this whole time? It really is a game changer. Just be careful. Here's one thing to be careful about is that when you have Flux on, colors will be different. I have, I'm not afraid of this. I have shipped code. Like I have shipped a design with all the wrong colors because I was like looking at them differently with Flux on. So just, just be careful. It

00:29:00
will change the color of your screen. And that might be something you, you gotta keep in mind. So like if I'm doing stuff where I'm looking at a design like we're doing right now and translating it if I'm looking at the Colors, I got to be you got to be careful that you're you're you're You don't have flux still on Lord said yeah, I'm a designer. I've messed up a lot of projects due to flux. Yeah, I I've been there with you. So just be careful turn it off if you're doing any like color work or things like that Also folks who were asking about colors. I I use digital color meter. So built into Macs is this lovely digital color meter and you can just hover your mouse over any color and it'll give you the RGB value right here. And so I use this all the time. Like if a designer does not give me colors, I just use digital color meter to grab that color. If

00:30:00
you're not on a Mac, Windows and GNU Linux have similar applications that you can install that do the same thing. But on Mac, it's just digital color meter. There are eyedroppers you can install on Chrome, but then the color picker only works in Chrome. So yeah, I would definitely make sure you get a color picker that's on your desktop, so that you can find colors very easily. All right, I'm gonna keep bringing this reminder up, but the name of the game here, folks, is to go deep, not wide, all right? I saw some folks, last cohort, and it happened again this cohort. I was asking for HTML, and they were trying to add JavaScript to their Khan Academy. And please don't,

00:31:00
please don't. We're not there yet, please don't do that. The person that did it last cohort, I asked them, I asked them, what is the semantic meaning of an aside? And they couldn't tell me, I was like, wait a minute. So, instead of actually learning the stuff that we covered in class multiple times, you just Leroy Jenkins the crap out of it and ran ahead to JavaScript, but you don't know the basics of HTML? I don't know. I don't know. Sounds like you kind of did too much. Sounds like you went a little too wide, not deep enough, right? and so don't get got please don't get got make sure that you are going deep not wide make sure that you are not putting

00:32:00
all that extra stress on yourself make sure you're giving yourself time for things to sink in please don't even if you feel like you've put it like if you feel like you put in a good amount of work, stop for the day, right? Don't keep doing these super long marathon days every day. You just won't keep it up. 99% of you just won't keep it up. Maybe you're that 1% and all the power to you, but I've seen so many of my most brilliant students just burn out, right? So go deep, not wide, right? And as things pick up, you're gonna add more and more, but don't keep giving yourself all this extra work. It's just not worth it. And what you're doing most likely is not

00:33:00
cementing the stuff that really needs to be cementing, right? Like if you're not giving your brain that diffusive time, If you're not giving your brain that rest and the sleep that it needs All the stuff you put all that work into actually learning and cranking the hours for you're just gonna forget even with the best Anki Routine, it's just too much So build up the pace Build up the pace All right, build up the pace Make sure that you're reviewing the stuff that we covered. I'm giving you bangers only right go deep not wide To USA said the motivation guy last week said not to sleep and that's why my caveat next to the video was please sleep though. Like odd, it literally says please sleep though next to the video, cause that that's the misstep. That's the misstep. Please sleep. We know what sleep does to memory consolidation, right?

00:34:00
You will not commit any of that stuff to memory if you do not sleep. Now, here's here's where I think the advice comes in. And this is actually from Gary V. Say what you want, but. Had some really, I think, is an important thing to keep in mind. Gary V. says, tell me what you do between seven and two, and I'll tell you how successful you are. And I actually don't think the seven to two matters. I don't think like staying up late matters But I think the the core of is what's being said. There is are you maximizing your time? Right, not all of us have the privilege of Seven to two not all of us have the privilege of of being able to wake up early. But with what time that you have, what are you doing with it? With the time that you do have,

00:35:00
are you getting the most out of it, right? Don't sacrifice sleep, because that just won't help with memory consolidation. But when you've accounted for sleep, you've accounted for family, you've accounted for everything that you need to keep track of in your life, and you have that other time, what are you doing with it, right? And so we all come from different experiences, we all come from different backgrounds, we all have different privileges when it comes to time. It's not about raw hours, it's about what are you doing with the hours that you do have, right? For some folks, they don't get the wheels turning enough to take advantage of the time that they do have, and then it falls off. So with the time that you do have, are you going into that time like an accident? Did you make a plan? Did you make a plan a couple days ago? Did you make a plan for the week? Do you have a plan for the day? If you don't have a plan for the day, the hours that you do have are gonna slip away, right? So we're gonna keep bringing up these ideas, right? Go deep,

00:36:00
don't go wide, get plenty of sleep, but don't go into your days like an accident. Have a plan, know what you're gonna do, right? And then be consistent. We know being consistent is what gets us through the trough of sorrow What about us nine-to-fivers you mean like that you're working or that you're studying nine-to-five Because if you're working nine-to-five then then that that that that spiel kind of applies Do you have time outside of your nine-to-five? How much time do you have? Do you have an hour? Do you have a half hour? Do you have three hours? And what are you doing with that time? You know working parents are going to have it harder, right? Like, like, let's be real, right? Like if you're a working parent, you got all my respect in the world, right? It, that, that, that's the, the not having the privilege of time, right? And so you're never going to hear me say

00:37:00
that everyone has that same access to time. It's what are you doing with the time that you do have? Are you being having a good plan for that time? And are you putting in the the the game plan? Realistically, right? You're putting in that game plan realistically, right and then just try and be consistent Just to shout it from the mountaintops, you're doing Anki fine. If you're doing Anki, you are leagues better than all the folks not doing Anki, right? If you're opening up your Anki every day, you have won. Let's say that one more time. Get big here. If you have opened your Anki every day, you've already

00:38:00
run. You've already won, right? You've already won. You get the golden prize, right? There is no 100% right way to use Anki other than to just use it. create cards and review those cards. There's no magic to it. I don't have any secret settings. I'm not doing anything different than you are other than making like decks and tags. I'm gonna show you more of my decks and tags, hopefully this weekend at office hours. I just wanted to clean it up a little bit so it made more sense for folks because mine are like shorthand. And so you're doing fine. If you've been opening Anki every day, you've already won, you're doing okay. Okay, let this be a shot across the bow for folks that have been doing Anki every day. Just opening it, using it, getting your repetition is, is how it works, right? So just do it.

00:39:00
Just do it. Just do it! That's what you gotta do. So just do it! Yep, that's it. Next thing we got to talk about. Your goal as you're learning any language, especially for the first time, especially for the first time, right? Your goal always should be to vomit your code and then clean it up later. Let me say that one more time. Your goal should be to vomit your code and then clean it up later, okay? Your job is to get the job done. Refactoring

00:40:00
is for closers. I mean, let me break down a little bit here, all right? In the beginning, you have no luxury of committing to best practice. You have no luxury to committing to quality code. You have no luxury of committing to maintainable code. your only job is to vomit all over your keyword, all over your keyboard and get the job done. The job for pretty much every single assignment in this cohort will be, does it look like the photo or does it do what it's supposed to do? That's how you should judge every single thing you do in

00:41:00
this bootcamp. Does it look like the photo? And does it do the thing it's supposed to do? Because if it does the thing it's supposed to do, you wrote phenomenal code. If it looks like the photo, you wrote phenomenal code. Full stop, that's it. It's all that matters. I don't care if you use the right tags. I don't care if it is great code. I don't care if someone would look at it and scream. We're here to write the chunkiest of vomit and get the job done. No hiring partner is going to look at the HTML TML you wrote in class four to make a hiring decision. Say a little bit more time. Let me get a little big here. No hiring partner is

00:42:00
going to look at the CSS you wrote in class five and go, there's no way I can hire this person. So get that out of your mind. No one will ever see it. No one will ever care. You're here to write vomit. I'm gonna write vomit with you because it just doesn't matter. Get the job done. So many folks stress. They worry themselves about making sure they're using everything in the right way and they use that stress to stop them from getting the job done. No one's gonna look at your code. They just won't, especially not right now. No clean code right now. this is day five now in five five months from now five months from now you're still you're still producing vomit in HTML and CSS then then maybe we got a problem but in the first three months

00:43:00
that's vomit time baby that that's that's vomit time first three months on the job not on the job but there's three months here it's vomit time it just doesn't matter Right, get the job done, get it looking the way it's supposed to look, and then get the job done. That's it. Cool. Now, once you've gotten the job done, right, it looks like the photo, or it does the thing that it's supposed to do. You've gotten done your reading, you've gotten done your videos, DeJesus said I'm still vomiting six years later and getting paid, exactly. Once you're done, the day is done, you've done everything you're supposed to do for the week, and you have more time, you can go back and refactor if you choose. Refactoring is for closers. Refactoring means you go back, you clean up your vomit, you put it in the bag, you take it outside. But in the beginning, vomit, you get through all the stuff you got to get through that week, go back and refactor.

00:44:00
All right, but we write vomit around here. Cool. All right. Here's the really sad thing that's happening right now. The sad thing that's happening right now is y'all are nasty. Y'all some nasty people. It's true. You know, you wanna know why? You're looking at other people's vomit and you're going, why is mine not as chunky as theirs? How did they get their vomit so chunky? Why were they able to throw up more than me? How come they can throw up farther than me? Why is their vomit a little bit farther and a little bit more chunky? How can I? Make my vomit as chunky as theirs

00:45:00
Right, you are admiring other people's vomit Y'all nasty Why are you looking at other people's vomit and then feeling bad about your vomit It's disgusting Knock it off. Just don't do it. Why why are you like licking up other people's vomit? It just doesn't make any sense Y'all some nasty individuals. So please, when you're writing vomit, don't get jealous at the other person's vomit. You don't know how long they've been vomiting for. You have no idea if they had a better breakfast than you. They could have had an amazing breakfast and you did not. So why are you upset when they got more chunks? It just doesn't matter. Don't worry. Your vomit will be as chunky as their vomit going into the future. But

00:46:00
for now, right? For now, it just makes no sense, right? It makes no sense to get upset about other people's vomit. Okay? Okay, so as we progress, some folks are gonna be farther along, some folks are gonna be a little bit behind. It all equals out in the end. Don't get upset over other people's vomit, it just doesn't make sense. You know the sad thing is, I really did like vomit hard on Monday, like really bad, like like really bad. Had to cancel a few meetings because it was just it was just it was upsetting. And so all I'm going to say is when I was looking at these slides today, right, as I was reviewing them before class and as I was working on them, I was just not feeling

00:47:00
the best. I would just not feel the best. I really think it was food poisoning, but it didn't last long enough to be food poisoning, I think. Um, yeah, so what I, what I think it was is, uh, I haven't had red meat or pork since I was like nine. And so I think sometimes when I eat stuff that's been like cross contaminated, it just like zoop comes right back. Um, so I think that's what happened anyway. You don't need to know about my vomit. You shouldn't care about my vomit, just like you shouldn't care about other people's vomit. I'm glad I made that work. That was a good one. Tap myself on the back there. That was a good one. All right. Now let's talk about code standards. I laughed about this last cohort too. I'm just like, don't worry about anything. Don't worry about best practice. Don't worry about anything. Here's the best practice that we should all adhere to. I laughed at the same thing last year, but it's still funny.

00:48:00
All right, anyway, so don't worry about anything code-wise. Here's something you need to worry about. All right, we want to make sure that our HTML has all of our content in it. We want to make sure that our CSS has all of our style. We want to make sure that our JavaScript has all of our behavior and interaction. And we don't want to mix any of these up at all. Why do we want to keep our HTML, our content separate from our style, our style separate from our behavior? Why is this golden rule such an important rule? Organization, exactly, organization, nice. Cool, where does our CSS go, chat? Where does our CSS go? And I know slow mode is on, so you can't always like follow up right away.

00:49:00
DMACC, hey, I appreciate that note. Yeah, we want it in a separate file. We want to agree to that separation of concerns, so we put our CSS in a separate file. There are some exceptions. What is the exception for writing inline style? What's the exception for writing an inline style? Yeah, email, exactly. You're writing email, you might not, Well, you don't have access to external style sheets. And so any really nice emails you're looking at are probably done with HTML with inline style. There is an exception that we heard about when it comes to in the head. Hey, Nate, thank you for the five kits of subs. I appreciate that. In the head, yep. If we're working at Amazon and we're working with critical path CSS, they really are concerned about super, super, super, super fast speed because for every one

00:50:00
second their page load speed increases, they lose a million dollars a day. And so they have critical pass CSS where it's just enough to load the above the fold and then everything else goes in the external style sheet. And then we just normally would have it in a separate file. Nice. All right, folks. Pay attention tonight. I like it. We're in here. Yeah, we got our active recall in. Our space repetition's on fire. All right. Since we're putting our CSS in a separate file, Remember, we have to have that link tag in the head of our document, and we're gonna tell it where to go find our CSS. So our HTML, we gotta point it to where our CSS is, and this href tells it where to go find that style sheet. Cool. Talked about how this whole thing is called a rule. A rule is broken down into a selector and a declaration block. And then declaration blocks are broken down into declarations, properties, and values. So let's

00:51:00
play our favorite game and say, what part of CSS is this? So what is this whole thing called, chat? We use other best practices, of course. We'll do things like MVC. We'll get to that way down the line. Yeah, the whole thing is a rule. A rule is broken down into two things, but what is this thing? What's that? Try to get the pre-guessers a little off their mark there. Yeah, it's a property. How about, how about this? Let me uncircle the other one though. What about that, what's that? A declaration, nice, it's a declaration. Remember, the whole thing is a declaration. We had the property on the left-hand side. What is this?

00:52:00
Yep, that's our selector, nice, our selector. And then how about this? It's a value, nice, nice. How about this? Yep, so declaration block, nice, nice. Cool. And then how about this? That would be a colon, yes, that's a colon. It's not specific to a rule, but there are colons and semicolons in part of the declaration. Cool. Hold on, everybody. Chat's on point tonight, I'm feeling it. All right, now,

00:53:00
we talked about this idea of the cascade, meaning that tags that come above can be overwritten by tags that come below. And I don't feel like we had a really good example of how the cascade comes into effect, but we're gonna get a really good example later tonight. So later tonight, we're gonna have a pretty good example that'll show that cascade in effect, so we can see how it could be really useful to you in the future. So I promise that we'll see a good example of the cascade later today. Here is an example, but it doesn't really show like a why, right? It's just, it's something that works, But it's not really a why so if you're struggling with understanding when the cascade would be helpful. We're gonna see that tonight, okay So here we have a paragraph rule Where we set the color to red and then the font weight to bold and then for some reason we wrote another paragraph rule below it and since both of these rules have the same level of specificity the

00:54:00
one that is below Can override the one that comes above? Right, and so in this case the paragraphs will now all be blue because that's what was overridden But they still will have the font weight of bold because there's nothing that overrid the font weight here So you wind up with blue bold? paragraphs right blue bold paragraphs because of that cascade and so we're going to see Some of this cascade come alive today Yeah Yeah, like I said, Ghost, we're gonna see that example later. Alrighty, one more time. Why would we wanna link our CSS in a separate file? Yep, separation of concerns, Prius. Yep, organization, exactly.

00:55:00
Beautiful, yep. So here is separation concerns. Keep our code organized to make sure that we're not mixing our content and our style. Lovely. Alrighty. Let's review some simple styles and then we're gonna get our fingers on the keyboard again. Okay. Review some simple styles and we're gonna get our fingers on the keyboard. All right. We talked about color keywords last class where if we wanna make something the color red, We can just by using the color keyword, but we can also use hexadecimal values rgba values hsla values All just different ways Of getting color done, right? I use rgb Or rgba, uh, this is the one I feel the most comfortable with I like using the digital color meter I pull up the color really quickly I plug it in when I need to plug it in and I love that alpha channel the ability to have like transparency

00:56:00
um a lot of folks A lot of folks that are like hipsters or come from a print background. They like that HSLA Some folks that are that are just machines have hexadecimal values like just memorized Especially folks that may have been designers for a really long time There are some people that just can like look at stuff and know the hex value like almost exactly So you might feel whatever you comfortable with but when you're just kind of like getting a project out the gate you're just trying to get the job done, it's fine to use color keywords. Don't stress about the colors when you're just trying to get the job done. When you're writing your vomit, just use the color keywords. You can always come back and specify the exact color if you want. All right, talked about the different font families. We had the Source Sans Pro, which is my favorite font, but we see here in this font family, We had Source Sans Pro, but then Helvetica, and then Sans

00:57:00
Serif, why do we have three here? Why not one? Yeah, they're backups, exactly, right? So the idea is if for some reason Source Sans Pro doesn't load, Helvetica will load. If for some reason that doesn't load, then we just get the regular Sans Serif that every browser has. and I mentioned that loading, here I am using the Google Fonts to load in that font. You could download font files and then import them or have them linked in another way, but I find the Google Fonts to be pretty easy. On the very, very, very, very rare instance that Google Fonts goes down, I always have like a nice backup that still looks good on my site, but yeah. Excuse me, excuse me, excuse me.

00:58:00
How reliable is Google Fonts? I've seen Google's APIs go down twice. Way back in the day, I believe it was, I don't know, I wanna put this on Google, but it was like the biggest jQuery CDN. So I'm dating myself here. This was like way back in the day. I remember the biggest like jQuery CDN going down and I was teaching and The other teacher that was teaching at the same time We had like glass windows at General Assembly and they like come and they're like, they're like looking at me like this Like they're they're like freaking out because jQuery went down and when jQuery went down like all these websites just like one offline, like it was just not offline, but they just all broke because a lot of people didn't use like really good fallbacks back in the day. A lot of people that just didn't know to have like a backup

00:59:00
source for your jQuery code. And so it just, it just broke. And so I'm really dating myself here with the jQuery reference, but that was my funny. So, so, so these things can go down. They're not always working, right? People keep like all caps hydration. That's what channel points are for folks. You use the channel points, I get the hydrate. You gotta keep me, gotta keep the liquids coming in. I'm not gonna hydrate unless the channel points come in, you know, come on now. We're cheap. OCC, thank you for the hydration. Cheers to you. Tonight's liquid is chameleon cold brew, chameleon cold brew, yeah. Alrighty.

01:00:00
Same thing for font weight, for font weight. Here we have a number 700, so when you go get those fonts from Google Fonts, you can specify the weight. You can see that I have the three hundred four hundred and seven hundred here So I can actually set the weight to one of those three different weights based on the font that I got as well All right And As always if there's something that you don't know how to do it CSS the quickest way to doing it or learning it is to use the MDN You can just google what you want to do CSS, MDN, and it'll pop right up there for you. I forget so much stuff when it comes to CSS. So many weird things that I want to do that I always just have the MDN open and I just go right to it. The MDN has saved my butt so many times. It's the best resource just to do quick lookups, to find what you need, so yeah. All right. We are at the top of the hour.

01:01:00
When we come back from our break, we're gonna get our hands on the keyboard, I'm gonna be working through some basic CSS We're gonna get just a little bit more review and then we're gonna get to the new stuff So if you're new here, we like to be healthy We like to make sure that we take breaks at the top of the hour We're to be here to be software engineers for the rest of our careers So let's go ahead if you're able get up move around, please get up from your keyboard Go kiss some babies. Go go look out the window. So your eyes can focus on something. That's that's not so close, right? All right, we bring up the timer here play some tunes and I'll be back to you. I'll see you all in five You two youtubers if you're watching on YouTube take your five-minute break just because we're not allowed doesn't mean you're not taking your breaks Okay, and I'll give you all what you want

01:04:00
You

01:05:00
Did Leon build the bingo? No, that was cross and the diabolical, which, uh, well, Gab is It's part of our stream team. And so when you do x-ray point bingo, you see it

01:06:00
says in the creative minds at the bottom of the column across. Put Bob back on. I love Bob. Oh, that's here. Hey, what's my favorite movie? I actually have a list of all my favorite movies and I kind of keep it to a top five Yes, I could share the full top five and they kind of rotate in and out depending on how I'm feeling Birdman is really close To the top top right now, but there's a I have a full list Princess pirate is pretty up there. Yeah Top five anime I do watch anime, but I don't watch I don't I don't watch anime like that though You know I'm saying like I watch anime, but I don't watch it I don't like you know back in the day I did though Like

01:07:00
before it was like cool because when I was like when you were like the weird kid. Yeah, that was me To mainstream these days Staying up late at a friend's house because they had Cartoon Network just to catch the V-bombs, all right folks, come on back, come on back. Clark said, you're still a weird kid, bro. Thank you, I take that, I like that, respect, thank you.

01:08:00
Tsunami, exactly. No, see, here's how, here's, here's how, like, if you're in your 30s and you did this one thing, it's how I know we could be friends. So back in my day, gather around, gather around my fire here. Back in my day, we used to go into AOL chat rooms that were labeled DBZRP. And in these DBZRP AOL chat rooms, we would use the roll dice commands to make moves as our favorite Dragon Ball Z characters. And then we would role play out these epic battles in AOL chat rooms that all came down to these like actual dice rolls. So if you ever did that back in the day, You were my

01:09:00
speed, we could be friends. All right. Let's get our fingers on the keyboard here. Let's get our fingers on the keyboard here and let's look at some basic CSS. So we're gonna code some basic CSS. If you need the materials today, If you need the materials today, they are on our Discord, exclamation point Discord or leonnoel.com slash Discord. We have a follow along materials channel where all the materials that you need to download for today are. So in that folder, we have a few specific folders. One is this basic CSS2, which is very similar to what we did on Thursday, but it's not the same one, and in this there's an HTML file and there is a CSS file. If you look in the HTML,

01:10:00
there are some comments and these comments ask you to do different things. One says make the LIs blue, underline 15 pixels and have a gray background. Some ask you to do height, some ask you to use fonts. And so I'm gonna give you all four minutes four minutes on the clock, and then we're gonna go over it together. So four minutes on the clock, we'll bring out some tunes. I won't share anything important, I'm just gonna answer your questions as you're working on this, and then we'll go over it together at four minutes. You can't get all through it in four minutes, don't worry. It's just so that we can go over it together too. All right, so give your best 100 devs try in these four minutes, and we'll go over it together. together. This is the basic CSS 2. Basic CSS. Yep. Basic CSS 2.

01:11:00
Cool. Let's bump it to 5. Let's bump it to 5 minutes. We'll do 5 minutes just because I know some folks. Just so that you don't get too in the weeds. That way you know that in 5 minutes you come back and do it together. So get as far as you can go in these 5 minutes. Bring up some tunes for you. about it. Materials again are yep the CSS is empty exactly. You're working on the basic CSS to the HTML is there but the CSS is not. You're looking at blank files Let's make sure you've unzipped your folder. Dev. Southpaw, it is in the follow along materials channel.

01:12:00
What do you do to reward yourself after Pomodoro? I just take a break. I used to do like really like intense rewards, but now just a break's enough for me. My brain is okay with that. Sometimes I do anime Doro. I think that's fun. or like tv-doro. Yeah, we are building out the CSS for the basic CSS2 folder. Yeah, CSS is blank because you're writing the CSS. In the HTML file there it tells you what to do. Please make the LIs blue. Please make the section have a height and then you write the CSS to make this happen.

01:13:00
I'll leave it like this so people can see what we're working on. Yeah, no classes, no IDs. Yep, the instructions are in the HTML. Well, I don't know. Yep, exactly. If you don't know how to do it, look up in the MDN. Then we'll go over it together. What's on on that?

01:14:00
Do you think having technical knowledge would help in applying for product management roles in tech? Yeah, can't hurt, right? My best PMs have always known how to code. Not that it's a requirement, but the ones I've enjoyed have known how to code. I play D&D now. Oh, winter is coming, yeah. How do I comment out stuff in CSS? You can just highlight it and then do Command forward slash or Control forward slash. Two more minutes of vomit, exactly. Really? Shara, no, just wait until we go over it together. Yeah.

01:15:00
Can PMs make more than devs? Not, I mean, sometimes I guess, right? But that's what you want to do and what company Lost right now. Hey, we're gonna go over it together. Don't worry You can't download the files. I would try to find some other way to do it. You don't have to download them to the computer. You can download

01:16:00
them to like a Google drive or something like that too. So this is fun. Hey, I'm glad you think so. My colors are so off of flux. Yeah. All right, folks, come on back. Come on back. I know that you might not have gone all the way to the end. That's okay. Let's go over and do it together. Let's do it together. All right. So what I always do, come on back, put it together. What I always do is I just open my entire class folder. So I unzipped the class five materials and then I just drag that whole unzipped folder to VS code. And the reason why I do that is because I get this lovely tree view with all of the projects we're gonna work on today. I don't have to worry about like opening and closing other projects, you just open

01:17:00
it, right? Cool. So let's look at this. Please make the li's blue underline 15 pixels and have a gray background. Instead of having to like swap back and forth, I'm just gonna copy this and then go to my CSS and then put that there. And in fact, I'm probably just gonna do that for all of them. Yep, so let me grab it. Boom. And what I'm doing here to make these comments is I am just highlighting my text. And then for me, it's command forward slash. For you, it might be control forward slash. It's up to you. I don't like split. Some folks do. And I think it's just kind of showing my process. So I'll do the first three for now, and then we'll come back to the other ones. Cool. Beautiful. All right, please make the LIs blue, We'll underline 50 pixels and have a gray background.

01:18:00
All right, so I'm gonna target my LIs, select my LIs here, and let's go ahead and make them blue. Color, blue. Nice. Underline, what's the property for underline? Don't worry about feeling slow. All right, this is class five. This is class five. You have plenty of time to pick up speed. You're you got to think of yourself as like a a Big train a luxurious. You're a luxury liner luxury liners take a little while to get up to speed Nobody wants to nobody wants to ride the Metro They want to ride the luxury liner right and sometimes you got it takes a little while to get up to speed, you know Gotta think of yourself a little bit more highly the better trains take a while up to speed. All right text decoration And we'll do underline Cool. And then we're gonna do font size of 15 pixels. Cool. And then we're

01:19:00
gonna have a gray background. So background gray. Cool. How can I open this in the browser? How can I see my CSS taking effect? What are some things I could do? Cool. With CSS3, we don't need the hyphenated colors anymore. Make sure it's saved. Yep, so it is saved. And then from my HTML file, I'm gonna open in browser. Cool. There we go. We can see that we got the gray background, the underline, it's blue. All right, it's looking real good, right? Looking real good, right? it. All right. Next one. Please make this section have a height of 300 pixels, a light purple background, and a gold border. Let's look. This section, are there any other sections? No.

01:20:00
We don't have to worry about doing any type of selector here that's anything more than just the section. There are no other sections. We of course don't need classes or IDs for this. We don't need anything other than, hey, just the section. So let's go ahead and just target the section. Cool. Let's give it a height of 300 pixels. 300 pixels. Nice. A light purple background. What did you all use for light purple? What did you all use for light purple. Plum. Plum. I was going to grab one of y'all's RGBA values here. Factal sunshine. I'm putting a lot of faith in you right here. A lot of faith in, uh, fractal sunshine here. Let's see. Let's see if they

01:21:00
did us dirty or not. Oh, I gave us a good one. I got, you got the little, you get the little, you get the little preview here. So I can see that they didn't lead us astray. Lavender is why I think a lot of people want to be used. All right, we've got the RGB in here. And a gold border that is five pixels thick. Gold border is five pixels thick. So let's go ahead and do border and then we'll do five pixels Solid and then gold cool All right, let's save this. Let's make sure this works looks good, too Oh beautiful look at us go look at us go So, ha ha ha. This is gonna bother me. No. All right. Let's go ahead and do the next one here.

01:22:00
Please make this H1 30 pixels gold centered and use Source Sans Pro. Source Sans Pro. All right. Does the order for border matter? Try it out, see if it breaks or not. It's an easy one to try out, right? For a lot of those simple ones, try it, see if it breaks. All right, h1 is our selector here. Let's give it a font size of 30 pixels. Cool. Let's make it color gold. Nice. Centered. How'd y'all do your centering? What'd y'all do to center? Text align, I like that one for now. Text align, cool, center, beautiful. And then use Source Sans Pro font. So we're gonna need the font family and we'll do Source Sans Pro.

01:23:00
Source Sans Pro. Let's give it a fallback of Sans Serif just in case. And do we have Source Sans Pro yet? Do we have Source Sans Pro? No. Let's go ahead and get our Source Sans Pro. fonts.google.com. Don't want any of the Roboto, let's do Source Sans. There we go. Thank you, Paul D. Hunt. And I'm just gonna grab the 400 for now and I'm gonna grab my link. I'm gonna throw that in my head above my CSS link Cool and now we should have Source Sans Pro Yep, we should have Source Sans Pro now and

01:24:00
Everything else should be here as well. Let's go ahead and grab the last two here There were no other h1. So you have to worry about like a more advanced selector We need to worry about the footer. And we need to make the text have a line through it for the H2. So, boop. Let me go ahead and highlight this. There we go. All right. And, all right, make this footer. So we're gonna target the footer. Beautiful. Remember, look what I do every single time. Hold on, I'm gonna lead, I'm gonna do it a little bit slower. Ready? Look right next to my head. Look right there. I'm gonna, wait. Look at my little, nice little soccer headbutt there. Watch what I do with my footer. Ready? Footer. I get my curly braces,

01:25:00
right? Get my curly braces. I break them. Right? I break them, right? When I kiss it sometimes, right? you break them. And the idea here is that I want to make sure that I never forget to close my curly braces. Make sure I never forget to close them. One of the biggest things that folks always get in trouble with is they didn't save, they didn't refresh, and they forgot to close their curly braces. So always open them, always close them, and then start doing your actual declarations, right? As always, we're going to go through this a little bit fast. This one's definitely review. Everything here we've done before in a past class, so if it's going a little too fast for you, that's okay. I will always share the files after class, and the VOD is always immediately available after class as well. If you watch the VOD, you look

01:26:00
at the solution file, and it still Doesn't make sense get on the help channels and discord and we can help you through it, right? So I think where a lot of folks mess up is they're like frantically trying to copy along Right. They're frantically trying to copy along. Don't frantically copy along. Make sure you're digesting. Make sure you're watching Make sure you're asking questions, right? Video Vaughn means video on demand is the video that's live here on Twitch right after class Right, and so don't worry about like frantically typing along. You're always gonna get the solution afterwards So take your five minutes if you didn't get it done focus on walking through it together All right. All right footer shove a dark brown background, but y'all use for dark brown Let's see, I'm gonna grab one All right, Aaron Ender, let's see if Aaron Ender did us, right

01:27:00
Alright, we're going to do our color. Or sorry, background. Background and the biggest the guy gives full RGB. Alright, there we go. We got like a dark brown. I don't know this. Yeah, it's brown. I don't know if I would say dark brown. Is this brown? We'll take it. Dark brown. 300 pixels in height. Cool and then 70% width, So width, geez, width, 70%. Wonderful, all right. So we got our background, dark brown, thank you. We got our height, 300 pixels, and width is 70%. Cool, and then there was one other thing that was here. It was to make the H2 have a line through it. How'd y'all do your line through on the H2? What'd you do for your line through? Yep.

01:28:00
Cool. Text decoration. Lined through. Beautiful. Let's see our beautiful creation. Let's see our beautiful creation. You ready for this? Perfection. Look at it. Just look at it. Look at it. Got the beautiful centering. Hello Twitch. You got the nice dark brown thank you to Aaron. We got the line through on Mixer. Looking good. I think I could be a designer. What do you think? The nuns would be proud? The nuns would be proud? I think so. All right. Vomit gang. All righty. As always, the solution will be on Discord as soon as class is over. When we're going through this, don't frantically try to type along,

01:29:00
just enjoy it, ask questions, let's go through it together, then you'll have the code after class as well. Alright, let's move on. We talked about talking about some relationships last class. We talked about that our relationships can help us target or select certain elements in our HTML via our CSS. So here we have a direct parent child, meaning that we have to select something that is immediately inside of a parent. And so whenever you see this right caret, you're saying, find me a paragraph that is immediately inside of a section. And that's what we see here, right? And that's what we see here. we see a paragraph that is immediately inside of a section. We also talked about a parent-child selector

01:30:00
where it doesn't have to be immediately. It could be any level deep, right? So here we're saying find a paragraph that is at some level, right? That is at some level inside of a section, right? Find me something that's at some level inside of a section. CD, with CSS3, you just don't need the hyphens anymore. And so the idea here is that we're looking over here, we see a paragraph. What is the direct child of this paragraph? What is the direct child of this paragraph? I mean, sorry, the direct parent of this paragraph. The direct parent of this paragraph is the article, but it's still inside of a section. that still makes it a child of a section. It's just not the immediate, the direct parent. Here, the section is the direct parent. Here, the direct parent is the article

01:31:00
and the paragraph is just a grandchild of the section. We also have direct sibling, right? Or the sibling where you're looking for a paragraph that is immediately coming after a sibling paragraph, right? And so here, this paragraph has an immediate sibling that is another paragraph. Now, we can tell that both of these are siblings, how? How are they both siblings? Why are they siblings? Same parent, exactly. They're inside the same parent. If we like got rid of this indentation, does anything change? If we got rid of the indentation, does anything change? No, nothing changes. They're still children. It's just,

01:32:00
it just doesn't look as good. We didn't put enough respect on their name, right? And so we do the indentation to make our lives a lot easier, but that indentation, especially in HTML, white space doesn't really matter that much. And so we put that indentation to show a little respect, make it a little bit easier for us to see these parent-child relationships, but it's not really doing anything. Okay. Oh, I forgot to show this to y'all. Let me see if I can pull it up real quick. Hold on. One second. One second. Give me a second here. Let's see. Projects, wrap apps. So, I showed this before. In my free time, I like to build really dumb apps. And here

01:33:00
is one. It's part of a series of wrap apps that I've been building for a very long time. I got a lot of these. I've showed a couple of them on stream before but I got a lot of them like 20 plus of them. No problem. Maybe maybe closer to 30 and the goal is eventually I'm gonna release them all and the first person to make it through all of them is gonna get an Amazon gift card And so how do you solve this? Like do you click Birdman? No, do you like look at his name? Like what do you what do you do? So only if you like know some stuff about like hip-hop or rap you would know what to do So what, what do you do here? You got to put respect on his name. Exactly. So you put respect on his name and then there you go. So if you don't put respect on his name, it doesn't, it doesn't, it doesn't get solved. Right. Uh, there's another one here.

01:34:00
Um, this is, this is another one I've showed before. I'm only going to show ones I've showed before. Cause I don't want people to do it. Uh, so this is chief Keef and you have to remember all the stuff that they don't like, and so until you figure out like all this stuff, they don't like it. Just his face will just keep shifting back and forth. But if you remember all the things that they don't like, then you can check and it'll take you to the next one. Um, I think this is the right one. This one's hard because you only get one try. Like I think some folks will just get to this one and they'll click randomly and then it's done. They can't continue. What do you think this one is? For folks that haven't seen it. So this is a

01:35:00
lyrical lemonade video. And this of course is the one with Blue Face Baby in it. So you would have to click on the blue face, baby, right? You don't click on blue face, baby, everything else, everything else will just stop you from being able to continue. So you get one shot at clicking on blue face, baby. That's it. Yeah. I think, I think I've shown one or two more on stream, but I don't want to, yeah. I'm going to stop here because this, this will hopefully go out within like a month or two. Nah, like probably like three more months. I got a lot of them that I want to finish. So yeah, when I'm not on Discord and I'm not at work, that's what I'm probably working on. All right, let's code some relationships. Let's code some relationships. So in that same set of code from tonight, there is a relationship CSS2 folder. And if you click on the HTML,

01:36:00
you get a bunch of the relationships that we saw from last class. And then inside the CSS, there are four things that I would like for you to try and do, right? Four things that I would like for you to try and do. So there is an HTML file in the relationship CSS2, and then in the CSS file, there are four kind of things I would like for you to do. And that's the relationship CSS2 folder. Cool. All right, let me bring up the timer here. We're gonna do four minutes on this one. And then of course, we'll go over it together. Why is there a JS folder? For the engagement. Thank you for the engagement. We're not using JS. All right, good luck.

01:37:00
My screen's not blurry. Make sure you adjust the quality setting. You have, or we're lucky to have quality settings. You can turn up the quality if you like on your end. If y'all need the materials, you can go to our Discord, exclamation point, Discord. and in the follow along materials channel is all the materials we're using for tonight. Yeah refreshing can help a lot, turning it off the auto needle that could work too. Yeah refreshing or turning off auto can help a lot. Doing good Dak. Hey, how you doing? 120, I don't like to do that, so I don't.

01:38:00
Yeah, the last one's a little tricky What's the name of the open and browser plug-in open in browser? By I think it's called tech it's called tech ER I think it was yeah tech ER I don't think you've seen my terminal yet. I use a couple different ones actually though. iTerm I think is the one I showed y'all. No other plugins for now,

01:39:00
so I get used to using everything manually, get used to moving around your files, your folders. Happy Wednesday, Engineer. You finished? Nice, boom. Got a lot of folks coming in done, nice. Well, some folks got through this one. Did y'all use classes and IDs? Cause it says at the top, no classes, no IDs. Making sure you paid attention to the rules here. I wonder if you're stuck, we're gonna go over it together.

01:40:00
Are pseudo classes allowed? You can do it without pseudo classes. There's a way to do it without pseudo classes. What are classes and IDs? They're ways of adding more specificity to your selector. We're gonna see them in a minute. I'm gonna go over those. So if you weren't here for last class, we're actually gonna go over that as soon as we're done this one. Beat the time, nice. Please open again slowly. I just drag my folder to VS Code. That's all I do to open it. So like I drag my folder to the VS Code icon and opens up. You can always open VS Code and then open your folder. It's up to you.

01:41:00
You have a favorite resource to learn VS Code? No, I just Google the stuff I need to do. I don't really like to add stuff to my text editors that much. So I don't really customize them too wild. Is there something I need to change? I just Google how to do it. All right, let's go over this together, folks. All righty. All right, please make only world and zebra blue. Let's look at world and zebra. Both world and zebra are H2s inside of a section. We also have these other H2s that are inside of a section. So what do we know we need to do to target the world in Zebra but not unicorn in Hufflepuff? Yeah, we need that parent, the direct parent child. So we can go ahead and do section,

01:42:00
space H2, and then do color blue. Cool. Let's open this in the browser and make sure that it's working. Yep, so we only got world and zebras blue, makes it a little bigger. Yep, only world and zebra are blue, nice. Because if we look, world and zebra are direct children of this section, whereas unicorn and Hufflepuff are direct children of the article. They're grandchildren of the section, so that's why we can't just do section space, we have to use the right caret, cool. Please make only zebra purple. Uh oh. How'd you make only zebra purple? Well you can't do h2 plus h2. If you do h2 plus h2, that would also make Hufflepuff

01:43:00
purple, right? So we gotta get a little wild here. We gotta go down here and maybe do section h2 plus h2, right? And then make that color purple. Let's see. Let's see if we get purple. All right, we got it, cool. All right, so what happened here? What was this an example of? What just happened here, chat? The cascade, exactly. This is the cascade in effect, right? They both were blue, but as we went down the cascade, this selector on line seven made this rule have the three points of specificity that enabled us to override that second H2

01:44:00
from being blue. Almost forgot my semicolon here. from being blue to being purple, right? We use that cascade to our effect. And so we wanted to target just that second H2. How did that work, right? If we go back and look, this H2 has an immediate sibling that's this H2 and they're both direct children of the section, right? So we're able to say, all right, H2 was zebra. it was an immediate sibling of world and they were both direct descendants of the section. Right? Why doesn't h2 plus h2 make them both purple? Because this is saying the direct sibling. So it means it has to have another sibling before it, right? If we go back and look, does world have another sibling that comes before it? No. No, this world doesn't

01:45:00
have another H2. If there is an H2 up here, then yes, right? Cool. Seven minutes, that's a different type of any child select, sorry, any sibling, it's any sibling. We're not gonna, we're gonna skip that for now because I don't want people to get too confused. All right, let's take a look at the next one. Please make only Hufflepuff gold. How can you make only Hufflepuff gold? So here's unicorn, here's Hufflepuff. How do I target just Hufflepuff? Ah, so it's kind of the same pattern again, right? Like if we just did H2s, it could target both unicorn and Hufflepuff. So if I do h2 plus h2 inside

01:46:00
of an article, inside of a section, that'll differentiate it from the other ones, right? Or we could just do inside of article too, right? And so, oh, we can't just do inside of article. Well, we could maybe because we have one down here, but let's think about it. We could do h2 plus h2 inside of article. And I think we should, I think we got it. So let's try it. So article, then we do h2 plus h2 and we're gonna go ahead and make it gold, right? So the idea here being that we're saying, all right, give me the h2, who has a sibling that's an h2 that is the direct child of an article. All right, let's try that. Let's see if that happens. Does only Hufflepuff turn gold? Let's see. Did I change anything in my HTML? All right, let's see. All right, yeah,

01:47:00
only health path turned gold, nice. Now, could we like, could we have done more, right? Could we have done more? Could we have done like section article h2 plus h2? Yes, we could have. Could have added more, but you don't wanna add more than you need. Does the whitespace matter? The white space mainly is for making sure that you can understand what's happening, but a lot of times white space really just doesn't matter that much. Cool. We're actually gonna see that later. We're gonna go full bore to see if we can add as much specificity as possible. All right. Keep Hufflepuff gold and make only unicorn gray. All right, keep Hufflepuff gold and make only unicorn gray. So let's go back and look at unicorn.

01:48:00
Unicorn is this H2, right? Is this H2? How can I make unicorn gray but keep Hufflepuff gold? Let's see if we can make, can we get unicorn gray first? All right, let's try it. If we do article h2 and we make it color gray. All right, let's see what that does to unicorn and Hufflepuff. We go back and we refresh. All right, unicorn is gray. Hufflepuff stayed gold, but duck also turned gray. Hmm. Let's take a look at that. Can I get a little bit more specific, maybe? What

01:49:00
happens if I get a little bit more specific, though? Well, let's talk about, let's talk, before we get more specific, Why didn't Hufflepuff turn gray? Unicorn turned gray, but why didn't Hufflepuff? Yeah, it has less specificity. If we look at this rule here, this rule has how many points of specificity? How many points? has three points of specificity, exactly. And then how many points did this have? It had two. So there's no way for stuff that gets applied here to be overwritten by stuff that applies here. That's why Hufflepuff stayed gold, right? There's three points of specificity

01:50:00
on that second H2. When we target all the H2s, it's enough to turn unicorn to gray, right? But it's not enough to also turn Hufflepuff to gray, right? It just doesn't have enough to override the gold, right? All right. But we're still not out of the woods here yet because we're running into something interesting and that duck is also turning gray. And I don't want that to happen. I just want unicorn to be gray and I want Hufflepuff to be gold. So if we look, how do I differentiate between unicorn and Hufflepuff and duck? The section, exactly. These ones are inside of a section as a grandchild. This one is not ever inside of a section. So we can go back to our

01:51:00
CSS and say, all right, well, section space article H2, right? And if I do that, what's the weird thing that's gonna happen though? What's gonna happen here? We got unicorn gray, but Hufflepuff is back to gray. So what could I do? The cascade came into effect here. It overrided this rule up here. What could I do? I'm looking to see all your, I

01:52:00
could get more specific. I could do that, right? Maybe if we do this, maybe if we do, well, this Hufflepuff was inside of a section, right? So maybe we just do section article H2 plus H2. Now, how many points of specificity does this rule have? How many points of specificity does this rule have? So this has four, right? We get one for the H2, one for the H2, one for the article, one for section, that's four. We get one for the H2, one for the article, one for the section, that's three. So anything that happens in this rule cannot be overwritten by this rule. So, if I make my sibling H2 gold, I can't override it.

01:53:00
It's not working. Why is it not working? Why is it not working? The theory is correct. I didn't save it. Right, if we look, if we look. That is still solid, means I didn't save. Let's save. Let's come back. Let's refresh, boom. Unicorn Hufflepuff. Well done, well done, chat. Y'all did well. Cool. Let's, I mean, there are other ways that we could have done this. Ordering could have helped here. We could have done things like classes and IDs, you know, I didn't want you to use them. Could've used pseudo-selectors, even though I didn't want you to use them, right? So ordering could've also helped here. But we were able to get through it because we understood specificity and we understood the cascade, right? So the idea that I want you to do is

01:54:00
after tonight's class, like after we get done the raid, after we spread our love, positivity, and all the follows, you gotta come back and play with this stuff. You gotta give yourself some more rules, right? You got to give yourself some some some things that that are gonna make you have to put in some work, right? High cognitive effort, right make sure that you can start to see All right. Well the cascade might come into effect if they're same or greater specificity We're gonna get a lot of practice with this stuff come to office hour We're gonna get more practice with this stuff But the idea is that you got to also push yourself a little bit right give yourself some some odd things So what if I want Hufflepuff to be purple, but I also want Zebra to be purple at the same time? Like, can you do it, right? Alrighty. Let's review our specificity and our IDs and classes. So, so far we've used our relationships. And

01:55:00
for the rest of our work tonight, I still want you to focus on your relationships. I really don't want you to use classes or IDs just yet. Starting next class, you wanna start using your classes and IDs, go for it. I just want you to get comfortable with your relationship selectors first before you move on to classes and IDs. But the hint at them so we can talk about specificity, right? Talk about specificity. IDs can be used once per element. And then once you use that ID name, it can never be shared on any other HTML element. So, if you look at this paragraph, it has the ID of zebra. This paragraph cannot have another ID. It can have classes and other stuff, but it can't have another ID. And then that ID of zebra cannot be used anywhere else in your HTML file. It's a unique identifier,

01:56:00
right? It is a unique identifier. Is it possible to build a fully fledged website without using a single class or ID? You can, but let's talk about it. Let's talk, hold that thought for just a second. Let me cover classes and IDs again, and then hold that thought. Come back to it with it in just a few seconds, right? Can you create a whole website without classes and IDs? Hold that, let's hold that thought in our head for a second. IDs are unique. They can only be used once, right? And they cannot be reused anywhere else in that page. It's like your Discord username, like the username with all the numbers in it. There's only one, it cannot be reused, and it's a way to talk to you directly. So when we see this ID in our CSS, it enables us to talk to that paragraph and only that paragraph. Classes can be used to talk to multiple elements at the same time. Maybe I want everyone with glasses

01:57:00
to stand up, right? Or maybe I want everyone with great beards to stand up, right? And so I could target multiple elements at the same time, right, to stand up. And so we can see that in our code here. Both of these paragraphs have the class of Bob, right? Have the class of Bob. I can target both of those classes at the same time. I write one rule. I wrote one rule in my CSS, but I targeted both of those paragraphs, right? So IDs are unique. Classes can be reused across and it enables us to target multiple elements, okay? Now, an HTML element can have an ID and it can have pretty much as many classes as you want. There are people that have like tested, there's like a theoretical limit.

01:58:00
I'm sure there's a theoretical limit, but you'll never, ever, ever hit that theoretical limit in actual practice, okay? People used to think it was like 255, but then somebody like tested it and it was way more than 255. But the idea here is that IDs are unique, classes can be reused. All right. Now, somebody asked me, before we get to our specificity game, somebody asked me, Liam, can you have a whole site that does not use classes and IDs? And let's take a look at our HTML that we had here. This whole site works without any classes and IDs. And I could build a whole website, like a beautiful website, that just used all these relationships. But there's something that could happen. And here's what could happen. some motherfucker could come along, right? They could come along and

01:59:00
put a section, just a section. They could put a section. And when they put that section, what happens? We throw hands. It breaks everything, right? It breaks everything. If you have these like nice, meticulous relationship selectors, right? The relationship is over, right? As soon as somebody throws that section there, this relationship is over, right? All, all of the relationships that you put in, all that hard work, all of the section H2 plus H2s, all these section articles H2s, right? Like all those things would just break. So while yes, you could do a whole site just with relationship selectors,

02:00:00
it only takes one person to add one other element to break all your hard work. And so for that reason, we don't build sites with just relationship selectors. I typically will have classes on most of my containing elements, and then I'll use relationships inside of those classes. I'm one of the weirdos that, well, I don't think I'm a weirdo anymore. I think a lot of people have moved this way. I don't really use IDs for CSS. I'll use IDs when I get to JavaScript, but they're too rich. They have too much specificity. So I avoid IDs. I use classes on my containers. And then when I want to target stuff inside of those containers, I use my relationship selectors. Can we explain containing elements? Containing elements are just elements that contain other stuff. Sections, articles, headers, footers, yeah. Cool.

02:01:00
Alrighty, folks. We are at the top of the hour. When we come back, we're gonna get some specificity practice in, and then we are going to do, I think it's a really fun getting our fingers on the keyboard. We're gonna try and make some ridiculous selectors when we come back. So we're gonna play guess that specificity, no peeking ahead. And then we are going to build some ridiculous selectors just to see what we can do together, get our fingers back on them keyboards. And yeah, but for now, we're new around these parts, we like to stay healthy. We like to make sure we take our breaks. So we're gonna take our five minute break. please if you're able get up move around hydrate and We'll be back in five minutes five minutes on the clock here Cool I'll bring out some tunes for you, and I'll see you all in five

02:02:00
You You

02:03:00
You

02:06:00
You what's there between UX and UI UX is like how you move through an application UI is like the things that like you interact with and see. So user experience versus user interface. We went over Clearfix on during office hours. So definitely rewatch that VOD. I think a bunch of people have like posted timestamps to it in Discord, but when we get to more layout stuff, we'll definitely go over it in class. Leon is studying five hours a day too much too little. I want to avoid burnout. It's up to you Some people have the ability to study for five hours a day. Most don't most people just don't For a lot of people that's aspirational

02:07:00
Um, most people have like two to three, like a real like focus a day. Um, but, uh, it's a really, it's a really personal thing. It's something you can always build up to too, if you're not there. I totally did not start, uh, with my Pomodoro's and I'm able to do now and the amount of work I'm able to do. It took me a long time to build up to it. You gotta do what you gotta do. It feels best. I think a good goal in the beginning is two hours a day. And then some days you might feel a bit better and you'll go a bit longer, But I would start there as a good goal Outside of class that is too All right folks come on back come on back We're gonna have a huge party after this I hope so Hopefully the the world is situated in a way that we could do meetups and stuff like that Larry thank you for the gift of sub Thank you to all the subs today, too A lot of folks

02:08:00
using the the Jeff Bezos his money. I appreciate all the prime subs You have Amazon Prime you can sub for free. And so I appreciate you spent all Bezos his money. Oh Mastermind what's going on? How you doing? Thank you for 10 gifted subs Hold on. Y'all ain't following mastermind y'all messed up. I can't wait to hopefully catch you live so we can send a rager away But masterminds the one I keep talking about folks if you want to do more data science II stuff. They're the person to follow They were also running a boot camp That was that was pretty cool to watch they were in person but streaming it in person. It was really cool Hope you're doing well. Thank you for stopping by I'll uh, I'll send out the the link so that you all can follow their channel and then we're definitely gonna have to do a raid soon as possible Appreciate it. Hope you're doing well All

02:09:00
right, folks get back in here Get back. Everyone's throwing up the primes. Thank you as always the Subs and all that stuff goes to nonprofit. I work at there during the day directly to our emergency fund. And so I appreciate that Time to work exactly Let's take a look, let's take a look at specificity. Let me show the music here. Alrighty, so let's play our favorite game at the moment. Guess that specificity. how many points of specificity does this rule here have? How many points? Guesses in chat, please.

02:10:00
All right, I'm seeing 21, 21, 21, 21, exactly. We get 10 points for the unicorn, another 10 points for robot, because they're both classes, and then one point for the paragraph, right? So we get 21 points of specificity there. Two classes, right? Two classes and a tag for 21 points, 21, 20, and 20. Let's do another one here. How many points of specificity does this rule have? All right, 110 in chat, I see it. So we get one point, sorry, 10 points for the class and

02:11:00
100 points for the ID. So we had one ID, one class, zero tags for 110 points of specificity, nice. And how many points of specificity does this rule have? Oh, a lot of y'all got gat, a lot of y'all got gat. It's all right though, a lot of y'all got gat. Y'all are spending Bezos's money. I appreciate it. It's a wild. There's so many of you. What? Hold on one second. That's ridiculous. Mastermind started off with the 10 gifted. Thank you so much. And then minimal spot grammar and

02:12:00
booze. H T B Y B zero. Uh, Julia Nan, Wes Kai, epochs, solution, Stevie, eight 34 boogie show. Go Kava. Otter real spin. Amy artists sour, lay, these, whiz, never, supremo, trilton, comrade, misro, chuddy, feral, ten, mando, tech, this, black, i can't even read them, yim, moo, wrench, sorrows, joe, talon, nox, So Major Manny, JF, it's just, I can't, there's too many. Holy crap, thank you so much, everybody. I gotta figure out like, I gotta figure out how to say thank you more regularly,

02:13:00
but it's just so many that just came in. I appreciate you all, I definitely see you all come in. Moe Gaber, thank you for the five gifted. That's wild. If you, if you now have, if you now have micro leons, like the emotes, put some emotes in chat for us, please. I would love to see the emotes. That's pretty cool. That's wild. And as always, please never have to sub. None of my content will ever be behind paywalls. The, the primes that you see are coming in are just free. If you have Amazon prime, you get a free sub. So I appreciate it. I'll get all the emotes. Y'all are too good to me. Thank you, everybody. Alrighty. So this was a got got moment. Because you were right, there are 10 points of specificity in the selector, right? There are 10 points of specificity in the selector. But then, but then,

02:14:00
boom. The bang important adds 1,000 points of specificity, right? So 1,010, I'm going to get a call from Amazon. Leon, you got to slow down. You got to slow down. You're burning through our resources here. Leon, what are you doing? Too much, too much of Bezos' money. I'm going to get a call right from the big men themselves. I appreciate it. It's wild. So 1,000 points from the important, right? And 10 points for the class. Class, so a thousand points, zero IDs, one class, zero tags, a thousand and ten points specificity. Boom. All right, let's get some specificity practice. This one, I love this one. I think this is gonna be pretty fun. I like this one a lot. It's one of my favorite early things that we do. So let's look at this one. Specificity practice in the same

02:15:00
materials from today. If you're new, as always, materials are on our discord exclamation point discord right exclamation point discord can you have two bang importance i don't think so but it's worth trying i never thought to do that i don't know we'll try it all right i think i think you only get one yeah some people are saying no but i always like to test those things you just never know there's so much funky stuff in css you just never know some things i thought and then like in a And I'm like, all right. So we have in the same materials from today, they're on discord in the follow along materials channel. We have specificity practice. Index.html has a lot of stuff going on in here. Look at all these classes. Look at some of these ideas. And then inside the CSS is what we're going to do. Okay. So specificity

02:16:00
practice folder. you see the HTML has all these classes and IDs, and then the style.css has four things that I would like for you to do. And so, go ahead, and I'm gonna put four minutes on the timer, and while out on these ones, please, have fun with the last two, and go for it. Four minutes on the timer, and we're gonna go over it together. So, get as far as you can in the four minutes. You get done, throw done in the chat. And there's like done We're gonna go over it together I'll bring the tunes on for you Can we use IDs in classes this time? Yes, you can use IDs in classes on this one.

02:17:00
This is specifically practice with our classes and IDs. Yeah, thank you for asking though Which one are we doing we are doing the specificity practice and the things that you have to do are in in the style sheet Engineer Bay, yes, you can of course That's how you know you're doing it right, when people are fishy. No worries, we're going to go over it together.

02:18:00
I select, I mean, give a, write a selector with the highest level of specificity that you can do. The highest level you can do, yeah. Oh no, sorry, computer crashed. Worlds I do, of course. No, no, no zebra blue is not a color like I want you to style the words rhino and zebra blue There's no there's no color called zebra blue. That's funny.

02:19:00
I didn't think about that If I select I mean make a selector yeah as part of your css rule Right, right, right dragging it. Feeling lost, it's not working. Make sure you saved, you refreshed, yep. Make sure that you closed your curly braces. Could you show the point slide? I mean this one. 1 point for tags, 10 points for classes, 100 points for ids, 1000 for other Yep, don't forget the semicolons exactly.

02:20:00
How do we handle classes with spaces in the name? They're not spaces, they're two separate classes. That's a really great question. Those are actually two separate classes. I'll be sure we walk through that. Gasp. Gotta switch it up every once in a while, you know? All right, folks, come on in. Come on in let's come back. No matter if you finished or not. Don't worry. Come on back. Let's go through it together There's a great song meal already, let's take a look at this one together

02:21:00
All righty And somebody actually asked about this. This is two separate classes, right? This is two separate classes. This H2 has the class of Africa and the class of four legs, which makes sense for a rhino. Same thing here. This zebra has the class of Africa and the class of four legs, right? So a lot of times, maybe you wanna style things with multiple classes, right? If, if you were looking at me, I would have the class of glasses. I would have the class of amazing hair. I'd have a class of amazing beard. I have a class of a Pokemon t-shirt, right? Like I have lots of classes that describe me that I would then want to be able to put those attributes on

02:22:00
other people. Right. I'd want to be able to make sure that other people could have glasses. Other people could have great hair. Other people could have great beards. I don't know if they could have the Pokemon worlds t-shirt, but maybe they could, maybe they could, right? And so classes can be reused, right? Classes can be reused and multiple elements might have, right, might have those classes, cool. Alrighty, so let's take a look at this. We wanna make Rhino and Zebra. What do we want to do to them? We want to make only Rhino and Zebra blue. So if we look, does anything else have those classes? No, nothing else has those classes. So I could target it by the IDs. I could say ID and Zebra, right? So I could do something like this. I could do Rhino and

02:23:00
I could say color blue, right? And then I could do zebra and color blue, right? If we look, rhino has the ID of rhino and zebra has the ID of zebra, right? And so I could do those two IDs, right? A cool thing that I could do is I could also just do this. Right? That comma means target both of them at the same time. Right? Or if I didn't want to use the IDs, a lot of folks are looking in here, both of these H2s are inside the section that has the class of top. Right? So maybe I could do,

02:24:00
let's see. class of top, and then just the H2s inside of it. Right? So every H2 that's inside of something that has the class of top. So if we look, both of these are H2s, and they're inside of a section and that has the class of top, so this should work. Yep, rhino and zebra are blue, cool. Yep, the octothorp or hashtag is what we use for IDs, cool. The thing here says only, right, says only, that's a very specific word, only, right? is there a chance if we were to add other CSS, sorry, add other HTML, that this would only make Rhino

02:25:00
and Zebra blue? Only is a very specific word here. There's a chance that if we came here and added another H2 inside of this section, that this would no longer only target, right, Rhino and Zebra. So I think because of the word only that kind of makes it forces our hand a little bit here And so I'm gonna comment this out So it's still here if you come back and want to look at this code after class but I think since it says only we kind of have to go with the the the Targeting the IDs right like in case some person comes along and as another h2 We want to make sure that we're targeting only them. What color was it supposed to be? Blue, right? Only those two. Why not select the classes? That's a great question. Well, could something else come along that has Africa and four

02:26:00
legs? Right? Could something else come along? Could I create another H2 that also has those classes? Yeah. Can I create another H2 that has either of these IDs? No, right? So the IDs are the only sure bet to satisfy this only word here, right? Yeah, be a little nitpicky here, but I think it's just a fun exercise to talk through it, right? Make only Hufflepuff gold. Let's go ahead and take a look at Hufflepuff. How can I target only Hufflepuff? Best house, oh, I'm glad you all agree, thank you. Yes, Hufflepuff is indeed the best house, thank you. Oh, you meant the ID best house, okay. Yep, best house would be how we would target Hufflepuff.

02:27:00
I'm glad we all agree though. So let's go ahead and do best house with the ID. Uh-huh. And let's make it gold. And I know all of the Harry Potter fans are freaking out right now. I know it's not gold. It's okay. We're going to make it through this. See, I'm a Hufflepuff with a Gryffindor rising, and so that's why I threw gold in here. All right, let's go ahead and save this, and let's go back and check. Beautiful, a little bigger. So we can see Hufflepuff is only gold that worked nice Next one Please select

02:28:00
duck with the highest level specificity, but I love these so much Please select duck with the highest level specificity possible throw throw your your guesses in chat just so I can see this this this is a monstrosity So people keep saying how do we handle classes with spaces? You cannot have a class with a space as soon as you put a space in your class. That's two separate classes right and so There there are none. So right here this Best house has the class of Harry Potter. It has the class of Triwizard champ, and it has the class of badger Those are three separate classes cool All right, we can stop spamming the guesses here. All

02:29:00
right, let's take a look at these. Let's do one together. Here's Duck. All right, at the base level, Duck has how many classes? How many classes does Duck have? has two. So let's start there. Likes to quack and fight 10 or 100. So let's go ahead and copy those two classes. And if I wanted to target it with the most specificity possible, I can do this. H2 likes to quack and then fight 10 or 100. So notice what I did here. Notice how there is no space here. When there is no space, what you are saying is find me something that has all of them, right? So what I'm saying here is I'm saying find me an

02:30:00
H2 that has the class likes to quack and the class fight 10 or 100, right? No spaces means find something that has all of these, right? If I was to put a space here, what would that mean? If I did that, if I put a space there, what would that mean? That makes exactly, that makes it a parent-child relationship. Then we're gonna be looking for something that has the class quite 10 or 100, that's inside of an H2 that has the class likes the quack. So we can't have the space there because that's a parent-child relationship, right? Right? Right? That's a parent-child relationship. Right? Cool. So here, it's not a parent-child relationship. We're looking for the H2 that has this class and this class and

02:31:00
is an H2. Right? Let's just make this a color just so we can see it. Color lime. There we go. Cool, let's just make sure that that's there. All right, and we can see that duck is that nice green. All right, you can see that duck is that nice green. Look at it, there we go. And so this is not the most specificity. We're just getting started. All right, so it's an H2 with two classes. What is this H2 with two classes inside of it? If we go back and look, this H2 with two classes is inside of an article, right? It's inside of an article that has the class rDucksDinosaurs, right?

02:32:00
So now we gotta handle this parent-child relationship. So now we have to do article rDucksDinosaurs Maybe, maybe we'll be even more exact here with the, the right carrot, right? So now we're saying, all right, it's going to get ridiculous. I'm telling you, it's going to get ridiculous, right? What I was saying is find me an H2 that has the class of likes to quack and the class of fight 10 or a hundred that is immediately inside of an article that that has the class rdux-dinosaurs. Does capitalization matter? Try it. Break it on your end, see what happens. All right. Now, this article, how do we get even more ridiculous? How can we keep

02:33:00
this going? What is this article like? Well, we know it's inside of a body in an HTML, so we gotta go there. but what comes before we get to the body or the HTML? This article is a what? This article is a sibling. This article is a sibling. This article is a sibling to this section that has the class of middle. I'm gonna use that. I'm gonna say, section with the class of middle that is the, it's the sibling. So give me the article that's the sibling to the section with the class of middle and This section with the class of middle is a sibling to that section that has the class of top So we gotta we gotta do that too. So you gotta do Section with the class of top that's also a sibling and And then

02:34:00
the sibling to the section with the class of top is the H1 with the ID of high. All right, so we gotta do H1 with the ID of high. Normally you would never ever do this, like H1 ID high, because normally when we're not being wild lads today, right? When we're not, we're not wilding out here, um, we, uh, we would just use the ID and the ID is already specific enough. Right. Right. Already specific enough. Right. And so what we're doing is being ridiculous. All right. So we said, find me an h2 that has the class of likes to quack and the class fight 10 or 100.

02:35:00
That is the immediate child of an article with the class Ardux dinosaurs. That is the sibling of section with the class of middle, which is the sibling of section with the class of top, which is the sibling of the h1 with the idea of high. And then that's all inside the body that's a child and then all that's inside the HTML So HTML Body And I haven't even reached my final form folks. What am I missing? What am I missing? Stack that vomit Bang important, baby. All right, let's save it, see if it works.

02:36:00
So it works, let's try, let's go. No, he didn't. I did, folks, I went there. Bangers only. All right, let's take a look at it. Cool. So, this H2, which had those two classes, was inside this article, which had that class, which was a sibling to the section with this class, which was the sibling to the section with this class, which was the sibling to the H1 with this ID that was the child of the body, which was the child of the HTML, And then we gave it a bang important and it worked. How many points of specificity? Go ahead and take a second. How many points of specificity in chat? How many points of specificity over

02:37:00
9,000? Too many. All right, let's take a look. All right, 10, 20, 21, 21, 21, 31, 32, Yep, 42, 43, 53, 54, 154, 155, 156, 157, plus the bang important 1,157.

02:38:00
Did I count it right? All right, chat's spamming it too. Nice, well done everybody, well done. All right, now, there's another one down here. Rhino with the highest level of specificity, do that one for homework please. Now that you've seen the wildness that we can have up here, go ahead and do this one for homework for me. We're not gonna do it right now, we'll go over it during office hours. But yeah, do this one for homework for me, cool. We got some important matters to attest to for the rest of this evening. My brain just puked. All right, thank you for playing along. I know it's funny, but it does help you kind of visualize what we can do. All right, let's talk about the box model and get into some layout, and then we'll end for the evening. All right, something really important for you to know about how HTML and CSS works is

02:39:00
that every single thing in web development is a box. Everything is a box. Everything is trying to take up space, horizontal and vertical space when we're talking about the box model. So everything is a box. I don't care if it's a piece of text. I don't care if it's a section. Everything is a box. And so the box model is concerned with how does that take up space? What in rhyme and reason and logic behind why things take up space? And the reason why this matters is because we eventually want to have like stuff sit next to other things. We want to have stuff be inside of other stuff. And if we don't know how much space things are taking up, we can't sit stuff next to each other. We can't put stuff inside. And so we are going to start with trying to understand the box model. All right,

02:40:00
let's pretend, oh, not pretend, let's just do it. Let's go ahead and let's make a section. Let me get some black text here. Let's go ahead and create a section. And that section is going to have a height, of 100 pixels and a width of 100 pixels. Cool. And so, if we drew that out, we would see a nice square box. All right? Nice square box. All y'all primers got the The moats I see a lot of nuns in chat tonight. Don't blame me, blame the nuns. All right. So we would have

02:41:00
a nice square box. Height of 100 pixels, width of 100 pixels. Chat, my curly braces are not closed. I'm gonna add more. Yeah, let me just close them all the way down here. There we go. Curly brace closed. How wide is my section right now? I promise the curly brace is closed right there. How wide is it? 100 pixels wide, how tall is it? 100 pixels tall. If I was to put, let's say I had an article that I wanted to put these sections inside of, right? And my article was 300 pixels wide, how many of these sections could fit in my article? If my article is 300 pixels wide, how many of these sections right now could fit inside? Three, exactly, three of these could fit. All right, when it comes to the box model, there are three really important things. Going horizontally,

02:42:00
we have width, then we have padding, and then we have border. And then going vertically, we have height, padding, border. Right, if we look at this image, you can see it here in the slides, right? You can see that we have width, padding, and then border. And so all this is are the three things that we can control that take up size when you're trying to calculate according to the box model. Margin, I don't throw into this calculation. Margin's a bully. It's used to push around the box model, but not necessarily something that you would consider a true part of the box. All right, now let's draw this out. So right now we have a section with a height and a width of a hundred pixels. Let's go ahead and give this a border. I'm gonna make my border red. I'm gonna give it

02:43:00
a border, border, let's say five pixels, solid, red, cool. So I'm gonna give my section a border of five pixels, solid red. So here we go. Boom. There we go. Beautiful. Has five pixels, solid red going around the whole side. How wide? What the heck? Ah, you mother humpers. I think anyone can contribute to the whiteboard when when this is known so I will find you that's all I'm gonna say I will find you I will find you and let's go ahead and get a new one

02:44:00
I got GAT, I really got GAT. So we used to use a different whiteboard before this class and that one is no longer, all right, let's see. You got GAT. You got to do this without you all being able to see it Hmm. Hmm. I actually don't know if Whiteboard

02:45:00
gives me a unique one each time. Oh, there you go. I can request a new one. And let me go to main. And then I'll make get full screen. All right, let's try that. Cool. I don't know if it's, oh no, it won't, because it'll still show it on your end. That won't actually do it.

02:46:00
Oh, that's what I can do, there we go, that's what I'll do. All right, I got it, I know how to do it, I know how I'm gonna do it, I know how I'm gonna do it. I know how I'm gonna do it, all right, let me do this real quick. and we're back. Cool, all right, there we go. You know what, we're not gonna drag that person. You don't know what's going on in their lives where they feel like they have to do it. It's okay, we don't know what's going on. Might just be having a bad day and they're doing it for the lulz. If I was 12 year old Leon, I'd be a little shit doing the same thing. So can't get mad. We gotta realize

02:47:00
that some folks are just young and they're gonna do things cause they can do it and do it for the lulz. More power to you. Hopefully it made your day. I hope that like, yeah, yeah, yeah, yeah. Have some fun with it. Let's try it again. It's all you, Leon, we've been doing the same thing. All right, let's go ahead and do it again. So we had a section that was black, beautiful, and it had a height of 100 pixels. And then we had a width of 100 pixels. And then we had a nice, lovely box because of that. And then we had a border

02:48:00
that was red, right? So let's do border. and we'll do five pixels, solid, red. Cool. And so then we have this lovely red border going around it. And my question to you all is, Jules said, are you drawing with a mouse? No, I'm using a pencil, it's just that bad, okay? Don't blame me, blame the nuns. If you, right, if you were to look at this, how wide is this element? How wide is this element? Oh, we're getting a mix here. This element is 110 pixels wide. It's 110 pixels wide,

02:49:00
let me show you why. we have five pixels on the left-hand side for the border and then we have five pixels on the right-hand side for the border, right? We need to account for five pixels on both sides, right? So five pixels on both sides. Right, I got got, exactly. And so what we're gonna do next is we're gonna add padding into the mix. We're gonna add padding into the mix, right? With padding, what padding does is it increases the distance, right? It increases the distance between the element and its border. So what padding's gonna do is it's gonna push the border away from the element. That's all padding does. Padding pushes the border away from

02:50:00
the element, right? And so, let's go ahead and try adding some padding on just the right-hand side. If you just do padding, it adds it on all sides, like you can do it on all sides, there's shortcuts to change it. Let's just add a little bit of padding on the right-hand side. And let's make our padding green. So let's go ahead and do padding, right? And let's make it, let's do it 20 pixels. Cool. 20 pixels of padding on the right-hand side, right? And so what's gonna happen now is we have to erase, just for now, just so we can see it. We gotta erase our border on the right-hand side, just for now. And then we gotta go ahead and add our padding in here. So this is our 20 pixels of padding.

02:51:00
And then we gotta bring back our border. There you go. So now my question to you all is how wide is this element? It's beautiful, exactly. It's 130 pixels wide, right? We got five pixels on the border here, a hundred pixels for the original element, 20 pixels for the padding, and another five here for the border on the other side. So five plus five plus 20 plus a hundred it gives us 130 pixels of width. Cool. Now, if we have 130 pixels width, and we go back

02:52:00
to that original question, if I had an article that was 300 pixels wide, or if I had an article that I wanted to sit these inside of, and that article was 300 pixels wide, How many of these elements could I sit inside of there? Yeah, I could fit two, right? I could fit two and the last one would run out of room and it would break the next line, right? So that's why the box model is important, right? We can make sure things have heights, widths, borders and padding. And all of this stuff matters when we start trying to get stuff to sit next to each other because if we don't account for it, it won't fit and it could break to the next line. Cool. Now the cool thing is you can add padding on all sides. You can have border on all sides. And then the

02:53:00
last thing that people bring up a lot with this is margin. Margin, I don't really account when it comes to the box model. What margin does is it pushes the box model around. So what it'll do is if we added margin on the top, it would push our box down. If we added margin on the left, it would push our box to the right, right? So margin can come around and push this box model around. Okay, we're gonna get lots of practice with this. We're gonna see this a lot in, we're gonna see this a lot when we get to more advanced layout stuff. And so for now, everything's a box. you can have height, width, doesn't matter if it's a piece of text or whatever, height, width, padding, and border. Alrighty.

02:54:00
Few more things to get through tonight. We drew out our box model. Time for some layouts. Time for some layouts. You should stop here. This is a lot. Nah, we got a little bit more, a little bit more. Time for some layouts. We want to be able to start moving things around, getting stuff to sit next to other things And to start off with our layouts, we are going to use floats. Did he say floats? He did say floats. What? What? What out there? Oh no, I want my money back. Yes, floats folks. All right, it's gonna be all right. Trust me, it's gonna be all right. Flexbox and Grid are far superior. When I am writing code in production, I

02:55:00
do not use floats anymore. I use Flexbox, I use Grid, I'm hip. I know what Houdini is, I'm hip, right? I get you. But here's what's gonna happen. A lot of you are gonna join a company and some of the very first projects you're gonna work on because your company's old will be to use floats. And floats are way harder to learn than Flexbox and CSS Grid is, right? And so I want you to learn floats here with me in the comfort of a hundred devs. I want you to learn floats. I want you to get practice with them. You're gonna hear from some of our alumni. A lot of them, the first projects they worked on use floats. A lot of the things they work on right out the jump are converting stuff from floats to Flex and all that other fun stuff. The other thing, too, is that floats really don't need any special vocabulary. It's just percentages.

02:56:00
And so if you can do percentages, you know how to lay out stuff with floats. For a lot of folks, floats can actually be way easier to pick up than a Flexbox. There's quirks. There's a lot of weird, funky stuff with it. but in the 10 years I've been doing this, students are quicker to learn layout with floats than they are with Flex. I know that's blasphemy. I know folks are freaking out about it, but it's just true. It's just, if you know how to break down stuff into percentages, you learn a few quirks, you're good. You don't have to learn any extra vocabulary, right? And so the eventuality of this program is that we will move into Flex, we'll be using Grid, all of our projects down the line won't be using Floats, they will all be Flex, they will all be Grid. But for tonight and for the next couple of classes, we're gonna use Floats. All right. There's

02:57:00
kind of like one really big thing about Floats. And what they wanna do is whenever you float an element, it's gonna fight as hard as it can to get into a corner. Right? We're gonna go a little over tonight, folks. So we're a little over tonight. It's gonna fight as hard as it can to get into a corner. So if I was to float this aside to the left, it's gonna go up as much as it can go and then to the left as much as it can go, trying to fight to get into that corner. If I was to float this main or this section to the right, what it's gonna do is it's gonna go up as much as it can go, and then to the right as much as it can go. It's gonna fight as hard as it can, right, to get in that right-hand corner, right? So that's the idea here. The idea is that all float does is fight for its life to

02:58:00
get up into the corner. And when you're using floats with layout, like when you try to layout a page using floats, what you're doing is you're using a side effect. what you're doing when you use floats is that if everything's trying to get into the corner, well then stuff will sit next to each other, right? So if I was to, let's say, float both of these elements to the left, right? If I was to float both of these elements to the left, they would both go all the way up and then try and go to the left as much as they could. Go all the way up and to the left as much as they could. And the side effect would be that that they would be sitting next to each other. So that's the core of how layout can be achieved with floats. They're all fighting to get into the corner and the side effect is they wind up sitting next to each other. They won't overlap unless you do something funky. All right. 15 minutes of

02:59:00
pain. Here is a layout. This layout has five elements on it. If we're looking at this and we had to take some rough guesses. What element might this be? What could it be? Header. How about this down here? What could that be? Footer. Exactly. And then we got three identical elements here. What could those three elements be? Sections, right? That could be sections, right? So we got a header, we got a footer, and we got three sections. Beautiful, right? Header, footer, three sections. Now, this header and footer probably both like 100 pixels tall, right? And then these sections are probably, I don't know, let's just say like 300 pixels tall, right?

03:00:00
How can I get these three sections to sit next to each other? I could float them all to the left, right? But I would also need to give them a percentage because if they didn't have a width on them, right? If they didn't have a width, they would all still stack. If they were still 100% width, they wouldn't sit next to each other. So floating is one part. We also have to change their width exactly to 33.3333% repeating, of course, Leroy Jenkins, right? We can have four decimal places in CSS. So the four decimal places in CSS, if we made all of these 33 pixels, 33.3333 pixels, 33.3333% width, and we floated them all to the left, they would all sit next to each other, okay? So,

03:01:00
we're not gonna do 15 minutes because we're over time. We're gonna do seven minutes of pain. Seven minutes of pain. I want you to create a new folder that has an HTML file in it, a CSS file in it, and see if you can get this layout to work. It's hard, it's a challenge. Don't worry if you can't get it. You got seven minutes. We're going to come back and go over it together. Seven minutes of pain. And then we're going to go over it together. Talk through some quirks and features that we can see here. All right. And then I'm going to talk about the homework and what to expect for Thursday. And then we're out of here. We'll do a raid. So go ahead. Six minutes, 30 seconds. Build this layout. Go. Do it. Try it, try it. Even if

03:02:00
you have no idea where to start, try. You have no idea how to start, don't worry, try. And we'll go back over it in six minutes and 22 seconds. Yeah, Doug DeMoro, yeah, I was thinking as I said it, yeah, quirks and features. We are building this layout. HTML and CSS, that's it. No flex, no grid, just floats. Where can I sign up for your calligraphy course? No flex, stone. It's beautiful. What's your timer? This is smart countdown timer, a Mac app.

03:03:00
Trough of sorrow lowered. Yeah, some of y'all just made it to the trough of sorrow. Welcome, welcome to the trough of sorrow. Good to be here, welcome, get comfortable, I'm going to be here for another 28 weeks. You know what? Fuck that. This is class five and all of this stuff you can already do. Come on. Class five and you're already like, you're like, well, I don't know about the specificity on that Leon and well, I don't know about floating, like, come on, like where were you five classes ago? think about that even if you even if you're just like barely hanging on to threads you're so far ahead of other folks you have like this they just have no idea right you

03:04:00
all have skills that no one can ever take from you We'll go over this and we'll do a lovely raid. No idea where to start. Fishing reserve. That's all right. We're gonna go over the whole thing together This is where having done the read and starts to come in the come into play folks You didn't do the Shay how this is too much. We didn't do the learn layout.

03:05:00
This is a lot of this a lot We only raid gamers. No, we only raid people in our category Yeah, we only pick people in our category Yeah, we've never read anybody that's not in Science and tech or software development or someone that like some people are in just chatting, but they only do software development Being confused as part of the learning exactly Got some folks coming in done. All right, this one's hard. There's some quirks. We're gonna talk through it Then if you didn't get it, don't worry. We're gonna go over it all together

03:06:00
Two minutes, my borders are thick, it's probably because the borders are stacking up next to each other. But don't worry about the borders. Don't worry about the borders for now. That we're gonna struggle this part in the Shayhal? True. Thick borders are gonna be there. We're not gonna worry about the thick borders tonight. Problems for future Leon. And the song's been funky tonight. Did

03:07:00
it nice not feeling very Beyonce right now. It's all right. We can't always feel Beyonce, right? Well, we got some more dunce coming in. This one hurts. It's literally called 15 minutes of pain and I gave you half the time that turned into much of an evil laugh there at the end. Indifference I can never remember clear fix. Yeah, it's always weird Literally called 15 minutes of pain and I gave you half the time

03:08:00
All right folks about 25 seconds left Challenge us Leon What pain teach them nested table layouts from the 90s Alrighty, come on back, I don't care how far you got, it's okay, come on back, we're gonna I'm gonna go over this together. All right, come on back. All righty, let's take a look at this together.

03:09:00
All right, I'm just gonna go back to the VS Code that I had open. All right, I'm gonna go back to the VS Code I had open And in here, I'm just gonna create a new folder. There's like this lovely icon that you can click for a new folder. And I'm just gonna call this, not inside of specificity practice though. There we go. I'm gonna call this pain, right? So I just created a new folder called pain. So you can click that like plus folder icon. You can do file new folder. where you can go into your finder or wherever you create your files and folders at, you can go in there and just create a folder and call it whatever you want. So I created a folder called pain. And inside of pain, I'm gonna do a new file. I'm gonna call it index.html. Remember, we always gotta make sure we use the right file extension. So index.html. And I'm also gonna create a style.css.

03:10:00
I'm not gonna go through the extra trouble of like creating like a folder for my CSS. I'm just gonna create the two files. So in my index.html, I can use the trick that we saw in a previous class. I can do HTML and then HTML5 and boom, there we go. We got the lovely like starter for HTML. Nothing I really have to do extra here other than link this HTML file to my CSS file, right? So I got this bit, good, good, good, good. Oh my God, I forgot about that, yeah. I can't tell you how many times I, I can't tell you how many times I have built out way too much, forgot that I had linked it and I'm just like racking my brain as to why it's not working. So you're totally not alone. when all of us at some point have forgotten to link our CSS. So let's go ahead and link,

03:11:00
and then I'm just gonna call this style.css, cool. There we go. So our index.html and our stylesheet should be linked, and let's go ahead and build out those five elements that we saw in the picture, right? We have a header, a footer, and three sections. So let's go ahead and do that. header, and let's go and do a section. And we need three of them. So section, and section, and then a footer. Cool, here we go. We got our header, our three sections, and a lovely footer, cool. So let's go ahead and save all of this. And I'm gonna go over to my style sheet. And I am going to target my

03:12:00
header first. Let's go ahead and target our header. And I'm just gonna give it a height of 100 pixels. And I'm gonna give it a border just so we can see them. They're gonna be thick, three pixels, solid, black. All right, let's save it. and if we open this correctly, right? Like if we open it, all right, what we expect to see is at least a header. There we go, we got a header. It's blurry, give it a refresh or change your quality settings. Cool, boom, we got a header showing up, cool. All right, header showing up, and then if we go ahead and let's do our footer. Let's do our footer, footer. We can do a height, 100 pixels again, and border, this doesn't feel good. Why doesn't this feel good? Why does this not feel good to me?

03:13:00
It's not dry, it's wet, exactly, it's wet. I've repeated myself, dry stands for do not repeat yourself. And so this is not very dry. This is exactly the same code. So we can just go up here and do comma footer. When you use the comma, what it means is it says, apply these declarations to both the header and the footer. What stands for write everything twice. I like it. So we can do that and then yoink, get rid of four lines of code. Now, right now that was just four lines of code, but eventually, eventually, right, eventually, we are going to have thousands of lines of code. And so, if we can save code here and there, it does add up in meaningful ways. Okay? All right. Next. We got to think about those

03:14:00
sections. We gotta think about those sections, right? So these sections are gonna sit next to each other, right? These sections are gonna sit next to each other and three of them are gonna be sitting next to each other. And so we know that we said, all right, if they're gonna be sitting next to each other, we'll make them 33% width and we will float to sit them next to each other. So let's go ahead and do our sections. We're gonna have some issues that come up here. So if we go ahead and do, Let's go ahead and give them a height. Give them a height of like 300 pixels. And let's give them a width. We said 33 and then CSS can have up to three decimal places. So 3.3% repeating, of course. There you go. We also gave them a border. Border, let's just keep them similar. Three pixels, solid, black, cool. All right, so now we have our sections. They are a height of 300 pixels, The width of 33%, let's see what that looks like before we float it.

03:15:00
There we go. We have our header at the top. We have our three sections that are each 33% width, right? That's why they're not taking up the full space over here, right, because they're 33% width. And then our footer at the bottom, okay? So, how can we get these to sit next to each other, right? How can we get these to sit next to each other instead of stacking? Yeah, we can float them. Cool. Let's float them.

03:16:00
All right, so we float them and then let's go ahead and refresh. Oh boy, a bunch of stuff freaked out here, a bunch of stuff freaked out here. So we floated them, and we can see that at least two of them are sitting next to each other. Alright? At least two of them are sitting next to each other. This third one's not. Alright? So at least two of them are sitting next to each other, but this third one's not. And then something else weird happened. what happened to the to our footer? What happened to our footer? Close enough, send it. What happened to our footer? It slid up. All right, so here's what happens. When you float stuff,

03:17:00
right? Here are our sections and here was our footer. Footer's on the bottom. When you float something, you literally float it off the page. Right? Think of it if you literally floating stuff off the page and as soon as you float it, zoop, it slides under. So what happened is those sections got floated and the footer was like nothing's about me, boop, and slid all the way up until it hit the what? The floats floated, like the sections floated, and then the footer was like and went up until it hit the what? until it hit the header. Exactly. So there's a couple of ways that we can handle this. One, we could just like float the footer. So that way they're all floating together. That would work, right? You could just float them all together and then we'd be good. But there's also something else that we could do. And the other thing that we could do

03:18:00
would be to, would be to clear it, clear it. Let me show you what a clear looks like. So we can go down here and we can just add up here and just add clear. I'm gonna add both. What clear both means is it's kind of like telling both the header and the footer at the moment, but we only really care about the footer. It's kind of like telling the footer to look, hey, look to the left and look to the right. If there's anything floating, come after it, right? It just tells it to kind of like ignore it, like, well, not ignore, but like to see the stuff that's floating and chill a little bit, right? So it looks up, looks to the right, looks to the left. It actually sees those floating sections and the footer feels okay to stay where it's at. That's what clearing does. It's like, it's telling the footer to look before it crosses the street. And it looks to the left, it sees those floating sections and it's like,

03:19:00
all right, I'm gonna stay where I'm at. So when I save this, what we'll notice is that The footer will do the right thing, right? And now it's down here where it should be, right? It's down here where it should be, right? Down here where it should be. And we just have one last problem to fix. All right, we have one last problem to fix. All right, all right. we have three sections, but only two of them are sitting next to each other. You gotta think about this for a second. You gotta think about this second. We said that each of these were 33.33%. That's enough. That should be less than 100.

03:20:00
Right? But when it comes to the box model, when it comes to the box model, what's causing us to run out of some room here? When it comes to the box model, why are we running out of room here? Ah, because of the border. Because of the border, right? So it's 33.33% plus 33.33% plus 33.33% 1.33% plus the three pixels here, three pixels here, here, three pixels here, three pixels here, here. So all of those three pixel borders take us over that 100%, right? It takes us over that 100%. And since we're over the 100%, that last one, right? That last one breaks to a new line.

03:21:00
Right, it breaks to a new line. Because we're over that 100%. So there's a couple things we could do to fix this. We could sit here and do all the math, right? We'd be like, well if I do 32.8 or whatever and like figure it out, right? Or we could tell the browser, right? border. Just ignore it in terms of the box model, right? Just ignore it. Pretend it doesn't exist, right? And so the way we can do that is by going back to our CSS. And at the top, I'm going to do something cool. I'm going to do asterisk as my selector. And what the asterisk means is select everything right select everything and then I'm going to do box sizing border box and all this will do and like a very

03:22:00
kind of simplified matter is just tell the browser to ignore the borders when you are calculating the width right so now if we go back and we refresh, whoo, look at us go, look at us go, right? So now we have our lovely header, our lovely footer, and we have our three sections that are both 33% and have border all sitting nice and neat next to each other. we have a beautiful layout. Exactly, beautiful, beautiful layout. Cool. Alrighty. Let's take a look at the code real quick just to see it and recap. We had our header, our three sections, and our

03:23:00
footer. Right? And then we had our lovely asterisk selector selecting everything, right? Everything on the page, we select everything and we say just ignore borders when it comes to figuring out sizing here. And then we have our header and footer. We had to add that clear so that the footer wouldn't slide up. And then we have our sections. So this is how you can start to do layouts with floats. There's tweaks, there's things you gotta figure out. There's things you've got to figure out. There are some quirks. You've got to remember the box sizing border box. You've got to remember your clearing, and when we get to more advanced layouts, we've got to remember our clear fix. We're not there yet, though. So what we've got to do is put this into practice. Put this into practice, and your homework

03:24:00
that is due not next Tuesday, but this Thursday. so between now and Thursday I need you to complete three more layouts, three more layouts and get a jump on that reading. Don't read the whole advance just that one part of the advance by Thursday so we can we can get more into this right? So I need you to complete three more layouts and do that one like chapter of reading and the three layouts are not only in the starter materials for today but the layouts are also in the slides so here's one layout right here's another and here's a third no flex no grid just floats i'll do this upcoming thursday you got this you can do this you're ready to rock and roll i know this is a lot tonight there's a lot to go over there's a lot to cover give

03:25:00
yourself a little bit of grace as we move into this things are going gonna start getting a little bit more spicy, a little bit more harder, but you got this. You need help, come on Discord, we will help you. All right, let's end with a raid. We always end with a raid. Spread some love and positivity to someone else. Make sure if you haven't already given them a follow, you give them a follow. And we're gonna go over to Rob. Rob isn't just chatting right now. They are talking about Beer, The Cure, and GNU Linux. Rob is an amazing individual. Have some of the coolest, kind of like more Linux-y type streams. And so let's go ahead and give them a raid. And I will see you all over there. Get your channel points. Have a wonderful rest of your

03:26:00
Tuesday. Be well. I'll see you on Discord. Then I'll see you all back here on Thursday, everybody. Thank you for a great class. Give your brains a little bit of a break and let's raid.