Introduction

you you you you you Good morning, good afternoon, good evening, no matter where you're coming from, hope you all are doing well. Welcome back everybody. I'm going to tell you, can you hear me? Can you hear me? All right, now this one almost didn't happen. This one didn't almost happen. and everything that could have went wrong went wrong. So I had to move my desk setup. So I moved everything. If you saw the old picture of my desk, you know that that's no easy feat. All the monitors, hundreds of cables, everything's plugged in. I did a few test recordings yesterday and was kind of like making sure everything was working for class today. And then I go to like do my normal pre-stream routine and get everything set up one camera's not working the the mic's not working you can't hear desktop sound uh everything was just like broke and then spotify wouldn't work so that's why there was no music in the beginning uh but you know what sometimes in life they're gonna be some boats and some logs and you're gonna have to pick those suckers up and just carry them so we're doing it We're gonna make it work. This is our last class of CSS before we hit JavaScript. We're gonna come back, don't worry.

We're gonna come back, we're gonna come back. We're gonna do a little bit more CSS, a little bit more HTML, but for now, this is the last one before JavaScript on Thursday, baby. And I can't wait, can't wait. All right, so let's talk about, let's get everybody get in here. I know we started a little late, so let's get some folks in here. Let's do what we normally do. We got some questions Questions first folks. Let me send the actual go live message. Now that we're actually live Cool but the question of the day from the go live message is Would you rather only be able to whisper or? Only be able to shout the rest of your life Whisper or shout the rest of your life. What would you want? Don't in chat for me, please Okay, this one, this one is overwhelmingly whisper like it's not, it's not even close. There's one person saying shout in all caps, which I guess is very fitting. Uh, but yeah, it seems like the, the whisper is the move. You know what I thought about this at first, at first I was going to be the shout person, but then I was like, you know what?

I can just carry like a little pocket megaphone and maybe I can plug that pocket megaphone up and whisper. And then I also thought maybe, you know what, maybe if I'm, if I'm forced to whisper, I get more smooth, you know, a little bit more smooth. I can, I can do all the, the, the fancy whispering. Right. But I think I'm going to go with whisper on this one. All right, folks, as people get in here, we know we started a little bit, a few minutes in because of the technical difficulties, but any questions, any questions, let's get some questions going before we jump into the mix. Hey, Lehigh getting worse with the world ain't ready a Will we be covering unit test and Jess not for a very long time? Well, we'll have like a little bit of a class on it But it's just not something that I think is gonna hold you back from getting a job So that's something we'll go super deep in and each company that you joined will probably do it slightly differently with slightly different tools And so we'll cover a little bit of Jess a little bit of mocha just because I think it's fun And then yeah just a bit Fries or nachos definitely nachos Is it normal to feel like we're struggling yes Absolutely Okay to feel like you're struggling You've had what? This is this is this is our we have we've been into it a month, right? We've been into it a month You've only had what? five or six classes on CSS, not even. Four classes, five classes on CSS. It's totally okay to be struggling, to be picking up some of those boats and those logs and it feeling a little heavy. You're gonna get through it. Welcome to the Trough of Sorrow.

We talked about it last Thursday. You're in the Trough of Sorrow, welcome. You're about to crash and hit the bottom when we get to JavaScript on Thursday. but this is a bootcamp, right? That terminology is there for a reason. You're not here to become perfect. You're here to become fighting fit, right? And so as we move through the HTML, as we move through the CSS, you got to ask yourself, am I learning? Am I picking up tools? Am I able to start and get thrown into projects? Am I asking a lot of questions? Am I doing my Anki? Am I doing my Pomodoro? Am I doing all these things that are setting myself up to be successful? And if the answer is yes, you're doing all the things to set yourself up to be successful.

You're using your Anki every day. You're asking questions on discord every day and you're doing the work that's assigned to you. Then yes, you're in a totally fine spot to be in. Things will come with time. We're not here to be perfect. I saw a couple people on discord over the weekend, kind of asking a very similar question, right? Asking a very similar question like, hey, as I'm working through the layouts, things just kind of break more. The more time I put into it, the more things break. Great, welcome, that's part of the process, right? Making sure you're getting in there, you're throwing yourself into it, you're breaking stuff, the things will take a little bit of time from the sink in. And I don't care if you're the best person that's ever coded in the world, learning HTML and CSS in just a month is not really feasible, right? I don't care if you're the best coder that's ever existed. One month with HTML and CSS, that's like part-time, after work, maybe for some of you. It's just, you're not gonna walk away feeling like, yes, I got it, woo, like I'm ready to move on. No, this class will always be us going down the roller coaster like Beyonce, right?

Our hair is flowing, we're having fun, we're enjoying it, but we're never gonna really feel Like I've mastered this topic like I I am I am ready to move on It's just it's just not gonna come We're here to push and give you a base skill set and a lot of different things And then once you get on the job You'll have to learn different tools or different things and you'll keep pushing and that first year in the job is where you'd learn the most so with the CSS and HTML if you understand the concepts, right? If you understand the concepts, the things we're getting at, when we talk about layout, when we talk about box one, when we talk about all the basics that we covered, that's a good spot to be in. Once we get through JavaScript, we start building real stuff. When you have real things to build, you're forced to learn and to push and to get better. So even though this is our last time with HTML and CSS before JavaScript, it is not our last time with HTML and CSS. you will have dozens of projects that force you to use HTML and CSS, that force you to get comfortable with it, that force you to keep pushing, right? But at no point in time will you get that warm fuzzy feeling being like, yes, no, we're here for a bootcamp. We're here to get fighting fit. We're here to push. We're here to break things. We're here to be baddies and write bad code. Superman, thank you for the five gifted subs. I appreciate you. All right. How long is too long to spend on a layout?

If you feel like you're getting stuck, it's time to move to a different layout. And so my recommendation is that if you're ever stuck on one piece for more than 20 minutes. It's a wrap. You're cut. Move on to the next one. Right. And so I think it's really thank you for the gifted subs. It's a little delayed. That's cool. You will. Right. Yeah. You will be seeing HTML and CSS over and over and over and over and over again. Right. These layouts are not the only layouts you'll ever do.

You're going to have so many other layouts to do over and over and over again. If I'm spending more than 20 minutes on anything in coding, I stop, maybe I diffuse and walk away, maybe I stop and ask for help, but I move on. One of the best things I've ever done, whoever did when it came to me learning layout, was to do a layout, learn what I learned in that moment of the layout, but then I got stuck, right? When I was first learning layout, I would get stuck and I would just start breaking everything. Like there's nothing more I could do that wouldn't just break everything. So in those moments, I would stop, I would walk away, I would take a diffusive moment, I would come back and I delete it all. And I start fresh. And I would remember the things that I learned from that first round, right? That I learned from that fresh round, right? And then redo the whole thing. And sometimes I would redo a layout two, three, four times. And maybe on the fifth one, it was I had learned enough to be able to put it back together. I didn't have other stuff that was holding me back, right? And so for me, that's why I gave you a lot of extra time on these layouts, right? I gave you more time on these layouts because I know that you're in a place where it's hard, it's difficult, you're pushing.

You're in a place where you might have to delete something and two, three times, come back to it multiple times, move on to a different layout and come back. That's okay. That's 100% okay, right? And what did I tell y'all? Did you need, it's the first thing I said, is if you wanted to be a developer, right? If you wanna get through the trough of sorrow, what's the first thing we have to keep in mind? What's the first thing we gotta keep in mind? Exactly, managing frustration. Do you understand now why that is the first thing? Out of all the things I could tell you to be a better software engineer, do you feel why that's the first thing now? Do you understand? Exactly. And so all good things in good time, right? You still got a little bit of time left for these layouts. On Thursday, if you're not done them, it's all right.

Keep pushing yourself. We're going to get into JavaScript. Once we get through JavaScript, we'll come back. But I really just want to throw that out there that it's okay to feel stuck. It's okay to feel like you're not a hundred percent there but you can't let that stop you. You have to figure out a way to manage your frustration to get back on Discord, ask more, better, targeted directed questions, no more, can you look at my code? No. What's the thing you're struggling with? ask that right make sure you're doing your spaced repetition make sure you're doing all these things that we know it will help you up to be successful and keep pushing manage your frustration be consistent every day and don't forget to take care of yourself All righty, today we are talking about our media queries just post work for all the layouts. So certain layouts required media queries. If you look at the slides, it literally said underneath the slide to use media queries or not. You can go back, look at the slides, right? And see if it says media query or not. Yeah. Cool.

We come back to go deeper into media queries. There's really not much more to cover with media queries. We're gonna touch on them again tonight. And then that's kind of it. There's really nothing too wild other than like setting your viewport width and then writing some more CSS. That's kind of all there is to it. We're gonna see that tonight. We're gonna play with them tonight. And then after that, you really don't need too much more. It's just buckling down and doing it, right? Cool All right tonight. We're gonna just remind folks to network We're going to talk a little bit about what the expectation is for this week and next week in terms of networking Then we're going to review just some quickly some css basics and then we're going to do a slightly more Challenging box model exercise than we normally do we are then going to look at some responsive basics just reviewing some of the core tenants of responsive CSS. We're gonna spend some more time practicing with Ms and Rems. That seemed like a big sticking point for a lot of folks. And so I wanted to make sure that today is kind of a day for last review, look at some fun stuff.

We're gonna spend a little bit more time with Ms and Rems. We're gonna spend a little bit more time with media queries because it seems some folks are getting tripped up there. And then we're gonna build three layouts using Flexbox. I'm not gonna go super deep into Flexbox. I think there are a lot of great resources that I've shared. Some more that I put in the following materials today. I'm going to show you three of the layouts we've already done with Flexbox. We're going to talk through the decisions. We're going to see what Flexbox can do. And then we move on to JavaScript. Once we get done JavaScript, we'll come back and we'll build more feature-rich layouts that include Flexbox and maybe a little hint of grid. Cool. All righty, so let's go ahead and just break through the important stuff to start tonight, and then we're gonna get into some of this review and then some of this Flexbox. Cool, checking in, if you haven't checked in already, please do so, you can do exclamation point check-in here in chat, you can also always just click the link that's in the follow along materials channel Or in the when we go live message as well for folks that are new here We're doing a 30-week software engineering bootcamp. If you want all the information to follow along you can do exclamation point 100 devs here in chat and it'll tell you everything you need to know about joining our bootcamp and and Getting along with us Already folks.

Thank you for checking in. I appreciate it Big thing happened over the weekend, folks got added to our study communities. Now, study communities are just a smaller group for you to study with. That's it. There's nothing other than that. It's just a smaller, slightly protected area where it's just a certain smaller group of people. Our hope is that you use these groups to network a little bit, to work on projects together a little bit, but really just have a smaller space to put around in and to ask questions and have some fun. They don't replace any of our main channels. They don't replace any of the help channels, just a slightly smaller place for you to hang out. Now, almost all of the groups have been added. We still have a few of the location ones left But a lot of the affinity groups have been added and pretty much all of the location groups have been added We just have a few more that we'll get to this week now If you are in a group You owe an immense amount of gratitude and thanks to blah our fearless mod To make these groups, right to make these groups. We had to do everything manually So there was no way to just assign a large batch of individuals roles. We tried everything, every bot, everything that we could have done. There are things that you could have done, like we could have created a bot where you clicked an emoji, but folks have trouble clicking emoji sometimes. So it really came down to manually adding.

So if you have a role for your group, know that you got that role manually. Blawl went in, found your name, added the role to your name, and then that's what puts you in that group. And they did it twice, not only for all of the study communities that are kind of affinity based, but also for all of the location based ones. We're talking thousands and thousands of people manually getting roles and then they did it again for the location groups so if you ever see blah around discord please give them a thank you uh that is a metric crap ton of very hard work where you're just sitting mindlessly adding adding adding adding so um huge shout out to them huge thank you to them uh because without them that would not have happened we we still be talking about this four weeks from now, so thank you, blah. Now, for some folks, they missed out on this form. They missed the second form, or they didn't fill it out, or maybe you're part of a catch-up crew, and you're just hearing about this now. If that's the case, you can fill out this missed out form. It is also in the follow-along materials channel, should you need it there. We don't have any plans to enable folks like switch groups yet and we're gonna add folks that missed out as we have time but it's not something that's gonna happen quick so just because of the manual nature of it and needing a little bit of break in between doing this so maybe down the line we'll enable folks to switch and if you did miss out you want to get at it we'll do it as we have time now study communities are just that study communities if you're not in one that's okay if you don't like the one in that's okay. It's just a smaller group for you to hang out with to write some code together and take it for what it is, right? All right. What's the biggest one? The biggest one was focused and committed. So focused and committed was so big we had to split it up into alpha and So there's focused and committed alpha and focused and committed omega. Cause there are so many people in those ones.

So a large group of folks that are focused and committed you're in your own channel. And so we're going to ask you to live up to the channel that you're in. If you're in the friendly and encouraging one, guess what? You should be acting friendly and encouraging. We will be adding soon two things. One, we're asking alumni to kind of like adopt a study community just to have some words of wisdom in these groups as well. And we're also gonna be coming up with guardians, like folks that are in the communities that are just there to help moderate a little bit more since there's so many new communities, so much more moderation, the mod team's gonna be stretched a little thin. So, yep. So those two things are coming and we'll add some other fun stuff over the coming weeks. Cool. Submitting work, nothing due today, right? Nothing due today. Please keep putting work into your layouts as layouts are due Thursday. Cool. For the homework, remember on Thursday, we kind of walked through more of the homework.

We walked through what the media queries, which one had media queries. We added some more to the pile here. And so one thing you're gonna notice is that when I assign homework, it's not always gonna be Perfectly spelled out in the follow along materials channel I'm expecting that you're coming to class that you're paying attention when I assign work you're doing it Eventually, we want this to kind of mimic being on a team your boss or team leads not gonna spell every single detail for you It's something that you have to be actively engaging paying attention And making sure that you're taking note of the things that are due and the tickets that are being assigned to you. So Everything's not always been perfectly spayed out. Make sure if you're stuck, you don't understand you ask qualifying questions We have the homework help channel. You can always kind of get clarification on if you need it Cool All righty, networking, does everyone have a sound delay? No, some people are saying yes, most people are saying no. Go ahead and give it a refresh. Yeah, go ahead and give your browser a refresh. On computer. Yes. On phone. No. Yeah. All right.

Yeah. I would say give your browser refresh. We might have a slight delay though today. The way the computer computer held up so we'll see. Cool. Cool. Alrighty. Networking. The expectation this week is that you network with one individual already in tech. Okay? One individual already in tech. The push is is to have a coffee chat with one individual, right? With one individual. In person, no. These do not have to be in person.

These can be remote, right? Right? It can be remote, right? Can be remote. And so the idea is to network with one individual, right? One individual that's already in tech. They could be an engineer. They could be somebody in sales. As long as they're in tech, one person. Now, that means you're gonna have to do something. You're gonna have to do the things we talked about during our first run through networking. We're talking about meetups, conferences, Twitter, right? The things that we talked about in our past class on networking, you're gonna have to do one of those to find individuals that are already in tech to network with, just one. If you wanna push, right? Hey, Blal, thank you.

If you wanna push, right? I'm gonna push and throw a coffee chat on that as well. And of course, coffee chats don't have to be in person right now because of the thing going around. Make sure that you can do that virtually, but a coffee chat is just like that slightly longer chat with someone that's already in tech, cool. So first week, just one, then you're gonna speed up. Next week it's gonna be two, a week later it's gonna be three, right? And then we'll hold at three networked individuals already in tech and two coffee chats is where we'll hold out. So this week, one next week, two following week, three, please make sure. All right. What if we're already in tech doesn't matter if you already have a hundred people in your network in tech, that's great at a hundred more. We're here to play a numbers game. All right, cool. Remember when you're networking, you're meeting these folks, you're keeping it casual, you're trying to turn strangers into friends. You're not going for the jugular. You're not going straight for the job, right?

A lot of folks, right? A lot of folks, a lot of folks are worried about, hey, Leon, I just networked with somebody and they have a job available and should I be interviewing? No, not yet. If you're falling on this bootcamp You're in your you're you're not at a stage where you've you have a language that you're comfortable with and you can you have projects No, most folks are following this boot camp. If somebody says hey, I would love for you to interview say great I'm not ready to interview. I'm not i'm not interviewing at the moment Not looking for a new opportunity at the moment, but in two to three months, I would love to reach back out So keep it casual. Don't worry if they offer Interviews or things like that. Hey, i'm not looking for new opportunities right now, but in two to three months I will be add them to your sheet, right? Add them to your sheet. Don't forget that these individuals, right? Don't forget that these individuals, right? Exist. You wanna add them to your sheet as you network with these individuals because in three, four months from now, when you're actually in the thick of interviewing, you're not gonna remember that person. You're not gonna remember the conversation that you had. And so the sheet is what keeps you honest, This is what keeps you remembering the things that are important.

And it's the thing that you'll eventually share with me as part of your homework. So that I can see that you're doing your networking and that you're staying on top of it. Cool. Can they be in tech now? Yes. Can they be retired? No. Because you want people that can eventually go from friends to referral. So I mean, if they're like super, or if they're like retired, like five days ago, that's fine. But the idea would be that you want people that are actively in tech, that could actively connect you with folks that eventually will be hiring, but we don't start there. We start with turning strangers into friends. And maybe students, probably not, because the goal is for them to be a referral, right? So if you're in college, don't count other students as, or if you're in our bootcamp and you're talking to other bootcampers, right? Like no, that doesn't count folks already in tech that could eventually become a referral Cs teachers count. No folks that are like in tech jobs, right that could eventually refer you No Um, is there a way to talk to mods outside discord no It's just leonnoel.com slash discord.

Any other links will expire. Cool. Alrighty, you're using the sheet. Coding challenges, I know we said they start this week, but they won't start until we actually start JavaScript. So there won't be any kind of daily coding challenges until Thursday, Friday. But after Thursday's class, we got daily coding challenges happening. Remember that you have to get a paid client by March 29th. We haven't had our freelancing class yet. So I'm kind of giving you the date now just that you can start talking to friends, family, start letting folks know, hey, I'm a software engineer. I'm looking for clients, right? That's it. Start putting it out into the world and we'll have a class on how to freelance soon. And then your goal is to lock down that client, the contract by March 29th. So the work doesn't have to be done. It's just that the contract is signed by March 29th All right, we had a lot of folks to get jobs We're way past the 80 jobs mark now, and we had two folks that post it very recently on Discord and so I just wanted to throw them in there if you're not in that celebrations channel I highly recommend you check it out every once in a while It's just amazing to see the everyone's wins and the cool things that are coming their way Ariel Speedwagon posted they just started their software engineering job on February 1st.

So huge shout out to them. I Really love some of the things they had to stay in their message I always link the messages in the slides You can like click their name and it'll take you directly to their their message on discord But I really love this the thing they shared I wish I could express how unready I felt even after more than one official offer I feel like a lot of people are in that space where they just don't feel ready yet, right? Or they just don't feel like they, they understand CSS enough or they don't understand HTML enough. That's okay. You're going to feel unready. You're going to feel those hints of imposter syndrome. That's an okay feeling to have. You just have to manage that feeling, manage that frustration and keep pushing, right? I wish I could tell you how many times I got myself got along the way with imposter syndrome, with networking, anxiety, networking, got me this job. So they're saying they had networking anxiety, but networking was the thing that got them the job slipping on my Anki using it now on the job. I wish I could share the depths of the level I felt God, because I want to share this view from the other side, sending all my very best thoughts, wishes and kermits to all the folks who feel farthest away from the light. We go get. Right. I, I need everyone to feel that in their, in their soul right now. Right.

And when to feel that in their soul right now, you're going to get got, you're going to feel unready. You're going to slip on certain things, but that's okay. We go get. All right. Keep pushing and you'll get there. I also love that they say, help others and ask for help. Uh, that's, that's the way you get through this folks. You help others when you can, and you ask for help when you need it. That's the most beautiful thing about this community. It's the most beautiful thing about those help channels. It's how you get through. All right. Another one that came through that I loved, uh, this is from Jeff, Jeff and 12 with the link to the discord message as well. Really excited to share that I accepted an offer from Amazon. I'll be starting as a front end engineer with Amazon Robotics in March.

They give a huge shout out to Dab, who's part of our stream team. We'll be talking more about stream team in the near future. And then Leon, they mentioned things that we cover in this class as being the strategies for success. Prep and car are two interview methodologies that we drill in super hard throughout 100 devs. They're super grateful for everyone here. And thank you for letting me lurk, ask questions, give support and advice when I'm able. So wanted to say a huge congratulations to them as well. The really cool thing about this is one of the largest study communities, or one of the largest study communities we have is an educators study community. So folks that are teachers and educators. And the cool thing about them is that they actually shared this in the thread that was on the celebrations channel, that for the past 10 years, they've been an educator, special ed teacher. They weren't really kind of coming from an engineering background. They were a teacher. And they started picking up coding as a hobby. They joined a hundred devs. They kept up their interviewing game and ultimately locked down an offer at Amazon.

So I really love this. I love the things that they shared. And if you ever need just a little boost, you're feeling down, the Trough of Stars is getting you, go to the Celebrations channel, Checked out those pin messages. That'll be you. You can match your frustration be consistent and take care of yourself What does prep and car mean prep is an acronym for what we do during a technical interview It's just it's just the thing that we do to make sure that we're solving a coding challenge correctly So as we move into our coding challenges We'll teach prep and then car is a simplified version of the star interview method So when it comes to behavioral interviews, it's kind of like three things we keep in mind for every single question The beautiful thing about the midpoint of this program is that we just grind interviewing. That's it We grind coding challenges. We grind behavioral questions we have a bank of 300 plus questions that we'll get to you have to know the answers to inside and out and we're just lean mean interviewing machines by the end and so we have a lot of acronyms things that we keep in our brain so that we can get through these interviews the right way you can study for interviews this is the thing that I think a lot of folks don't realize that you can study your way into a job you can network your way into a job hey just in chat hey there you go Cool, cool. Alrighty. Alrighty. I wanted to share those two things. I think they're encouraging, and then I love this gift, so just because. All right, let's jump into it. We're gonna do some review. We're gonna look at some Flexbox, and we're gonna call it a night. We might end just a tad early, tad early, just so you have some more time to work on your layouts.

All right, golden rule, separation of concerns. Content goes in our HTML, style goes in our CSS, behavior goes in our JavaScript, why? I love the yeah, right, and early. Organization. Exactly, organization. Progressive enhancement. Another really important idea to keep in mind, the core should be our content. We should have a little bit of presentation on top of that and a very thin amount of client-side scripting, which is our JavaScript. So as we transition into JavaScript on Thursday, super pumped for that. We got to remember that it should be a small portion of what we're doing because we want to keep our sites light and accessible to all that may not even have a high-speed broadband connection. There's a reason why Endearly is a bingo word, exactly. All right, CSS. Does CSS go inline? Does it go in the header? Does it go in a separate file?

Separate file, nice. Remember, you might have some inline if you're writing HTML emails. You might have some in the head if you're at Amazon, like Jeff is at Amazon, like three or four other 100 devs alumni are at Amazon. We need to have like an Amazon channel on our Discord. In the head, if you're at Amazon, you might have critical path CSS. We put a little bit of CSS in the head so that the above the fold can render quickly, right? Or a separate file. Of course, we put in a separate file to adhere to separation of concerns. Beautiful. All right, chat, let me put up demo pro here. What is this? It's a rule about this. It's a property, nice, it's a property. And we'll do one more. How about that, the whole thing I just circled?

Declaration block, exactly. Remember rules are broken down into selectors and declaration blocks. Declaration blocks are broken up into declarations. Declarations are broken up into properties and values. Beautiful. Remember when we were just first learning this stuff? Remember how overwhelming that felt? And now y'all are just like select, selector, declaration block, declaration, properties, values. Come on now, let's go, let's go. I've seen you so long ago. It was like two weeks ago. It was like two weeks ago. All right. Remember, CSS is read from top to bottom. Stuff that comes below can be overwritten by stuff that comes above due to the what?

Due to the cascade. Nice. Nice. Alrighty. We had selecting by relationships. When you see the carrot, we're talking about what type of parent-child relationship. When we see the carrot, we're talking about a very specific parent-child relationship. Direct, exactly. We're talking about the paragraph that is directly within a section. So we have a paragraph, it's directly within the section. There's no other containing elements it's in between the section and the paragraph. Beautiful. Parent child without the caret, doesn't matter how deep the paragraph is, it can be inside an article, it can be inside of any other element, doesn't matter as long as there is a section with a P inside, that P will become the color red. Cool. Now, we had, and I changed this up a little bit.

When we have the plus sign, we're talking about something very specific. We're talking about the immediate sibling. Some people call that the adjacent sibling, right? Right? The adjacent sibling. So here, the only thing that'd be read would be hello YouTube, right? And it'd be hello YouTube because it has an immediately adjacent paragraph above it. Right? Cool. Now, there's one other thing that we hadn't really talked about yet, but some folks were asking. We have a general sibling selector. It is the tilde. The tilde is typically above like your caps lock or your tab key. And that tilde is a general sibling. So it doesn't have to be immediately adjacent, right?

It doesn't have to be the next one, right? So in this case, if we did P tilde P, we'd be selecting a paragraph, right? We have a span in the way. It doesn't matter. We also be selecting this paragraph. Hello, TikTok, right? So there are a few other wonderful things within CSS, right? Right? But it's still kind of follows all the same patterns here. So adjacent means immediately after, and then general doesn't matter if there's something that comes in between, you're still gonna be able to grab the paragraph that's down below. Cool. IDs and classes. IDs are unique identifiers and it was to target one thing and only one thing. When you give something an ID, it cannot get another ID. That ID name cannot be reused on any other element.

Classes, the way of targeting multiple elements at the same time. Each element can have as many classes as really as you want and you can reuse those classes across elements so you can target them all at the same time. Alrighty, folks. What is the specificity of this rule? Throw it in chat for me, specificity of this rule. Mwah. Mwah. Mwah. See, I've been setting you up. Class after class, class after class, I've given you this exact question, but I changed it up just ever so slightly. Nobody bothered to look what happened. Nobody bothered to look what happened. Uh oh, uh oh, uh oh, got, got. So we have inline style. What does inline style count for?

What does inline style count for? Throw one on there, throw one on there, throw one on the board, right? We got at least a thousand points for that inline style. Now, if you want to continue to count after the inline style, we'd have one ID, we'd have one class, and we'd have one tag. Now, the reason I show you this is just to know, as you eventually leave the bubble of 100 devs and you're on a team, don't ever do this. Don't ever do this unless you're writing HTML emails because nobody would look. None of you all looked. I didn't even look, so be careful. Don't use inline style. It's gonna add way too much to the cascade. You won't ever see it. Your coworkers won't see it and hope nobody you work with does it. You're like, I'm a baddie. I write bad code. I'll use inline style if I want.

You can't tell me nothing, Leon. All right, if you wanna be a baddie, be a baddie. It's up to you. Everyone's like, you circled the CSS. It's not fair. You said the rule, not the actual rendering in the DOM. True, that's true. All right, how about this one? How many points of specificity are we talking about? Everybody's looking at the, everybody's, every line, they're looking. All right, where is it at? Where is it at? All right, there's no tricks in here in the inline style. We do have a bang important, so we know that that's a one for us. We have one ID, we have one, two, three classes, all right?

And we have one tag, so we're at 1,131, nice. box model. Alrighty. And we talked a lot about the box model. I want to go ahead and do a box model practice. It's a little bit more tricky, right? A little bit more tricky than we've done in the past. So if you need the materials for today, you can download them in the follow along materials channel on Discord. and we're going to go ahead and open up. The box model practice we're going to. Why is this class moving so fast? Because we've covered all this stuff before. This is this is all review for us. If you're new here, we have 910 other classes that you can go back to and and watch this as we move through so we always start off with a little bit of space repetition. The first hour or so is review and seeing things from a different angle, but we slow down as we get to new stuff.

Oh, all righty. Yep. Estimation point 100 devs exactly if you want information. So let's go ahead and open up this box model practice. Index.html, there's also a CSS file. And if you open up the CSS file, there are four things to do. I'm gonna put eight minutes on the clock for this one to see if folks can get it done. I will put eight minutes on the clock. We'll go over it together and then we'll take our break. Let's put eight minutes on the clock. We'll go over it together and then we'll take our break. Alrighty. What do you need to do? You need to complete what's in the CSS file. Go for it.

You got this. Dig deep. Let me see if Spotify will come back on. I don't know why it wasn't working. Spotify's not working, we might not have music tonight. Yeah, it's crunked head. It might be tonight. Might be tonight. Why? I Cool. Can you move the clock? There you go. In case you need to see it. Ads are turned on because we're partnered. It's not something that like I control, like I don't run ads.

It's just when you're partnered, ads get run. If you're subbed, you have a gifted sub, you don't see them. But yeah. You should really only see them when you join though. Like you shouldn't be like getting stream cut up. Yeah, sorry there's no music. I gotta figure out, I don't know why it's not coming on. Maybe we could do, let's see. I'm going to try in the browser, got 4 minutes 45, 45 seconds left. I'm enjoying the quiet. All righty, the quiet makes it a lot easier to think. Is this fun like solving puzzles? I hope so, yeah. I have kids the quiet is great Yeah, I might need to try the app in the browser, but I might do that while we're taking the break Oh, we got some duns coming in nice nice I will get into freelancing in like maybe like a week or two, but our freelancing class is already on YouTube. So if you have somebody that's like really jumping into bit, definitely just go and watch that class maybe a little early.

All right. Maybe I shouldn't have done the eight minutes here. Supposed to come in with the dunzo's Can two of us freelance together, I mean you can but for the requirements of the class No, the reason being is that when you go into an interview you want to be super You want to be super clear that it's your work and your work alone So people get in trouble when they do like combined hundred hours projects or combined freelancing you want an interviewer to have no sniffs that you did not work on something by yourself. I'm signing a contract with a production studio to redesign the website. Hey, it's amazing, congrats. Power Rangers health puff, how do we do that? You gotta find them and then maybe use a color picker to find the actual color. Or sometimes, I guess you can probably even Google some of them. Ooh, more dons coming in. Mikey, we'll cover that in class. I'll give you contracts and all the stuff that you need. First time I finished before time was up. Hey, congrats, Silva. That's awesome. You can turn on wrapping, kidding?

There's a way to do it. Can't believe I never knew about Apple's color picker. It's pretty cool that it's built in, yeah. Those that are on Windows, you can definitely get one from the store. I think a new Linux on certain ones has it built into. I don't understand this exercise at all. No worries, we're gonna go over it together. And if you're new here, we've definitely done very similar things a couple of times beforehand. This one's a little odder, a little bit harder, a little bit more difficult than the ones we've done in the past. Scaler, hey, congrats. Hey, good luck, Riv. First interview, it's gonna go well. You got this. All right, folks, we've got about 39 seconds left. I didn't see what it was, but wrapping is a feature in VS Code.

If you open up your settings and just type wrap, it'll pop up and you can toggle it. All righty folks, 10 seconds, sorry with no music. It's even weird for me because I'm used to like listening to the music while y'all are working. I don't know why Spotify's giving me trouble. Today's a comedy of errors. All righty folks, come on back, come on back. Let's go over this together and then we'll take our break. So we'll go over this one together and then we'll stop for five minutes. Alrighty, come on back. Please give the H1 some padding. So let's go ahead and do that. H1, some padding on two sides and zero on other. So the cool thing about padding is that you can do like padding left, padding right, padding top, bottom, right, you can do that. And then you could also use the number system. So if you just put one value, like if we just did like five pixels, that would put five all the way around.

We can also repeat. So if we did like 10 pixels zero, what that's going to do is put 10 on the top, zero on the right, 10 on the bottom, and zero on the left, right? So we can take advantage of this to do two sides and zero on the others. Awesome. Margin on the sides with no padding. So we could do the same thing with margin, except we'll flip it. So we'll do, let's do zero, 10 pixels. So now, Padding will be on the top and bottom and margin will be on the left and the right. Cool. Remember it's clockwise, top, right, bottom, left. Alrighty. Typically when you have zero, you don't put the pixel value. You just leave it as zero. Yeah. If you did it backwards, sorry, this camera is the different way.

Top, right, bottom, left. That's so weird. Cause it's flipped. All righty, thin purple borders on sides without margin. All right, so we need to make sure, so we don't have margin on top and bottom, right? So what did you all do to get the border on top and bottom? Yeah, just do border top, border bottom. Yeah, so let's go ahead and do that. Border top, we'll do thin purple border. So let's just do two pixels, solid purple. Cool, and we'll do the same thing for border bottom. Two pixels, solid purple. Because right now, if we look on line four, there's no margin on zero. So on the top or bottom, so we put border on top and bottom, nice. Gold background, so let's do background.

And it has to be, the gold must be the exact color from the Hufflepuff Crest. So for me, I'm on a Mac, so I can do digital color meter. And when I open a digital color meter, I can just find a picture of the Hufflepuff Crest and grab the color. I see a bunch of them in chat. So if you're on Mac, digital color meter is built in. On Windows, there is one, people are saying like in power tools, that there are power toys, there's one. But you can just download one, Pixie, I think some people are mentioning, but I've never used it. So there are ones you could download for Windows, same thing for good new Linux. So for me, I'm gonna go, I think I already found an image of the Hufflepuff crest. So I'm just gonna open up my digital color meter and I'm gonna go right here. I mean, there's different shades, right? So I'm just gonna go where it's like pretty muted. All right. 214, 71, 171, 52. 214, 171.

Was it 52? I don't remember. Or 51. Yeah, 52. All right. Beautiful. And so that's the RGB values. And so shift command copy. You can copy it from there. Actually, I never do that. That's pretty cool. So we're gonna go ahead and do RGBA. And I'm gonna put these values in. And we'll put one, because we want it to be fully transparent. And let's open this up and see what we got.

Cool. So we got the, How do we reduce the width of the border on border-bottom, border-top? How do we reduce the width? Oh, it has to do with the size of the element. So like, why is it going to the full width of the page? Because right now, technically, this H1 extends for the whole width of the page. So you need some sort of width on this or some way of truncating it not being a full element, yeah? So you could have gotten to something called block. You could have got something into, Oh, look, it's all snowy and it comes late. And the funny thing is that like, we got like a white dotted shirt on a frosty. There you go. Leon got snapped. Like I'm, I'm Dano snapping away. All right. So it looks good to me.

We've got the borders on top and bottom. We got the gold. All right. That looks good. Let's let's take a look at these other ones. and then we'll take our break. All right, please give the H2 significant padding on the left and right. All right, so we'll go ahead and do padding. I remember top, top, right, bottom, left. There we go. We want it on the left and right. I'm just gonna do zero and then, it says significant, I'll do like 30 pixels. That'll put it on the left and right for us. And then we want a border on the left and right. but the red must be also the red from the Mighty Morphin Power Rangers logo.

Where do I think of this stuff? All right, so we're gonna do the same thing here, but we're gonna do border right, and we're gonna do, let's make it more visible, five pixels, solid red. But I'm just putting red as the placeholder. Don't freak out, it's all right. I'm gonna do border left, and we're gonna do, we'll do five pixels again, solid red, and then we gotta go find the red from the Mighty Morphins Power Rangers. And it's a gradient, right? The logo, yeah, exactly. The logo's a gradient, so give me some room here. All right, here's the Power Rangers logo, digital color meter. And so I said I can do command copy. Let's see if that works. I'm gonna copy this real quick, and then let's bring up the digital color meter again. All right. There we go. Hold on.

Let's see. Did it work? Nope. Command shift C. All right. Thank you. All right, command shift C, beautiful. Nice, all right, cool. Learned something new today. RGBA, remember the A's for that alpha channel, like how transparent is it? I'm just going to put one because I don't want to be transparent and then I'll copy this. Hey, how's it going? Thanks for swinging by again, hope your stream went well, welcome Raiders, how'd your stream go? Was it fun? What are we all working on?

So are you doing the, the, like the, uh, model challenge the other day? I gotta learn how to do that. I gotta, I gotta pay more attention to your stream. Uh, you were doing like a, like a tree the other day. I was like, I just wanted, I want that skill. I want to be able to like, just like think of a tree and then be able to like bring it to life. That was so cool. What are y'all doing today? It was good, did an art challenge. Cool, some character work. Okay, dope. The challenges are pretty cool. I gotta up my skills and swing by. Thanks for stopping by. We're in the middle of doing some CSS.

So we are running a 30 week software engineering bootcamp. We've spent the last month doing HTML and CSS. This is our last actual CSS class and then we're moving into JavaScript on Thursday. So welcome welcome a and different. Thank you for giving them a sub. I appreciate that Yeah, they are incredible it's one of my favorite streams on Twitch by far absolutely Thanks for swinging by again. All right, so we got our padding on The left and the right We got our border on the left and the right it has to have the red coloring from the Mighty Morphin Power Rangers, which we got and and then it has to have an orange background, right, orange background, and then the Roboto font. So we need font family, Roboto. Cool, I'm gonna put a default here of Sans Serif. This is a fallback, of course, And we don't actually have the font right now, right? Let's check. Do we have it in our HTML file? Nope, we don't have any fonts linked. So we have to go and get that font. Where can we go to get the font chat?

Google fonts. Cool. Let's do that. We'll go ahead and do fonts.google.com. We have source stands pro enabled here. Let's go ahead and do the Roboto and let's just select the normal, like 400. Boom, there we go. And she gives us the link over here. Boom, we got the link. Awesome. Copy it, put it in our head. We put it before our CSS sheet so our CSS can use it. And I think we're good. I think we should be able to have the padding, the border, the background, and the font. Let's go ahead and just open this to make sure.

Put a good refresh. All right, it's looking good. I know the, I'm gonna actually make it blow up a little bit. We can see that the awful hideous red on the gradient of the Power Rangers logo. Can we import it into CSS? You can do imports, yeah. All right. We got two more and then we'll take our lovely break. Please give the section a thick magenta border on the left. 100 pixels of padding on the top and bottom, 200 pixels of margin on every side without padding our border. These got tricky. All right, so we're gonna go ahead and do section And border left. And then it said thick, right? Yeah, so let's go ahead and do 20 pixels, solid magenta. And then 100 pixels of padding on the top and bottom.

So we'll just use our shortcut that we just saw. 100 pixels, zero, so it'll be on the top and bottom, nothing on the left or right, and margin on every side without padding or border. So there's border on the top, there's nothing on the right, there's padding on the bottom. So the only thing we have to worry about is margin on the right, right? So we could do margin right, and that would be good enough, we could put our padding there. We could also do the shortcut, right? We know that it's top right bottom left right and so we could go out and do 0 200 pixels 0 0 right we could do that we could live our life that way if we wanted to we're baddies we write bad code although it's not bad I think it's just shortcut right we do that looks good to me I think We got everything. Let's do this last one. All right. Make the spans have thin Dodger blue borders. So let's go ahead and do border. Two pixels, solid Dodger blue. Cool. Y'all didn't know that, huh? I did mention that in class, I think before.

There is a Dodger blue built in. Fun fact, the Dodger blue is different than like the current Dodgers color because the Dodgers blue was introduced into the specification in like the 80s. Like late 80s, there's like, like when they first figured out like hex values for it, it was like in the 80s, like before like we were even really talking about CSS or HTML, right? We were talking like hex values for this stuff, like back in the 80s. And so I think when they eventually brought it into the specification, they kept like that old hex value from the 80s. And so yeah, it's a different, technically different color than it is like now. I think it's pretty cool. No. Do that color thing again, the color picker you mean? I'm just opening the color picker that's built into Mac. you'd have to use the one with your system or download one if you're on like Windows or you can do Linux. All right, so Dodger Blue. Padding on the bottom and right. So bottom and right. So bottom and right would be zero on the top.

Let's do 10 pixels on the right, 10 pixels on the bottom, and zero on the left. Top, right, bottom, left. Yes, I do this every time You're not live I'm still doing this Every time same. Thanks. I'm not a load. All right, and then a light red background Light There's no light red what did you use for light red light red is pink Salmon, because in my brain, I'm like, wait a minute, it's not built in. Whatever shall I do? Like light red does not exist. Oh no. I'm like, I'm going to have to figure out an RGB value. I'm going to have to figure out a hexadecimal value. Josh is like, use pink. I didn't even think about it. Even when I wrote this, I didn't think about pink. I was thinking hexadecimal value.

Oh, this is fun, let's see, beautiful, that looks hideous, but that's kind of our style, the nuns are proud, exactly, alright, it's time to take a break, 5 minutes on the clock, If you're new around here, we like to be healthy, right? Like to be healthy, we like to take our breaks. If you're able to, please get up, move around, stretch, hydrate, and we'll be back in five. All right, I'm gonna start the timer. I might actually switch to the Be Right back screen just while I do something extra here, but we'll be back in five. you you you You you Thank you for the gift of subs, I appreciate you. Thank you. Dog where is there a dog? I don't see no dog. There's a dog. What? All right, let's come on back come on back All righty So I guess I didn't play the playlist. I guess it just played that one song Yeah, he had one song and then Spotify clicked out All righty, let's keep it moving folks We'll eventually have the the Moshi and Simba cam set back up Moshi was kind of sitting there staring at me so Bring the dog back. We don't want we don't want stream. We don't want to learn we want dogs All righty.

Let's talk about some responsiveness. Let's play around with some Ms and rems. Let's play around with some media queries. A lot of folks still had some questions. I wanted to make sure we had like two more bits of practice with those things before we moved on to JavaScript. Of course, when do we start whispering? Oh All right Well Responsiveness let's get into it back in the day Folks didn't care about screen size All right, they didn't care about screen size They'll make something one size and it didn't matter how it looked on any other size screen Because they didn't really have to worry about other screens and then something happened What changed the world? When it came to us having to care about different size screens Yes Steve Jobs worked on to that stage and introduced the iPhone and the world was never the same Of course, there are mobile phones before then but things really start to get moving once that happened mobile phones exploded. We needed our content to not only look good on a desktop monitor, but now also laptops and then phones and then tablets. And so we couldn't just have a fixed with site. It needed to be responsive. Now the core underpinning of a site being responsive is three things, fluidity, elasticity, and content decisions. Fluidity kind of comes cheaper. It comes a little bit easier. If you're using things like percentages on your width or different layout or different box model s type things like flex box You probably get that fluidity built in as long as you're using something like flex or using something percentages You have that fluidity meaning that as your size gets bigger or smaller.

It kind of is responding It's kind of looking okay, and that fluidity helps us in between our breakpoints right in between the things that we care about Also, we have this idea of elasticity, right? Elasticity is this idea that we want, specifically at the beginning, our fonts to be sized in things like rems and ems. So all ems and rems are our responsive units of measure, and we use them a lot when we come to things like text, right, right? And so here you can see this idea that instead of putting a font size on my paragraph, I always forget that I still have this in here. I always forget that it's in here. Dominoes, cut me a check. We have the font size, right, in one M, and we have a font size in one rem. People get hung up on this, but all an M is doing, all an M is doing is looking for its closest parent's font size. So if we're at this paragraph, right? We're looking for the closest parent with a font size. The closest parent to this paragraph is a section and we can see that this section has a font size of 20 pixels. So the paragraph at 1M is really what? Put the answer in chat for me, please, not dominoes. It's actually 20 pixels, exactly. One M in this instance is equal to 20 pixels because the paragraph got its base from its parent section.

And that's how Ms work. Ms will keep going up the ancestor chain until it finds a parent with a font size and that's what it bases itself on. Now, this leads to a very specific problem though. It's a problem that can happen when you work with others, or maybe even yourself if you're lucky. What can happen that would hurt us when it comes to M's? Yep, Rusty, it does have to be a parent. Yeah, if somebody goes ahead and adds a different parent, maybe they put like this paragraph inside of an article, right, some motherfucker comes in and changes something exactly. They put this paragraph and say like an article. Well, guess what? If that article also has a font size, it'll never, right, it'll never go, right, it'll never go to the section. It'll grab its font size from the article, right? Now, sometimes this is inherited because the browsers have their own default size, but let's stay off of that for a second, right? The idea here being that this paragraph will always look for the immediate child. And so if somebody else in our team comes along, sorry, immediate parent. If somebody else comes along and changes that parent with a different font size, well now our Ms are different values, right?

And so the beautiful thing here is that we have a solution to this. We don't have to worry about that anymore because we have rems. And rems always look at what? No matter what, they don't look at their parent, they look at what? Yeah, they look at the HTML element. They look at the root element, which is the HTML element, and that's it. You don't have to worry about parents. They don't have to worry about anything. Um, somebody in their, their, their, uh, this was Brandon with their Twitch master, they, they subscribed and said, yeah, buddy got my SAS to compile. Congrats. Glad you got your SAS to compile. That's hilarious. Thank you. Thank you for the sub. When we're doing REMS, right, when we're doing REMS, it always looks at the HTML element, right?

So we don't have to worry about somebody else coming in, putting a different parent, a different font size. It looks at the root HTML. Cool. Let's do some practice with this. This can be a tricky, be a tricky thing to work through. So let's get some practice in. And in our starter code from today, remember if you always need the starter code, If you're new here, you can join our discord, leonnoel.com slash discord, exclamation point discord in chat. In our discord, we have a follow along materials channel. Once you agree to our rules, you'll see the channel and you can download the zip for each class. So here we have the rem practice folder. So index.html, style.css. If you look at the CSS, underneath the additional styles, There are some things I want you to do, and you should do them in order, please. All right, I'm gonna put eight minutes on the clock for this one again. Eight minutes on the clock. Give this the good old 100 devs try.

And then we'll go over it together. Morning flow. This is in the REM practice. The CSS scroll down to additional styles. I like no music. You can always mute the screen, mute the channel until the timer goes off. That's why I keep the timer off. A lot of folks do just like mute the stream while they're doing the work and then turn it back on once they see the timer go to zero. I will never start until the timer goes to zero. This is a Stream Beats by Harris Heller. It's all free royalty music, all lo-fi. Well, this one's all lo-fi. I love the voice. Have you played the new Pokemon yet? No, but I think tomorrow I'm gonna do it on stream.

I really have to test. I don't know why certain stuff's not working after I moved my desk. And so I'll probably do like office hours where I'll just answer questions while I test everything And then I'll probably just play it on stream just to test the microphones and the new lighting and all that stuff Because this was this was a struggle to get it live for tonight, and I don't want that for Thursday So I'll probably go live like tonight just messing around with stuff again, and then I'll go live again probably tomorrow Just to dial everything in Turn it on and off again. I tried. It didn't work. Do I use Emmet? I mean, just what's built in, but not really. The go live channel will actually always snitch on me. So as soon as I go live, it'll always go live. So you'll see it in there, but I probably won't like at everyone. Cause I just I just wanna test stuff. You wanna come hang out? Sure, come hang out. But I just need to test everything. What is code?

I'm very confused. No worries. We're gonna go over it together. This is in the REM practice in the CSS file at the bottom. You just follow along the instructions in the additional style. Probably do some of the layouts on Sunday. Yeah. Now I didn't bet on the Super Bowl. What should I do with my Raspberry Pi? That's a good question. I like putting um Key wicks on it and you can have a fully offline backups of like wikipedia con academy a bunch of really cool stuff Piehole to block servers. That's a good one to block ads. That's a good one, too Kiwix is the backup, like Kiwi, Kiwix. I actually have a whole article, like a whole blog post on my blog about setting up a computer lab using raspberry pies. Pretty cool.

It's a lot of fun. I thought we were talking about actual pie. What did you think about Snoop Dogg grip walking? I loved it. Do your thing. Oh Some folks coming in done. That's cool. We got three minutes 22 seconds left But need some help on that one no way we're gonna go over it together There's more folks coming in done nice. Ooh, smoke's coming in down, I love it. How do you feel about sports game result? I didn't even watch it. I'm glad sports ball team one Did watch the halftime show though, that was that was a throwback and a half All right My grandma hated it What's your rarest pokemon card I don't have any like super rare cards. I mean I got some rare ones, but not like super rare Uh, mainly just like older rare cards from decks. I like that were competitive decks. So there was like a competitive deck um from the years that I was playing I had that deck and I had all the cards in it, so Nothing like super expensive couple hundred dollar cards, but yeah, I do have A first edition like Bulbasaur that I really that's like my favorite I guess to be like super but it's not like super high-graded or anything Minute left folks TCG online stream a maybe I've always wanted to do like Leon after dark and do some stuff I found I don't like streaming video games so that was weird I do have well, I think my cousin actually has my ancient view 30 seconds folks I'm doing everything wrong.

It's all right. We'll get it right together. Three. I don't just know, like, I just don't like, I don't know. It's just not anything like to talk about. I don't really overshare in my real life. And so if I'm not teaching, I'm kind of like, don't know what to talk about the whole game. And so it was kind of weird. I've done a few of them, but this channel actually started as a Pokemon go stream for folks that didn't know that. Uh, I was the first person to stream Pokemon go outside. And so there's a couple of thousand followers on this channel that, uh, that are really surprised at the coding content and it's not me catching Pokemon outside. Alrighty folks come on back. Let's go over this together Alrighty Alrighty Please make some text 12 pixels more text 16 pixels and last text 27 pixels. So if you looked in the HTML, there's a section that has three paragraphs with some lorem ipsum in there. All right.

Thank you for everyone that told me about the lorem 10, lorem 15. Like when you type out lorem, you can put a number after it, which is pretty cool. Like if you do lorem, all right, if you do lorem, and you do like 10, it'll give you the 10 words. It's pretty neat. So instead of having like the full big paragraph, you can control the, uh, the, the amount of text. I did not know that Leon study learning. I do look, here's my thing. If you should, if you teach, you should expect to learn. You should never teach without expecting to learn the best thing I ever did to help my learning was start to teach others. And that's why I tell you all to do that on discord. The day that you have to explain the things that you're doing and not just do them, it just solidifies all these connections in your brain. So if you're like, Leon, what's something I can do to give myself an edge? Help people on Discord. It just, the neural connections just zoop, they get sucked in and you'll never forget it. So yeah.

All right, so we see that they have some texts, whoop, sorry, there's a class with some texts, a class of more text and a class of last text. They're just paragraphs with some text in them. All right. Please make some text 12 pixels. We'll do some text. And we'll go ahead and give it a font size of 12 pixels. More text we're gonna do at 16. Cool. Font size 16 pixels. And then the last one is last text. And we want that at 27 pixels. 27 pixels, cool. All right, so we've gone ahead and done that. We've given them their actual font sizes. I'm just gonna open this just so that we have it open and we can see it as we need it.

All right, gonna open up the inspector too just to have it open if we need it. All right. Some text, more text, last text. What you're noticing here, some people have asked about this. I don't think we're going to cover it more when we get to JavaScript, but this is called camel casing, right? There are many different types of casing and this is called camel casing. The first word is lowercase and every other word is capitalized. In classes, you can't use spaces. Why can't you use spaces when it comes to classes? because it would just be another class. Like CSS will just recognize that as a different class that you're applying on that paragraph. It'd be two different classes if you put a space. So to denote multi-word classes, I use camel case. And I'm gonna use camel case through JavaScript, through Node, it's kind of the casing that I use always, unless I can't. This is also really dependent on like like what language you're using.

Some languages really value hyphenated. When you join a team or a company, they're gonna have like the style guide for how they want you to name your variables and your classes and all that fun stuff. Cool. Let's look at this next one. Please double the font size of some text, more text and last text still using pixels. I'm just gonna go ahead and copy this real quick and I'm gonna double the size. Now to double the size, what do I have to do right now? What do I have to do to double the size right now? Quick maths. Exactly. Gotta do some quick maths. 12 plus 12, 24, 16 plus 16, 31. Thank you for the engagement, 32. Y'all got got boosted my numbers because there's some of y'all and I see you. I, I go back and I look at the, the, the amount of people that, that, that comment.

And there are some people that only comment when I do something wrong, so you got got I'm on you I need those engagement numbers up Second try And last text 27 plus 27 54 All right, let's uh, let's go back to the page and refresh just to make sure it doubled Yep, so it did double in size. Beautiful. Alrighty. Please set a base font size on Heyo and make some text, more text, and last text those sizes, but use Ms instead of pixels. So if you notice, they are all inside of a section called Heyo, right? All right, I'm gonna set it at AO. And so I'm gonna set a base font size on AO. And I'm gonna do font size, and I'm just gonna do 10 pixels. Cool. All right, 10 pixels. And why would I use 10 pixels on AO? Why would I do that? Easy maths, exactly. Easy maths. Alrighty.

So, base size, font size of 10 pixels, and then we can go ahead and do, I'm just gonna copy this and I'm gonna overwrite it. So I'm going to copy it, and I want them to be 12 pixels. So some text, if I want it to be 12 pixels, would have to be how many M's? How many M's for 12 pixels? Yeah, 1.2. Remember, because an M is going to look at its parent's container, right? So it's going to look at Heyo, and it's going to base its font size off of 10. So if we want some text to be 12, it's going to be 1.2 M's, right? cool more text if we're going to stick to this m's we'll make this 1.6 m's right 1.6 m's that would give us 16 pixels cool and then last text at 27 would be 2.7 m's All right, so I think that should be the base. Let's go ahead and take a look. This it should they should all shrink in half. Looks good to me. Glad you think so for show. All right, so we have all of them using Ms now. The base font size is 10 pixels great Now I want you to double the size Of some text more text and last text, but you can only make one change.

What do you change? I only make one change. What do you change? Yeah, we make hayo 20 pixels so if we make hayo 20 pixels That means every M is now double the size, right? No matter what the M's were, they're now double the size if they're getting their base from Heyo. Cause Heyo went from 10, now it's at 20. So let's save it. And we can see that they doubled in size, right? Now this right here shows you why M's, right? Right, shows you why Ms can be so tricky, right? Because somewhere down in the cascade, I changed Heyo from 10 to 20, right? And now all my texts is double the size, right? And so the idea being here is that if you are working with somebody else that changed the base font size, or somebody throws a different container, right? Boom, it could double. and it can double further down the cascade.

You could have a thousand lines of CSS in between this code, whoop, this code and this change, and you'd be like, where the heck are stuff doubling in size from? Cool. Alrighty. Please wrap last text in a new section with the class of, uh-oh. See, I write these sometimes like a week or two it ahead and I forget the stuff that I that I type out and then it makes me laugh the Power Rangers one maybe laugh like why what was I thinking all right please wrap last text in a new section with the class of uh-oh Honestly, uh-oh with an H sounds more realistic. All right. Last text in a new section with the class of uh-oh. So let's go over here. Last text. We're going to wrap this in a section with the class of uh-oh. And so we're going to put this paragraph in there. Cool. So now last text is inside of a section with the class of uh-oh. All right. Give it a base font size of 40 pixels.

So I'm going to go to uh-oh and I'm going to give it a font size of 40 pixels. All right, so I gave uh-oh a font size of 40 pixels. Let's come back and refresh. Uh-oh, uh-oh, uh-oh, what happened? What happened before I Thanos snap away? What happened? I changed the parent exactly. I changed the parent. the paragraph of last text, right? Last text, last text has a font size of 2.7 Ms, right? So it's a responsive unit of measure. It was getting its base font size from Heyo, but now that it's inside of uh-oh, and uh-oh is the first parent, it gets its base font size from uh-oh, not from hey-yo. Right? If we look, last text is going to try and get its rem value, or sorry, its m value from uh-oh. It's not going to get its m value from heyo anymore.

Heyo is a parent further up. It always looks for the first parent. So since last text is inside of uh-oh, it stops at uh-oh. It gets its 40 pixels and not the 20 from heyo. And so we've now seen two different ways that you can get got when using Ms, right? You could have someone that doubles a font size further down in the cascade. You could have someone that introduces a new containing section with a different font size. And so to get around all of these troubles, you got got, thank you. And congrats Speedwagon, glad you're here. If you can get rid of all these troubles, the cascade troubles, the containing troubles by using rems, exactly. So we can fix our doubling of last text by converting to rems, right? By converting to rems. So we can say, let's use HTML element And let's go ahead and set a base font size here. 62.5%, right? And on last text, I'm gonna change it to font size 2.7 rem.

Let's see what this does and we'll come back. Let's save. All right, doubling went away. Doubling went away. All right, doubling went away. And the doubling from Heyo went away as well. All right, so we wiped the slate clean. Now, a lot of folks are saying, what's the 62.5? What is the default font size that comes from most browsers? Remember, if you're not using reset.css or normalized, right, there may be a base font size being attributed to the HTML element. And the base size, yes, is 16. So if you do 62.5 times 16, Quick maths, you get 10 pixels, right? So this is the exact same thing as saying 10 pixels. Cause it's just taking that default font size. Now, why would I go through that trouble, right?

Of not just saying 10 pixels. Leon, why are you making me do math? I don't like math. Why are we doing math? He said, Leon, you said you don't need math to be a web developer. Accessibility, exactly. Some individuals that maybe may have a visual impairment where they need stuff to be bigger, they actually will use a program or even built into certain browsers, the ability to set their base font size from 16 to 32. Right? If you had hard coded this to 10 pixels, it would wipe their requested font size off the map. It would force it down to 10 pixels. But let's say their base font size, right, was 32. Well, then you do 62.5 times 32 and now you're at 20, right? And so the idea here is that you can do folks using accessibility devices a favor by not hard coding this, but just taking a percentage of their requested font size. And so typically you're gonna see that be at 16 pixels for most individuals, but if they have changed it, you won't actually affect them and you can still have your rems and eat your cake too. Cool.

Light bulb just went off, finally got it. Thank you. Hey, I'm glad. That's why I wanted to take some time to practice some trickier box model, to practice some rem and ems, and then we're going to practice our media queries. We were a little late on the last let's be a little early on this break. So let's go ahead and take a five minute break, right? Five minute break. If you're able, please get up, move around, walk around, let your eyes focus on something that's on your screen. We're gonna come back, we're gonna do another practice with media queries, and then we're gonna look at some Flexbox and we'll call the class. All right, folks, take your five minutes. And if you need any of this material, I'll always share my solutions after class. So don't stress if you weren't able to type along, that's okay, we'll get there. All right, folks, take your five minutes, bring the toons back. You You You I gotta go make lasagna. See you all on the replay a sprocket.

Hope your lasagna turns out good. Why do you wear your headphones during classes so I can hear the music and the alerts. Also, I have a really weird thing where my company used to be headphones in, don't talk to me. One headphone off, you can approach me, but make it quick. Headphones off, come talk to me. And so the odd thing that wound up happening because of that pattern is I can't do deep work without headphones in. So a lot of times I'll be sitting with headphones in, but they're not playing anything. They're not plugged in. I just need them in to be able to like actually focus Yeah Here's soccer team man you of course dc or marvel dc all day Not based on I mean if we're talking like actual comics I love vertigo more than anything but All righty, come on back, come on back. Uh-oh, I started something in the comments. All righty, come on back, let me chill the music here. Being in the live streams is way more lit than watching them afterwards. Hey, glad you're here with us live. Do it live. All right, we have one other big thing I want to do before we get to a little bit of Flexbox and then do our raid.

And that's what I want to talk about is the last piece of the responsiveness puzzle, which is media queries. So, we talked about fluidity, talked about elasticity, maybe hopefully now with a little bit more practice with the Ms and Rems, you can kind of see how you can get got and the way you can get around being got by using Rems. The last bit is the content decisions, right? Now, the content decisions are just how we decide what is shown at different screen sizes. So we talked about Boston.com. When you are on mobile, Boston.com doesn't need to show you this lovely like a side or list of stuff happening. if you're on mobile, you're probably in Boston on the T, you're probably commuting, and you probably just want bangers, right? Bangers only. You want the news, you want the weather, and you want sports. That's all you probably care about. So they make it really easy to see the news, weather, and sports on mobile, right? And they make decisions not to show certain things that you might have even on tablet, laptop, or desktop. So the last piece of this puzzle are the content decisions you make when you are showing or making your sites responsive. And we make those content decisions by doing what? Media queries.

Nice. Cool. So media queries are a way of saying, hey, while the screen is this size, these rules are in effect. The media queries don't give any extra specificity. They just say, hey, we want to try these rules in the cascade at this time. Right? And so before you might've seen screen, there's print, there's a bunch of them. All, I like to just think of these as like zero. Like you're just saying, hey, like we're starting at zero, but really it's different media queries for different types of mediums. So you could have a media query for all different types of devices. You could have media queries just for like print, like when you're gonna print something out. You could have media queries for speech, like things that are gonna be read with a screen reader. And so you'll see these kinds of different values at the beginning. And then right here, I'm saying max width of 600 pixels. So between like zero and 600 pixels, our H1 would be blue, right?

After 600 pixels, the H1 would no longer be blue, right? Cool. So let's go ahead and get some media query practice. So in our materials for today, close digital color meter here, for materials today, if you're new, welcome. We're running a 30 week software engineering bootcamp. You can always get our materials on our Discord, exclamation point Discord in chat. In the follow along materials channel, after you agree to the rules, you'll find them. We're about to open the media query practice here. I'm gonna open up the index.html and the style.css. If you're watching this on YouTube, hey YouTube, hope you're doing well. Go ahead and like, comment and subscribe, please. Thank you, thank you. Alrighty, so if you scroll down to the CSS at the bottom in the additional styles, right? In the additional styles, future Leon Big Brain, exactly. In the additional styles, you have some things I would like for you to do.

I would like for you to, on mobile, make all the sections stack. On tablet, make the sections in main stack. So if you notice, there is a main area. Yep. And then on laptop and then on larger screen. So do your best. I'm gonna put eight minutes on the timer again for this one and we'll go over it together. Eight minutes. Cool. I've added, good luck. This is in the media query practice. Additional styles up below. I've added. You'll notice that the layout's already done for you. You don't have to do the layout.

It's just the media queries. I don't think we've done this. Yeah, we've only done a few media queries. We never really pushed ourself with these. Rough numbers for different screen sizes are fine. Yep, you can use the inspect tool. I did I did a peek at that once to get different screen sizes if you want Dragon, eventually you can use rems and ems even in media queries too. Good question. I think I'm just gonna show pixels just for learning sake but yeah, you could get the M's and rems there, too Yeah, well it's felt like water today What do you mean by make it all stack meaning I want them all on top of each other not sitting next to each other Uh, Blinky, make sure you've, uh, make sure you've unzipped the folder, you know, unzipped to get the files out. Sometimes if you just like open it, it'll open, but you need to make sure it's unzipped Zero, that's all right. We got the catch up crew on discord. So if you've missed some past classes, when you first learned about media queries and you need to catch up, you can definitely do that. Come on, let's go in for it. Okay. We'll go over it together.

A lot of this is also like phrasing, so don't let the phrasing get you hung up. There are some different best practices for picking different whiffs. Two styles of thought are one, you could actually just look up the most common whiffs. That's kind of like the old school way of doing it. Some folks like to take the size of their layout, shrink it to looks bad, and that's their media query. Both ways are fine. Ms and rems can pull from the base font size that the user sets. So if a user sets a bigger base font size and you're using Ms or rems, it could actually respond to that base font size and help with accessibility. So some folks that might have a visual impairment might set their text to be double the size and then your rems would know how to respond. We'll go over them together. Crysis, you can actually use them for everything, honestly. some folks coming in done quick Wow Impressive Yeah, exactly if you're if you're stuck go to mdn look at media queries look how they do it You don't have to sit here start digging start start putting carry some bolts and some logs folks fire up the mdn It means I have a plugin called Open in Browser. If you go to this little icon here and you click search for Open in Browser, you install it and then you'll be able to right click like I do, but only in the HTML, doesn't work in the CSS. Oh man, easy ban. Why do people always ask if I use Emmet is that like on bingo or something people playing bingo?

People ask it all the time. All the time. Is it on bingo? It took me until like halfway through the last cohort to realize that people keep asking the same questions Because it's in bingo for them Is Emmett bad no use it if you want to when folks first start I don't like them to use like built-in stuff I like them to get used to it because you're not always going to have it and when you go into interviews There's nothing worse than relying on Emmett and not knowing how to do like basic tags, right? So you didn't happen I was like my students to start off for the first couple weeks not using any helpers and then yeah You can use stuff that speeds up your process later on I said we're gonna go over in a second When's the merch drop We're working on like better merch than we've had last time and so it'll be coming soon A lot of folks seem to want it. So we'll probably do a few raffles here and there but check your check your Open year your newsletter emails. That's be the where the next merch comes from Can we get a trough of sorrow shirt that actually pretty fun, that's a good idea All right, 20 seconds folks. Is there ever a use for M of REM? It's a preference, right? Some folks like Ms. They like the flexibility of being able to change based on the container size. You just have to have a team and yourself that agrees that that's what you want to do. Fox! Newsletter. All right, folks, come on back, come on back.

Let me chill the music here. All right. Come on back, let's do this together. All right, on mobile, please make all the sections stack. So I'm a baddie, I'm writing some bad code. I'm just gonna pick a size for now that I think most mobile phones would be around, right? So I'm going to create a media query at media. I'm going to say all, and let's just say a max width of 500, right? Max width of 500 pixels. And if we're below 500 pixels, I know that I'm on mobile, right? I'm on mobile, right? And I know I'm on mobile, and what could I do to make everything stack? What could I do? Yeah, nice. Cool, I could just make them all width of 100%, right?

So the cool thing here is that when I go ahead, I can target all of them. I can just say, make them all 100%. So if we look there are sections inside of main and there are sections inside of bottom But bottom itself is a section. So i'm going to be a little bit more specific here I'm going to say the sections inside of main And the sections inside of bottom they are going to be width of 100. So let's come up here Let's do main section And then I can do the comma to select two different things at the same time We're going to do section main section and then we'll do bottom section, and I'll give them a width of 100%. Cool. Nice. Let's go ahead and open this in the browser. So here's our normal layout. I'm gonna open up the inspector just to make it a little bit easier for me to resize. And when I have the inspector open, you're going to get this lovely, like little note here of what the actual screen size is. All right. So if I go ahead and I start shrinking it, you can see that we're at 600, 550, and then boom, we hit that 500 and we see everything stack. And the reason why we would stack, right, is because we have unlimited what? We have unlimited what?

Yeah, we have unlimited scrolling space, right? We have unlimited scrolling space. So on mobile, one of the most common like decisions you'll make is just, hey, let's stack everything because we might not have like vertical, sorry, horizontal space. We have pretty much unlimited vertical space to scroll. So you could stack everything on mobile. So a cool thing that's built into Chrome is this little icon right here. You can see it, it looks like a phone and a tablet. If you go ahead and click on that, it'll actually give you the dimensions of pretty much every normal, like every popular phone or most of the popular ones and a lot of popular tablets, right? So right now I have it on iPhone 12 Pro and you can see the width is 390 and so everything is stacked, right? Everything is stacked. If I go to, let's do iPad because I know iPad is 768, I believe, or I guess it's a little bit different now. You can see that when it's on iPad and it's 820, right? And it's 820, that stacking is gone, all right? So I'm able to test right in here and see, all right, iPad, not stacked. iPhone, stacked.

All right, it's pretty neat. Now, something interesting. I just want to do something real quick. In my HTML, I'm going to get rid of this line seven. I just want to delete this real quick. I want to save. I want to come back and refresh. What did you notice? What just happened? Anybody notice? I did something very quick here. I got rid of that line. I came back and I refreshed and it's not working anymore. It broke, right? It broke.

You need that line if you are testing on actual mobile devices. This is something that a couple folks have figured out and I just wanna show it. If you do not have this line that I gave you to put in your template, let me bring it back. Content with device with, right? If you don't have this line and you're testing on mobile, your media queries just won't work, right? That's because there are two different settings for your media queries. There is max width and there is max device width. Max device width means like mobile phones, right? It means like actual devices. If you just have max width, That's gonna help you with like resizing your screen in the browser, like on your desktop, but it won't actually help you with devices. So you could theoretically have a set of media queries for MaxWidth and then copy them and have a set of media queries for MaxDeviceWidth. But you don't need to have two separate sets of media queries if you just have this viewport. So for folks that ran into that, that's why. We're forcing the whiff to be the device with which means we don't have to have like special media queries to handle it cool so Normal media query. We're using max with Normal media query we have our viewport device with if we go back and refresh we see everything that's working Okay, everything's working Why all and not screen?

They're just different settings. All means everything. It can mean that these media queries are gonna work on screens, it's gonna work when you print stuff out, it's gonna work when you're using screen readers. But sometimes you want, do you ever like go to print something and it looks different when you print it out than what was on the page? Like the ads are gone, or like the ads are gone, the header is gone, it's just like the directions are being printed out or something? Like, oh shit, I just showed my age there. All the OGs that use MapQuest. If you were an OG, you put Matt, just just put it, just put it, put an M in chat for me if you're an OG and use MapQuest. All right. So if you an OG and you use MapQuest, MapQuest was like before, like Waze or like the like, like Google Maps, we would we would search for maps online on MapQuest, like directions on MapQuest. and then you'd print out your directions for MapQuest, right? So the cool thing is you can actually have a media query that respects that, and you say print. Now this media query will only apply to like when you're printing stuff. So it's pretty neat. Like you can have stuff that works for screens.

You can have stuff that works for printing and stuff that works for screen readers, right? And so it's just different things that you can use there. So I'm just gonna use all going forward just to cover all of our bases. And yeah, anything below 500 pixels or up to 500 pixels is now a width of 100%. Beautiful. On tablet, please make the sections in main stack. So I don't want, I don't want the bottom sections to stack. I just want the, I just want the sections in main to stack. How can I do that? I definitely want to need another media query, right? I'm going to say all and let's do on tablet. but we saw that was 820. So let's do max width, 820. Or let's just give us a little bit of room here. Maybe some tablets are slightly bigger.

Let's do 850 pixels, beautiful. And then yeah, people got it. Main section, width, 100%. Now, the cool thing that's gonna happen here is that let's say we start with our screen real big, right? Right, let's start with our screen real big, right? As we make it smaller and we hit below the 850 mark, we're gonna see that the main sections will stack. Then once we get smaller, like once we get below 500, we'll see the main sections and the bottom sections stack. Cool, let's see what happens here. Now the cool thing is we're saying and max width, right? We're saying and max width, so we're saying up to this. So that means we're gonna have like this nice cushion between 500 and 850 without having to like do min and max. Let's just see what happens here. I'm gonna just do the old school way here of making our windows smaller. So we're at 860 here and nothing happened. Oh no, nothing happened.

Why did nothing happen? Let's refresh. There we go. I didn't refresh, right? I saved, but I didn't refresh. So let's go. We hit our media query, right at that 850, boom. We can see that the main is stacking and it's gonna stay stacked because we said up to, we said max 850. So we're good. Anything below 850, this should work. And then once we get below 500, boom, that other media query is in play, right? Other media query is in play. And now everything stacks. Everything stacks. So above 500, we're still in that max of 850.

So main is stacking, we go past the 800, boom. We see nothing is stacking. So you don't need minimax, you don't. Some people prefer it, it's a preference. You can do this kind of stacking. You could do it the other way with min as well. It's kind of a preference. And so play around with it. Try doing all max, try doing all mins, try doing min and maxes, right? All right, we got two more here though. On laptop, please keep the normal layout, but everything should be light green. Keep the normal layout, but everything should be light green. So I'm gonna say anything above 850 is our laptop, right? We said 850 is our tablet. So I want everything above 850, right?

To be light green. What could I do to say everything above 850? Remember, I'm a baddy, I'm writing bad code. This might not be exactly how you do in production. I'm trying to show you all the different stuff here. We could do the min width, right? So let's go ahead and try it. Let's go ahead and do at media, all, and, and then we get to say, say min width. Cool. And let's go ahead and say, let's target, let's target everything. So we'll target main and we'll target bottom and we'll make them background like green. Cool. Let's see where we're at folks. Could have done asterisks. Yeah, we could have done asterisks.

All right. So we're at I want to save, let's refresh, so I'm not seeing anything, I'm below, I don't see any colors happening, nothing's really happening here, we should be seeing some light green, Let's take a look at this. Why am I not seeing any light green? Oh, some people got it, some people got it. Oh, I'm so happy, I'm so happy. Some people got it. Hold on, you ready? I targeted main and bottom. Let's go look at main and bottom real quick. I'm so happy. Oh, this makes me so happy. Let's go. Turn up. Let's look at this. All right, main and bottom, right?

That's what I just put the color on. I put the color on main and bottom. Let's look at the inspector. Let's look at main. I know it's hard to see, but if you look in that top left corner, what is it saying? It's saying 905 and what? 905 and zero. And then let's look at bottom. It's saying the same thing, 905 and zero. But if we look at the sections inside, we can see that those are 300. What happened? Let's go back and look at our CSS. What happened? What happened? Oh boy.

So since that content was floated, right? Since that, I'm never using floats again. Since that content is floated, main and bottom, once the content floated, collapsed, right? So if main and bottom are collapsed, are we going to see any color come through? No, there's no way we'll see color because main and bottom have collapsed, right? If main was floated and collapsed, you're not going to see anything. So how do we fix this? People are already saying it. Yeah, let's go. We have ClearFix up here. We have the ClearFix class, so let's go ahead and on main, let's give it the class of ClearFix. And on bottom, let's give it the class of clearfix as well. Boom. So now, now that main and section have clearfix, they shouldn't collapse anymore. And if they're not collapsing, then we should see some color.

Boom. Let's go, turn up. All right, so if we go below the 850, we get our normal stacking. We go below 500, we get everything stacking. We go above the 850 and you see light green. Now, if you had never learned about floats, is there any way, in any way, that you would have ever figured that out? It's just, no. you would never in a million years figure out why color is not being applied, why things are collapsing. And so I've seen so many of my students wind up having to convert legacy code, having to take something old, turn it into something new, the transition to flex and grid. And there's no way you'd ever realize that. There's no way you're ever gonna Google that. Like it's just, it just, it would just take forever to figure out. And so that's why I wanted to build up Float so much. That's why I wanted you to see media queries again and play with this. Cause there are just some things like this that if you don't know how the web works, what floats, if you don't know how the box model works with a true box model and not a flexi box model, right?

You just won't ever figure this crap out, right? Cool. So since those things were floating, the containers collapsed and that's why we weren't seeing the color. We put clear fix, which stops the container from collapsing. Boom. It collapsed because they were floating. All right, we have one more. We're gonna be asked to fix somebody's janky code, exactly. All right, on larger screens, please keep the normal layout. Everything should be light blue. So we can just do another media query. We'll just do a bigger screen. Let's do like 1024. All right, so let's do app media, all, and we'll do another min-width. And we'll say 1024, whoop, 1024 pixels.

Cool. We'll do the same thing again, main and bottom. All right, and we're gonna go ahead and do background. and we'll say light blue. Cool, let's save this. Let's go back. Let's refresh. There we go. So if I could keep stretching my browser window, right? If I could keep stretching my browser window, would this ever not be light blue? You know, if I could keep making it bigger. No, it'll be blue until I run out of room to keep stretching it, right? Because I set a min width. So as long as it's above the minimum of 1024, it's gonna be light blue. If I go below, right, right?

If I go below 1024, the other media query takes an effect, which had a minimum of 850, right? So if we're at 1024, above 1024, light blue, light blue, we go below 1024, which was the minimum, we're now in that minimum of 850, so we'll see light green, and we go below that, we get into our other media queries that we had as well. Cool. Will media queries eventually go in a separate CSS file? They don't have to. It's kind of preference how many CSS files you have. A lot of people just use a singular CSS file until they're working on a larger project. Preference between coloring the items in a container versus the container? It doesn't, it's preference, yeah. Why would anyone do this? Everyone does it. if you're building a layout that has, if you want it to look good on mobile devices, tablets, you have to make content decisions at those screen sizes. And so you use media queries to make those content decisions. Can I show the HTML? Sure.

HTML is what you have. I just added the class clear fix. I don't understand why the class ClearFix fixed it. So we talked about ClearFix in the previous classes. We also did it during office hours. So what happens, I'm just gonna draw here. If you have, if we look, we have this main, right? This main has no height. It has no height. There is no height on this main. We could come into our CSS and give main a height, but there's no height. The only reason, the only reason main has height is because the sections inside of it have height, right? So we have the three sections, right? We have the three sections, and then main is around them, right? Main is around them.

And the only reason main is so big is because the three sections are holding it open, right? But as soon as you float these sections, right? They wind up sitting next to each other, right? They wind up sitting next to each other, but the wrapper that was main, it collapses. it literally just slam shut because once you float content, like here's main, my open fingers are main. Here are the three sections that were inside. I float those three sections, main collapses, right? It just collapses. And so what ClearFix does, if we actually look at the ClearFix class, let's go up to it. It says, hey, put a dot, an invisible dot, right? Because we say visibility hidden, put an invisible dot after the content, right? Put an invisible dot after the content, right? And so what it's actually doing is we're putting a little invisible dot right here. So even though, right? Even though these three sections are floating and the main should collapse, it's not going to collapse because main is trying to wrap around that dot now.

It doesn't care if the stuff is floating or not floating. It's just trying to wrap around that dot. And so when you add the clear fix, it wraps around the dot and it doesn't matter what you do inside. You could float those sections, you can do whatever you want to them, it's not gonna collapse because they're floated. Because it's wrapping around the dot. So when you add the clear fix, it keeps the main open. It keeps bottom open when we add a clear fix here. And that's why we can see color. If we got rid of this dot, if this dot went away, well then this would collapse and you'd wind up with just a flat line because it doesn't have any height. Why display block if it's invisible anyway? Because it's still taking up space. So there's two different ways to like make stuff invisible, right? Display none actually removes it from the page. It's like no longer on the page anymore. That's why you can't see it.

It's like literally gone. You can't see it when it's display. It's gone. When you say display none, you remove something from the page. But when you do visibility hidden, it's still there, you just can't see it. All right, yeah. So slight differences there, cool. Alrighty, if you have more questions about media queries and things like that, come to office hours. We're happy to kind of walk through more of them there. All right, let's keep pushing folks. We only got a little bit of time left and I want to get to some Flexbox goodness. All right, so we talked about adding this viewport. Without it, you're gonna need two different kinds of media queries, the minDeviceWidth and maxDeviceWidth versus just min and maxWidth, right? So make sure you always have this meta viewport in the head of your document. We added that to our template before.

All right, time for some layouts. We're gonna look at some layouts that we've done before. Let's talk about floats. Psych not gonna talk about floats. We're gonna talk about All right, so let's talk about some Flexbox. Now, I've asked you to read the CSS Tricks Flexbox tutorial. I have asked you to play Flexbox Froggy. In the following materials today, I've given you some extra work if you wanna learn more about Flexbox. It includes Flexbox Zombies, it includes the Goat Traversee Media's video on 20-minute Flexbox. It includes a free Code Camp walkthrough of Flexbox. There's a lot of vocabulary that comes with Flexbox that you have to learn. And by playing those games, it's going to be way more impactful than me like putting them up on the screen and then us walking through them. So I'm gonna show some quick examples of the layouts we've already done in Flexbox. And then I want you to do those games. The games are just really helpful.

And for me, like I always still had to look up the Flexbox stuff. Like I always forgot justify what or align what like I just could never remember the vocabulary until I added them to my Anki until I played those games. So play Flexbox Froggy, play Flexbox Zombies, right? That will help those things actually sticking your brain more than us kind of sitting here and doing them together. So I'm going to assume that you've already done some of that work the Flexbox Froggy. You've read that tutorial and so we don't have to sit here and work through the vocabulary together. You should already have it I just want to show you some some code. All right warning Actually, let me bring Tina up here All right warning I'm a baddie I write bad code none of this would make it into production I just wanted to show you as an exercise into how we could use flex instead of the floatiness that we've been going through. All right, cool. Let's write some bad code with Flexbox. The first thing I want to do is TechCrunch, right? So let's, if you want to, you don't have to follow along, you don't have to like type along. I think you should just pay attention and ask questions. So like, don't rush to like type this out. I will always share my solutions after class.

So the layout that we have with TechCrunch is just this lovely, like three column late. That was so bad, I couldn't even draw a straight line. Three column layout, right? And so we're gonna go ahead and do that with Flexbox instead of floats that we've done before. So in the starter materials for tonight, I have the layout one folder. And this layout one folder is simply, the layout one folder is simply the code we did last time with floats. So we have our nav with the ULLIs in it. We have a main and we have an aside. So all of our core content is in the nav, it's in the main and it's in the aside, right? So it's those three key areas. And before we look at our CSS, we did some floating, we did some widths and that kind of how we got at those three main areas to sit next to each other. So with Flexbox, if I want containers, or if I just want everything to sit next to each other, what could I use? I'm using Flexbox and I want stuff to sit next to each other, what do I wanna use? Display flex, exactly. So in all the containers, I wanna put display flex.

And so, if I look, if I want nav main and the aside to sit next to each other, what's its container? I could go ahead and give it a container, but it already has a container, which is the body, right? So let's go ahead and I'm just gonna comment out all this CSS, boop. So all that CSS is commented out, and I'm just gonna be a baddie and write bad code, and this on the body do display flex. Save it. Let's go ahead and open it. That's pretty damn good. All right, next. It's there, right? We got the core layout. There's nothing else we have to do, right? They're all sitting next to each other. They're taking up the space based on the content that's inside. We're done. Next.

All right, let's look at this other one here. Let's look at layout two, bangers only exactly. Layout two, so layout two is Khan Academy, right? So Khan Academy has this lovely like nav and then it has like these two areas that are sitting next to each other, right? Like these two areas that are sitting next to each other. Cool. So that's kind of the core layout. If we look at the HTML, we have the header with the nav inside of it that we're gonna have to kind of get those sitting next to each other, right? And then the main, right? Main has two things inside of it. it has like this section here and this section here that I want to sit next to each other, right? So I got two areas I need to sit next to each other. And so whenever I want something to sit next to each other, I have to just use that display flex. So I'm gonna start my CSS. I'm gonna comment out all the CSS that we had here for the layout.

Boom, that's commented out. And so I'm just gonna start fresh my additional styles here. And I know I want to start off with like the nav sitting next to each other. So let's just go ahead and do nav and do display flex, right? I just want the nav to sit next to each other. So let's just see where we're at. All right. So the nav is actually sitting next to each other, right? It is sitting next to each other. I also want the actual LIs to sit next to each other, right? Like I want these LIs sitting next to each other. I don't want them stacking. So what I'm going to do is I'm going to come back to my CSS and I'm going to add the UL to the things that are also getting display flex, cool? So let's go and see what that looks like now. Great, so now each item in the nav is sitting next to each other.

Each item in the UL is sitting next to each other. Just with display flex. Don't hate me. Please don't hate me. Cool, now, there's something that we're missing, right? Like, there's something that we're missing. If we look at the actual Khan Academy, like there's space around each of these elements, right? And so if we want to put space around things, well, we have the ability to put space around things if we want. And so we could, I'm just going to do it on a separate line just because I know I'm going to add some other stuff to where display flexes. I could technically do this together, but just to make it a little bit easier to see. So we have this thing called justify content. And so with justify content, I could just say space around, space between. So I'm just gonna say space around. And let's save this and let's go back and let's refresh. All right.

We're getting there. We're getting there. So the things have space around them. The one thing that we're running into is that the UL doesn't have enough room, right? It's trying to put space between each of the LIs. This doesn't have enough room. So what I wanna do is I wanna make sure that this UL has more room when I do the space around. And so if you want to give something like you would normally we would solve this by just like doing like a width, right? We just do a width. So we just go on the UL and we'd give it like a width so that the stuff inside of it had more room for space around, right? So there's lots of ways to do it, but since you're already used to percentages, let me show you flex spaces. And so flex spaces is basically just like percentages when it comes to flex. I know I'm kind of cheating a little bit there, but save it. And let's go back and take a look. All right.

Nice. So now the UL has more room. So when I do the percent around, right, when I do the percent around, it has more room and we're pretty much done with the header. Like the nav I think is pretty damn close. We got space around everything. We didn't have to do any quick maths. We just flexed the container of the nav and the UL. We put space around them with the justified content. And we gave the UL a little bit of breathing room so that the stuff wouldn't, like, overlap. Cool. All right. Last thing we have to worry about is the sections inside of main, right? The sections inside of main. So we want the sections inside of main to be display flex. Right?

We want them to be display flex. So let's go ahead and try that because we want this, we want this section to sit next to this section. So instead of having to do like percentages and float, So we'll just add main to our list up here. And let's see where we're at. All right, great. So now, now the, this like section is sitting next to the section with the image. The image is way too big. So I'm just gonna go ahead and give the image a width. Like I'm not gonna worry about like flex or anything. I'm just gonna say just for now with, I don't know, 30%. Cool. All right. Dope, so we have those sitting next to each other. But there's something weird happening. What we're noticing is that this one right here, is it's justified to the left, right?

It's justified to the left. And so I kind of want it like in the center. And so if I want it like what space on either side of the image, what should it be? Well, I'm just gonna give it space around, right? Like if there's only one thing and I have space around it, it's gonna be centered, right? So instead of having to do like other justify contents, let's just go ahead and, you know, I don't know, add main section, right? Because now that'll just give space around it, right? If we look, main section, right? Space around will be in a good spot. So let's refresh. Did I save? Oh, I didn't flex it. I didn't flex it, right? So the main section can't get it because I haven't flexed it. So I'm gonna do main section.

So it has display flex, right? And now it should be able to take the space around. Let's save it. Beautiful. It has space around it, right? Has space around it. Oh shit. Look at this piece over here. So what I actually wanna have happen is I only want this one to have space around, right? I don't want this one. So first child, just the first, just the first section inside of Maine should be flexed. Damn right. All right. Wrap. So let's go ahead and let's, let's step back through that one.

I know that was a little tricky there. Let's let's take a back. Let's look at it. So we just kind of been adding things to be flexed, right? When things are flexed, though, they're happy to sit like next to each other. They'll take up the space that they need. I Wanted some space around my content. And so I just keep adding stuff to be flexed So it'll sit next to each other and I keep adding stuff to justify content space around so there's space around it That's all I'm doing, right? And so the problem that I ran into right there was, wait a minute, if I'm putting space around each thing inside of main section, like if every single thing inside of main section is spaced around, that works great for the first section because I want space around the image, right? I want space around the image, that makes sense. But I don't want space around the H1, the paragraph, the anchor tags, right? If I put space around all of these, we wind up where like it was, they were all sitting next to each other. So what I did is I just didn't flex this one. I just flexed the first one. And so that's what that pseudo selector was.

That pseudo selector first child, right? That pseudo selector first child, all that was, was saying, hey, just flex this bad boy. Don't flex this one. So yeah, if we look at our old CSS, we had like widths and margins and floatings and percentages and all this other crap. And now all we're saying is flex it, put space around it. and if I need a little bit more space, give it a little bit more space. See the leprechaun say, yeah. Still very fluid up until a point, right? Still very fluid, so the responsiveness is still there. Even though you're using flex, the responsiveness is still there. Cool. Let's do the last one and then we'll end, not early though. All right, let's do BBC. So when we looked at BBC, we had like a nice header. We had like these two big boxes sitting next to each other.

These like four boxes sitting next to each other. And then the last one was pretty easy, just sitting next to each other right so let's go ahead and open up the and of course I'll share all these with you so you can come back and watch this again you can play around the flex all right then look at layout 3 CSS all right here's the original Oh, pretty, pretty solid layout. Nothing too wild there. I think these don't need to be floating next to each other, but this is what it was, which is regular old CSS. And if we look at our regular old CSS, oh crap, I have it in here. Ignore this. Oh, actually, you know what? We're out of time. So I'm going to, let me comment this out. I forgot that I gave you the answer. All right, I'm gonna comment this out. We're gonna look at the old CSS first. So here's the old CSS, right? We have our header with like heights and then we're floating, we're giving widths, we're giving other widths, we're giving expansions, we're floating other widths, percentages, percentages, percentages, ugh, ugh, so much work, so much math. And instead of walking throughout this, I'll just undo it.

We'll do more practice on Sunday with Flexbox. So if you're like, this Flexbox stuff is cool, come back on Sunday and we'll do more together. All right, and here's the solution. So what I did here is I have my nav UL main, just like we did before. I am display flexing them, right? Just flexing the nav UL, the main. because I want everything in the nav to sit next to each other. I want everything in the UL sitting next to each other. And then I want everything that's in my main section sitting next to each other as well, right? So, and I gave them a space around. We get rid of this stuff just to see it, right? So this is the nav, nav UL main, right? Display flex and with space around. Let's go ahead and refresh. There we go.

This is our nav with just flex and space around. Same problem as last time though. It's pretty good. We have space going around each thing, but I want more room for this UL to sit next to each other, right? More room to sit next to each other. So I want that to have more width. So that's where that flex basis comes in again, for you all, right? It comes in there because I want that to have more room. When you're trying to, like when the flex is trying to do its calculation, I want that to have more room. I can come down here and say, hey, UL, I want you to have flex basis of 60. All right. I was just going to give it more room, more room. We do that. There you go. Oh my God.

So good. It's so good. It's so good. Right, so good, that's it, that's the header. Right, and it works because everything is flexed, we're putting space around, and we gave the UL a little bit of breathing room. I'm about to throw hounds. All right, cool. Let's look at the stuff below it. So the main is looking good too, right? Main is like looking good, except the BBC is being considered in the flex, right? It's saying, all right, it's saying I have three things here. I have BBC, I have this section, and I have this section, right? So what I could do is like figure out how to like not have this BBC be included in the flex, or I can just be a baddie and write bad code and just yoink, take the H2, throw it in the section, and I'll worry about it later. So now when I go back, there we go. We got our two 50-50, right?

The flex is sitting both of them next to each other, right? And what else we gotta do there? Um, let's see, what don't I like about this? I think that there might be a little bit too much room. And so if we looked at like main section, um, I don't know why I actually did this. Uh, let's see, let's try it out. Let's do this. Oh, there you go. I just wanted to have a little bit more room. Yeah, a little bit more room. I made it a little bit smaller, right? A little bit smaller so that I could have some room around, right? Because if we look, main is flexed, right? Main is flexed and I have space around. So to have just like the right amount, Like if we look at the BBC logo, there's just a little bit of space on the left, a little bit of gutter in between and a little bit of space on the right.

So instead of flex, like taking up the whole thing, I just wanted, I just wanted, I just wanted to be able to control that little bit without having to like figure out how to manage the gutter or anything. Right. I just want it to have just a little bit of room. And so if I know I knew if I made both of these like 48. Right, that gives me 2%, right, right? Give me 2% for all the like the gutter on the left, the right and in the middle. And so that's what I did. I said, all right, make the sections inside of Maine 48% so that when the space goes around it, it's just that little bit of gutter. Right, that's it. And then the last thing was I have these like four sections that should be here. And so right now they're not sitting next to each other. So if I want them to sit next to each other, I got to put display flex on them. And so that's what I did here. So I said, all right, look in main, look at the section that has a sibling that is a section. All right, so if we look main section, sibling section is the section with all four of those sections sitting inside of it.

Right, we saw this before in the last time we did the layout. Instead of putting a class on it or something like that, I'm just saying, hey, target this section, the one with all four of those sections inside of it. So main section plus section is that section. Display flex, flex wrap, and flex basis of 50%. And so all I'm saying here is, right, all I'm saying here is I want 50-50 for each of them. And then I want them to be able to go to the next line. Right? I want them to be able to go to the next line. Right? So without flex wrap, they wouldn't go to the next line. Right? As soon as you put flex wrap on, it's like, all right, 50-50, boop, bring them down to the next line. Right? You could do, There are some other ways to do this as well, but since we're already thinking in percentages, it just makes sense to stay there until you get to play Flexbox Zombies and stuff like that, that goes in more detail, right? And so those sections are gonna sit next to each other because of the flex.

They're gonna not, they're gonna wrap to the next line and then there'll be 50%. We look, there you go. Now we have them all sitting next to each other. No need to worry about floating other percentages or anything like that, got them next to each other. And then we had like this last one here, right, this last section down there. And this section has one, two, three sections inside of it. I don't want the H2 to be part of it. So instead of trying to figure out a hack for that now, I'm just going to plop it in in this first section. And then instead of having to figure out the nested selector, I'm just gonna give this a class of container. A lot of times I'll have like a container class that just has like display flex on it. Save that, come back, boom. All three of them are sitting next to each other now. And we got pretty much the core layout done, right? So if we come back and look at it, The real rhyme and reason is flex it, and things will just naturally sit next to each other. They'll know how much room to take up.

You don't need to know the percentages. You don't need to do anything. You want a little bit of room around it. You put space around like we did up here. You want some space in between, you do space in between. A lot of different just kind of words, right? And so it can really speed up your layout process. Hopefully you can see that like what? We did these three layouts in like under 20 minutes, just with some quick terminology. And so please, I know this is your first time really kind of diving into it. We're not spending a lot of time on it right now, but do Flexbox Zombie, do Flexbox Froggy, watch the videos I asked you to watch, and it'll click. It's just a lot of terminology to work through. Add them to your Anki deck. And once you add them to your Anki deck, you'll be good. We're gonna learn some JavaScript, right?

We're gonna learn some JavaScript. Once we have JavaScript, we'll come back, right? We'll come back. We'll come back once we know our JavaScript, right? To build bigger layouts where we can click on stuff and drop downs open and all that fun stuff. So we'll come back. We'll spend more time with Flex. We'll spend more time with Grid. But for now, that's good. If you want a little bit more practice with Flex, you wanna do a little bit more layouts together, come to Office Hours on Sunday. We'll do a few with Flex, just to kind of get our juices going. I would love to end with a raid, spread some love and positivity like we normally do. And then let's get pumped. Let's get pumped for Thursday, folks. Pumped for Thursday.

Thursday, we adventure into JavaScript. And so let's go ahead, let's end with a raid. We're gonna go over to Pumpkin Days. They do some game development. We haven't stopped by them yet. So I'm gonna go over to pumpkin days stick around for the raid. Give them a follow you haven't given them a follow and Get those extra channel points. You're gonna want them. I got some good stuff coming up for channel points. Do you want it? Alrighty Let's go ahead spread some love some positivity give them a follows. Thank you for a wonderful class I'm probably gonna go live like either later tonight or tomorrow just to test some stuff So you want to come out and hang out while I'm testing things? I'll see you then Otherwise, have a wonderful rest of your night. Let's raid starting in Eight seconds everybody. Thank you so much.

Hope you had some fun tonight. Hope you learned a few things. I did too I'll see you over there. That's right

End of Transcript