Introduction

You You Good morning, good afternoon, no matter where you're coming from, I hope you all are doing well. They asked me, they said, Leon, is Krunk dead? And I had to yell it back at him, Krunk ain't dead. Krunk ain't dead. What's going on, everybody? I hope everyone's doing well. Glad you're back. Excited to get into some CSS tonight. Welcome, welcome, welcome. As always, we have a question to start off the evening, folks. Always in that Learn With Leon Live channel, we have a question. And so the question tonight is, would you rather invent a new gadget or discover a new species? Gadget or species in chat for me, please. Gadget or species in chat, please. Let's see what we got.

A lot of species throwing up gadget gadgets overwhelming this time. Okay. I see y'all. It's a little mix little mix. I Think folks are well, it makes sense It makes sense that the gadget folks are here, right? If you're putting in all this time to learn how to build learn some new technologies, it makes sense with the gadget I think I'm in the species camp. I want I want to discover a new species We'll call it the the hundred devs toad There we go. The hundred devs toad or something like that. There we go. Gadget or species. Hey folks get in here Hope you're doing well Not tea tonight folks got some Got some delicious delicious cold brew this evening Species don't pay the bills That's funny welcome everybody get in here get in here as Always like to start off with some questions So I'm gonna go ahead and bring that slide up. You got questions. I got answers Domino's heads cold-brewed now. I don't know. I haven't been there in a while Oh, is glitch down.

We might've broken glitch. We gotta be, we gotta be weary of the, of the, the immense power that this community has, that we're, we're, we just DDoS them. Oh no. The same thing happened. Uh, the same thing happened with, um, with our slides. So that we like center with the slides and then they like glitch they went down for a little while But they're working now, but I think we might have glitch glitch. So don't worry about glitch for right now We're gonna talk about how to submit the homework. Don't worry about submitting it for right now. Let's let's give them Let's give them a chance to recover Five six seven thousand of us all just just ran up on them and started trying to create accounts So let's give them a chance to breathe. Don't worry about you can submit the homework later tonight Let's give them a little, a little bit of, a little bit of time for glitch the glitch. You know what I'm saying? You know what I'm saying? All right. What other questions we got while we're here, folks? I always like to start with questions just to give folks a few seconds to get in here.

Sometimes you're, you're running from work. I get it. I see a lot of folks starting out the bingo. Okay, exclamation point bingo. If you didn't know how to use glitch, don't worry about it. Bashbunny, hey, thanks for the raid. Hope you're doing well. Thanks for stopping by. Hope your stream went well. Good to see you. How things been? Welcome everybody. We're out. We just got started too. We're letting folks get in here.

We're answering questions. Hope your stream went well. We definitely got to get a raid coming back to you. So hopefully next time we see you live, that's where we're going. Come on folks, get in here. For folks that are new, we do a 30 week software engineering bootcamp. We're only four classes in, so if you ever wanted to learn HTML, CSS, JavaScript, Node, React, and get a job as a software engineer, it's the right place to be. Can we keep going with class even if we're behind? Hell yeah. That's why we got the catch up crew. You gotta get in that catch up crew on Discord. GitHub instead? Nah, we wait to get to GitHub. All righty folks, I think we got the gangs all here. Let's let's get into it.

Let's talk about what we're going to Cover this evening. There's no Slido for a regular class. Just use chat. I try to keep my best Come on through When I said your favorite success story from last cohort You know, it's just that I think a lot of folks found what they were looking for I think that's that's that I think we're picking one person's very hard We're gonna have a lot of alumni. They're gonna start talking to you all. We're gonna start bringing alumni pretty much every Friday And so I think a lot of folks just found a good fit and that that's that's what makes me happy I think a lot of folks were working jobs where they were really unhappy They might have lost those jobs during the pandemic and what I hear from a lot of them are just that they're like happy like They're making good salary. Yes, they're working on cool stuff. Yes, but they're happy And so I think that that's the coolest thing to hear All right, let's go into what we're gonna talk about tonight, folks. So, I always start off with questions like we normally do. We're of course gonna get our spaced repetition in. We're gonna talk about the client-server model again. We're gonna talk about progressive enhancement again. And then we're gonna jump into the fundamentals of CSS. So, you've been doing a lot of reading. You've been diving deep into that shay-how.

But tonight, we're gonna start from the beginning. We're gonna make sure that all the course stuff if it makes sense, do you feel comfortable with that core stuff? And then we're gonna move into a little bit deeper of topics when it comes to CSS. How to not rely on just classes and IDs, but to get used to the parent-child selectors, knowing the different ways that you can have a parent and a child, that you can have direct parents, that you can have siblings, all these types of relationship selectors. Then we'll hint at classes and IDs, and then we're gonna talk about specificity. It's going to be the big topic for this evening specificity so that we can start making sure that we can use the cascade So our benefit the style all of our content and then you'll have a lab And then we're going to have a lab right and that lab is going to be you building your first site with html and Css Which would be pretty cool. I think we're going to Dab with the bruh. Hope you're doing well dab. Good to see you So a lot to cover tonight, lots of new stuff. I think we're gonna end a little early tonight just so you can have some time to work on that lab. We're always gonna do a raid at the end just to spread the love and positivity around, but then you're gonna have some time to work on this. Damn, hey, what's up? We do have end early emotes because I always say it and then it never happens. So if you have a sub or gifted sub or you use your channel points to unlock the emotes, We do have an end early emote because I always say it but it never happens, but I'm gonna try and try my best If you need the slides as always exclamation point slides true, thank you for the hydration All right, let's get into it folks four hours later in the I can't even do I can't do the spongebob voice. Yeah Alrighty, let's get in it folks.

Let's lock in If you haven't checked in yet you can always do the exclamation point check in here on Twitch that'll give you the tweet to like and retweet Please if you are here go ahead and give that tweet a like and a retweet Please that way more folks can find our lovely community and not pay 20 grand for a boot camp we always check in every class if you're new around here just more folks can find us and And all I'll say is like a lot of times we start trending 100 devs trends every time in the technology because there's so many of y'all checking in and sharing and I love every night before I before I head off to bed. I scroll through the 100 devs hashtag. I like a bunch of stuff. I love seeing y'all on Twitter. Y'all want out. It's cool to see. All right, submitting homework. Don't worry about submitting right now. I think we brought down glitch or something happened with glitch. We don't have to claim that. We can just keep that to ourselves. We don't have to claim that. We're gonna keep that to ourselves. But the idea here is I didn't want you to take your HTML and plop it in a glitch and then they give you a link that you can share, right? I don't need you to like change the paths to your images or like get stuff to be perfect.

I just want your HTML. I don't care if your images break or whatever, just go ahead and plop your HTML into a glitch and then give me that link, right? That's all I need. Everybody's saying too late, my bad. Yeah, and that's gonna be the same for like all your homework. I know that when I asked you to submit stuff early on, like early in program when we use the Google form, it's hard to like keep all your files and things together. but don't worry about that. I just wanna see the raw code. That's all I care about. When we get a little bit further in and we start using Git and GitHub, then I'm just gonna ask for your GitHub repo and then you're gonna have everything in there. So just give me the HTML. Don't worry about anything else. Don't worry about your images. Don't worry about hot linking or whatever. Just go ahead and submit it.

Can you resubmit? Sure, you can if you need to, but don't worry. Whenever you submit it is absolutely fine. Don't stress it too much right now. And like I said, I think Glitch is down right now. how we brought it down. So don't worry about it for right now. Take some time, like after class to submit it and you're all good. Cool. A lot of folks say, does homework get reviewed? No, all the homework is binary. It is, did you do it or did you not do it? And then we do every single thing that gets assigned for homework, we redo in class, right? So you get that space repetition and you'll see the exact example and then you can compare yours to the others. There are some stuff that gets like auto-graded, but for the most part, I try to give you stuff that's either you did it or you didn't do it.

And you gotta get comfortable with that. A lot of times when you're turning in work or tickets, you might have some light code review, but it's on you to get it 99% of the way there. It's up to you to say, that looks exactly like the photo the designer gave me. I don't need to tell you you did it right, right? Cause we don't care about the code quality, right? We don't care about code quality. It could be the vomiting is code that we've ever seen. We're here. Did we get it right or wrong? Right. We get it right. Or do we get it wrong? That's it. Okay, cool. Advice for people that are behind in class, catch up, catch up crew on a, on discord, we got to catch up crew.

Uh, the, the beautiful thing about discord I saw over between this and last class is there are so many people on discord just in the voice channels sharing their their their screen and watching the videos together and talking through things that came up so if you're a little behind jump in one of those voice channels work with some others to get caught up yeah a lot of people saying how do we plop our html into glitch i actually showed you how to use glitch i didn't know how to use glitch fully but we did it together so you can re-watch that a video to see how I did it. Or, you know what? Get in there and give it the whole 100 devs try. You can upload your files. You gotta get in there. You gotta play around with it. You gotta start exploring. But right now, Glitch is down. Don't worry about it for right now. I think we brought him down. 5,000 people signing up within a 30 second span is pretty rough. So don't worry about it for right now. Submit it after class. Cool. So thank you for the hydration.

Cheers to you. And for right now, if you are catching up, you're a little behind, don't worry about submitting homework, get it in. We're not in our official houses yet, so we can be a little bit more flexible with homework. And so get it in. If you're watching this afterwards, just get it in. You don't have to let me know on Discord. Just get it in. You're good. Homework will become more and more of a more strict thing as we kind of progress. Okay. Also, if you're watching us on YouTube, go ahead and give us that like, go ahead and click the subscription button, hit the notification bell. It feels so weird to say that, but I don't want to have to edit this afterwards. Also, can we talk for a second? Got copyright struck. Got copyright struck because I played the, um, curb your enthusiasm song.

Like, you know, like the, I don't know, can I helmet, can I, can I, can I whistle it? I don't know. Right. And so I like, there's, there's like a 15 second period of the first video where, where it's just me doing this because I muted it so that they could get rid of the copyright strike, because here's the thing, the channel's not monetized, right? So there are no ads, but I did get God. Thank you, Edward. I did get God. So it's not monetized. So there's no ads. But if there is a 10, 15 second clip of some sound, it's not even like a like, I guess it's like some older song. It's not even like a real frickin song. Right. 10, 15 clip. They copyright strike it. Right.

They copyright strike it. Come on, Larry. Exactly. And then the whole video gets monetized and it's a three freaking hour video I don't want you have to sit through ads across a three freaking hour video So I there's like a 15 second of me just like doing this. I wasn't saying anything. Don't worry But we had to mute it so that the ads don't play. I just thought that was that was funny. I Got got it did yeah. Yeah All right Just some quick reminders before we jump into learning this evening. Please use search. We talked about this last class. A lot of times we get some kind of very common questions. I get it. You're worried. Don't stress.

Don't stress so much. It's okay. We're learning. We're easing into the process. Nothing is hard requirements yet. We're still getting our gears turning here, folks. So a lot of the common questions that get asked, you can probably find them just by using the search. A lot of times things get answered. A lot of times things get asked multiple times. Go ahead make sure you're using search. All right. Another thing is now all of our help channels and the Ask Leon channels are thread based. You don't have to do anything. We have a lovely bot in those channels that whenever you ask a question it automatically turns that question into a thread. So there's nothing you have to do.

You just have to go ahead and type your question like normal and that will be turned into a thread. And then that way folks that want to help can jump into those threads and help directly in the thread. And so all the help channels now have that and the Ask Leon channel has that. So please don't click reply anymore. Jump into the thread and answer in the thread. If you click reply, we're just deleting those. That way it's just threads in those channels, right? What does thread mean? Thread means that all the messages are in one place. And so if you go into any of the help channels, right? You can go, if you go into any of the help channels, you will see that there are threads now instead of like a bazillion messages just streaming by. I know that a lot of folks kind of get stressed out by Discord when there's so much. And so in the help channels, we wanted to have the threads So that way it's way easier to search for questions and see the responses. Right. And then also just to make it easier for folks that are helping to jump in and keep it all together.

So please don't just click reply in help channels. Those will be deleted. And if you want to help and answer questions, just jump in the thread. And then with that being said, you have the power to help, right? A lot of folks are going to be at different places at different times throughout this cohort. If you see a question that you feel like you can answer, jump on in, answer that question, you got the power, you can just jump in and answer it. A lot of folks right now are going to start to have questions about CSS. If Shay how really clicked for you right Shay how really clicked for you and it made a lot of sense You understand the things that happened tonight during class this weekend, right this weekend when you are Working and you see people in the discord asking the questions that you already know Go ahead jump in there and answer answer them Somebody just said teaching also helps you master subject. Yes The most, the best thing you can do to like actively recall and get your space repetition is to teach others. It really does just like lock things in that you'll never forget. A lot of the stuff that we're doing tonight in class, it's just, it comes off my tongue like butter because I've done it a thousand times, right? And so teaching others, helping others, working with others is a great way to reinforce those concepts. It's one thing to like understand something. It's a whole other thing to teach it to another or share it with another person. And so get in those, get in those channels, get in those voice channels and help out.

I love butter. Jay, how is brutal? It can be. We're going to talk about that tonight. We're going to talk about why reading can be brutal at first. All right. Another thing that's come up that I want to make sure that we're very clear on is that you got to get better at typing. You just do. Right? You got to get better at typing. Can they use GitHub links or code pens? You can use a code pen if you would like. Yeah. Thank you. You can use a code pen if you want.

But, yeah, I prefer Glitch. Just because we brought it down, so we can open up a little bit. Got to get better at typing. So, folks, what is a good typing speed. I think like an admirable goal for typing is like 60 words per minute. That's where you want to be, right? If you can type 60 words per minute, you're in a good spot, okay? And the reason why I say 60 words per minute is there's a couple of big things. One, there was this article I tried really hard to find. I could not find it again, But there is this article and like a thread on hacker news about like who do people go to? Like who do people go to? when they need help right and What they found out is that people don't go to the best developers. They go to the people that can like type faster So if you can type mod like very fast You're more likely to get folks coming to you because they know you can get to your answer quicker And then the other thing that came up is that one of the biggest kind of skills you can have Joining a company is to be decent at typing if you join a company and you're kind of doing the finger poking People are gonna be a little suspicious a little suspicious, right? And so to get past that sniff test and interviews to get past that sniff test when you are kind of New on the job You wanna make sure your typing's up to speed. And the beautiful thing is we got 30 weeks for you to get better at it.

Now, the last thing, and I think that's something that's really important and why this being good at typing thing is really important is because early on, a lot of folks that don't type well are thinking about the typing and not all their energy's going on the coding, right? So if all your type all your energy is going into like making sure you're typing well, right? Your brain might not be processing the actual learning to code bits as much and so you want to make sure that you can Be typing and not worrying about it so you can focus all your energy on learning And so that's why being able to type well and not you like even if you even if you finger type at at 60, 70, 80 words per minute. But if you're still looking at the keyboard and thinking about what you're doing, that doesn't help. And so you wanna get to the point where you're flowing and you can get into that flow state. I don't know how to describe it to you, but once you start coding, you hit that flow state, everything changes. And so I find it really hard for my students to hit that flow state without having decent typing. Now, for me, I type around 80 words per minute. And I don't think that's necessarily like great. I don't think it's necessarily wonderful. It's something I could keep working on to get better at. There are other folks like the primogen who we saw yesterday that are just like wizards speeding around. But for me, I was at like around 80 on a normal keyboard. And then I jumped to my split keyboard, my kinesis and like my typing speed tanked. I went to like 30 words per minute.

And it took me a while to build back up from like, like 30 out to the back to like my 80. And the thing that helped me get my typing back after I switched to a split keyboard was a Keber. And so Keber is really like, it's completely free and it's a wonderful way to like improve your typing. So part of your homework is to do a typing test, typingtest.com. I like the five-minute Wizard of Oz one. And just to see where you're at and then committing some time into your daily practice for some typing, if you need it, if you need it. Not everyone will be there and not everyone will need it, but if you do, something to start now, start early. The earlier you get better at typing, the better off you'll be, the more you'll be able to hit that flow state and the easier it will be to learn. Can you, I can hear this gif, that's so weird. You know, like when you can see gifs and you just hear them, can you listen, see if you can hear the gif. You ready? Listen. No, God, no, God, please no, no, no, no. You heard it right? You just look at it and sometimes you can hear it.

I don't know why, but you just look at it, sometimes you can hear it. I heard it, I don't know why, it's weird. Anyway, the copyright's coming for me. So Leon, why do you assign so much reading? Well, let's talk about it. The reason why I assign so much reading is because most of you all, once you leave the wonderful bubble that is 100 devs, we'll join a company that uses a language that you have never learned, or uses a technology that you've never heard of. And it will be up to you to learn that technology in a week. Sometimes my students get tickets that are, they get a ticket on Monday, that's due on Friday, and it's something that they've never ever heard of, right? And so what you're going to do is have to go find the documentation for that technology and it's gonna be old, it's gonna be dusty, right? It's gonna be a markdown file that just doesn't make sense and that's all you're going to have. That's it. Some dusty, written in a different language, which translated to English, different, like just horrible bit of documentation. And that's all there will be. There will be no fancy tutorial. Thank you for the gifted sub.

There'll be no tutorial. There will be no video. There will be no me helping you through that, through that bit of content. there will be a document written in hieroglyphics exactly. And so, a lot of my students that I noticed a couple years ago that only consumed videos or tutorials that kinda held their hand, they always did way worse on the job because you're just gonna be thrown into situations where you gotta read. And so I start early on by getting you used to reading a lot. And so, yes, I could be assigning videos. I could be assigning more tutorials, and we will. There will be lots of videos I assign. There'll be lots of tutorials that I assign. I love Traverse Media. Give that man a medal, right? Like, there will be lots of videos that I will assign. But we gotta get better at reading. and the only way I've seen my students get better at it is by assigning more of it.

So that's why we have a lot of reading and why I want you to engage fully with that reading. Don't cheat, don't cheat yourself. Don't cheat yourself with that cognitive effort, right? Do the reading. When things don't make sense, you can go and use other sources, but I need you to grapple and push yourself and get better at that reading so that when you're on the job and that's all there is, you're okay at it, okay? So that's why I do it. And that's why I know for a lot of folks, it's kind of overwhelming at first, but trust me, you put in the cognitive effort now, you'll be way better off in a couple of months when you're on the job. Thank you for all the hydration. All right, keep pushing here. We've kind of hinted at this before. Oh, and that's another thing too, people ask in chat. Thank you for asking that. When you are reading technical readings, it means you're coding along. You should never like read through Shay Howe without, like if you're reading Shay Howe like this, you're messing up, right? You need to be taking the code examples, playing with them in your text editor, right?

You need to be engaging with the actual code, right? So when you're reading technical material, when you're trying to learn how to code through written medium, you're not just reading, you're engaging with it, you're stopping reading, you're playing with the code, you're coming back to the reading, right? We don't get got. Exactly, we go get we go get by reading more right and so reading is active reading your you're not only actively recalling. You're not only taking your questions, you're not only adding to Anki, you're playing with the code reading. Reading technical stuff should take way longer than reading something like a book, right? You just need to stop more often. You play more often. You gotta be getting the hands on keyboard time even with reading. And heck, a lot of times when I'm reading stuff, I'll be building like a small project along with the reading. So like if they're teaching me some topic, I'm trying to build something based off of what they're telling me, right? Like you want to engage with it. So for now Make sure you're engaging. Make sure you're reading. Make sure you're playing All right, we hinted at this piece a little while ago and it's something that I want to bring up again There we go, something I want to bring up again, and it's this idea of going deep, not wide.

Okay, I need you to go deep, not wide. And the idea here is that in the beginning, there are so many things that can consume your intention. I'm trying to get my chair height right. There we go, cool. There are so many things that can consume your attention. And early on, you are way better off going deep and not wide. Do not spend three hours trying to like finesse your VS code and like set it up with all the latest bling and blam. don't spend three hours trying to figure out Git and GitHub when it's not due yet, right? Make sure that you're going deep with the material in front of you and not spreading yourself too thin, right? The folks that start looking at all the shiny objects, all the bells and whistles and they run off on tangents, that's a great hallmark of a good developer, but not now. Go deep with the material that you have, really invest yourself in digesting and understanding and try and stay on the right path. Because if you go too wide, you burn out. That's all it is. You just burn out. If you try to do too much, exactly, you're gonna feel overwhelmed and you're gonna burn out.

And so go deep on the topics that we give you, really immerse yourself in the reading, try not to spread too wide and go deep. And for the love of all that is holy, please go ahead and flatten your forgetting curves. Make sure if you're putting in all this work, you're going deep on these topics, right? You're actively reading and you invested all this cognitive effort into learning that you don't forget it. Thank you as your friend. You Alright folks, let's jump into it. Let's get into the mix. What is the Internet? What is the Internet chat? What is the Internet? Nice Thank you for the hydrations waste world and Shellraiser Here's to you. Yeah, it's a wire. It's how we connect different devices We have our client side devices like our laptops, our tablets, our mobile phones that can send requests to servers, which are computers on that wire. Those servers can hear those requests, generate responses and respond to our client. A person that writes the code that enables a server to listen to requests and generate responses, what would we call them?

Yeah, we call them a back-end developer, nice. And somebody that writes the code that runs on the client-side device is what we call them. Cool. What do we call someone that writes both front-end and back-end code? Cool. full-stack developers, and that's what we're all here to be, right? So if you're new here, welcome. We're trying to be full-stack web developers. We are software engineers that specialize in full-stack web development. Thank you. All right, let's keep pushing. Golden rule, separation of concerns. Our HTML should just be our HTML. Our CSS should just be our style. All right, sorry.

Our HTML should just be our content. Our CSS should just be our style. Our JavaScript should just be our behavior and interaction. Why? Why is the separation of concern, such an important idea, and we're gonna see it tonight, folks. Tonight we're gonna see why this rule's important and how we can be led astray if we don't actually follow this rule. Yeah, there you go, chat. It's organization, exactly. It's all about organization, right? If we are working on code and we wanna come back to that code sometime later, right? We wanna come back to that code in a month or so, and we wanna fix something style-wise, is we know to go directly to the CSS. If we're working with a team and somebody on our team wants to go and add more content to our homepage, they know to go to the HTML. So by following separation of concerns, we bring organization to our code, and it's a good coding pattern to follow early on so that you can work well with yourself and with teams. All right, last class, we talked about progressive enhancement. Progressive enhancement is this idea that the core of your site, the thing that matters the most is your content or your HTML, right?

And then in that content, we wrap it with a very small amount of presentation, which is our CSS. And then we just put a very thin layer candy coating, which is our client-side scripting or our JavaScript. Why is this idea of progressive enhancement important? Like why does it matter? Why should we make sure that content is king? can be for accessibility, can help with accessibility. And it has to do with, yeah, exactly. Folks might not have high-speed internet access. And when you don't have high-speed internet access, things might take too long to load. We saw that idea with CNN. Their main site was thousands of requests and their light site was just a handful, right? And so if in the u.s. We had 22 million Americans or 35% of our road restaurants didn't have broadband access If you expand that to around the entire world There are just so many potential customers consumers that don't have high speed or reliable high-speed internet access And if you're building your sites with heavy client-side scripting heavy things that slow down your site, you're doing them a disservice now Now, there was one site we didn't talk, well, I did talk about, I think maybe, I'm not sure if we covered it, but there's a site called motherfuckingwebsite.com. And I love it because this is a motherfucking website. Look at it.

It's perfect, right? What else do you want? It's lightweight, it's responsive, meaning that it works across all the devices and it works. And it's just HTML, right? So if just HTML you can build great sites that work well right that would work for anyone depending the no matter if they have a High-speed broadband or just a regular internet connection. It's going to work And so you can build wonderful websites to have lots of utility that that work well for everyone if you focus on your HTML That's why we start with HTML and that's why I asked you to do so many sites with just HTML before we even get to our CSS, because the HTML, the content, is what matters. Now we're gonna jump into CSS, all right? We're jumping to CSS. Now, the nature of jumping into CSS is that we really shouldn't be, this really shouldn't be your first pass, right? Your first pass into CSS should have been when you were going through Shahal, right? What we're gonna do is we're gonna distill the important things out, go over them together. But if you're showing up to class and you haven't done the reading, you're in for a little bit of a shock because we're gonna be using lots of big fancy terminology, lots of new vocabulary. And so if you're not keeping up with the reading, class is gonna be a little bit of a shock, right? And so I'm hoping that you got through the reading, that you gave it the good old 100 devs try that when we get into, shock me good, Leon, when you get into the goods tonight, it's a little bit of recall, a little bit of repetition, right? But you don't have to stress.

When I give you a reading, yes, I want you to go through it, I want you to engage with it, I want you to understand it, But all the importance of the stuff that you really absolutely have to know the stuff you have to really absolutely lock down We're always gonna review together in class Cool Thank you for the hydration cheers to you already let's get into it Hold on, I gotta ban somebody real quick. There we go, all right. Where does our CSS go? Does our CSS go inline? Does our CSS go in the head? Or does our CSS go into a separate file? Oh, we got a lot of people. I think we got them all right here. Now, if you set it in a separate file, that's what I'm looking for. Now, why would our CSS have to go into a separate file? Why? Why do we do that? Why do we put our CSS in a separate file? Separation of concerns, exactly the golden rule. Separation of concerns calls us to keep our HTML, our CSS, and our JavaScript separate.

So to keep our code separate, we put them in separate files and then we link them all together. So tonight we'll see how to link your your HTML to your CSS. That's the idea We're gonna put our CSS into a separate file and then link our HTML to our CSS We'll do the same thing with our JavaScript when we get there as well We'll have our JavaScript in a separate file and we will link that JavaScript. Okay now There are some exceptions to this rule Does anyone know an exception to when we could put our CSS in line with our HTML? And what that means is like, you'll have like an HTML tag and one of the attribute value pairs will be style and your CSS will go actually in the HTML tag itself. But there is a time when you can use inline style and only one time. Ah, so we'll see it. Emails. Yes, emails. Like the emails you get in your inbox. They are all written with HTML and the unfortunate thing is that the The emails are don't have access to external style sheets And so they need inline CSS like there's like in email. You can't link to an external style sheet There's some stuff that they're working on right now to make that a thing But the idea is that if you want to write emails, you're gonna put your CSS in line In your email and that just goes all the way back to when emails kind of first. We're taking in style, right? cool, I Got a scam fakely on email today. It's gonna start happening.

People are gonna start sending you wild stuff We're a big community now. We talked about it on Tuesday. Be careful in these streets folks careful in these streets I'm really only ever gonna send you emails on class days and you're really only ever gonna get three emails from me. You're only ever really gonna get a class email on Tuesday, a class email on Thursday, and then like a office hours email on Sunday. It is very, very rare that I'll send you any other type of email. And so if you get some sort of weird email that's not one of those things, and even if it is one of those things, be careful. But yeah, I'm not really gonna send you any other stuff. One of the emails asked for $2,000 for mentoring. I don't have a cryptocurrency. There's, there's no Leon coin. Please don't get got scammers going to scam. Exactly. All right. So in line, the only time you can use inline CSS, right? Anytime you want to use inline CSS, it is for an HTML email, right?

They have an email, that's it. That's the only time you can use CSS inline. Now, there is a chance, there is a chance that you could use some CSS in the head at the beginning of your document, right? Like at the top of your document, we have the head. Remember that you can see my sexy body. You can actually see it tonight, but you can't see what's inside my head. Well in that sorry in the head you can put some some some style blocks in there if you want Now is there anybody know why you might put some style in the head? It's like oh, there's only like one time that you should really do that The only time you should do that is when you work at Amazon So Amazon has publicly stated for every one second their page load speed increases, they lose a million dollars a day. One second increase, a million dollars a day, all right? And so could you imagine being the front end engineer that like loads like something too heavy and page speed goes up and like they lose out on millions of dollars, right? So what folks at Amazon came up with, and I'm not sure if they're the originators, but they definitely used it and popularized it, is something called critical path CSS. It's the CSS that you absolutely need to load above the fold. Above the fold means like before you start scrolling, everything you see when the page renders, that's above the fold. If you have to scroll, that's below the fold. So what Amazon does is they put a little bit of CSS in the head of their document that just loads that like above the fold.

Then everything else goes in a normal separate CSS file. And that gives them just a slight increase in performance that can actually save them money. Now, you should never use inline CSS unless you are writing emails and you probably shouldn't use critical path CSS unless you're at Amazon and like microseconds really matter to you, right? For our normal projects, the things we work on, most of the companies you'll join, you're better off with the benefits of separation of concerns than you are with the very small increases in performance. Now, we'll be putting our CSS into a separate file going forward, but I'm gonna show you tonight why things like inline CSS can actually really disrupt what's going on. Now, if our CSS is in a separate file, we need some way of connecting our files together. And so what we can do is we can put a link tag in the head of our document. So in our HTML file, we can put a link tag in the head. And you'll see that tonight when we start writing out some code. but the idea here is that when you have this link, you can tell the browser where to go to find your CSS files. And what you're actually doing here, if you look at this href here, is you're telling the browser, hey, go look inside the CSS folder. And when you're inside the CSS folder, you will see a file called style.css. We're gonna spend some time talking more about these pathings, but what really is happening here is that your computer, even though you see folders, right, and you can open and close folders, your computer can actually just have that raw path. And so we'll see those paths as we kind of get deeper into it, but the idea here is we're saying, hey, from this HTML file, I want you to go into a folder called CSS, and then I want you to find this style.css. And so we're gonna put these links at the top of our HTML files.

That's how we're gonna link our HTML and our CSS together. Everybody said, what is the dot and the dot dot slash? Well, we're gonna see this as we get a little bit deeper, but the idea is if you are using something like the terminal, I'll show it while we're here. Let me pull this up, it's gonna be a little odd. And we're gonna spend way more time looking at this, but just because someone asked, I wanna show it. So here's my computer and I can CD into my desktop. I know it's a little small, but the idea here is I can move to my desktop and then this is kind of like the underpinnings of how our computers work. Now, if you back in the day bought like an Apple computer and you brought it home, you spent like thousands of dollars to get it home, and then as soon as you got it home, you turned it on, and this is all that you saw. That's it. It was this. There was no GUI or graphical user interface. It was just this. And so there are ways to move through your computer like you would by clicking on files just by using text. And so CD stands for change directory. And so I can change from my desktop into my stream folder.

And then I can change from my stream folder into my 100 devs folder, right? And then if I look inside my 100 devs folder, you can see all of our current classes, class one, class two, class three, class four. And so the idea here is that I can, using this terminal, I can move around my computer. I can move into folders. I can move out of folders, right? And eventually we'll get really good at using this, but that's what you're seeing here. When you look at this href, what you're saying to the computer in this case, we'll use that loosely to the browser, you're saying, hey, go into the CSS folder and then find the style.css. 425 show, what's up? How y'all doing? Hold on, do I still have it? Hold on. I think I still have it, boom, Christos in the house, what's up, 425 show is our lovely friends at Microsoft, we've worked with them a lot last cohort, they're amazing, we're definitely going to get a raid to go over them, they are an absolute trip and this is is Christos that we all love around these parts. And so we're gonna come through to you. I still got it up. All right.

Now, when you see this, we're going into a folder called CSS and then finding a file called style.css. Just like there would be a file on your computer. Well, that's all we're saying here. You don't have to worry about this too much right now, but that's what it's saying. And so somebody asked what about the dot dot slash all that means is a command to go up a level Right all that means is go up a level So like if we were in a css folder We could go up a level if I was in my stream folder. I could go up to my desktop Right and so that's all it means but for right now don't worry about it All righty the thing we're going to worry about however is the way that we write our CSS. So when it comes to CSS, we're gonna see some significant differences from other languages that we've learned so far, like HTML. We're gonna see some new colons and semicolons and curly braces, or some people call them figure braces, right? We're gonna see this different like spelling and grammar. And so we would say all these changes make up the what of CSS. All these changes make up the what of CSS. Yeah, they all make up the syntax of CSS. Thanks, thank you for the hydration. Ian, thank you for the hydration. Cheers to you.

They all make up the syntax of CSS. So something we have to be careful of when we start our journey into CSS is that there are gonna be a lot of new things that are very important. If you forget semicolons and colons, you're not gonna have a great time when you start writing out your CSS. If you forget to close your curly braces, you're not gonna have a great time when it comes to CSS. So as we start to work through this stuff, we gotta make sure that we're paying attention, we make sure that we don't kind of miss these things as we start typing. And I'm gonna show you some little tricks that I use to make sure that I don't forget stuff or forget to close stuff as we start actually typing. Now, CSS is what we write to style the content that we wrote in HTML. And so CSS has its own syntax, the way, the spelling, the grammar, the ways that we write that actual language, right? It's a markup language, so we have a special way that we write it. And so this entire thing here, and I have plenty of slides after this that break this down step by step, but the idea here is that whenever you're writing CSS, you are writing rules. so this whole thing is a rule okay rules are then broken down into selectors and declaration blocks declaration blocks are then broken down into declarations and declarations are then broken down into properties and values. So what the heck does all this mean? Oh, Doyle rules. What the heck does all this mean? And don't worry, we're gonna go through it a couple times.

When we are running CSS, we are trying to tell the browser, hey, I want some content to look a particular way. way so in this rule we have a selector this is telling the browser hey I want every paragraph right I want every paragraph to look this way okay and so we have our selector and then inside of our declaration block goes all the declarations like the things we are telling the browser that we want to have happened to that kind of content. So we have said, hey, I want all my paragraphs to have this particular style. And then I have on each line, declarations that are gonna go to how I want that content to be styled. And so we have, how many declarations do we have here chat? How many declarations do we have? We got two declarations, nice, two declarations. And those declarations are broken up into properties and values. So what we're saying is, hey, I want all of my paragraphs to have the color of red and I want all of my paragraphs to have a font weight of bold. So they're gonna be red and bolded. Nice. Now, I have a bunch of slides that kind of break this down, right? When we're looking at the entire thing, it's called a rule. In this case, the P is called a selector and it's followed by a set of declarations in a declaration block. So one more time, just for the folks in the back, whole thing, rule.

Rule is broken down into a selector, like the thing that we're targeting, right? In this case, I'm targeting all of my paragraphs and I want those paragraphs to have all these declarations and these declarations are sitting in my declaration block. My declaration block has two declarations and those declarations each have a property and a value. Property, value. Nice. All right. And like I said, there's a lot of slides here that just break this down step by step. And so one of the things I want you to do tonight after we end class is to come back through these slides, spend some time making sure, right? Making sure that you understand each piece of these because vocabulary is important, right? Vocabulary is super important. When you get into these interviews, right? When you get into these interviews to pass that sniff test and to shake that new developer stench, you got to have the right vocabulary. And I love whenever I'm interviewing a new software engineer, I love to ask simple questions. And one of the simple questions I'll ask is I'll ask, what is everything called here? Right?

You'll be surprised how many engineers forget what everything is called and so for me it just it just shows a level of detail and it shows a level of interest and a level of kind of knowing that they went through the muck to learn it right and so for me I like to ask that question and and when you're in an interview that vocabulary matters if you're if you're using the wrong words it's gonna be a little little suspect okay so make sure you commit yourself to using the vocabulary, and then use it. I talk to myself all the time. Well, I don't talk to myself, I talk to Bob. But whenever I'm coding, especially something new, I'll talk out every bit of code that I'm writing. All right, well, if I'm writing CSS, I'm writing a rule right now, and this rule is gonna target all my paragraphs. My paragraph is a selector. I'm gonna have my curly braces, the curly braces open and close, and anything that's inside those curly braces will be a declaration block, And then I'm writing out my declarations. I literally say this out loud so that the vocabulary becomes one with me, right? And so you want to make sure that you are getting that vocabulary because it is important. What you have to realize about interviews is that interviews are really two parts. An interview is one part solving the challenge in front of you and one part communication and collaboration. The better you are communicating and collaborating an interview, The better off that interview is going to go for you and a lot of feeling comfortable and confident in interviews that you can collaborate Well is knowing the terminology so you don't get tripped up while you're in an interview All righty folks, let's go ahead and take our top of the hour break if you are new here Right if you are new here at the top of every hour, we like to take a break We like to get up move around if we're able go hydrate look at something. It's not your screen Let your eyes relax somewhere else. And so let's go ahead and Bring that timer on up I'm gonna take our five minutes. We're gonna play some tunes, but please we got a lot of Really important stuff to get into tonight a lot of stuff that we need to remember for the long haul We need to get some of that diffusive time in so go ahead take your break when we come back We'll review.

Alright folks. See you in five I'll give you what you came for You You you're too bad we can't combine our channel points for only fans teach me something Bob Bob has lots of things to teach Juan my split keyboard is just the Kinesis Advantage, nothing wild. Embarrassing my stuff just fell out of it when I did that. What is actually happening when we break a website? That's really interesting. So it's just as the server is being overloaded. Like a lot of times too many people are making requests and the server can only handle so many of those requests before it goes down. Now there are a lot of stuff that you can do to like make sure that doesn't happen, but sometimes you just hit the right thing with the right request, like creating too many accounts and it all goes down. Now something that we actually did with the 425 show that was here a little bit earlier is that we did some identity management and we use Microsoft for our identity management. So if glitch was using that maybe they wouldn't have went down. I don't know. There you go All right, folks. Come on back. Come on back I also don't know if they went down or if we are just because they just got you got blocked Does the server literally stop executing commands it can depends on what the like the fall over is but yeah It can just get behind it can stop Different things can happen And we'll get, once we get to node and we're building our own servers, oh, well, that's much fun dealing with all that. All right, folks, come on back.

Come on back, folks. Oh, when refactoring code to declarations to precede one another. Nah, some people like to go alphabetical, but I think that's just too much. Whatever you do, just be consistent in what you do. All right, let me chill the music here. We're gonna jump right back in. Do I dabble in game dev? No, I always kind of want to. Like after like Lana Lux, the person that we rated and they rated us back the other day, just like watching them like build something, like I love programming because I can create, Like I can bring something into existence. And I really like game development in a way because like, not only is it just coding, but it's all this other stuff, storytelling, 3D modeling, all this other stuff that you could like learn that I don't know. And that's what gets me excited. Like the idea of like learning all these accessory skills to become better is something that gets me excited. Like game development itself is not like something where I'm like, oh, that's a passion, but learning all those other cool things, I think would be really interesting. Cool. I really do want to make, like, I don't know if I can say it.

I do want to mod some stuff. Leave it at that. All right, folks, come on back. Let's get into it. All righty. So like I said, there's some more breakdown in the slides here. We don't have to go through this. but let's play our favorite game around here. What is this? All right, chat. What is this? What did I just circle? Uh-uh, there we go. I just circled a selector. Nice, that is a selector.

How about this? What's that? I remember we have slow mode on and I think it's a 30 second slow mode, so I might not be able to answer all of these. Yeah, it's a declaration block. It's not a declaration. It's a declaration block. Notice I wrapped around those curly braces. It's a declaration block. All right. What's this? What's that? That is a rule. Nice. There's a rule. Cool.

About this. a value. Nice. It is a value about this. Nice. It's a declaration. Cool. If you're here and you're kind of just watching and you have the means to type, you should be typing these the answers out, get in here, give us, give us, give us your thoughts. Like the more, like when you actually type this out, it makes your brain activate. You gotta do a little bit more cognitive effort. You gotta, you gotta do something a little bit more and then you're gonna remember it a little bit easier. So don't just zone out and watch, get in chat. I know it's just a wall of them, but like you doing it, it's for you, not for me, right? It's gonna help you remember and retain stuff more. All right, have one more, one more.

about this. What's that? That is a property. Nice. So, we got the whole thing being a rule. A rule is broken down into selector, declaration block, declaration blocks broken down to declarations, and our declarations are broken down to properties and values. Properties and values. Nice. All right. Now, there's something interesting about CSS. And the thing that's interesting about CSS is that it is read from top to bottom, right? And what comes above can be overwritten by what comes below, right? So the rules that you write above can be overwritten by the rules that come below. And we call this the cascade. What does CSS stand for?

What does CSS stand for? Yeah, it stands for cascading style sheets. So this is the cascade. Excuse me. The cascade is this idea that what is above can be overwritten by what is below. So if we look at this, all our paragraphs are gonna wind up being what color? Chat, what color are our paragraphs gonna wind up being? Nice. All right, most folks got it. All of our paragraphs are gonna wind up being blue. We got a posture check in here. We got two of them, we got a stretch. Thank you. And we got a hydrate, cheers to you. It's gonna be blue, right?

Paragraphs start out red, but as we go down the cascade, they are blue. So what we will see rendered in the browser is a blue paragraph. Now the interesting thing is the paragraph will be blue, but it will also be bold, right? It'll also be bold because we didn't override any font weight. So you get both, right? You get both. You get the ability to have something that is bold and you get to have something that is blue because we overwrite the color in the cascade. Now, it's kind of hard to see like why you would need this early on, but our CSS is gonna get very complex. And there are going to be some times where we want certain property value pairs on all of our paragraphs, and then some of our paragraphs we want to be different. Right now, this wouldn't be something that you would really write because they both have the same level of specificity. So you would kind of just put it here, but we're gonna get to specificity in a second. But the idea is that we're gonna overwrite certain attributes in certain times. And so having that cascade is gonna be something that we need. Cool. Why might we link to a separate CSS file?

Yeah, for organization, separation of concerns, exactly. Exactly. For folks that are kind of confused on the cascade, give me a little bit to get the specificity and then it'll make more sense. All right, so we want to keep our CSS in a separate file because of separation of concerns, that organization, and we're gonna see a little bit more why that's really helpful. All right, before we start typing out some CSS, let's look at some simple CSS that we'll use a lot, okay? So the first thing that I think most people start off when they're writing CSS is color. Somebody said, would you ever have multiple CSS files? Yeah, you would, but for now we're gonna probably stick to one. Yeah. All right. One of the first things you'll probably do when you're trying to style your content is use color. And there are four main ways, four main ways that you can use color in CSS. We have words, hexadecimal values, RGB values and HSLA values. Now, a lot of times you will be given a design. And if you were working with a good designer, they're gonna give you the colors of everything.

So the designers I work with, they give me the colors, they give me the fonts, and I don't have to do any guesswork. But when you're working on your own projects, you don't have a designer, or maybe you are a designer, right? You're gonna have to use some colors. And so where a lot of people start is they just use the color Keywords, so any kind of color keyword you can think of red blue green yellow They all work. There are even some more fancy ones like Dodgers blue Royals blue, right? they will all work in terms of Coloring your your content right when you connect your CSS There are also hexadecimal ways of doing it, which is kind of like the OG way to introduce color. It's kind of what natively runs in most browsers. We also have something called RGB, which is standing for red, green, blue, and it's just a different way of representing color. So here you can see 25500. That means all of red, zero green, zero blue. And so that's gonna give us red, right? And then we also have this lovely A on the end, which is our alpha channel. And that alpha channel just handles transparency, like how opaque something is, like can it be see-through or not? And then last is HSLA. If you're a hipster, you're probably using HSLA.

It's kind of the new school. A lot of designers are folks that come from like a print background. They'll use HSLA, right? I can't think of color that way. Hue, saturation, lightness, I've tried. Just doesn't stick in my brain. I mainly use RGBA and I love RGBA because I love that alpha channel. The stuff I had to do back in the day to get transparent colors, it would blow your mind. And so for me, I can really think about colors in terms of RGBA. I can sometimes like look at colors and know what the RGBA value is gonna be pretty closely. And I love that alpha channel now a lot of folks and what I recommend you start with are just the color keywords But the color keywords can get you into a trickier situation Why what tricky situation do you think you might get into if you're just using color? keywords Yeah limited selection and I said racism, limited selection, right? When I say red, what kind of red do I mean? Do I mean like crimson red? Do I mean like scarlet red?

Like there's a lot of different types of red. And so you don't really get that trippy red. You don't get any kind of customization. Whenever the browser gives you for that red is the red that you get, right? So when you're just working on your own projects, or you're trying to move quickly, I use color keywords. Like if I don't care what it's like, if I don't care about the end ultimate color, if I'm just trying to prototype or get done quickly, I'll use the color keywords. If it's something that I'm doing professionally, I'll probably use RGBA. But it's kind of up to you and your preference. There's really no right or wrong here. If you're working at Amazon, and I feel like I have to do all these Amazon caveats because I have a lot of students that go to work at Amazon. Like I think we're nearing like 20 people at Amazon now, which is pretty wild. They might care about what? We talked about a little bit earlier. They might care about what? They might care about speed.

They might care about load speed, right? They want their pages to load as quickly as possible so they can make that money. And there's actually like an infinitesimally small amount of time that color keywords or the non-way the browser's using it might have to go to be turned into a hexadecimal value. So if you're an Amazon, maybe in some weird world, you might have a conversation where we should use the browser's native or the instance that they're going to use, so there's no conversion that has to happen. You will never, ever have to worry about that. But if you're shaving like microseconds, microseconds, microseconds, that might be something that comes up. So yeah, you can use color keywords, you can use hexadecimal values, you can use RGBA, or if you're a hipster or come from a print background, you might use HSLA. Cool. Another thing that you're gonna wanna do often is probably change the fonts that you're using. And so fonts are actually files like that. The browser needs that file to know how to render a font, right? It doesn't actually know how to do a lot of different fonts. There are some that are built into the browser that you can use, but if you want like a fancier font, you're gonna need to get that file and give it to the browser so it knows how to render your text using that font. I use Google fonts for most of my fonts. Sometimes there are weird ones where I download them off some shady websites.

No, that's not true. I pay for all my fonts. Pay for your fonts. I, in another life, did not pay for my fonts, and I got got. That's all I'm gonna say. Got got, got some nasty letters. So always pay for your fonts, but you don't have to pay for fonts. You can just use Google Fonts these days, all right? Use Google Fonts, and Google Fonts will give you that font file, and the really cool thing is is they're gonna host it on their CDN, their content delivery network. So it's gonna be really fast to load that font file. The browser might already even have it in a lot of times, and if not, it'll work really, really fast. And so what you can see down here is the CSS for loading the font that we put in our head. So if you want a font, you need to link to it in your head. So you need to link to the font, and then you need to link to your CSS file. And if you don't have both, you won't be able to actually see that font.

Why does the link to the font need to come before the link to our CSS file? It is a little bit of a cascade, that is true. Yeah, it's because if the CSS needs it, Like if we're gonna be using it in the CSS file, well then we need that font before we actually use it, right? If we don't have the font, we can't use it. So if you load your CSS file first and then the font, well, guess what? That CSS is not gonna be able to use that font because it won't have it yet, right? Now there's some things we can do to like preload and all that stuff, but the idea is that we want it to have that font before we try and use it. And so the funny thing is we see three different fonts here. Why do we have three different fonts listed here? They're the fallbacks, exactly. If for some reason, we're not able to get Source Sans Pro from Google, well, then it's gonna try using Helvetica. And if for some reason it doesn't have Helvetica, then it's just gonna use whatever default Sans Serif font that it has. And so often when you're writing out your font family, like you have your font family as the property, you're gonna put multiple values as fallbacks, right? If Source Sans Pro, my favorite font does not work, then we'll do Helvetica. And if Helvetica doesn't work, then we'll just use the regular old Sans Serif, right?

And so that's the idea is that there are fallbacks in case that font doesn't load. Now, it's really easy to get Google Fonts. You just go to fonts.google.com and you can find whatever font you like. I like Source Sans Pro. Look at it, oh, it's beautiful. Look at this beautiful font. And the cool thing is you can select the different boldnesses, or we call them weights. Excuse me. You can select the different weights. And so if I want like a normal bold, that'll be like the 700, so I'm gonna select the bold. and I want the regular 400, just the regular font. Boom, there we go. So I have selected the regular 400 and the bold 700, and then it literally gives you the link to put in your head. So you would just copy this link and put it in your head and boom, you got the font. It's literally like two clicks and a copy, and now you have the font.

You put that in your head before your CSS file and now you have those fonts. Now, what you'll notice is I had to select the weights. If you do not have the weights, like if you don't have that particular file, you can't make your code a particular weight. Like right now, I don't have the 300. Like, I didn't select the 300. So my browser would not have Source Sans Pro at 300, Unless it had loaded it from somewhere else, right? It won't have it. And so what you gotta be careful of is that you wanna make sure you grab the weights that you're gonna use. So you can see in this link, I have the 300, the 400 and the 700, so we'd be good. But if I grab just this link, I don't have the 300, just the 700 and the 400, right? And so you wanna make sure that you have the weights that you're gonna use, but you don't wanna have the weights that you're not gonna use, why? Why? Why wouldn't we just select all the weights? Why not grab all the weights? Speed, too heavy.

If we grab all the weights, that means more files that we have to download. Remember, fonts are actually files that the browser needs to know how to render the font at those different sizes and different shapes. And so if you just grabbed all the fonts, it might take a little bit longer to load. Now we're talking about shaving microseconds here, but it can all add up. And so you just want to grab the weights that you know you're going to use. Nice. Now, a lot of times when you're trying to do something in CSS, your best help is the MDN. If there's something that you want to do and you don't know how to do it, you can always just throw it in Google to get to the MDN. So here is a let me Google that for you link that will type in the word italicize text CSS MDN. So if I wanted to italicize text using CSS, I know the MDN will show me, right? And so I can use that Google to get me to the MDN that'll show me how to exactly italicize text. I don't know if this link still works. Let's try it. There we go. Let us do its work.

Oh, it didn't do it. Oh. There we go. So if we typed in italicized text CSS MDN, what we're gonna see this very first thing here, The very first result from the MDN is this font style. So, oh, if I want to italicize text, font style is the what? Font style is the what? Anna, thank you for the hydration. Here's to you. Exactly, font style is the property and what would be the value? What would be the value? We can see it. It'd be italic, right? So right here on the mdn This is how I would italicize text font size italic So if there's any type of styling you want to do and you don't know how to do it All right, and you don't know how to do it Use the mdn Well gamer, thank you for the gift of some Minty fresh thank you with hydration cheers to you Cool Let's keep pushing All right, I wanna code some basic CSS together. So in the materials from today, class for materials, if you need the materials on Discord in the follow along materials, there is a zip folder. You're gonna download that zip and you're going to unzip it, right?

So what I need you to do is I need you to have those materials. If you need those materials, go get them. But you should have a class for folder and inside that class four folder, I have my class four materials. And all I'm going to do is I'm going to drag this material folder, right? I'm going to grab, drag this material folder to my VS code. And it's going to open up the entire folder for me. And the reason why I like to open up the entire folder is because I love having this nice little tree view on the left-hand side. I know that's really tiny for you to see, but what that is, is it shows that every, gifted to nightbot, thank you for the gift. What you're seeing here is that lovely tree view, right? That lovely tree view, and it just makes it easier to see what you're doing. If you're connecting things right, if you have them in the right paths, right? That's a gritty and fiddly. Hey, I love it. Thank you for following, that's a good username. It just enables you to see everything, right?

Enables you to see everything, enables you to know when you create CSS files, if you create them in the right spot. So all I did was drag that folder to my VS code. You can also just do folder open or file open in the folder and you'll get it. Cool. All right, so if we look at the HTML in the basic CSS folder. So I had this basic CSS folder. I'm gonna click at it. If it's not working, you probably didn't unzip it. You make sure you gotta unzip it. So now I have my entire materials open. I'm gonna go in this basic CSS folder and we're gonna see inside the basic CSS folder, we got an HTML file, which is already open here, nice. And you're gonna see that this HTML file links to a style sheet. So if we look in this CSS folder, we're gonna see the style.css that I can open and it's completely blank, right? Completely blank. Completely blank.

Hold on, CC's not on. One second. And make sure the closed captioning is working. One second, I want to make sure the extension is working. One second, folks. All right. Cool. All right. Closed captioning should be working. I'm sorry that it wasn't working. I got to add that to my pre-stream ritual. But yeah, CC should be working again. And you can always use Google Live captions as well. So if for some reason the CC is not working, Google Live captions also work. I talked about that like a class or two ago.

But cool, the overlay should be working. Sorry about that. Cool, all righty, let's jump back into it. So, Peabody, hey, thank you for the gifted subs. All righty, thank you for the gifted subs. So the idea here is that we have the index.html that is linking to our CSS, linking to our CSS, right? And so that link, if we link, if we look, we go into the CSS folder, there's a style.css and it's completely empty. this is where we are going to put our styles, like our actual rules are gonna go in here, okay? If we look at the HTML, there are some things that it's asking us to do. If we look, it says the H1, make this text blue, underlined and have a gold background. So we're gonna do that. We're gonna make this text blue, underlined and have a gold background, right? We're not gonna do any of the fancier stuff right now. We're just getting used to the basics. We'll have time to get into reset and we'll have time to get into all the other fun ways that we can kind of normalize or set our CSS.

Dab, hey, thank you for the gift of subs. Hope you're doing well. So let's go ahead and start off with just this H1, on making it blue underlined and a gold background. So let's go to our style. We're gonna do H1. Our curly braces are gonna open and close. And look what I do. Every single time I type out my curly braces, I type them fully out and then I hit enter. Why do you think I always type out my curly braces and then break them? Why not just like open my curly brace, do my declarations and then close it? Exactly to not forget I will forget to close my curly braces And if you do not close them the rules that come after it just won't work most of the time All right, and so just so I don't forget I always make sure I open and close before I write any of my declarations Because it just saves your butt so many times. So I highly recommend that you do that, too All right. The first thing it said was to make it blue. So I'm just gonna go ahead and do a color blue It said to make it underlined. What's the property for underline?

How do I underline something? What would the property be? Ooh, yeah, people are on top of it. Text decoration. If I didn't know that it was text decoration, where could I have gone? The MDM, baby, exactly. could have went to the MDN. Exactly. All right. So, we're gonna do text decoration, and look at it trying to help you. Here are all the properties, right? Here are all the properties that we could use, right? And so, it's trying to help us here. It's like, all right, text decoration, and then here are all the options for text decoration. So, the cool thing about using VS Code is that if the file is saved, if it is saved as a CSS file, it's really gonna try and help you, right?

And so I can do text decoration, underline, and be all good. And then the last thing, the last thing was, what did it say? Have a gold background, cool. Let's go ahead and give this a gold background. Go ahead and do background. And then I can just do gold. So with CSS3, like the third version of CSS, you really don't need the hyphenated values anymore. Like background hyphen color, you can get away with just background. Alrighty. I saved, I don't have that circle anymore, so I know that it's saved. If I go back to my HTML file, I can right click open in default browser, right? So I want it to come back and open in Chrome so I can just right-click on my HTML open in default browser and There we go. We can see Right, we can see that My h1 is blue It is Underlined and has a lovely gold background. So beautiful Look at it first try Somebody said you can use live server for auto-refreshing, no, don't use live server when you're first starting and here's why. I have seen individuals go into interviews, not be able to use their actual setup and and they constantly forget to save.

They constantly forget to refresh. They constantly don't know the very basics of how to work in a text editor. And so please, just give me another week. Another week of doing it manually. Get used to saving and reopening and refreshing, right? Like I can't tell you how many times I've seen people in interviews I have people like students that have come back and told me Leon It wasn't working because I forgot to refresh Like I was I was working I was saving I forgot to refresh Right, and so my changes like I was sitting there all the code was correct. I just didn't refresh the frickin page. So please Make sure from the beginning Save, open, refresh. Say it with me. Save, open, refresh. Save, open, refresh. Save, open, refresh, right? Just get used to it. So that, so that way you don't lose that skill and you don't have that happen to you in interviews. Cool.

All right, so we did the first one together. We did the first one together, but there's one, two, three more that you can do here. We're styling an H2, a paragraph, and an H3. So, what we're gonna do, bring five minutes up on the board here, and you're gonna go ahead and do the next three on your own, and then we're gonna go over them together. Cool, how about it? I am gonna keep talking, but I'm not saying anything important. I'm just answering folks' questions. But go ahead, take the next five minutes, and see if you can answer the next three on your own. Get out of here with the done's already. Can you show your CSS file? Yeah, of course. Here's what my CSS file looks like. Each one curly braces open and close. Each property is separated from the value with a colon. And then notice you have a semi-colon at each line.

Yeah, give it the old 100 devs try Yeah, some people really do like splitting their files I just I just don't like to split files I find it faster to like flip through them I don't know. It's just a personal preference for me But yeah splitting does help a lot of folks early on some people like to have their html next to their css Yo, so Beast, I use a extension called Open in Browser. So you can just go, if you're using VS Code, go to the extensions and mine's called Open in Browser by Tech ER. And then on the HTML file, you just right click Open in Browser. Dragon said, this is one ugly site. Yeah, I'm not a designer. How do you change the language to CSS in VS Code? Just save it as a CSS file. My CSS file is correct, but my changes aren't showing. Make sure you saved and make sure you refresh your browser. How do you fix that I'm not a designer as a front-end dev? Front-end devs don't have to design. Man, the best front -end developers I know never touch the design in their life. You take the designs and you build them in front-end code. But sometimes front-end developers like to learn a little bit of design, but definitely a completely different job.

Yeah, if also it's not working, make sure all your punctuation is there, make sure your colons are there, make sure your semicolons are there, make sure your curly braces close. Mobile help, please. I'm not sure what that means. CC the zip file is on our discord and the follow along materials channel. Will you do split view while we work on this? No, I don't like split view. I personally like to have like my files just maxed. Yeah, 21 we'll use more extensions as we get further along. In the beginning, I like to use as few as possible. Is it archaic in an interview to use background color? It's not archaic, it's just different. A lot of folks kind of moved to not using the hyphens anymore with CSS3. Brad, thank you for the stretch. Ooh, I don't know if you heard that, geez. You did it, congrats.

Congrats. How do you run the CSS again? If you just open the HTML file, it'll run for you. The browser will grab it and do its thing. Ooh, I see a lot of done's coming in chat. If you do finish, go ahead and throw done in the chat. We got about 30 seconds left. And don't worry if you didn't finish, that's okay. We're gonna go over it together. Are you supposed to get Roboto from Google Fonts? Exactly, yeah. You're in the wrong file if you're seeing Zebra and Duck and all that stuff. We're in the basic CSS folder. Mdn is really good the best love me the Mdn I get an Mdn tattoo All right folks come on back even if you didn't finish that is okay We're gonna go ahead and go over it together Congrats on everyone that finished, if you didn't finish that's okay we're gonna go over it together. All right let's go ahead and take a look at the next one, my border is thick.

So next one said make this text purple, bold it, 25 pixels, and have an orange border. All right, so I think that this is too much for me to remember. I don't want to keep jumping back and forth. I don't want to do split view because I'm a curmudgeon. So what I'm going to do is I'm going to come here and I'm going to make a comment. I'm going to make a comment. So I'm going to paste all this and I am going to highlight it. You can use keyboard shortcuts or your mouse to highlight it. And then I'm going to do command forward slash. And commands forward slash turns it into a comment, meaning that it won't be read by the browser, but myself and other developers can see it. And what you'll notice is that the comments in CSS are a little bit different than the comments in HTML. In HTML, they use like the carets and the bangs and the hyphens. In CSS, it's forward slash asterisk and asterisk forward slash the end. And so now I have a nice comment and I don't have to like jump back and forth. I can just go ahead and start styling my H2.

Let's do that. H2 opens, my curly braces, I type them all out, and then I break them. Get used to that pattern of opening and then closing so you don't ever forget them. All right, make this text purple. I'm gonna go ahead and do color, purple, and then I wanna make it bolded. We've kind of already seen bolded before, right? So we can go ahead and do font, and we know it's weight. We just saw that on the slides before and I can do bold or you can actually use the number like if you had a specific font And you knew that it was a 700 in weight and you could use the 700 there Um, i'm just gonna go ahead and use bold for now Right cool 25 pixels What is what handles the font sizing like what's what's the property or the size of the font Yeah, font size, font size. And we're gonna go and set that to 25px or pixels, right? We'll get into other ways of doing measurement. We'll see rems and ems and all that stuff in the future, but now pixels. And we want it to have an orange border. So we're gonna go and do border. And it didn't say how thick it wanted it, but we're just gonna do like, I don't know, let's do like, let's make it a little bit thicker than normal, like not like one pixel, but five pixels, solid orange. Cool.

So what this is doing is with CSS3, we got the ability to give borders all on one line. Before CSS3, we had to do this as three separate property value pairs, but now we have this lovely shorthand, right? So before we have to do border size, border type, border color as three different lines, but with CSS3, we can all do it on one line. So this is border, five pixels, solid orange, nice little shorthand here. Cool. Notice that I made sure that my curly braces open and close. I know that there's a colon between each of my properties and values. I got my semicolons at the end of each line. A lot of folks are saying, Leon, it didn't work. Probably why it didn't work is you forgot your semicolons, you forgot to save, and you forgot to refresh. Make sure that all those are in order, and that'll probably solve the problems that you're having. All righty. So folks are saying, does order matter inside of here? Inside, it really does not matter order. Some people like to go in alphabetical.

I think that's kind of a waste of time. Just whatever you do be consistent in it. So like, you'll notice I'm always gonna do my color first. Right? That's just something I decided to do. So I'm gonna stick to it. It's up to you. All right. How does a developer know what pixel size to use? Sometimes your designer gives that to you as well. Otherwise it's up to you to kind of figure it out. You kind of play around with it. Let's go ahead and save. It's not saved. We can see that circle at the top.

We go ahead and save. And I'm gonna go back to my browser and I'm going to refresh. Beautiful. My text is purple. It is 25 pixels. It is bolded. and it has like this lovely border going around it. All right. Let's look at the next one. Let's make another comment. Make this section a width of 50%, a height of 200 pixels, a background of gray, a border of black, and a paragraph with the text being white. All right, let's copy this. Let's go back to our style. I am gonna go ahead and paste it. Whoop, not find.

I'm going to go ahead and paste it and I'm going to turn this all into a lovely comment All righty The have without an e is really bothering me you got got thank you for the engagement. Thank you. I appreciate it If you're watching on YouTube, go ahead and type have gang for me, please if it's bothering you All right, so we're gonna start with the section. Section, curly braces, and we're gonna do a width of 50%. So width, colon, and then our 50%. Beautiful, semicolon at the end. Height of 200 pixels, height 200 pixels, nice. I'm using tab. That's how I'm able to go a little bit faster, really. He literally just said YouTube run switch. That's because we have a lot of people, thousands of people that watch on YouTube that can't join us live or the ketchup crew, maybe. Shout out YouTube. What up YouTube? Go ahead and like and subscribe and click that notification bell for us. Oh yeah.

All right, background of gray. Gray, beautiful. And a border of black. So let's go ahead and do our border. Let's make it a little bit, let's do like three pixels solid black. There we go. A nice border, a nice background. And it said the paragraph text white. Can I make the paragraph text white inside of this rule? Maybe, maybe it would inherit from this section. There is this level of inheritance that happens in CSS where sometimes it can inherit colors from a parent element, right? So we'll see that as we go a bit further on. So there is this level of inheritance that sometimes if we put a styling on a containing element, it might inherit down to the stuff that's inside of it. Let's not worry about that for now. Let's be more specific here and target that paragraph.

and let's go ahead and give that paragraph a color of white. Cool. Now, if we go ahead and save this, and we check, there are no other paragraphs. We don't have to worry about all of our paragraphs turning white. There's only one paragraph, so we're in the clear here. We can figure out how to target this specific paragraph in a few minutes as we continue our lecture. All right, so it looks good. We got our section all set up. We got a paragraph all set up. We saved let's come back Why am I not seeing my border or my background? Why is this not working? What happened? Aha did not refresh There we go, I refresh you got that width you can see it's a nice 50% it's 200 pixels in height We got a background a border and the paragraph text is white. Nice All right, one last bit we have here. We have one more that was on the HTML.

Make this footer have a black background with a light green border, and this text 20 pixels white plus a font family of Roboto. Thank you very much. I missed the, I shouldn't sing. I might get, I might get, I might get copyrighted again. I think it's that good. Let's make a comment. Gonna just highlight it all. You can use keyboard commands to highlight it quicker. There we go. You did a comment, command forward slash, control forward slash probably on your, your machine if you're not on a Mac. We don't get got, we go get. All right, all right, so footer, curly braces open. Let me bring this up a little bit. And we're gonna give it a black background. So background, black, beautiful.

We're gonna give it a light green border, border. Let's do five pixels, solid, and light green. What did you use to color it light green? Oh, I see some hexadecimal right throughout the RGB value though. Oh, there we go. One RGB value, but all of y'all just want the light green. You're like, Lee. I ain't here to play light green. Here we go. All right. Uh, so that was the footer and let's go ahead and let's just go ahead and check, make sure that worked. Beautiful. We can't see that text though. That text is not working because we need to make it white. It's black on black, so we can't see it.

So let's go ahead. That was inside of an H3, so I can target the H3. So I can select the H3 here, and I can give it a color of white, and I can give it a font family of Roboto. Roboto. All right, I'm gonna give it a fallback though of sans-serif just in case All right. Now, do I have this font this font at the moment? Where do where do I need to check to see if I have this font? Where specifically in the HTML? Yeah, we gotta go check the head. Let's go check the head All right, we go to the head here. We see the link to the CSS file, but we do not have the link to the font. So let's go to Google Fonts and get that font. And so I am going to go ahead and make sure I don't have anything from Source Sans Pro. I don't want any of the Source Sans Pro. I just want the normal font.

So let's go to fonts. Let's Google Roboto or search for Roboto. Here we go, Roboto. And I just want the regular 400. I didn't need to bold it or anything. So I'm just gonna get the 400 and then I'm gonna copy the link. I'm gonna take that link and I'm gonna put it in the head right before my style sheet. I like my stuff to be clean, so I'm gonna indent. There we go. There we go. So now I have the link that Google gave me, right? I have the link that Google gave me, and I have the link to my style sheet. Why do we put the font before our style sheet again? Lower the cascade, yep, exactly. So that we load the font before we need to use it, exactly.

We know that even in the links, there's a cascade, right? It's going and grabbing the font and then running our CSS file. And so if we want our CSS file to be able to use it, we need that font file beforehand. There are a lot of like fancy stuff that Google is doing here with like this pre-connect and in terms of like how quickly it's rendering, right? How fast it's loading, right? And so make sure that you don't go too wide on that. just know that it's doing what it needs to do to load these fonts for you as quickly as possible. All right, so we've got our fonts and then our font family. We gotta save this HTML file, right? We gotta save the HTML file. And then we can go ahead and refresh our page. There we go. And we can tell that this font is different than the other fonts on the page, right? We got that nice like chunky Roboto look. And so yeah, we got the nice, beautiful, light green border, the black background, the white text, and it's using that Roboto font.

Ah, 20 pixel size, let's see. Oh, text 20 pixels. Let's go ahead and do that. Font size, 20 pixels. Cool, let's save it. Let's refresh. Ooh, second try. All righty. Take a look at this. Put questions while we're here and then we'll take a break. Put questions while we're here and we'll take a break. We used a 20 pixel font size. Single or double quotes, does it matter? No, it does not. How do you know to choose five pixels solid?

Because the MDN told me to. So if you go in the MDN, it shows you how to use that border. And so there are different types of borders that you could use, solid, dotted, there's a bunch of them, dashed, I think. I have issues with the paragraph, It's red and underlines. That's your text that are trying to tell you there's something going on Make sure it's saved as an html file How do you separate the h3 and the footer well we can start targeting them uniquely And we'll do that when we come after the break. We'll see how to target stuff. That's not necessarily We don't want to target everything we're going to target specific items. We'll see that when we come back from the break I lost connection to local host. That means you're using like live server or something that that uh But right now, don't be using that. Just save and open manually. No. You wanna see the HTML? Sure, let me show you the HTML. My HTML is exactly the same as the one I gave you, except I just added the links from Google, that's all. I didn't use section or footer and I got the same results.

I'm not sure what you mean by that. Glad you're having fun. Cool, all right, folks. Can you show how to get the Google font again? Sure, I think that'll be the last thing and then we'll take our break because we're at the top of the hour. So all I did is I went to Google Fonts, so fonts.google. I'm just gonna clear them, so there's nothing in our selected. All you gotta do is go to Fonts and search whatever you want. We searched for Roboto, we found Roboto, and then you gotta pick what weight you want. So I just wanted the 400 cause I'm not gonna bold or anything. So I selected that style, right? And when you select the style, it adds it to like your little list up here. Sometimes you have to click it, sometimes it just opens it for you. If you click that little button at the top right, boom, there are the links that I put inside the top of my HTML. Is there a reason why you didn't use footer H3?

Cause we're not there yet. We're gonna show you that when we come back from break. Is it scary that Google knew I wanted Roboto? I think that's the default one that they show. That's kind of why I use it, yeah. All right, folks, we are at the top of our hour. Let's go ahead and make sure we stay healthy, take our break. If you are able, please get up, move around. Man, time is flying, we're having fun over here. Make sure you get up, move around if you're able. Grab some water, hydrate, kiss some babies. Play with some dogs. And we'll be back in five, folks. We'll be back in five a little bit, I'll give you what you want, Bob. You Space you got a brownie I'm jelly Bob is so engaging I'm glad I feel like we need, I feel like I need three screens.

Yeah. I work with three. Normally I'm really just working with two and my laptop, but when I'm really in the Thick of it, I got three going. Bob told us your deepest secrets. Do you watch Star Trek? Yeah. I'm a weirdo though. I'm a Deep Space Nine fan. The best. Next game on the iPad, eh? Okay. Which screen do you recommend? I don't. My setup is way too expensive. But I didn't pay for anything in my setup.

So when you negotiate your jobs or you negotiate like client contracts, you can negotiate what is called professional development funds. And especially right now, since everybody's working from home, it's actually one of the biggest things that you will probably negotiate is like professional development funds. And so over three years, I have spent my professional development funds to like build up my setup. And so I have a 4K 144 Hertz monitor. I have another 4K monitor. I got a 3090, a Threadripper CPU. Like I got a lot of stuff that I would just never tell people to go out and buy because I never actually bought it. I negotiate my client contracts and I negotiate my employment contracts so that I can get the good stuff. You know, that's something to keep in mind. Right now I saw somebody double their, literally like this morning, I was helping somebody negotiate an offer and they doubled their sign on bonus. They doubled their sign on bonus and they got PD funds to buy like a work from home setup. So that's like an extra 15K they got that they negotiated for that. So something to keep in mind. So yeah, my stuff is ridiculous, but I didn't pay for it. My first monitor that I bought, no lie.

My very first monitor that I bought, I went to Radio Shack, let this sink in for a second. I went to Radio Shack and I asked the guy at Radio Shack, Do you have any monitors that you haven't been able to sell?" And they were like, yeah, actually we've got a bunch in the back. I was like, great. Can you give me a discount on that monitor? And they were like, yeah, sure. We'll give you like a, give me like half off. And so I got my first monitor from Radio Shack for half off. Cause I asked if they had any that they couldn't sell. But yeah, you don't need, it was a ViewSonic I think, yeah. You don't need fancy gear. You don't need any of that crap when you're first starting out, don't go out and buy a brand new computer because more often than not, work is going to give you a computer. Like a lot of places just give you a new MacBook Pro. So like don't run out and like do a fancy setup. You just don't need it. All right, folks.

Welcome back. Welcome back. Let's get into this. All righty, a few more things to get through tonight and we'll be on our way. Now a lot of folks might have noticed, Leon, how do we target specific elements, all right? Shields, thank you for the stretch. How do we target specific elements, okay? Okay, well, there are kind of some very key ways to target specific elements. You can use things called classes and IDs, which we'll get to next week. On Tuesday, we're gonna get into, we're gonna cover them a little, we're gonna hint at them tonight. We're not gonna really start using them until next week. So for your computer, right? So sorry, for your computer. For your homework and for your lab today, I don't want you to use any classes or IDs. So for the homework that you start this week and for the homework that you do over the weekend, no classes, no IDs.

We'll get into the thick of them next week. I want you to practice using your relationship selectors. Okay? Knowing your relationship selectors is gonna save you a lot of headache down the line. So no classes, no IDs, or homework this weekend, just these relationship selectors we're about to go through. So here we can select in our CSS elements based on the relationship in HTML. So here we have a section and inside of that section, we have a paragraph, right? We have a section and inside that section is a paragraph. Whenever you have a tag that is inside of another tag, we call that a relationship. And right now, this is a parent-child relationship, okay? And a parent-child relationship just means that one tag, the child, is inside of another tag, the parent. Now, we can target all the paragraphs on the page by just selecting a paragraph. But what if we just wanted the paragraphs that were inside of a section? I gotta check something real quick. Hold on.

All right, cool. I wanted to see if the CC worked when I muted my mic. Cool, all right. All right, so what we wanna do is be able to select specific elements, right? Select specific elements based on the relationship to other elements. And so here, we're seeing something very clever. This is a direct child. You can have a space, which would be a parent-child relationship. And then this is a direct parent-child relationship. So what I am saying here is give me a paragraph that is the direct descendant, the direct child of a section, nothing in between, nothing else that we're wrapping around. Give me a paragraph that is immediately with inside of a section. So that is a direct child. When you have that right caret, that means direct child. And so what would happen is all the paragraphs that are direct children of sections would now be read. Not every paragraph, just the paragraphs that were direct children of a section, okay?

Let's look at something slightly different. Here, this paragraph is the direct child of what? This paragraph is the direct child of what? Yeah. Oh, that's nasty. I don't like this new T. That paragraph is the direct child of the article. Exactly. This paragraph is the direct child of the article. Right? This paragraph, however, is a child of the section. It's just not a direct child. It's kind of like a grandparent, right? Like this section is a grandparent to this paragraph. this paragraph is a child of the section.

It's just not a direct child. So the paragraph is the direct child of its parent, which is the article, and it's a grandchild to the section, right? So here we have section space P. When you have that space, it does not matter how deep that paragraph is nested. It will still work if there is somewhere up the chain, a section that it is inside of, right? So here, this means direct. There cannot be any intermediary. There could not be anything between the paragraph and a section. But here we have this article. So if I do this, If I do that, this paragraph would no longer turn red because this paragraph is not the direct descendant of a section. It is the direct descendant, right, of the article. Can you do relationships with classes too? Yep, you can. Often you're gonna have like, we call it like an anchor, like your idea or class, and then you're gonna have relationship selectors after it. So that's why it's important to know your relationships first.

Cool. We also have another type of relationship, and that's called a sibling. So here, this is a direct sibling. You're saying, find me the paragraph whose immediate sibling was a paragraph. If we look, this paragraph, hello YouTube, has an immediate sibling that is hello Twitch. So this would make hello YouTube red. It wouldn't make hello Twitch red, why? Why would hello Twitch not be red? It is powerful, Twitching, yeah. They hate each other because the hello Twitch does not have a sibling that's above it doesn't have it's not the direct sibling only this paragraph is the direct sibling because only this paragraph follows another paragraph right when you have this P plus P it's it's really targeting the direct sibling, right? So this paragraph is the only paragraph that has a paragraph that comes above it. All right, so we learned about our direct child, can't be any gaps. We learned about our parent child, which can be as deep as we want. And we learned about our siblings. So with that knowledge, let's code some relationships.

Let's code some relationships. So in our starter code from today, that's on the follow along materials channel and discord, we had a folder called relationship CSS. So I'm gonna open up that HTML file and I'm gonna open up the CSS file that's in the relationship CSS folder. Remember, you can just drag the whole folder to VS code. You can do folder open, whatever is easiest for you to get that open, right? That's what we're gonna do. So I have this index.html and I have a CSS file. Is my HTML and CSS file linked? I don't know why I keep drinking it, it's so bad. Yes, it is linked. We can see our CSS file linked at the top. It is linked correctly, so we're all good. We can start writing our CSS. All right. All right, if I wanted to target the H1, if I wanted to target the H1 and I wanted to make it purple, what would my selector be?

It would just be H1, right? We don't have to worry about it, it'd just be H1, color, purple, and we would be good, right? All right, we save it, let's just check, let's make sure everything's functioning well. Open it in the browser. Our h1 is purple, let me make this a little bit bigger. Wonderful. Our h1 is purple, so we know our CSS is linked, it's working, we can jump into this and have some fun. All right. What if I wanted all of my h2s to be yellow? What if I wanted all my H2s to be yellow? Y'all think you cute. Y'all think you cute. They keep doing the hydrates, cause I don't like the tea. Guess what? I ain't doing it.

You wasted your channel points. You wasted your channel points. Bing bong. Hey, tell Byron I said, what's up? I wanted all my H2s to be yellow. Yes, pretty simple, right? We can just do H2, color, yellow, beautiful. Save it, let's go back. All my H2s are now yellow, right? All my H2s are yellow. We got world, zebra, unicorn, and duck are all yellow. All right, beautiful. Now, what if I wanted only world and zebra to be yellow but not unicorn or duck? What if I only wanted world and zebra but not unicorn or duck? Let's take a look at it.

All right, well world and zebra are inside of a section So since world and zebra inside of a section, maybe we can target it by just doing section H2 so let's try that first Let's do section Space h2 and let's let's make sure that let's make it something a little bit easier in the eye. Let's let's make them. Um, uh green All right, or let's not do green sorry if you're colorblind for this one folks, uh, let's make um Make them blue Not gonna be how much more helpful, but there we go. Pick them blue alright, let's go ahead and refresh Wait a minute We had world zebra and unicorn turn blue But I only wanted world and zebra to be blue. Why did unicorn also go blue? Let's look we said section h2 Why did Unicorn also get blue? Exactly, if we look, what did I just do? If we look, this H2, right, this H2 is inside of a section. So this Unicorn H2 is the child of a section. It is a child of a section. Just like these H2s are the child of this section, this H2 is the child of a section. However, this H2 is not a what kind of child. It's not what kind of child. Yeah, it's not a direct child. If we look at these two H2s, they are both the direct child of the section.

if we look at this H2, we look at this H2, it is the direct child of an article. So what we can do is we can go over here and we can say section right carrot H2. Now we're only gonna target the direct children. Only the H2s that are direct children of the sections. Only these two H2s are direct children of the section. And this one is a grandchild. This one, not inside of a section. Let's go ahead and save this. We should just see world and zebra being blue. Beautiful. World and zebra are blue. The unicorn is no longer blue. All right. What if I wanted all of, what if I wanted unicorn and duck to both be, why can't I think of like colors? What if I wanted unicorn and duck to be red?

What if I wanted unicorn and duck to be red? Okay, let's look at them. They're both inside of articles, right? So we can do article H2 and that should work. Let's go ahead and do that. Article H2 and let's go ahead and do color red. Beautiful. And let's go ahead and check it out. Unicorn and duck are both red, beautiful. Unicorn and duck are both red. I could have done it with the space, but I could have also done it with the right carrot. Doesn't really matter here, right? They're both direct children, so I could do the carrot if I wanted to be a little bit more exact, or I could have been a little bit more flexible without the carrot, right? Up to you. Does space matter?

Not really too much. Spacing in your selector is helpful, but like this white space here and here is just preference. Cool. All right. So now we got both of them red. What if I just want a unicorn to be a different color? What if I want a unicorn to be orange? What if I want a unicorn to be orange? Semi-colon and colon are critical. They are indeed. Yeah, we'd have to do, we can get a little bit more exact here. We can say, give me the H2 that's inside the article that's inside the section. If we look at duck, it's H2 inside of an article, but that article is not inside of a section. So let's get a little bit more specific here. Let's go in and say, section, article, H2.

Beautiful. Let's go ahead and do orange, or sorry, hard, color, orange. Nice. Let's save it. All right, let's come back and let's refresh. All right, unicorn is orange, nice. First try, all right, nice orange. But something really, really cool just happened. Something really cool just happened. Let's look at this, what did we just use? Yeah, I got it, nice, yeah, we used the cascade here because look, if we get rid of this rule, let's comment this rule out, right? We comment it out, it's no longer be read by the browser. If we comment that out and we refresh, unicorn goes back to red, it goes back to red. but if I bring back this rule, it goes from red to orange. We go back and refresh, look, it's orange again.

So we use that cascade. Remember, the stuff that comes below can override the stuff that comes above, right? The stuff that comes below can override the stuff that comes above, but there's a specific, right? There's a specific thing that happened here that enabled it to override in the cascade. And it was able to override in the cascade because it was more what? Yeah, it was more specific, had more specificity. So we're gonna learn about that now. So here we had three points of specificity as opposed to two points. So since this had three points, since it has the same or greater weight, right? Has the same or greater weight, we can override it in the cascade. Let's talk about that. All right. Before we get there though, before we can talk more about that specificity, we gotta learn about the other two things that are gonna show up when we get the specificity. This is just for us to hint at IDs and classes. We're gonna use them more next week for your homework, for the lab today.

Please do not use IDs or classes. I just wanna show you them so we can talk about them when it comes to specificity. So, IDs are a way of uniquely identifying an element so that you can style it later on, right? So here, you can see that I have a regular paragraph and then I have a paragraph with the ID of zebra, right? As the ID of zebra. And what I'm able to do is in my HTML, I can target that paragraph, right? That paragraph and only that paragraph. Oh, Dav said this is a good YOLO opportunity. Yeah, how can we do that? I guess we can put in like different levels of specificity. That'd be fun. So here I have the zebra, right? I have targeted just this paragraph and only this paragraph by using the ID. The way you use the ID is with the Octothorp, this pound sign, this hashtag, right? And so the idea is the way I can target this ID is by using the Octothorp zebra.

whatever the ID is called, I'm able to use that to target my element directly. Now, the interesting thing about IDs is that each element can only have one ID, and then that ID can never be used anywhere else in that HTML file. So IDs are unique, and it's how we can uniquely target one element and only that element, right? Flash, just to get rid of posture check, right? And so you can target that element and only that element. So like on Discord, you all have a unique name. It's like the name and the numbers that come after it. Only you can have that name. If I wanna talk to you directly, I will use that name. Same thing when it comes to HTML and CSS. If I give it an ID, my CSS can style that element specifically and only that element. But a lot of times, I wanna target multiple elements at the same time, but I don't want to have to constantly be targeting elements. I don't have to constantly be writing more style. So we have something in CSS called classes. Classes are ways of targeting multiple elements at the same time.

If we go back to that Discord example, some of you might have the class of Hamilton. Some of you might have the class of Mod, right? And so we you can target multiple elements at the same time using a class. So here you can see this paragraph and this paragraph both have the class of Bob. So I can target both of those paragraphs at the same time, right? I can target both of those paragraphs at the same time by using a class. And the way that I can target a class is by using the dot and then the class name. So IDs, unique identifiers, ID equals, and we target it using the Octothorpe, and then class, you can give a class to multiple elements, and each element can have multiple classes. You can have pretty much as many classes as you want on an element, and then you can target them all in your CSS. So IDs unique, classes target multiple elements at the same time. Don't worry about that too much for now. We will learn more about IDs and classes next week. I do not want you to use IDs and classes for your lab or any of the homework this weekend. All right, does it matter what you choose for the ID or class names? No, you can call them whatever you want.

Ideally, you want them to like make sense and reference the content in some way, shape or form, but you can call them whatever you want. How do you keep track of the IDs and classes that you create? Hopefully you've given them like intelligent names that like make sense. And then you kind of just go, in my opinion, like top to bottom, but some people organize them by like area, like header sections, like they'll group it, but we'll get into like CSS late, like CSS best practices and organization later on. All right, here we go. When we are trying to determine if an element can override an element that came before in the cascade, like when we're looking at this, how do we know that this rule could override the rule that came above it? Well, the reason we're able to know that this rule was able to override the rule that came before it is because this rule was more specific. It had a greater weight. It had more points. I like to think about the points. I know some people like to think about it and weights I think about in points to me This just had more points right had three points as opposed to two points So I was able to override it in the cascade because it had the same or greater It has to have the same or greater Weight or a same or greater number of points. And so how many points do you get? Well You get one point for a tag You get ten points or a class You get a hundred points for an id and you get a thousand points When you use an inline style bang important All right, or bang important. So the idea here is that if you're just using tags, they're all one point If you're using classes, they're all worth 10 points If you're using ids, they're worth a hundred points. And if you're using inline styles or bang important you're talking about a thousand And now this is really important to keep in mind because how many classes, how many classes would your selector need to override an ID?

How many classes would your selector need to override an ID exactly? We would need 10 classes to override an ID. So you gotta be careful when you're throwing around these IDs. It can be really hard to override stuff in the cascade, right? It can be really hard to override stuff in the cascade if you're throwing around IDs. So some developers don't use IDs at all. They just use classes, right? That's a decision that you can make. If we go ahead and look, maybe we want all of our H2s to have a lot of stuff. Maybe we want all of our H2s to be red. Maybe we want them to be font-weight bold. maybe we want them to be 30 pixels, right? Maybe we want all of our H2s to be red, bold, and 30 pixels. However, we want the H2s that are inside of a section to be orange. We still want them to have the font weight of bold.

We still want them to have the font size of 30 pixels. So instead of having to rewrite all of this stuff, right? Instead of having to rewrite all this stuff, we take advantage of the cascade. Only the color is overwritten for the H2s that are inside of sections. All of our H2s still get that boldness. They still get the font size. It's just the color that we update. So the idea here is that this cascade can save us so much time because we can target all of them. And then if we just want to make a simple change when something is in a certain spot or we want to target a specific element, we can use the cascade to make that specific change, right? Exactly, we're keeping our code dry. We're not repeating ourself. The idea here is that the cascade can be helpful, right? The cascade can help us from having to repeat our code. We can keep our code dry. Dry stands for do not repeat yourself.

So the idea being here, if I want all of my H2s to be red font weight, bold and font size 30 pixels, I can do that. but if there's a specific scenario, right, where I just want this one specific, sorry, this one specific h2 to be something different, instead of having to rewrite the entire set of rules, I can just make that color change. So I get all the original stuff, but I'm able to just override the color. Cool. That's where specificity is going to come into play to enable us to target specific elements, but it's also going to enable us to, if we need to, use the cascade to our benefit to make those changes we want without having to rewrite everything over and over again. All righty, chat. How many points of specificity does this selector have? Cookie codes. Hey, thank you for the hydration. No, I don't like this tea. This tea sucks, but since it's you, cheers. Thank you for the hydration. Actually, it's not that bad. Maybe it just needs to steep a little bit longer. Correct, it is two points of specificity.

If we look, we have one tag, two tags. That is two points of specificity. It says two points of specificity. All right, how about this rule here? We can see that the paragraph has the ID of zebra, and we can see that there's an ID here. How many points of specificity, chat? It is 100 points of specificity, exactly. There are zero tags in that selector. There are zero classes in that selector, and there is one ID. So that is a hundred points of specificity. Nice. Chat, how many points of specificity does this selector have? Oh, people are getting tripped up here. I see a couple of different answers floating around. All right, let's count it.

How many tags do we have? Well, section is a tag. We have one tag and we have one class. We have 11 points of specificity. 10 points for the class of Bob, one point for the section. And we can actually see what that looks like here. We have the class of Bob that is inside of the section. So now here's the question. If we're looking at this code block, how many elements just became red? No. There we go. If we're looking at this code block, how many elements just became red? Two, right? This paragraph has the class of Bob and this paragraph has the class of Bob. So both Hello YouTube and Hello Mixer have the class of, Goodbye Mixer have the class of Bob and they are both inside of the section.

So since they are both inside the section and they both have the class of Bob, they both become red. All right, one other thing here is I said that we can, we can of course have tags for one point, classes for 10 points, IDs for 100, and then we have this other that's 1,000 points. And I said that it's inline style. If you were to go into your HTML file and put some style, that becomes a thousand points of specificity. So why is it a really bad idea to use inline style? What does that make really hard to do? It's next to impossible to override. It's just really hard. You would just never be able to have enough points of specificity to override the inline style So could you see how frustrating that would be? Could you imagine like coming to your css file? And no matter how many classes or ids or tags that you use your css just doesn't take effect Right. It just it just nothing you do would work and then you're banging your head against the keyboard for a half an hour You're like nothing's working. I can't I'm saving I'm refreshing. It has really lots of points of specificity and then and Then you go and you look you look your HTML file Start breathing heavy You realize that this motherfucker? One inside and put inline style and I've been here trying to get my specificity right for a half hour You're gonna you're you're Don't don't do it folks.

Don't do it. They're gonna get got they hop stay out here. Exactly Don't do it. You can see how frustrating that could be Because you think that they're adhering to separation of concerns but they went and put inline style. It's a thousand point specificity. There's never going to be a time for you to be able to override it. You just won't have enough points. Cool. All right. Next one. We have this bang important. And this bang important, what it does is at the end of your selector, you can do bang important. And what that does is it gives that rule. Let me go smaller here, sorry. You can do bang important.

You just gotta put it right before your curly brace, right? Right before your curly brace. If I was doing it on my actual CSS here, this is what it would look like. Bang important, right? I did that, oh sorry, I'm in the wrong spot. We're doing color red here, bang important. Right, so I put it on my actual declaration, that bang important. Let's save it. Let's come back. Let's actually refresh this here. What we notice is that unicorn went back to red. Right? All right, went back to red. Even though, even though, even though this had three points of specificity as opposed to the two up here, unicorn went back to red because that bang important added a thousand lines of specificity. So this is another thing that we probably wouldn't want to do.

We wouldn't want to add that bang important because it will just never, you can never override it in the cascade. So there's only really one time you should ever use bang important. You know when the only time you should bang important is? There's really only one time. Maybe I'll let you take a guess. There's only one time and that one time is if you have a client project, right? You have a client project that is due in 10 minutes and for whatever reason, you can't figure out, right? You can't figure out how to make it work. You can't figure out the specificity. You throw a bang important on that and you get to the, you get to the, you get to the client meeting, you show them your wares. And then after that client meeting go, let me figure this out That's the only time you're allowed to use bang important any other time right any other time? No, you can't use bang important But when you got 10 minutes left and you can't figure shit out you got to go to that client meeting though You're bang important. You figure that shit out later All right, figure that out later. And so that's when we're gonna use the The the bang important there. Well alrighty We've reached the end for tonight.

Let me talk a little bit about your homework this week. I remember homework will be due next Thursday. You got two things for homework. One is the simple site lab. And let me show you what that is. In the starter materials from today, there was this simple site lab. So here's the picture of the simple site lab. and your goal is to write the HTML and CSS to bring this monstrosity alive, right? I want you to write the HTML. I want you to write the CSS. This will be due next Thursday, okay? If you look, we got some stuff that we already know. Now people are saying easy in the chat. That's good. What would this be?

What would this be? H1, how about this, what would that be? Yep, nav, maybe UL, maybe some LIs. Definitely a link, you can see that's a link. How about this? H2, nice. What about these? Paragraphs, nice. Got an image. Maybe another what down here at the bottom. Another what down at the bottom. Another now, maybe some UIs, some LIs. And then we got like some background colors. We got some borders going on. So pretty much all the stuff that we saw CSS wise here, everything on this page you've seen in HTML, you've seen in CSS.

Maybe some little weird things you might have to figure out, like how do you get the image on one side as opposed to the other, you might have to figure that out. But the idea is that you're gonna take this lab and you're going to go ahead and build it. Right in a few minutes early, we're gonna do our raid, of course, always to send love and positivity somewhere, give them some follows. But then take a little bit of time tonight, maybe to work through this lab, it'll be due next Thursday. And then we have another thing I wanna add to your homework for next Thursday, and that's to read the learn layout. So I know I said it for Tuesday, but I'm gonna give you to Thursday to get through the learn layout. So you're gonna finish this simple lab, and then you're gonna do the learn layout. This is Dr. Black. When I ran this cohort, last cohort, Dr. Black had passed away. She is my greatest mentor I've ever had, the person that taught me how to be an educator, The person that brought me kicking and screaming through my chemistry and all my STEM classes at Yale, I would have not made it to where I did in school without her and definitely would not have become the educator that I am without them. So I'm always gonna leave it here. Whenever I give this lecture, Dr. Black will be here.

And so yeah, this weekend, finish that lab, finish the learn layout, And we are going to end with a raid. So we're gonna go to Dr Mikachu And so remember if you just join the raid you don't do anything just gotta stay here you get extra channel points Let's go ahead. Let's go to their channel. Let's spread some love and positivity. Give them some follows, please to do some game development. So setting up the raid, and I'll see you all over there. Thank you for a wonderful class. Thank you for diving into CSS with me. Don't worry, we're gonna have lots more CSS practice. Next week we're going even deeper with CSS. It's gonna get even more review, even more repetition. Good luck this weekend. Good luck diving in deeper with the Shahal, the learn layout reading. We're going to go over it all together next week. Don't worry.

And I'll see you all on Sunday for office hours. If you got questions, I got answers. Let's read.

End of Transcript