Introduction

You You Yo. Hey, what's going on everybody? Good morning. Good afternoon. Good evening. No you all are doing well welcome back folks hope everyone's doing good hope everyone had a good Wednesday and now we're ready for Thursday's class good to see y'all saw a lot of y'all in here real early like an hour or two before stream started checking in here hey what's going on everybody welcome welcome welcome get in here get in here shout out to all the folks that uh Or running home from work jumping on their computers to be here respect what's going on everybody What's going on what's going on and different thank you for Reposting the check-in link. I appreciate you Already folks good class tonight. I like this class is a good class This class tonight. We Yeah, I'm gonna get a lot of reviewing, a lot of review, a lot of practice. It's all about practice tonight, folks. All about practice. We're gonna practice our relationship selectors. We're gonna practice our specificity. We're gonna practice our box model, go deeper with the box model. We're gonna practice everything that we've kind of seen so far in terms of HTML and CSS, lots of rounds of working through code on your own and working through code together.

We got the bra already. Right? So if you feel if you feel like things everything hasn't clicked yet, that's okay That's tonight's class is to get you getting lots of hands on keyboard Lots of practice then us doing it together so you can see my responses We're gonna go over some of the stuff that was due for homework today So you'll get to see some some some walkthroughs of that work as well we'll save a bunch of it for our Sunday office hours as well, but So lots of practice and then we're gonna hint at responsiveness. So responsiveness is making sure that our layouts work well and look good across multiple devices, whether it be a desktop, a tablet, a mobile phone. And so we're also gonna hint at that tonight. We're gonna see the main mechanism that enables you to build responsive websites and then all next week we'll just be deep diving into responsiveness. So glad you're here Glad to get some get some practice in right be a good one. Have some fun but as always We like to start off with questions around here folks. We like to start off with questions. And so the question of the evening is Would you rather be a superhero or a wizard? So hero or wizard in in chat for me, please hero wizard for me in chat. Look at the Wizards coming in You hear is it y'all into. But all the wizards. I think that's wild to me. I mean, I'm definitely going wizard, but I didn't think it would be this overwhelming.

Y'all from reddit. That's what it is. Y'all from reddit y'all some wizard people. That's what y'all are. Definitely some wizards. Oh wow, there's a lot, okay, there's some heroes coming through, some folks that want to be super saiyans, but rude. I have my like 12 or 13 year badge on Reddit, so like I, I, that ain't no shade, that's me. I've been there y'all, I've been in the trenches. Okay, alright, I think it's pretty, this is a wrap. This is definitely in the wizards category. I didn't know if it would be more hero-y this time, but nah, y'all, there's some heroes, but it's mainly wizards. Alright, cool. Thank you for sharing, everybody. How about regular questions? As we let folks get in, you ran and got the kids, And now you're jumping in front of the computer.

Let's give those folks a second or two to get in here. Questions. I always like to start off with questions. What is your hype intro song? I actually don't know the name of it. Believe it or not, it just comes with stream like the stream deck software, like like stream deck has a bunch of sounds that you can just click and install. And I went through like all of them and found this one. Difference that how are you? I'm doing good. Today was a pretty chill day for me Excited to get into this lecture. This is a fun one I just like I like the ones where we just practice a lot I think it helps a lot of folks and I think it's fun to like Goof around and find selectors that we would never do in real life, but we can have some fun with it. I like that I Was working on a special project. I don't want to mention it yet But I'll mention it. I have a lot of folks that have been asking about like a Minecraft server, and I didn't want to do another Minecraft server this cohort, just because not everyone can play Minecraft for free, right? Now this is also assuming that you have like a computer that can play it, right?

But Minecraft's not free. So I didn't wanna do another server, but I have a 64 person CSGO server right now. 64 person CS go server that I've been setting up. And so that's been a lot of fun. I've been playing around getting the settings dialed in. So CS goes completely free. It can run on a potato. So maybe, maybe this weekend I'll open it up just to get some practice in. But yes, that's been something fun that I was working on. There's also like CS go on consoles too, but bless you if you can do that with a console, with a controller. Other questions? Just to give folks a second to get in here, I always like to start off with a question. Who's your Smash Bros meme? I'm not like super, I'm not like, I'm not like good at Smash Brothers. Let's just put that out there.

I'm not good at it. I love Ganondorf. I like the heavy characters. I'll play around with that a lot of my friends play Zelda so I've been playing a little bit of a little bit of a little bit of Zelda recently then I like some of the Pokemon characters I love Pikachu I get myself into much trouble with Pikachu One or two more questions and we'll get in here. When can we meet your pets? One of the days when they like feel like they want to come in here and just hang out a little bit we'll set up the Simba cam and yeah they got to get comfortable with me streaming again and then once once they know I'm like this is stream time they'll start coming in more and I'll put them on. And then eventually we'll set up the Simba cam. A lot of people saying Pokemon legends. I'm excited, I'm excited. The bingo link is exclamation point bingo. Oh. What Linux distro do you like the most? Debian, I'm a Debian person. Can we go over grid? We're gonna get to flex and grid next week, yeah.

All right folks, I think we got the gangs all here. Let's get into tonight. Let's get into kind of what we're gonna be covering. We're gonna be reviewing some of our HTML fundamentals. Yes, we're going all the way back, folks, all the way back. We love to get our spaced repetition in around these parts, right? Love to get our spaced repetition in these parts. Then we're gonna hit up some CSS fundamentals. We're gonna move into the box model. We're gonna do a floats. And then we're gonna do our layouts. You know what? I forgot to do. I'm just realizing it now. I Didn't send out the email today I'm glad you're all here But now we get to know how people show up when I don't send out the email versus when I do send out the email So rip, sorry folks that rely on the email to get here, but I forgot it That's weird hey dab, thank you for the five gifted subs There is an email.

Yeah, there's an email. We got like almost 12,000 people on the email list and it goes out before each class Exclamation point newsletter if you're not on there you can do exclamation point newsletter if you want to join the email list, but yeah Rip I didn't set up the email That's a bummer. All right. Well, hopefully folks find their way over All righty. We're going to review our HTML fundamentals. We're gonna go over our CSS fundamentals. Matinee A, thank you for the 10 gifted subs. That's wild, thank you so much. Matinee 831, thank you for all the gifted subs. I appreciate that. We're gonna go over the box model. We're gonna go over floats again a little bit. We're gonna see layouts of floats again. I know how dare. We're gonna review the layouts that are due today.

And then we're just gonna hint on a little bit of responsive basics, just the little key mechanisms that we need, right? The key mechanisms that we need to make sure that our sites are responsive. Cool. And then homework will be to make the simple site, the simple layout that we go over at the end of class responsive. We'll talk about that at the end. Cool. Are there questions? If you're new around here, we'd like to check in at the beginning of each class, exclamation point, check in. All right, exclamation point, check in. You can go ahead and like and retweet that, please. I appreciate it. And that just helps more folks find our community, hopefully saving them a few bucks and learning how to code. I'm glad you're all here and thank you always for checking in. I love to read the messages that you put on those. Those are always pretty funny.

Alrighty. We checked in. The next big thing that was in the Discord message for today, the message that was in Discord today always has the materials that you need. So if you're new or you're watching on, say, YouTube, you can always go to our Discord, leonnoel.com slash Discord, or if you're here live on Twitch, it's exclamation point Discord. On Discord, we always have the materials. We always have the ability for you to download the things that you need to download for the class, but I also share a lot of links for you that you're gonna need for the class. And one of those was our study community survey. So we've talked a lot about making smaller study communities that folks can join to just have a smaller, more intimate experience as they go through 100 devs. And so that survey is live now. You can click the link that's in the slides or you can look at the Discord message that had the link. You don't have to fill it out right now. Don't worry about it. You have until tuesday to fill it out So take until tuesday to fill it out uh and on tuesday um, we'll kind of compile them all and we're going to start kind of Figuring out how how many we're going to have and who's going to go into what and so yeah Make sure you fill out that survey if you're interested and then we're going to start getting folks into those communities Uh, don't worry if you already filled it out. That's great. Just say you don't have to rush and do it right now.

So um Our idea of the study community is just a smaller group of folks that are tied together by some sort of bond whether it be affinity or identity or Location and so go ahead and fill that out and we're gonna kind of compile a good group of them and turn them into Special spaces on discord so they'll have their own chat their own voice channels, etc Cool. We lose access to more general channels? No, not at all. These are just like special places for folks to have access to, just because the general channels on Discord can be quite overwhelming, right? Quite overwhelming. We recently have a bunch of memers that are just, I don't know how y'all type so much, But some of y'all be in that discord. I look at your messages, you got like 400 messages in the last hour. I just don't know how you do it. But sometimes those groups can be a little overwhelming. And so we wanna have smaller groups where you can kind of get to know each other a little bit better, chat will go a little bit slower, right? And yeah, that's the whole point. So it's just kind of like to give you a smaller group where you can get to know folks and kind of commiserate and go through the experience together. Cool. All right. So go ahead.

You have until Tuesday to fill it out. The survey kind of lists the different things that you might be interested in. We do have an other category where you can list like some other options for us to separate them by commas. You can put in more than one location if you want to separate it by a comma. and we're kind of gonna kind of compile the most commonly asked and turn them into groups. The link is here on the slides and it's on Discord in the file on materials channel for today too. Alrighty, don't worry about filling out the form again. It won't change anything. This isn't the final form that gets you into it. It's the form for us to set up the most common channels. Can we get confirmation that we turned in the homework? No, I mean, if you filled out the form, you're good. Don't worry about it. Yeah, you're fine. When you fill out the forms, there's like a confirmation page.

As long as you see that confirmation page, you're always good. Yeah, don't worry about it. Cool. Tomorrow, alumni Twitter space. We got we got three wonderful alumni that are going to join us in the Twitter space, including one of our fabulous mods here, Blom, and so join us tomorrow on Twitter at 6 o'clock. I'm going to share the space on Discord and via email, so you'll get the actual link to the space so you can join us if you would like, and we're gonna have three alumni there. We're gonna use Slido so you can ask a bunch of questions and I'll kind of help moderate and ask questions to the alumni that Are there you get to hear kind of about their background and their experience and how they got to where they are aka Employed and so I think it'd be cool. We got a pretty wide range of past experience And and I think that will be really helpful for folks that are trying to find their way as well So tomorrow if you want to join us Twitter space with alumni, we're going to do these a little bit more frequently Bring in more folks over time. It'll be recorded. So don't worry if you miss it You'll be able to watch listen to the recording if you want Is it mobile device friendly yes, it actually only really works well on mobile You can listen to it in the in on your desktop or in the browser But the experience is almost always better on mobile for some reason How does it work? I'll share a link, you tap the link and you just kind of jump into a voice channel basically. It's a big voice channel, but only the folks that are speakers can talk. You can like raise your hand and like stuff and then we can bring up folks that want to ask questions if we want. We're going to be using Slido for questions mainly. Yeah Yep, can we have a wizard's channel?

Alrighty submitting work We have a little bit of work that has to be submitted today. Well quite a lot of bit of work Needs to sit it today One is the simple site labs that was due today That was the one with the Learn with Leon logo in it and the beautiful colors. And then your layouts were due today as well. So you can use CodePen, you can use Glitch, you can use Repl.it. I'm not just gonna say Glitch anymore because we bring them down every time and I don't want us to do that to them anymore. So CodePen, Glitch, Repl.it, share out the wealth. The idea is I just wanna see your HTML and CSS. I don't care about you having good image links. I don't care about stuff being connected. I just want to see the HTML. I want to see the CSS. So throw them into separate code pens or separate glitches and then submit them in the form. Yeah. Yeah, don't worry about images, especially like on code pens. We will have like trouble with them there.

Don't worry. CodePen, Glitch, Repl.it, whatever you can, just to make it a little bit easier and not to bring down servers. Whoa, Izzy with the Pokemon card, that's dope. All right, Izzy, I'll send you a whisper and we gotta get that coming to you, but we have to do the random drawing. So, let's see. Yeah, which one it is? Let's see, Pokemon. There we go. All right, so. Here is the current Pokemon cards. So, Izzy just used, I think it's 50K right now. Yeah, 50K channel points. And we're gonna do a random for one of the cards. So we have 64 slots. If we hit one, we just redo it again.

But, or sorry, if we hit one or two, we just redo it again. But yeah, anything from three to 64 counts. And we're just gonna do it randomly. All right, we're gonna do it randomly. And we're gonna do it live. So let's just go ahead and open up an inspector. Go to console, make this bigger. Oop, I knew we had the math.random, there we go. All right, so we got math.random times 64. So what this is saying for folks that are new, is we have something built into JavaScript called math.random, which can return a random number between zero and one. And so what we're gonna do is we're gonna times that by 64 and round it. So we should get a number between one and 64. Whatever number this is, is the card that they get. So three, two, one, 41, 41 is it and 41 is a I'll get that to you And I'll send you a message here on Twitch. Make sure that goes your way.

Too loud, yeah, that was loud. Alrighty, congrats. So yeah, channel points are fun, folks. The more you hang out, the more channel points you get, the more cool stuff you can do. Congrats, Izzy. Alright, so we got our submitting our homework. That was 50,000 channel points. Alrighty, couple things I wanna talk about before we jump into the practice tonight. One, we hinted at it a little bit last class, but I wanna bring it up again. Sleep, sleep, sleep. You need to get good sleep. If you're lucky, you can get good sleep, but please make it a priority. Please don't put way too much time into studying that it impacts your sleep, because we're here for the long run. Memory consolidation is a real thing and it happens while you're sleeping. And so yes, I'm going to share some videos that have some motivational talks in them.

And sometimes these people will say, don't sleep. I don't agree. You're gonna need sleep if you wanna learn how to code. This is not something that you can sheer force of will. This is not something that you can grind for 12, 14 hours a day and expect to actually retain it all so that when you're in an interview, you do well. You gotta prioritize sleep, okay? Now, I've been there. I get it. I get where hustle culture comes from. I get where grind culture comes from. I have had some wonderful experiences in my life that have been the result of not sleeping. But let me tell you the dark side, the dark side of success, right? So I always joke that the very first money that I raised for one of my first real businesses, the first $100,000 I raised, let's say that, all happened because I slept underneath my desk, okay? So me and my co-founder, we were going through a program called Techstars, and we would stay up really late, grinding away, coding, building, right? And we would be so tired that we didn't wanna walk home.

So we would sleep underneath our desks. And then on Fridays, we would have these VCs that would come in And they would bring doughnuts and coffee and it was like 830 in the morning So nobody else was there, but we were like come like stumbling out from any of our desks We would drink their coffee. We eat their doughnuts. We shake their hands We say thank you, and then we go back to sleep underneath our desk They wound up leading my first around that helped me raised half a million dollars. So I've been there. I've done the the grind I've done the 20-hour days What happened is that did not last, right? It got me some initial success, but I still have to wear braces on my hand. I still have pain most nights when I go to sleep. I burnt out way quicker than I would have imagined. it contributed to I in my heart of hearts some of my earliest manic episodes because I have bipolar disorder and so yes there can be some advantages of this grind grind grind grind but I am here to tell you it is not worth it the sleep will help you consolidate the sleep will help your body repair doing this is a very physical exercise. I know we're sitting in chairs, we're typing in code, but it is a physical exercise. We talked about how chess grandmasters spend 6,000 calories in a tournament, right? You're burning a lot of calories, burning those muscles, the brain cells trying to learn, that's heavy, It's impactful on your body. And if you're not getting sleep, the things that you learn are not going to stick for the longterm. The things that you, that you put in all that hard work for will slip away.

You will develop repetitive stress injuries. You will develop back problems. You will develop eyesight problems. So it is not worth it to push your body past the point of no return. Get your sleep. Right. There'll always be more time to learn. There'll always be more time to put in that work. But building out, right? Building out a plan for your day that includes the time that you're going to go to bed and the time that you're going to wake might change your life. A lot of folks don't have bedtimes. I have a bedtime. I'm a grown ass man and I got a bedtime. And you better bet my bottom dollar. I'm going to bed at that time Right, because if I don't if I don't stick to that schedule That the the time slips by the YouTube video keeps playing These companies are very good at getting you to watch just one more video Don't let don't get got Right.

Don't get got Set up a schedule for your week, set up a schedule for your day, give yourself a bedtime, give yourself a wake up time, and try and stick to it, and know that you're gonna slip up all the time. It's not a perfect process, right? It's not a perfect process. You're gonna get it wrong. It's not always gonna go right, right? And so make sure that you just go into your weeks with a little bit of preparation. You go into your days with a little bit of preparation, and you try your best, right? You try your best, but I'm here to say even in some of the videos. I'm gonna share don't think I'm vouching for it Get your sleep, please Overall, it's gonna be one of the best things you can do to increase Your chances of being successful and learning how to code Sleeping is one of the things that I guarantee you will help you learn how to code better How many hours do you sleep I sleep about seven and a half every night I'm a little weirder. I find that like if I go over eight, it doesn't work out too well. And if I go below seven, it's not great. And so I'm around like the seven and a half mark, sometimes a little bit later, right? I found that that's my sweet spot. And I use an app that I swear by. It's called Sleepy Time.

Sleepy. There you go. I love sleepy time, right? So if you're having any idea of like, when should I go to bed and when should I wake up, use sleepy time. It's just sleepy time, but it's dot ME, right? And so let's say you wanna wake up at, let's say you wanna wake up at, I don't know, you wanna wake up at seven, right? Click calculate, and it's gonna tell you when you should be falling asleep, right? So if you wanted to wake up at 7 in the in the morning, all right When do we get so in the morning? You should be falling asleep by 10 o'clock All right You should be falling asleep by 10 o'clock You wake up at 7 you should be falling asleep by 10 o'clock If you miss that window and you're not falling asleep by 10 o'clock. Do not go to sleep Stay up until you're ready to fall asleep at 1130 All right, because if you go to sleep in between these windows, there's a really good chance that you will wake up in a REM cycle. And when you wake up in a REM cycle, you feel really shitty. Like if you ever had like a good night of sleep, like you've slept for a while, but you wake up and you just don't feel good, that's because you probably woke up during a REM cycle. And so this idea of using just a very simple tool that guesstimates your REM cycles can be a real big help. So I started with this, now I have a watch that will tell me if I'm sleeping well or not and it does a bunch of other weird stuff like oxygen levels and all that cool stuff. But sleepy time for me is where I started and it really does help.

And I just have the numbers memorized now. I know what time, I know what all my windows are And if I don't hit my window, I stay up until the next one Yeah Yeah What brand of watch It's the Garmin instinct solar Yeah instinct solar. I waited until it was on sale for Cyber Monday and then I got it Yeah sleepy time Try it out, try it out. And here's the thing with sleep too, sleep's different for each person, right? It's different for each person, right? The idea from six to eight, there's like, there's lots of room in there. Some people, for some people it's like, like six to nine hours I think is the real window. Some people need a little bit more than eight, some people need a little bit less, and it's about finding your like right, your right time. And exactly, bipolar plus sleep equals really important. For me, when I don't have sleep, it's dangerous. Let's just say that, it's dangerous. So yeah, that's my little caveat. And the reason why I didn't want to spend so much time on that is because I will be sharing a lot of like motivational videos with you. And a lot of those will advocate less sleep. And like we said last time, it's not about how many hours, It's about what you do with the hours that you do have Some of us might only have the privilege of an hour a day to study So I rather have somebody that goes hard in an hour and somebody that kind of just like fucks around for five Right, right Give me somebody that's focused that's dialed in that's getting their stuff done.

That's getting their Pomodoro in for an hour. I Guarantee you they're putting more down than somebody that's kind of like not really focused for five So, it's not about how much time you have, it's about what you do with the time that you have. All right, cool. You owe you. If you are putting in all this work, you owe yourself to use Anki. So, I gave Dr. Eric Thomas' video today, You Owe You. It's one of my favorite videos because he called me out, he got right into my soul, he kicked it around a little bit and I felt it because if I go to Best Buy and I buy a new VR headset and I come home and that VR headset, the knobs a little loose, right? Just a little loose, like not even kind of loose, just a little loose. I'm back at Best Buy. I'm always nice. Hey, this didn't work. I Give me my money back. It didn't work. It's not what I expected.

And I'm there. I'm not there like in a week. I'm there the next day. Next day, hey, hi, thank you very much. I need my money back, please. It didn't work. It didn't do what I expected, right? I want my money back. But I had never asked myself for my money back. I had to think about that for a second. Whenever somebody else does me a little wrong, right? Whenever somebody else just cheats me a little bit, whenever somebody else kind of cuts me a little bit, I'm all up in their stuff, but I never do it for myself. I never said I owe myself, right? So you owe you, right? You owe you, and if you're putting in all this work, If you're showing up if you're one of the thousands of people here, right you owe you to do Anki All right And if you if you don't do it ask yourself why get get get get your receipt And go demand but go demand your money back, right?

you owe you and so Don't do the things that we know have been proven to help people learn right the stuff that dr that Barbara Oakley was spitting, you gotta take it to heart. You gotta take active recall to heart. You gotta take spaced repetition to heart. If you're not doing it, this is a waste. Just stop. Just stop. Just stop. It's just not worth your time. Go do something else. Go play video games. Come join us on the CSGO server. You're gonna do all this, but in the work. You owe you. All right, rant over, let's get into it. What's the internet folks?

What's the internet? The wire, exactly. It's a wire that enables different devices to communicate, enables our client side requests, sorry, client-side devices to make requests. Those requests can leave those client-side devices, go across those wires and go to servers. Servers can hear those requests. There's some code running on the servers that can help generate responses, maybe store stuff, stuff into a database, maybe process a credit card or two, and then it can respond with some stuff, okay? Okay. All right. Golden rule, separation of concerns. We should keep all of our content in our HTML. We should keep all our style in our CSS. We should keep all of our behavior interaction in our JavaScript. Why? Why do we keep things separate? Why do we keep things apart?

And why is this the golden rule? Yeah, for organization, exactly. Organization for ourselves and organization for anybody else that we work with, right? So when somebody else joins our team, right? When somebody else asks you to join, when somebody else joins your team and they're asking you, hey, where do I go make stuff wiggle? You point them to JavaScript. Cool. All righty. Here we have the basics of HTML. In HTML, every single bit of content must be wrapped in a tag. And the tags almost always follow the same pattern, where they have this lovely opening tag and then this lovely closing tag. What is the difference? Or sorry, let's skip that here for a second. We know the difference between the opening and closing tag is that the closing tag can have these forward slash, the opening tags can have these attribute value pairs, but when we're talking about all of these things, we're talking about the carrots, we're talking about the tags, we're talking about all this stuff about how we write HTML. We call all of that, what?

What up, Nick? How you doing? What do we call all that stuff? My bingo card is hot right now. We call that syntax, right? The spelling, the grammar rules, the things that make up that language, we call it syntax. So in HTML, the syntax involves opening and closing tags. There's slight differences between those. And there are a few tags that are self-closing. We saw image tags, we might have saw input tags. They're self-closing because they're already content not wrapping around content. They are content Alright time for some tags, let's review some of our our important tags here some ones that we've seen in the past Anybody watch this anybody go on YouTube and watch this I'm curious if anybody on YouTube and watch the the tag competition. I saw some people Twitter talking about I thought was funny Yeah, no, it's funny. It's cool. You should watch it.

I'm, I would, I would be the, the, the alarm, the alarm would go off, the alarm would go off and I just like slip, like I'd like, I just, and it'd be over. They're like, they're like jumping from like bar to bar. Uh, yeah, no, it would not work out well for me. Okay. Alrighty. Here we have our heading elements. Our heading elements describe content that comes after. Right? Describes content that comes after. So think of like in a newspaper, you have a headline and that headline describes the article that comes after. So we have H1s through H6s. H1s are supposed to be the what? H1s are supposed to be the what? Big H1 energy. The most important, exactly.

We do not choose our H1s, our 2s, our 3s, our 4s, our 5s, our 6s based on how they look. We choose them based on their importance. The H1 being the most important thing on the page. It's the most important thing. There should only be one of them. Slight caveat with HTML5 sections can now each have their own H1, right? This idea though is that we're picking them based off of importance. Nice. We have some elements that we saw before. We have paragraphs for larger pieces of text, spans for shorter pieces of text, Pre-tags, which are a what? Pre-tags are a what? What are pre-tags? An abomination, thank you. An abomination, thank you. Great word, an abomination.

Yeah, there you go. A sin, whack. Containing elements. I keep seeing this question pop up. DIVs have maybe some times that you would use them, but we use them sparingly because we got way more semantically correct elements or just elements with way more semantic meaning, right? So I'm finally remembering all these. Let's go, Max, exactly. Yeah, with way more semantic meaning, Which means that when you look up the definition on the MDN There are just times when it makes more sense to use an article and aside then it would make sense to use a div So divs can still be used ideally sparingly Or when there's not a more semantic choice to be made Still confused the one who used an article Bobby said Bobby you use an article when it's meant to be shared Right when it's content that you could clip out and share with somebody and they would be able to understand all the content So think of like a newspaper article a blog post things that could be shared and you can look enjoy and understand it All on its lonesome Would you use this for styling purposes no because I don't ever write HTML with like style in mind, because that gets too close to blurring our separation of concerns. No. Does that mean it has to have a button to be shared? No, it doesn't have to have a button to be shared, no. How about an aside, I get confused. An aside is just when it's meant to be shared. I mean, sorry, an aside is just extra Or ancillary content so things that if you remove from the page the page still goes on fine So I'd like to think about asides like a really good a candidate for an aside would be what chat What what what is like a pretty much a really good? candidate for an aside Ads Exactly ads are really good candidates for asides because the ads If you remove them, hopefully the site still still functions well All right, we looked at the BBC solution before.

What I wanna do is I wanna mark it up again while we're here. And then what we'll do on Sunday is we'll write out some of the HTML, right? We're gonna have some of the HTML together during office hours. But for now, I wanna mark it up. I wanna mark up this BBC site and let's see what we get. Alrighty, so if I'm looking at this BBC site, what would this area up here be? What would I consider that to be? Yeah, I'm gonna go with header, exactly. It's definitely my header. And then inside of that header will be some other things, right? So inside the header, we can see there's probably a nav, right? a nav, inside that nav, maybe we have some images and it looks like we have like a list of links inside of our nav. So maybe we have a nav UL LI anchor tag, right? Like we have our header, inside of our header, we have our nav, inside of our nav, we have our UL, inside of our UL, we have our individual LIs and then inside of our individual LIs, we probably have our anchor text, right? Over here, we probably have a what?

Inside of our header somewhere. A form. Exactly, we have a form in there. And when you're writing out your first bits of HTML, do not stress about this stuff. I see so many people stress about, should the form be inside the nav, outside the nav? should should the image be outside the nav inside it just doesn't matter in the beginning just get your work on the board right just get it on the board right you work on the board and you'll get better with time cool all righty Next, who would this area here be? Who would that area appear to be? Yeah, a nice section, exactly, nice section. And then inside of this section I see kind of like Two Sections more Right, like I see like two sections more and then how about these up here? What could these be? Maybe they're each different. But what what are they? Yeah, there's some sort of headings, right? Some people might have went with H1, some people went with H2s, but they're definitely heading elements. They describe what's happening on the page, right?

Definitely some sort of heading. And then if we look inside those sections, we probably have, like, I would probably consider this to be like an H1, maybe a paragraph, and then maybe like a span, right? So I say H1 paragraph span. And then the funny thing is like this image, I wouldn't actually put in the HTML. That would be a background image in CSS for me. Don't worry about that for now. We'll see that when we get there too. But for me, that's actually wasn't in the HTML. that was like styling the background of that section, right? Like that could have been blue and it would have been okay. To me it wasn't content, it was style, right? So you can add background images in your CSS. Yeah, we'll get there. Then we have over here, I think I actually kind of see like four more sections here, four more sections here. and each one of those sections has some sort of heading.

Maybe like an H2 and then like a span. I see like those H2s and then spans, H2s, or it could be H3s depending on how you think about it. Some people like to make these individual ones articles. I don't. I do know a lot of people do like to make those articles. To me, those aren't articles. They're links to articles, right? To me, they're not articles. Like I wouldn't I wouldn't print this out and share it with you to me They're like areas to take you to an article All right But I do know so I do I would hand this to some front-end developers I really admire and they would make those articles, right? About down here another what another what down here? Another section, exactly, another section. Cool. And then, how about news? What would that wind up being? Yeah, some sort of heading element.

Yep. Another heading element. Cool. And then I could see maybe like three more sections here. I think some other people might split them up a little bit differently. Um, this is where, this is where it kind of gets, this is where it gets artically for me, right? This is where this, this is where we kind of, this is where it kind of gets a little Artically because it has like a heading and then it like talks about it Right, so I could see some people going for with three articles instead of three sections here Like I could see that like if you did that I totally wouldn't right wouldn't Totally wouldn't even bother me right I could see that there. I don't really see it here This is clearly a section to me But this starts to blur the line a little bit right this one the ones down here have a heading they have a photo they have like a paragraph of content right so to me this is definitely an image a heading element of some sort maybe a paragraph and a span Some folks might have used like a figure and a figure caption. I don't know if I would go that far here But for me, I think I would sleep well with three sections, each section having an image, a heading, a paragraph, and a span. I'd sleep okay with that. I could also probably sleep okay with, instead of it being a section, it was an article. How about a table? Nah, too old school. What is figure captioned look it up on the MDN there's there's so many other elements that we haven't seen yet And so there's just so many of them and just sometimes they come up But the ones that we covered are pretty much all you'll ever really need. Honestly That plus what you did in shay how?

Yeah All right, we got about five more minutes and then we'll take a break. Where does CSS go? I thought we were reviewing everything tonight. We're reviewing all the stuff. Yeah, it goes in a separate file, exactly. Goes in a separate file. There are some exceptions that we've talked about a couple of times now. You can put CSS in line with your HTML if you're writing HTML emails. And you can put some CSS in your head if you're doing critical path CSS at Amazon. But what did we see? What did we see that made it so that we wouldn't want to use inline style or style in the head? Like what did we see, what do we know about it now that makes the inline in the head bad? Like why does it make it like hard for us to use? Yeah, exactly. Under the dying stars, that's a cool username.

Yeah, it was specificity. It just, if I have inline style, how many points, ooh, that's a good question. How many points of specificity does inline style give you? Beans, hey, thank you for the five gifted subs, I appreciate that. Yeah, if you use inline style, if you use inline style, that's a thousand points of specificity that you somehow have to make up in your CSS. Nobody that's writing like normal CSS will ever get anywhere close to a thousand points of specificity. They're gonna be banging their head against the keyboard. Like why are none of my CSS rules applying? like everything looks good in the CSS file, and then they're gonna see that you put some inline style and they're gonna lose it, right? And we now know that's because that it just takes up too much specificity. Yeah, too much specificity. Whenever we want to link to our CSS as in a separate file, We use our lovely link tag, right? Lovely link tag that goes in the head of our HTML document. And the actual specific href is the location of our style sheet. We could put it in any amount of folders that we want, but that CSS slash style is saying, hey, starting at the HTML file where the link is, go into a CSS folder and find the style.css.

Now, here we have our entire CSS breakdown. So let's play our quick favorite game and then I think we'll probably take our break. So, chat, what is this? Ha ha, y'all got got. Y'all thought I was gonna start with a rule, got here. Okay, now you can't type for 30 seconds. It's a value. How about this? Got him. Y'all got got again. I went slow around the property Everybody start typing property real quick. Yeah, it's a declaration The declaration nice Thank you blow the declaration nice How about how about this But that I love seeing the declaration blocks. It's a rule. It's a rule, right? It's a rule.

It's a rule because it includes the selector. If it did not include the selector, it was just this, what do we got there? We got a declaration block, exactly. And one last one. What is that? Yep, we got a property. All right, so the whole thing is a rule. All right, whole thing's a rule. Rule's broken down into a selector and a declaration block. Declaration blocks are broken down into declarations and our declarations are broken down into properties and values. Sweet. All right. And once again, why might we wanna link to our CSS in a separate file? Separation of concerns, exactly organization. All right, we're at the top of the hour.

If you're new around here, we like to take breaks. We like to be healthy. We like to make sure that we're in this for the long haul, that we don't develop repetitive stress injuries, that we let our legs get a good stretch, that we get some water, we hydrate. Please hydrate, right? Hydration is key folks, get some water. And so we're gonna put five minutes on our timer. And after those five minutes, we'll be right back and we're gonna get our fingers on the keyboard. No more just me talking. We're gonna start getting some practice in. We're gonna practice our CSS basics. We're gonna practice our specificity. We're gonna practice our box model. I really am excited to practice the box model. I know a lot of folks had some trouble with it. But go ahead, just take five minutes, get up, do what you gotta do if you're able, And I'll see y'all in five When am I going to start legends?

I'm not sure. Probably after the alumni space tomorrow. It's not a main series game, so I don't feel like I have to do the midnight, you know? All right, folks, come on back All righty, all right folks, come on back, come on back. What was the eye changing software? Oh flux, flux is what I use FLUX It changes the color of your screen to help save your eyes a little bit Cool oh no OGX got into some trouble. Let's see Look it up after class. Alright folks. Come on back. Come on back. We had a good break Let's uh, let's jump into it All right, so let's quickly look at some simple styles and then we're gonna jump into actually typing. Hey Leon, how do you feel about numbering homework assignments? Nope, you gotta read. Your boss isn't gonna number your homework assignments for you, right? Your boss is gonna give you a project, you're gonna have to get it done.

So I don't number my assignments. I don't even like numbering classes. I want you to get better at reading. I want you to get better at organizing. I want you to get better at knowing what's due, when it's due, because when you get on the job, it's not gonna be numbered for you. So I don't do it. Yeah, it's a good question though. Shoot your shot, right? Alrighty, some simple styles. We have a couple different ways of doing color, right? I like a couple ways of doing color. We can do color keywords, we can do hexadecimal, we can do RGBA, we can do HSLA. What's like, what's really the difference, like what's the difference between all of these? Like what could be the difference? Like what, why, like we have all these different ways, but like there's something that can actually be different and across all of these, we've talked very briefly about it.

Performance, yeah, maybe speed considerations here. Maybe the time it might take to look up the color keyword. Like, I mean, we're talking like, you're maximizing microseconds here and every count matters, right? But there's maybe some speed considerations we met here. We do know some browsers are default hexadecimal. I do like the RGBA because it gives us the alpha channel, Which is a transparency that's really nice to have it comes in handy. I just lay also has that that alpha channel as well So yeah, I I kind of stick with RGBA, but you can use whatever you want when I'm kind of just Mocking around and I'm just doing quick stuff. I'll use the color keywords for sure All right font family so far. We've seen the main way that we've been getting fonts or just from Google fonts You don't have to get all your fonts from Google. There are plenty of other places to get fonts You can download fonts locally to your machine So many ways to go about it. I just like the Google Fonts because they're easy. Here you can see I have Source Sans Pro with the fallback. So for some reason, Source Sans Pro doesn't load. We would have Helvetica. If Helvetica didn't load, then we just have a regular old Sans Serif.

We also saw Font Weight as well, knowing that when you want to use these font families, you also have to grab the specific weights for each of those fonts. Fonts are like actual files and you have to have the file that helps you understand how it should be at 700, how it should be at 300, how it should be at 400, et cetera. Cool. And for all of these things, if there's something that you want to do in, if there's something that you want to do in CSS and you don't know how to do it, there's something that you wanna do in HTML and you don't know how to do it. MDN, the MDN will always have the answer. The MDN has never let me down. They always have it. There was a great article on it and it will be a real savior as you kind of go through the basics of HTML and CSS. I just keep the MDN up. I always have a tab for the MDN up. Whenever I'm doing front end stuff, it's just up. It's just easy to be able to reference it. And whenever I actually kind of find something cool, I add it to my Anki. Yeah All right, so let's code some basic CSS in the materials for today what you're on discord exclamation point discord or Leon Noel comm Discord if you're watching on YouTube you can join once you agree to the rules You agreed to the join 100 devs by clicking the emojis. You'll see the follow along materials channel You can download all the materials that we're gonna be using today there.

I've already downloaded them I've already opened, I've already unzipped the folder. I've already opened the entire folder in my VS code. So I already have it all open. The reason why I like to open the entire folder is because then I get all of my lovely folders are already there to go. And we are going to work through some basic CSS. We're gonna do this basic CSS two. All right, so here you go. We have some things we have to do here CSS wise. It says make the anchor tags gold 20 pixels and have a purple background. Some have height, side does more. And so what I want you to do is to work through the basic CSS two, make sure you follow all the things it's asking you to do in the CSS and make sure you can make these rules come to life. We're going to put four minutes on the clock. Go as fast as you can and then we'll go over it all together. Done. Our classes and IDs, as long as it doesn't say classes and IDs are not allowed, sure, but you don't need them for this one at all.

Switching rapidly, they could have been using React or they could have been using a CMS nested output stuff using divs. Everything's always in the same spot. It's always on Discord, the File on Materials channel. Make sure you're using the files from today. Right, you're gonna have to find a different way to unzip, maybe through Google Docs, yeah. Too much here, Christy. Let me get some on the board for you. Basic CSS 2. So I said, do you ever get tired of explaining where to find these things over and over again? No, no. I think we always have a lot of folks that join us new each class. And so y'all should be listening to me right now anyway, as you're working. So I don't mind. Patience is a virtue. How do I unzip on a Mac?

You just double click. We are doing the basic CSS 2. Would you recommend learning TypeScript over JavaScript? No. Learn JavaScript first and then see the beauty of what TypeScript provides for you. I like people to like learn the base and then understand what benefits you get when you to use other things. Gotta feel a little pain to feel the blessing, you know? We'll be covering TypeScript now, just because it's just not necessary to get a job. I think it's a lot of fun. I use it professionally sometimes, but it's just not, it's just extra work to get a job. That's what we care about. What is the color app for Mac called? It's called digital color meter. I finished one on pace. Hey, good job.

Domino should be paying for this free advertisement. All right, folks, come on back, come on back. Let's do this together. no matter how far you got, let's just take a look at it together. All right. Please make the anchor tags gold, 20 pixels and have a purple background. All right, anchor tags, gold. So we'll do color, gold, beautiful. Font size of 20 pixels, cool. And have a background that is purple. Beautiful. All right. Please make sure the anchor tags are gold. 20 pixels have a background that is purple. Is my CSS saved?

Nope, it's not. You can see the, I'm just pointing at my screen. I always have to fight the urge to be like, no, look, and like point at the screen. Like, no, look, right there, you can see it, right? You can see that the dot is not, It's still full, so that's how you know I haven't saved. Beautiful. All right. Let's go ahead and open this in the browser. All right, we can see our anchor tags, gold, purple. Lovely stuff's going on over there. The next one. Please make the section have a height of 200 pixels. Was there more than one section? No, there's only one section, so we don't need to worry about classes or IDs or anything. All right, cool.

All righty. Let's go ahead and do section. And let's go ahead and give it a height of 200 pixels. Let's go ahead and give it a 10 pixel thick blue border. So border, 10 pixels, solid blue, lovely. and a light orange background. What did y'all do for a light orange background? Salmon. I like that, there you go. Is salmon light? I guess it's light orange, right? Light coral, ooh. Light coral works. Seeing a lot of RGB values. I'm trying to get got right now.

We're going to go at Salmon. All right, let's see. How come I can't see the Salmon color or the thick blue border? How come I can't see it? Let me get bigger. Why can't I see it? It's saved. Got to refresh. There we go. Refresh. We can see it. Nice. Cool. Please make the aside have a height of 300 pixels. Let's go ahead and do height 300 pixels.

Beautiful. Thin red border. Thin, let's just do like two pixels solid red. That'll be thin enough. And a teal background. Background teal. Nice. Let's just do the last one while we're here. Please make the aside paragraph. So the paragraph that's inside the aside. So we'll do a side paragraph. That's the selector we're saying, give me the paragraph that is inside of the aside with that space there, one of our relationship selectors. And let's go ahead and give it a color of white. Let's go ahead and give it a font size of 18 pixels. And let's give it a red underline.

Ooh, how'd y'all do red underlines? Oh, some people did text decoration, so like text decoration, underline red. That works, right? Let's go back. Uh-huh. You don't have to worry about the size of it. Some other things that you might want to try and do, like I like the underline red. It's cool. It works. There's nothing extra you have to do, right? But I also like, I also like border bottom. We can do like two pixels solid red, right? If we do border bottom and we go back, we're gonna have to do some other stuff like handling the width. But the cool thing about using border bottom is now we can use padding to push it farther away. So maybe you want maybe you don't want the border as close right And maybe don't the border as close Maybe you want a little bit further away We could put padding in between to like give us some room between the border So one you have control the other you don't so pretty cool Yeah, either border bottom works or the text decoration underline would work either is good here.

All right I think y'all did pretty good. I was watching chat go by as folks were answering them I think y'all did a good job on this one. Good stuff. As always, when we're reviewing it together, I'm gonna go fast. Don't feel like you have to like copy along frantically. I always share my solution files on Discord after class. So let's move on. Alrighty. Let's talk about some relationships. I always giggle. Let's talk about some relationships. We have here, what type of relationship? What type of relationship is this? Direct, exactly. The direct child.

It's saying give me a child that exists directly inside of another element. So we need a paragraph that exists directly inside of a section. That's an example here. You have a paragraph that is immediately inside of a section. There's no other gaps, jumps, or steps. The paragraph immediately inside of the section. Nice. Well, how about here? Here we have a paragraph, right? A paragraph that is immediately inside of an article that's immediately inside of a section. So would this work? Would that work? If I put the little caret there, that work? No, because this paragraph is not the direct child of a section, it's a child of the section. Let's not get that wrong.

It is a child, but it's not a direct child. So we don't use the caret here. We just have the P with the space. Whenever you see that space, it says, find me something inside of something. So find me a paragraph that exists inside of a section. I don't care how deep it is when it's a space It doesn't matter how deep it is. Nice Then we also have our siblings Right here. We're saying find me a Paragraph whose immediate sibling before it was another paragraph And so the only one that would actually get read here would be this YouTube because if we look at twitch There's nothing above it. There's no other paragraph above it for it to be a sibling to Right. There are other sibling selectors too, by the way, but this is the one we're using right now. Alrighty, let's code some relationships, folks. Let's code some relationships. So, I'm going back. My folder here, inside the same folder that you just used, we have this relationship CSS2 index.html CSS. Inside the CSS, there are some things that it wants you to do.

Memphis, thank you for the hydration. Cheers to you. There's some stuff that it wants you to do. No classes, no IDs, please. No classes, no IDs. Hey, Cobalt, glad you're finally able to join us live. All right, no classes, no IDs. We got four things for you to do here. Let's bring the the clock back and let's put another four minutes on here. You got it. Go for it Y'all did this before class No classes no IDs just relationships my favorite simple plan album So Thank you shell no worries though always gonna be mistakes appreciate it though Line 35 you said Oh, it didn't close, did I? Okay, we're doing the relationship CSS to these four things. Would you recommend free code camp or the Odin project? Yeah, by themselves. I think they're great.

I wouldn't do both at the same time. Like, I wouldn't do 100 devs and something else at the same time, just so you don't burn out. Engagement alert, anchor tag not closed. Denso. Nice. Like solving puzzles. Yes. That's why I love the code for me. You give me a good coffee and a good puzzle. I'm happy. I'll sit there all damn day on a puzzle and good coffee. But for me coding is like solving really cool puzzles. I love it. Slacked on Anki with this and it shows a you owe you. I'm actually doing this proud of myself.

You should be proud. There's no, you know how people can, there's not many people in this world that can do this stuff compared to everyone that exists, you know? One isn't better than the other Dof Randolph. They do it. They do things differently. It's about finding what works for you, right? Everyone's going to learn differently from different programs. And so that's what I always say, like, don't, don't don't let me be the arbiter of your success. This might not be the program that works best for you. Right? So check out other stuff, make your decision where it gets, where it gets a little hard is when people want to dump money into a program and then figure it out. That's where you get into trouble. Yeah. Between all the free stuff if you find what works for you. Is the Ketchup Crew on Discord, yeah?

You just gotta make sure that you have access to, make sure you don't have like a gray username, you can see all the channels. Cinder said this has been the most helpful and the soft self-taught because of the accountability and discipline Yeah, that's the beauty of right. That's what I love about a hundred does it's not just me. It's not just y'all It's a whole community of folks that can help and support and you got real deadlines You got to show up or else you miss class, right? I think that helps a lot of folks. That's why I like doing it live All right, folks, come on back. Come on back. Let's go through these together Alrighty. Don't worry. Ah, I see some people that were just almost ready to finish the last one. It's all right. You're good. You're good. Let's get in here. Way better than the three times I tried the other one.

Yeah. I feel you. All right. Please make only just kidding yellow. So let's take a look at just kidding. All right. So here is just kidding. It is an H2. We do have other H2s on the page. So how can we target just kidding? What's unique about just kidding that makes it different than the other H2s on the page? Yeah, it's inside of a section. So we can do section H2 and say color. yellow. Cool.

Let's open this in the browser and make sure that everything's working well. All right. All right. Cool. And then let's move on to the next one here. Please make only Twitter red and 20 pixels. Let's go ahead and take a look at Twitter. All right, here's Twitter. It's inside of an anchor tag. Do we have anchor tags in other places? We do have other anchor tags. So how can we target just the Twitter anchor tag? Yeah, side A would work here, right? side A, right? Let's look, was there any other, this is a paragraph, so we can't do like paragraph A, because there's one right here, but any anchor tag that's inside of a side would work.

So a side A, right? Now the cool thing is you can skip. I see a lot of people saying like a side PA, like that does work, it does get more specific, but a side A should work too. Let's try it. Color red, and font size, 20 pixels. Cool, we can see that Twitter went red. If you wanted to be more specific, you could throw in the P2. Cool. Let's make really hot purple, and like wild hot, larger and blue. So really hot purple, and then like wild hot, it's gonna be a different color. So let's go ahead and look at it. really hot is an h2 and like wild hot is also another h2 so maybe we could use the cascade to our benefit here right we could do article h2 to target really hot and then we could do article h2 plus h2 the target like wild hot differently oh let's try that article H2, and let's make that color purple, beautiful. And then let's do article, and we'll do H2, plus H2, selecting that sibling, and I'm gonna make it larger, so maybe let's do like font size, I don't know, like 30 pixels, and then let's go ahead and do color blue. cool. Let's see if this works.

So if it works, we should see purple and blue. All right. Really hot is purple and like wild hot is blue. Now I mentioned the cascade is helping us here. What do I mean by that chat? When I say the cascade is helping us, what do I What do I mean by that? Yeah, it overrides, right? We start off with all of our article H2s being purple and then we use the cascade to our benefit. Like as we go down the page, if something has more, if something has equal or more specificity and it was just to override the thing that came above. So what we're saying here is, hey, if there's an H2 that has a sibling H2 that's inside of an article, make that one blue and bigger, right? And so all the H2s were purple, and now this specific H2 down here is gonna be blue, right, gonna be blue. Couldn't you do H2 plus H2? Were there any other H2s plus H2s? I don't see any, so yeah, maybe H2 plus H2 could have worked too by itself because it would have been the same amount of specificity. I kind of like having the anchor of the article so I kind of know where to go, right?

Yeah, it would have worked with just the H2 plus H2 as well. Cool, last one. Make only Bob and pizza green. Only Bob and pizza green. Is there, is there, if there are three, could you do H2 plus H2 plus H2? Yeah, you can do all the siblings as far as you want. You can go as many siblings deep as you would like. All right, Bob and pizza. All right, Bob and pizza are both articles inside of an LI. And how do we grab just Bob and pizza, but not sunshine and rainbows. Oh, the chat's doing it. All right. We could use the fact that the ULs are siblings. So that could be the place where we start, right? We start with UL plus UL, and then we could just say like A, right?

So let's try that. UL plus UL and then A, and let's try it. color green. All right, let's do it. All right, Bob and pizza are just green, right? Because we have the UL plus UL, right? That's gonna say, you know what? Ignore this first UL, just grab the second one, and then grab all the anchor tags that are inside of it. All right, a lot of folks are saying like, Like why don't you use the carrots? Like why don't we get like more specific here? Well, sorry, it doesn't add specificity. Why don't we make them direct? Well, because I don't have to. And so I'm lazy and if I don't have to, I won't do it. But also it really does make it more strict, right?

And so it's up to you. Do you want to be more strict or do you want to be less strict, right? It's kind of a preference and it actually might be set by the team that you join. Your team might always prefer like strict, direct, direct childs, right? And you'd have to figure that out. If you wanted to do like ULA, you'd also then have to do like the LI, right? You'd have to, if you wanted to use the more strict, you would have had to like add more work here, right? And in this case, you would have had to add more specificity. And so I don't ever use the direct parents or the direct children unless there is a situation where I need it Yeah, otherwise, I just don't Don't go out of the way to like do more work, right? All right looks good we're good on that one as always I share the solutions after class There was an error in the HTML. There was an error that I fixed. Down here, Twitter was an anchor tag that opened, but it closed with a paragraph. I had to fix the error to close with the closing anchor tag. There you go. We got got together.

We got got together. I got myself. I went to get what I got got It was a test. I was testing y'all All righty Let's talk about IDs we got engaged Engagement We're definitely hot. That's that's definitely a moat Engagement is an emote. It's definitely coming. I got to talk to the designer to help with the other ones but yeah, we're definitely doing an engagement emote. All right, let's talk about IDs and classes for a little bit here. We have IDs, which are unique identifiers, right? It's unique identifiers. It's a way of targeting one thing and only one thing on the page, right? Hopeless said, can we do more practice? Yes, we can do more practice, I got you. We got more practice tonight. IDs are unique identifiers, right?

It allows us to target one element and only one element. Once you give an element an ID, that ID cannot be reused on any element. It's how we talk to just that element and only that element, right? Cool. Now, here we have hello YouTube with the ID of zebra, right, with the ID of zebra. This ID of zebra cannot be used anywhere else, only that paragraph. And if I want to target just that paragraph, I can use the ID of zebra to get there, okay? Classes are a little different. Classes we can give to multiple elements, right? We can give them multiple elements, right? And those elements can be reused multiple times. And so here you can see this paragraph has an ID, but it also has the class of Bob. You can see that this paragraph also has a class of Bob. So when I do my .Bob as my article, sorry, sorry, as my selector, I am targeting both of these elements at the same time. And in fact, our elements can have as many classes as you want to give them.

And we can use all those classes to target elements. So it can only have one ID per element, then the ID name cannot be reused. And then you can give as many classes to your elements as you would like. Each class is separated by a space. All right, chat, how many points of specificity does this rule have? All right, let's count it. We have one class and one ID. So one ID, one class, and zero tags. So 110 points of specificity here, and we can see it. We can see, all right, here's the section that had the ID of pizza, and then inside of it is a paragraph that had the class of Jumanji original movie, AKA the only one that exists. Anyway, next one, how many points of specificity chat, how many points we got here for this rule. All right, let's count it out. We got how many IDs? One. How many classes?

We got one, two, so two classes. And we have one tag. So 121 points of specificity. because there is one ID, two classes, and a tag. And we can see that, right? We can see that there's something that has the ID of Diet Coke space. So we're gonna look inside. Inside, we can see that there is indeed a paragraph that has the class of Bob and the class of Domino's Pizza, and it is a paragraph. That's why there's no spaces between Domino's Pizza, Bob, and the paragraph. Cool. This counting used in real life. I use it all the time It's how I know it's how I know if the content is gonna be overwritten in the cascade Dab said somebody at github pushed a bit of bad code and they're landing pages down. Hey it happens, right? It's the best developers in the world are getting got we can't expect not to get got ourselves, right? I feel like everyone was going, everyone's going down recently, right?

Like, Discord went down, GitHub's going down. This is not a good sign, folks. Everyone's getting got. Alrighty, this is our last one here. How many points of specificity does this rule have, folks? How many points of specificity does this rule have? Okay, okay, I see you. All right, we had one, two IDs, zero classes, zero tags, but we also had the bang important. So that gives us one in the other category. So we have 1,200 points of specificity. 1,200 points of specificity here. Boom. I got it. Alrighty. Let's get some specificity practice in, why don't we?

And so let's go back to VS Code here. I'm gonna close the ones that we are working on. And we have another set of practice here folks practice on practice on practice on practice. Let's go So we have specificity practice. Sorry. Yep specificity practice here There you go specificity practice is the one we're looking at And you got four things to do here, please I'm gonna put five minutes on the clock for this one. Just give folks a little bit more time Um, just to have a little bit more fun with the highest level specificity questions, the five minutes on the clock here, then we'll go over it together. And then we'll probably take a break in different ghosts, add it two minutes to the timer, but we got to add, it's now seven, not 700, but seven minutes. There you go, seven minutes folks. Thank you indifferent. So you can use channel points to increase a timer and so indifferent ghost spent the channel points to increase the timer so you had a little bit more time to work on these. The people's champion, exactly. I love labs. Is indifferent from the last cohort. Well, they were here last car, but they're one of our, they're the only person in the of 100 devs to go through all ranks on Discord, meaning to go from helper to mentor to moderator.

An amazing contributor to our community has helped single-handedly hundreds of folks get to where they need to go. I admire Leon's ability to say specificity so many times. I mess it up all the time, all the time. Leon, what do you think about using JS for data structures and algorithms? Yeah, why not? Did you comment the points of specificity next to rules to keep track? Nah. Oh no, blah, not the pixels. That was actually from this class last time. It's funny you bring that up. This is the class that it happened. Yeah because of the box model Thank you, bro Yeah, that clip is still up it's one of my favorites So behind my head hurts. Yeah, I agree with everyone that's jumping in here. Get on discord will help you out. Different said you got this exposure theory and spatial repetition.

Exactly. We're going to see all this stuff again, right? And I get lots of practice. We're gonna do it and all of our space repetition in Is it worth learning topics like npm websockets and webpack from scratch if you like learning about them sure Why not? You're just trying to get a job. No You know, it's great You ever play poking no I did for a little while then kind of just So Come on in folks Memphis. Thank you for the hydration cheers to you Actually, thank you for the gift to sub time to read the pasta a How do you wrap VS code text there's a soft toggle you can turn on if it's not already on for you by default Very covering back end in the bootcamp, of course I need to send you some Donna's pizza. Where do I send it? You don't. Random acts of pizza on Reddit's great though. When are we starting JS? Not for a while. We gotta get through responsiveness first. What's the gifted sub thing it's when folks in the community give other folks that are here a sub, um, yeah It's actually the only thing that has sound like regular subbing, um bits all that doesn't make sounds but gifting stuff is do McDonald's or burger king definitely burger king because they have the impossible whopper McDonald's is getting ready to have the McPlant, but I don't, I don't trust McDonald's. Family Guy or Bob's Burgers.

Oh, that's such a hard one. I love Bob's Burgers, but I think Family Guy just has like my old older school humor nailed down. How do you feel about machine learning? I think it's dope. Can't wait. I want all of the, I want all the AI to help me write my code. A lot of people coming in done, that's great. How many countries have you been to in Africa? I've been to quite a few, I did some research for a while. So yeah, it's actually a surprisingly high number All right folks about 50 seconds left got this dig deep you can do it I did do biology, yeah, mainly biological anthropology though you make it to Ireland on your travels. Yep. Yeah, and they're quite a few times mainly because like hopping planes, but yeah I started off with my MCB and then transitioned after like years in I Yeah, we call it MC DB though For that developmental in there What's the most beautiful country you ever visited I'm sure that's a hard one I Think I said this last time I was sucker for Italy. I love it I like history and like you just you just like in it, which is so cool. Alright folks. Come on back come on back.

Hope you had a good run. Hope you enjoyed the extra two minutes from indifferent. All right, let's go over these together. Boom. All right, please make this an add blue, but make sure it's specific enough that you could add other H3 somewhere else in the document. All right. So let's look at this as an ad. All right. So this is an H3. And we want to make it specific enough that we could add like H3s elsewhere. And so the cool thing is that this H3 is inside of an aside. So let's go ahead and just grab the class that's on this aside. Yeah. Let's grab the class and let's try that. Although we do have this ID up here too.

Let's get real specific with it then. Let's just while out here. Not because it's necessarily good code, but just to have some fun with it. All right. So we know that it's inside of a section that has that ID. Rugrats while Thornberrys is indeed the best crossover of all time, right? So that's super specific. And then inside of that, we know that we're going to grab an aside that has this class of extra, extra read all about it. Cool. Then we know there's an H3 in it. We do that. Then we do like H3, right? Now, we could get more specific than this, right? I mean, we could throw the section in there, we could throw the aside in there, right? We could also give that H3 its own, like its own ID, and then that would make sure that we're specific that nothing else, right?

But like, I feel this is a good testament here. I make it blue. Cool. and let's go ahead and let's actually open this in the browser. Cool, and we can see this is an ad, you're beautiful. There you go. Cool. Just put Bang & Port and on end call today. Yeah. The screen not being focused is you have to change the quality settings on your end. Yeah, make sure you change the quality settings and give it a refresh sometimes if it gets too blurry. All right, so that was good. I feel like there's no other H3s that are gonna really be built, like unless you put like another H3 inside of this, inside of this section, I think we're good. Maybe we could even just to make sure that there's like not other things that are going to be there, we can use the direct, right, just to be extra careful. Cool.

Yeah, just be extra careful. All right, please make I like turtles red. I like turtles. That's that's the that's like Like perfect og vine, right I like turtles They have to be like an adult now right like I Wonder what I wonder what they they grew up to be Maybe they're a herpetologist, right? Maybe, wouldn't that be a story? They're herpetologists now, you know, studying. Is that what, those people that study turtles, right? Or like lizards and stuff. All right. I like turtles is down here. I'm sorry, I forgot about this being in here. I'm removing all that imagery. We won't be using that going forward, but I forgot about this ID. We have the section ID here, and then we're gonna change this here. We're gonna change, changed it.

There we go. Changed it. There we go. So it changed it, and we have, I like turtles inside of it. So let's go ahead and use that. Let me save here. And I'm gonna go to ID here. I'm gonna say changed it. And h2 boom and we make it red color Cool let's save it. Let's see what we got Nice me a little bit bigger Cool red Alrighty, please select hello world with the highest level of specificity possible. Oh boy. We're going to do this again, are we going to do this again? Are we please select hello world with the highest level of specificity possible. What y'all get? How'd you do it?

All right. Let's take a look where hello world is. Let's see. All right. Hello world is in this H2. So we definitely want to use the H2 with the section that has that ID. So let's go ahead and copy it. And let's go ahead and do a section with that ID space H2. Cool. That's the start, right? The H2 that's inside of this section. H2 is inside of this section. This section is the sibling of the header with the class top. So header with the class top. Cool.

A sibling. Beautiful. And then the header top, that is inside the body, which is inside the HTML. So, we'll do HTML. We'll do body. And then we'll go ahead and give it a color. Let's just say gold. And we'll do bang important. I don't know where that O came from. And then and we'll close it off. Cool. Let's make sure it's gold. All right, so hello world is gold. Did anybody add something that made it more specific? You can do more.

What more can we do? Direct relationships won't make it more specific. Oh boy, um, there you go, right, still gold, anything else folks found that they could Cool, I like it, I think we're good here. So we had an H2 that was a child of a section that had this Rugrats Wild Thornberry Best Crossover of All Time, that was a sibling to the header that had the class of top, that was a child of the body. The body was a sibling of the head and the head was a child of the HTML, boom. What are you sipping today, Leon? Tea? The normal Tazos Vanilla Caramel Chai. All right, folks. Well done. We have one more down here. I'm going to save this one for y'all. I want you all to try it on your own. Get as specific as you can, and maybe we'll do it together on office hours. But I'll leave this one for you, just in the sake of time, because we're a little bit over.

We're over time. So let's go ahead if you're new around these parts. We like to be We like to be we like to take our breaks at the top of the hour We're here for a long time, right? Not a short time. I don't know why And we're gonna go and put five minutes on the timer here. Please if you're able get up hydrate grab some water All right, grab some water Stretch if you're able. Let your eyes focus on something that's not the screen. We'll be back here for you in five minutes, folks. See you in five. You I Start using studio classes, that's pretty cool. I seen Dragon Ball super of course I mean, thank you for teaching. Do you think AI will make a replacement for many programming jobs? Nope. Programming is like turning business ideas into reality. AI is gonna help us do that.

You just won't have to look up as much stuff. It'll be helpful, right? It's gonna be really helpful. And it's gonna help build more products faster, which means more engineers, which means even more work. So I'm ready for the AI. I think it's gonna make our systems a lot easier to build. And this is gonna be like another tool that we use to help us join us on discord victory happy to have you favorite pasta shape I'm like a I'm like a thin spaghetti type person yeah thoughts in the metaverse going to happen. Yeah, I found our JavaScript, JavaScript all day. Ether soul. Oh, the hard one. I love the eth ecosystem way more. I just don't like gas. So soul can be fun too well I don't I like the mechanism of gas I don't like having to pay gas what kind of chair do you have I have a Herman Miller embody mom back folks come on back we had a good break Are you veg? I'm vegan. Yeah, I don't think I'm a vegetable though All right folks come on back hope you had a good break Leon's got the monies.

No, I did not pay for it. I mean, let me i've told I said i'll keep saying this I have a amazing setup Like the the the the when I was little the thing I wanted most growing up was a laptop Didn't get one. I always wanted a computer. Didn't get one until much later, right? Like I always wanted a computer. I have the setup of my dreams right now. A beast of a laptop, a beast of a PC, triple monitors, dual camera, Goal XR, two Steam decks, iPad to draw. Like I got a beast of a setup. I did not pay for a dime of it. I did not pay for a dime of it. When I negotiate my salary, When I negotiate my contracts, I often need more gear or things to do those jobs or to do those jobs well. And so I haven't paid for any of it, including my chair. So I have this one that I did not pay for. And actually I got this Herman Miller and body for $300. It is a $1,600 chair that I got for $300, including my keyboard.

Exactly. I got a $300 plus keyboard. I got, I got one for free. And then another one that I got for free again, I guess. Cause I didn't pay for it. Um, the, the chair I knew I wanted to, I knew I wanted to embody, uh, for a very long time and I checked Craigslist every single day, uh, all the marketplace apps every single day and eventually I saw one that somebody listed for $800 and as soon as it went up I had my alerts I immediately sent to them hey I saw you it posted the embody 500 cash I'll pick it up in an hour like literally in an hour I'll be there with cash and they were like oh like that's great like I can do the 500 and can you just come pick it up tomorrow so I was Like, yeah, hell yeah. I'll come to like, do you sure you want me to come? I'll I'll literally I'm in my car. The guy will come. I will get it from you right now. They're like, no, just come tomorrow. And then so tomorrow comes and they messaged me saying, Hey, I tried to clean it. It, it, it didn't work well. There's a stain on the seat. Are you okay with the stain?

And I was like, and I was, I was about to say like, hell yeah. Like I'm still coming. I'll get it cleaned. I don't care. And they're like we'll knock I'll knock $200 off of it so that you can get it cleaned. So I showed up and I bought the chair for $300 cash The stain was like it looked like somebody dropped a little bit of water on it like it like it looked like somebody dropped a little water on it and She the woman there told me she's like look. I Know it's an expensive chair My boyfriend got it for me. We're no longer together. I just don't want it anymore I was like what there she's like, yeah, I just don't want it anymore so $300 and I paid the cash and I smiled my whole way home with my $1,600 chair that I got for 300 and Then that that 300 I didn't pay for that came out of my PD funds. Anyway, all righty Let's get into the box model story times over So we talked a little bit about the box model last class. Let's make sure we review it. And then we're going to get some practice with it. So the box model is that every single thing in web development is a box. I don't care if it's an image, a piece of text, a section, everything is a box. It can have height and width.

It can have padding and it can have border, right? And it can have border. And then we have something called margin, not technically box model, but the margin can push the box model around. So let's get some more practice in. Let's not get got again tonight. That was pretty quick. If you saw, it's good on you. Let's go ahead and practice. Let's say we're gonna build a section again, right? We're going to build a section again. Let's go ahead and say a section. Cool. And let's a height of 50 pixels. And a width of 50 pixels. Cool.

And then we could do yeah. Let's of feel comfortable we know that that's 50 pixels wide you know it's just i look over it's just all nuns too many of y'all gotta got emotes these days too many got about too many people too many people use the jeff bezos's money uh they they realize that they have amazon prime they can get a free sub uh and uh too many people got gifted subs we got too many nuns in the in in this chat nowadays I'm done I'm here drawing a look up it's just a wall of nuns god dang it spell it out spell it out spell it out yes yes So I knew that dad, thank you for the gifted subs. I knew that you could, you could take the clip or rewind the clip. And so somebody knew that they could do the clip, right? And then go back to it. I should have just enough that you could go to the clip and then they had to type it all out, right? They had to type it all out and then you'd be able to type it all out with the clip and get the link. Yes, well done, well done, well done. We got Gat. It was a risk, right? We knew it was a risk, right? We knew it was a risk, right? We knew that it. Oh, another gifted sub, hey. Wait, it's kind of lagging.

I need to see who did the gifted subs. Dab, thank you for the five gifted subs. And did I see who just did the gifted ones there? It'll come through in a second, but thank you for the gifted subs. All right. Let's do it again. It didn't come through. I'm not sure who did the gifted. I appreciate you for the gifted subs. I'm sorry. I just didn't, it didn't come through on my log here. So I appreciate you. There we go. It was Dab, oh Dab, thank you for the gifted subs. All right, let's do it again.

So section. and we have height of 50 pixels and width of 50 pixels and that'll give us a nice square. All right, so now let's go ahead and let's go ahead and Let's add a border. Let's do a little, it got worse. Let's do a border. I'm sorry. Don't blame me, blame the duds. Let's add a border. Actually, let's change the color. We have our nice box and let's add a border. Let's make our border red. And so we'll do border. And let's go ahead and do five, let's do 10 pixels solid red. Cool. There we go.

10 pixels solid red. Alrighty. And that would go ahead and give us a 10 pixel border going around the whole thing. Cool. And how wide is this element right now? How wide is this element? 70 pixels wide, right? Because we have 10 pixels on the left, 10 pixels on the right, and 50 pixels in the middle. Nice. All right. Let's go ahead and give some padding. Let's go ahead and do padding bottom. Adding bottom and let's give it 30 pixels. And what will happen is we'll need to kind of erase the border for a second here. Yeah.

And padding, padding increases the distance it's between the element and its border. So if we give 30 pixels of padding here, we get 30 pixels of padding here, right, and that's all of our padding here, right, it's all of our padding here, and then we have to make sure that the border goes back to where it was. There we go. How tall is this element? How tall is this element? All right, we got 10 pixels on the top, 50 pixels, so we're at 60, plus 30, so we're at 90, plus another 10, we are at 100. So 100 pixels tall. How wide are we right now? How wide is the element? Why is the element, it's still, right, still 70 pixels wide. If I had margin, right, if I had margin and I added 100 pixels of margin to the top, how tall is the element? If I added 100 pixels of margin to the top, How tall is the element? Oh yeah, it's still the same, right? Margin pushes the box around. It doesn't increase the size of the element, right?

It's a hundred pixels tall. Still. It's just pushed down margins. The bully pushed it down, right? You had margins that left it to push it over. Still, still the same amount of height. Just margin would push it down. Cool. Well done everybody. All right. All right, let's go ahead and jump back to the slides. And we're going to get some box model practicing. We drew it and now let's actually code out some elements that can, that we're gonna kind of play with the box model a little bit here. So let's go ahead and open up that set of code. Told you folks, lots of hands on keyboard time tonight.

Right? Feeling good, right? It feels good. All right. So we got this box model practice, index.html, and inside the CSS, you got some things to do here. So let's go ahead and put five minutes on the clock here, five minutes on the clock, and go ahead and go for it in five minutes. This is the box model practice. Actually, let's do four minutes and get as fast as you can in those four minutes. Okay. I know you probably won't finish it in the four, but that's okay. Take four, try and get as far as you can. Speed run, exactly. All pixels, it's the PX, like 30 pixels font size. Yeah, Miles I said wild how chat slows down during these exactly you're all doing stuff. Hey, so do you ever get into MOBAs?

Nah, I've stayed away. I know that that's the end of my that's like it's over. It's a wrap. Like I played wow for a month and then I was done like never again. I didn't eat. I didn't sleep. I didn't go to class. I just knew I couldn't live life like that. I'm from South Philly. Favorite NBA team? Sixers of course. I would Definitely wear Leon's drawing on a t-shirt. That was the merch last cohort. The last cohort had the box model. Exactly.

Our box model was on there. Do you stay John an unhealthy amount? Not as much as I did when I lived there, but it still comes out. Like when I just don't know what to call something, it does slip out. Bobby Lynn added two minutes to the timer. All right. When we, when we hit two minutes, I'll make it four. Oh, there you go. Four minute timer. Bobby Lynn added the two minutes to the timer. Well done. Well done. Thank you Bobby Lynn for the extension. Slay Vance. Hey, thank you for the six months.

So I appreciate that Are we getting to SCSS at all now don't think you pick up on your own if you want It's just not something we need to get a job, right So if it's not something that's gonna like materially help us get a job. I don't teach it any seagull, of course Up three all time Please can we finish at 9.30 now I really do try to stick to the three the three hours I know that it's hard to do it sometimes but I'd really try to know people got life and so I try to be consistent with the time how much data structures and algorithms we go over we'll go over a lot we'll be doing daily data structures and algorithms practice for like a month plus. What company treats their employees the best? I know a lot of like local Boston companies that treat their employees really well. I don't know of like national companies that I could think off the dome. You know, exactly, and also what indifference that it also depends on what you're looking for. Like paying some people the most is like you could, you could throw them in a dark corner as long as you're paying them more, right? People look for different things. How's your experience with tech stars? I loved it. That's one of the best things I've ever done. What do you think of the Seattle hub? I think it's dope. Like I like you mean like like of Seattle. I went to Seattle over the holidays and I loved it All companies make your take take Lee codes are similar.

Nah, a lot of companies don't even give you technical interviews Motherboard. Hey, thank you for the 10 gift that subs. That's wild. Thank you so much 10 gives us, we see they're making a new fresh prints. Yeah, I have. I think it actually looks pretty cool. It's not like funny. They're definitely going more like drama-y. I, and I kind of, I really do love the, like, the campiness of the original. That's what made it one of my favorite shows, but the trailer looked cool. It's more, more modern drama-y. A lot of folks coming in done. Will we learn enough to talk about Big O notation? Of course, yeah. You'll be able to evaluate all of your interview problems in Big O.

Done. looks weird. Do we need to know advanced math? No, not at all. You don't even need like regular math other than like calculating percentages maybe. Where did you learn to write hieroglyphics from the nuns. Like Bansky learned CSS. All right, folks, five seconds left. Get in here. Favorite vegan fast food? Taco Bell, by far. You can make anything. Yeah, right. You don't even need to calculate percentages anymore. There's calc.

Um, yeah, no, the Taco Bell will make anything vegan. You just gotta say like fresco style. Like you, you can order anything like remove the meat and say fresco style and it's vegan. It's beautiful. Taco Bell sponsor us please all right have you ever tried in and out their friend tries and they were horrible I don't get it I guess maybe it's like price but the lines in and out are just like they're just wild absolutely wild like the lines are just like around the block every single time. I just don't get it. I know I just offended a lot of people, but I just I just don't get it. All right, folks, let's get into this. This is this is this is the most I've ever seen chat pop off when I start talking about fast food places. All right, please make the H1 30 pixels with a little padding on the left and a thin red border. So let's select the H1 here. We're gonna make it a font size of 30 pixels, 30 pixels, a little padding on the left, so padding left, 30 pixels, and a thin red border. So let's do border, we're gonna do border, let's go ahead and do like three pixels solid red. And let's save this. And let's open this HTML in the browser.

All right, so we can see that this H1 had a bigger font size. We can see that there's a little bit of padding on the left and we can see that it has that thin red border, right? Now, what I like to do is I use my inspect tools. And so the reason why I ask you to use Chrome for the class is just that the tools are slightly better in Chrome and there's slightly few things that like Firefox is just a little bit harder to get to. And so I tell people to use Chrome just to get comfortable with these tools. I find even when I'm like developing and I use Firefox, I have to jump back to Chrome every once in a while. So I just tell people to use Chrome out the gate. Even if you use Firefox in like your day to day, just for these tools. So if you right click on this text and you click inspect, that's going to bring up the inspect tool. Okay. It's going to bring up the inspect tool and inside the inspect tool, there is this lovely, like you're going to see all these different panels, but I love this panel right here, the styles panel, because as you scroll, let me bring it up a little bit, as you scroll, you can see all of the computed CSS, like the CSS that is actually sticking, like the CSS that's actually running. So like I could click on the H2 and it would show me all the style on the H2, but I click on the H1 here in the elements and it's gonna show me the exact CSS that's coming through on that element. And then there's one other really cool thing that is if you scroll down far enough, there's this box that shows up. And the box actually shows you all of the, like the actual sizing. So it'll show you the size of the element, like the height and the width.

It'll show you the padding. It'll show you the border and it'll show you the margin. And so if you look, you can see, all right, here is the height and width of the element. You can see that we have the 30 pixels of padding. You can see the three pixels of border on each side. And you can actually see that there's some margin that's at play too, right? So if we hover over this, you can actually see, all right, here's the element. And then when I hover over padding, look, look up here, look at where the element is. Look up here, ready? Three, two, one, padding. All right, see how the green shows up? So that can show me that, oh, there's actually padding there. If I do the border, it'll actually highlight the border. So even if the border is like a weird color or it's not on all sides, you can see where it would be, and then you can actually see the margin. Now, did we give it any margin?

Did we give it any margin? No, we didn't give it any margin. And so since we didn't give it any margin, where is that coming from? We didn't give it any margin, where is it coming from? Yeah, it's coming default from the browser. And so we're actually gonna see this in a bit. I'm gonna show you how to get rid of these defaults, right? Like maybe I don't want this default margin coming from the border. Maybe I wanna start fresh. Maybe we wanna start without having all these margins. So I'm gonna show you in a few minutes how to get rid of these defaults if you don't want them. But this inspector tool, right-click inspect, can really save you a lot of time, right? I look at this box every single day, hey, good dev. And it can show you all the stuff that's actually being computed and added. And it's just really helpful.

The other neat thing, I just wanna come back here real quick to the CSS. Yes, I did padding left, but I didn't have to do that. There's something else you can do. If I just use the word padding and I do 30 pixels, what this is going to do is it's gonna apply 30 pixels of padding on every single side. So let's go back, let's refresh. Right now we can see that there's only 30 on the left, But as soon as I refresh, you can see it visually, right? We can also see it here that we've gone ahead and added 30 to each side, right? So when you do just the 30 pixels, it's gonna add it on all sides and it does it, right? it does it in a clockwise fashion. So it's gonna go top, right, bottom, left. And so you can actually override these in the line here. I can do zero, zero, zero, 30 pixels. If I save that and I go back, it's always clockwise, exactly, always clockwise. If I go back, we go back to where we originally were when I said padding left. Because what I've done, right, what I've done is I have given it zero on the top, zero on the right, zero on the bottom, but 30 on the left.

And so you can do that one for each direction. Top, right, bottom, left, okay? The other cool thing is it'll repeat itself. So if I was to do, let's say, if I was to do like 30 pixels, zero, right? If I was to do 30 pixels, zero, what it's gonna do is it'll do 30 pixels on the top, zero on the right, 30 pixels on the bottom, and then zero on the left. So it'll double up for you, right? And so if we save this and we go back, you can see that we have it on the top and the bottom, but none on the left or the right. So when you are writing your CSS, you can do the hyphenated padding, hyphen left, hyphen padding, padding, hyphen right, padding, hyphen top, padding, hyphen bottom, or you can use these kind of shortcuts that we just talked about. And it works the same with margin as well. It works the same with margin. Yep, works the same with margin. What do I use? I typically use the shorthand, yeah. All right, so let's put it back to padding left, just a little bit more readable. There we go, all right.

Please make the h2 25 pixels. Let's go ahead and target our h2 here. Let's go ahead and do font size 25 pixels. Cool. Let's go ahead and add padding on the top and bottom. So we can use the trick that we just did. We can do padding. Right, we can do padding. And we can do top and bottom. So let's do, I don't know, let's get wild with it. 50 pixels on the top, and then zero on the left and right. So that'll do 50 on the top, zero on the right, 50 on the bottom, and zero on the left with that shorthand, right? Remember, this will repeat itself, so it's gonna be 50, zero, 50, zero. And then the last thing here is, oh, sorry, it's two more things here. Thick gold border, border.

Let's go ahead and do 20 pixels solid gold. It's really thick. And then a margin on the top and bottom. So let's go ahead and do margin. And we'll do the same thing, 20 pixels, zero. It's gonna add 20 on the top, zero on the right, 20 on the bottom, zero on the left. All right, let's check out this H2. We look at our H2s. If we were to right click inspect on it, right? You can see that it's highlighted in the HTML. We scroll down. We can actually see the computed. We can see that there's a 50 on the top, 50 on the bottom, 20 on the top, 20 on the bottom. And as you highlight through, you can see the colors changing as we roll over. So here's the element.

Here's the padding. Here's the border. Here's the margin. Nice. Sir, exactly. All right, let's do the next one here. Please make the spans have a thin black border. Okay. So let's just do border two pixels, solid black. Cool. A little padding. They went padding on all sides. So let's go ahead and do 10 pixels. Ah, that's a little too much. Maybe the five pixels.

Cool. And blue. Color blue. Nice. Let's save it up. See what we got. Yeah, look at these spans. If we right-click on one of the spans and we inspect it, we're going to see that we've got the padding on all sides. It's got the border and we're doing good here. And we had one more here. Please make the section 20% width. All right. So let's go ahead and do a width of 25%, sorry, a 200 pixels tall. So height 200 pixels tall centered with a thin purple border. So let's do border first border, two pixels, solid purple.

And what did you all do to center it? What'd you all do to center it? Ah, we did margin zero. Let's talk about it. Margin, zero, auto. So what this is gonna do is it's gonna put zero on the top, auto on the right, zero on the bottom, and auto on the left. And so when we do that, what it does is it centers it, right? That margin zero auto will help center it for us. It's a little bit of a trick for now. We'll get to way better positioning systems in the future, but for now, since we're learning about margin, and we can use that margin trick where it's gonna repeat itself. Zero, auto, zero, auto, right? Cool. Eventually when we get to flex and other stuff, different and easier. But since we were dealing with the box model and some margin, we'll throw in the margin zero auto. Cool.

All right, we got about 20 minutes left, folks. 20 minutes of fun. Dig deep. This is, this was a, this has been a, it's been a, it's been a long one, but a fun one. Right. Long one, but a fun one. All right. Here, classifier. Hey, dear. All right. I have put together a template for you all. Uh, starting from scratch can be a little bit difficult, right? Like you have to create the folder and then you have to create the html file Then you got to create the css file and then you got to link the css to your html file Then you got to make sure you did it. All right And so what I did is I made a template for you So instead of having to do it from scratch every single time Right, so if I can do it from scratch every single time, you can just open up my template and make a new fresh Copy of the template each time and when you make a copy of the template We make a copy of the template, you can just start with that. So let's go ahead and take a look at the starter template.

Unclose what we just did, and it's aptly named template. So if we look at template, there's HTML, there's actually a space for our JavaScript that we're not gonna touch yet, right? And there's CSS, but there's a bunch of stuff in the CSS. All right, bunch of stuff in the CSS. We're gonna look at the stuff that we're familiar with first and we're gonna talk about it. All right, so here's the HTML. We got the lovely doc type at the top, letting us know that we're using HTML5. Our HTML has the lang preference, lang, E-N, short for English, letting us know that that's gonna be the base language here. You're gonna see some meta tags here. The first one is our UTF-8, and UTF-8 is just letting us know what type of characters we're using. And basically, UTF-8 has every type of character you can think of, okay? Next, we have the description. That's what can kind of help show up when you Google a website, right? Like, that's what can show up when you go to Google something, right? That description can pop up the meta.

These keywords used to be really important. Now, not so much. So back in the day, right back in the day, there were what we called keyword stuffing. So Google would come to your site and they were trying to figure out what your site was about and they would look at your meta tags, right? And so based on what were in your meta tags, right? Based on what we're in your meta tags. They would say all right. This is what your site is about. Okay So, what do you think people started doing when search engines start looking at their meta tags to figure what their site was about? They don't really do this anymore back in the day they did They put every single thing in there If you had a dog food website You had every type of dog get every color of dog get every shape of dog get every single thing about dogs in those keywords. And so then what Google said is, hey, if you put so many keywords in your meta characters, we're just gonna ignore them, right? And so then what people did, is instead of having all the meta keywords in the meta tag, they would come on the page and they would put all of their keywords in the body and then just make them white. So they wouldn't show up to the user. They were there for Google, but they weren't show up for the user, right? And so Google saw this, right?

Google saw this and they were like, wait a minute, that's keyword stuffing. And they actually started docking you for all these bad behaviors. And so SEO or search engine optimization is like a cat and a mouse game here, right? Where you figure out a little trick or a hack and then Google penalizes you and then you gotta figure out more and then they penalize you again. And so, uh, there's all these things that used to be there, but aren't there. Um, there is something missing from the top or this meta area here, and that's our viewport. When we get to responsiveness, we're going to come back and add one more thing here, which is viewport. But right now that won't make too much sense because we haven't gotten to responsiveness yet. I know that there's gonna be one other thing we'll add here, uh, for viewport that'll help folks when it comes to accessibility, uh, titles, what shows up like in the tab, right? Like see like the stuff that shows up in these tabs here. That's what comes from the title. And then here's the real meat and potatoes for tonight. We have two different style sheets here that I'm linking to, right? Two different style sheets that I'm linking to here. I have normalized and then I have my like normal style sheet, okay?

Right? I have my normalized and then I have my actual style sheet. Right? And so what this does is that there's two extra CSS files in here, right? There's a normalize and there's a reset, right? There's a normalize and there's a reset. What reset will do, like if you were to link reset here first instead of normalize, what reset will do is it will scorch the earth. It will get rid of every single default style that comes from the browser. We saw that margin that was coming default in the browser, right? Reset gets rid of everything, right? It gets rid of every single default style, right? And you start from absolute scratch. Your H1s are gonna look exactly like your spans, right? There's no difference. For me, I got used to the default styling.

I wouldn't want to have to start from nothing, right? I would just find that too awkward. It would take me too long. And so I use normalize, but normalize means is that I keep some of the default styling. It's just that that default styling is consistent across every browser. So my H1 will be the same font size in every single browser. And so it's up to you. Some of my students really like normalize because they're already kind of used to the default styling and some of my students hate it and they love reset because they rather start from nothing right so it's up to you it's one of your first real decisions as a front-end developer are you going to use normalize are you going to are you going to use reset you kind of choose one and go with it but i've included both for your enjoyment all right and then the last thing here is we have a link to our javascript we're not ready for that one thing i want to show you in the default style sheet is that i've included the box model hack for you, and I've included some other kind of handy things that might help you if you're using floats. So we have the box model hack, we have clearfix, and we have clear, and then we have some like just maybe some ways that you can start organizing your CSS. Don't worry about this for now. When we start actually using the template, we start practicing, we'll go over all this stuff. As we get deeper in the layout, we'll talk more about clearfix and all that fun stuff. We talked a little bit about it during office hours, but we're going to see it a lot more next week. So this is a template for you. I recommend just keeping a clean copy on your desktop, right?

That's what I do. I just have a, I have a zip file. I have the template zip file on my desktop and whenever I need to start a new project, I just double click on it and I drag my desktop and we're going to, we're going to, we're going, so I drag it to VS code and we're going to add a few more things to it, like I said, over time, as we get deeper into responsiveness, we'll We'll add some stuff as we get deeper into JavaScript. We'll add some stuff, but it's a good place to start. All right. You had some layouts that were due for homework, right? You had some layouts that were due for homework that I asked you to work on, and there was three of them. And I asked you to use floats. Ah, how dare, right? And so what I wanna do is I wanna talk briefly about floats again, and I want to do the first one together. We're going to talk a little bit about responsiveness, and then we'll end with a raid. So remember what floats. We're here for a good time, not a long time, right? As Drake would say, because we're only going to use them for a little while, right? We're only going to do them for a little while, and we're going to use them to help maybe understand a little bit more about the box model, right?

We're going to use them to help aid our idea of like how things sit next to other things, right? And then we're gonna move on to flex and all the other good stuff that can come. So here we have this idea of floats. When you float an element, it wants to go up as much as it can go and to the left as much as it can go if you're floating it left. And if you float it right, it's gonna go up as much as it can go and to the right as much as it can go, fighting to get into those corners, right? And so the side effect when you float stuff is that it winds up sitting next to each other. All right. So here is the first layout. If we are looking at this layout, we can kind of maybe make some guesses. We don't really have enough content to make the pure semantic decisions that we would need to make, right? The pure semantic decisions that we would need to make, we just don't have enough content to make them. So we're gonna use our best guesses. So if you were kind of just taking your best guess, what might you make this? What could that be? Header, how about this one?

Yep, footer, and then for all three of these, what could you have used? I'm sorry, all five of those, what could you have used? Just a section, right, section. So what I did is I did header, footer, section, section, section, section, section. Cool. All right. Let's use our template and see if we can build this out quickly. All right. So, I know in the body I'm going to have my header. Beautiful. And I know I'm going to have my section. And I know I'm going to have, like, I was going to have five of these. and then I'm going to have my footer. Cool. So I have my header, one, two, three, four, five sections, and a footer.

When I don't have content inside, I like to keep them on the same line, right? Some people still like to always break them, but if I want to, if I don't want to put any content in them, I keep them on the same line. Yeah, cool. All right, so we got the header, we got our sections, we got our footer. If we look at the image, we could make all the sections the same, except for maybe the bottom two, right? So what I'm gonna do is I'm gonna give these bottom two sections a class and they're big and on the bottom. So I'm gonna give these last two, I'm gonna give these last two a class of Big Bottom. There we go. So those two sections have the class Big Bottom. And I don't like using numbers in my class names or anything like that. So I don't like using two sections or something like that because you just run into trouble when you use numbers because what if somebody came along and like put another section here and then this one's called one and this one's called two right it just doesn't make sense so i try to be descriptive of what they are they're big and they're on the bottom so big bottom cool let's go ahead and start writing out our css i have like a place for my layout here and i'm just gonna i'm gonna combine my header and footer into one go, right? Like if we look, the header and footer are exactly the same. So what we're gonna do is we're gonna do our header and then do our comma footer, right? Footer, and let's just go ahead and give it a height of 100 pixels. Let's give them a border of two pixels, solid, black.

And I think that's what we'll do for now. and let's go ahead and open this in the browser and see what we get. Great, so we got our header that's showing up, right? We got our header that's showing up, and we got the footer that's showing up. Cool. We didn't have to set the width because we want them to be the full width anyway. So that's the header and footer, and then let's just go ahead and get those sections done. So section, we know if we look that by default, we probably just want our sections to be like 33% width, and then we'll fix the other two sections with the class. So I'm gonna go ahead and give them a height. I don't know, let's get a little bit more height than the, let's do like 300 pixels of height. Let's give them a width of 33.333% repeating, of course. and then let's give them a border too. Let's do two pixels, solid, black. And I don't have to calculate the border here, why? Why don't I have to calculate the border here?

Yeah, because I have the border box up top, right? I already gave you the bangers here, right? I already gave you the box sizing border box for you and the template, you don't have to remember it anymore. It's just there for you. Looking out for y'all, what can I say? All right, let's go ahead and save this and see where we're at. Beautiful, all of our sections are here, one, two, three, four, five, then the footer. So let's go ahead and get them sitting next to each other. Maybe we can just like float them as well. Cool, now they should be sitting next to each other. and we have a problem. What happened to our footer? What happened to our footer? Yeah, it slid on, it slid on up. It collapsed, right?

Well, it slid up. We had our, we had our, we had our sections here and our footer was nice and good, but as soon as we floated the sections, the footer went zoop and slid up underneath until it hit the header, right? So we need that clear both I see y'all in chat Let's go ahead and put a clear both on our footer. We're also technically putting on the head on the header It just doesn't matter cool Alright looking good. We just need these last two sections the big bottoms to be wider, right? I just need them to be wider. They're 33% right now. We just gotta make them 50% And so let's go ahead and create our class here a big bottom, and let's give it a width of 50%. All right, I think that should do it. Boom, there we go, we got our layout, right? Header, footer, three sections, two bigger sections on the bottom. Maybe if you're looking at it, maybe these are a little bit taller in height, maybe. Maybe these are a little bit shorter. You can play around the specifics here, but we got the layout, right? We got the layout.

Cool. So we got the layout. If you want to see the other two layouts, we're gonna do those during office hours. And we'll also take a look at the simple Leon lab as well. So this office hours will probably be a little less questions and a little bit more code. So if you want to see the other ones come through, chill office hours, we'll chill out, We'll hang it, we'll go through these layouts and then as we have extra time, we'll answer questions as well. I remember the end of those office hours are always VODs here on Twitch. You can always go back and watch them. Cool, all right. I wanna hint at one more thing. And when I say hint, I really do mean a hint. I don't wanna go too deep into it. All next week will be responsiveness. And so I just wanna slightly, slightly kind of just like peek into this realm of responsiveness, okay? And so what we wanna do is I just wanna cover responsiveness just a little bit and then all next week will be responsiveness.

So when I talk about responsive websites, what do I mean? I mean about, I mean that I want our sites to be able to look good across all of our devices. I want them to look good on desktops, tablets, it's mobile phones, right? I don't want them to just be for one screen, right? And so when it comes to building responsive websites, there's things we gotta keep in mind, some things that we have to learn on how to do this. And what do I mean by responsive? Well, we can actually see examples of what fixed websites used to look like and what more modern responsive websites look like. So if we look, here is UPS's website from 2017. 2017 this is from April of 2017. Look at this. Look at all this white space You opened it up This is not this is not me messing it up This is not me like Oh Leon. They had some like no, this is this is what it looked like when you opened it up They just did not care. They like you had all this extra screen. You could do whatever the heck you want with this, right? And they just didn't care right?

So this is what we call a fixed website We're gonna talk through next week like maybe why such a large company still had a fixed site and like why it was this bad But this is the idea of fix. It's not responsive. It won't look good across any of your devices There's a lot of white space on the other hand We have a site that's like really responsive and if we look at it, you can see as I make the window smaller You can see that like we we drop that column that was on the right-hand side, that column disappeared. As we get even smaller, the other column disappears. And we just kind of start focusing on the stuff that matters, right? And so you can see on like a mobile type screen size, it's just like the important news. And as we get bigger, we add more stuff, right? And so the cool thing about Boston.com is that it's a news website, right? It's a news website. So what do you think fundamentally changed about how people consume the news not too long ago? What do you think fundamentally changed about how people consume the news? Yeah, if you're in a metro area, right if you're in a metro area and You want to consume new news, right? You want to consume news? Well, guess what you probably consumed news on your mobile phone. And if this site wants to keep you as a user, if they wanna keep you as somebody that's gonna read their news and see their ads, they need to make their site look good on mobile phone.

They need to make their site look good on tablets so that when people are like peak news reading while they're on their commute, they get to keep that audience, right? And so boston.com used to have a horrible website and then they went really full-bore and on Responsiveness because it really does help them like everybody's on phones right now Like the the mobile revolution changed everything when Steve Jobs walked on that stage and said iPhone it everything changed There was mobile phones before that but that that changed right and a lot of most internet traffic is mobile traffic now so if your site does not look good across these devices then And that's it. Cool. All right. Let me talk about the mechanism that makes this happen and then we'll end for the night and we'll do our raid. The mechanism that enables our sites to be responsive is something called a media query. We can add media queries to our site. And what that's gonna enable us to do is it'll give us the ability to display certain rules, right, certain rules at certain screen sizes. So this rule right here would only exist between zero pixels and 600 pixels wide. And let me, I'm just gonna copy this, I'm gonna show it in our template from the layout we just did. And so here's the layout. And what I'm gonna do is in my, I'm gonna go down here to additional styles, I'm gonna put this media query. And I'm gonna say between zero and, let's say zero and 800 pixels, let's make our sections have a background of blue. All right. We're just hinting at it.

I just wanna show you, right? I just wanna show you the, how this could work, right? So here it is. It's a media query. We're saying between a screen size of zero and 800, these rules should take effect. So this background blue should only happen right should only happen between 0 and 800 pixels. Let's go ahead and save Let's go back to our layout Let's refresh and then let me let me start shrinking this screen size here Boom I hit 800 pixels and boom it changed blue Go above 800 pixels, that rule does not apply. Under 800 pixels, blue. Above 800 pixels, that rule does not apply. And so with these media queries, we can start to add some real magic to our sites. We can start to be able to look at the viewport or the size of the screen and start making changes. When it comes to responsiveness, we're not just talking about style, we're also talking about content decisions. So that's the big goal for next week. The big goal for next week is we know a little bit about layout. We can start to lay out these sites real cool We're gonna start building more sites With better and more feature-rich layouts next week.

We're gonna get some practice in on Sunday with layout So if you want to see the other three layouts that we had for homework come on office hours. We'll do them together We will have our alumni Twitter space tomorrow at 6 p.m. Don't worry I'll share in discord and I'll send out an email too. And then next week we get into responsiveness, making our layouts look good across different devices. You have a lot of reading to do for homework, so please don't ignore the reading for homework. Next week is going to be a little bit more difficult as we get into responsiveness. And so definitely want to be on top of the reading. Uh, we're going to go ahead and do a raid. This person's bio is I'm just building robots and being kind. That sounds like our kind of people. So we're going to go ahead and set them a raid. If you're new around here, raids get you more channel points. You want those sweet, sweet channel points. Do more here on the channel, but hey, hope you had a fun class. Hope you had some fun getting your practice in.

Hope you had some fun playing around with all the new kind of layout stuff and we'll get more practice in on Sunday and then I will see you all tomorrow maybe for the Twitter space and maybe I'll see you next class as well. All right folks, have a wonderful rest of your day, evening, morning, wherever you're coming from. Let's go ahead and read. you

End of Transcript