00:00:00
Good morning, good afternoon, good evening, no matter where you're coming from. Hope you all are doing well. What's going on everybody? Good to see you on a Sunday or a lovely super review. What's going on, everybody? Dang, I missed it. Nah, no worries, no worries. Finally catching a live stream on Sunday. Hey, there you go. Oh, after doing half of the VODs, that's awesome. Welcome, glad you're able to join us live. Took Saturday off back to the grindstone. Hey, glad you're here. Super hype, me too, rascal, me too. What's going on, everybody? How are you doing today, Leon? Do

00:01:00
you feel ready for this? I feel ready for this. Yeah, I feel ready. I'm excited. I always really like these reviews, taking some time to go back to HTML, CSS, JavaScript, to make sure things are maybe clicking a little bit more, making a little bit more sense, and taking our time with it. Today is a day where we can spend time answering questions, digging a little bit, and spending a little bit more time on things than we normally would. And so we're gonna spend a lot of time today going through HTML, then going through CSS, and then going through all of the basic JavaScript that we've covered so far. So if you are new, this is a great kind of class to dip your toes into the water. If you've been here since the beginning, it's a good chance to get that space repetition in, maybe clear up some things that weren't fully making sense. So there's a lot on the table for no matter where you're coming from this experience. So we're gonna talk about that We're gonna talk about kind of all the goodness we can get into. I did

00:02:00
do a check-in today We don't normally do check-ins on on our Sunday sessions But since we're doing a review and there are a lot of folks that might have joined 100 devs late I just want to make sure they see it. So if you want to you can do exclamation point check-in In differences, I've been here since last cohort a turn up That link is also always, of course, in the Follow Along Materials channel, or if you're just following me on Twitter, you'll always see the link as well. There you go. All right, folks. If you haven't already, go ahead and give me a check-in just so that other folks can see that we're doing the review. Now, today is, like I said, review, and it is for both sets of folks, new and returning. The thing I will say is that if you are brand new, Like if this is like your first 100 devs experience, or maybe you've caught some of the VODs, but today's your first day live in class. What you're going to notice is that we're going to go through some stuff fast. We're going to take our time to explain things, but you've

00:03:00
got to realize that we've done up to this point about a dozen classes on this material. And then we had some other classes like like our mini kind of project nights and our networking nights. So there are about a dozen classes that cover the stuff that we're about to cover in this session So don't don't get down on yourself if everything doesn't click today if you're new That just means that maybe keep a list of the things that gave you trouble and you can backfill those through the the VODs That are on YouTube all of our classes always wind up on YouTube. You can always go back and watch them ad free cool. So Wanted to put that out there that hey, you know what give yourself a little bit of grace a little bit of breathing room if things if it's your first time things will click they'll get there as we go on if you've been around for a while use this as a chance to ask a lot of questions i'll be keeping tabs on chat and then we also have our slido like normally you can do exclamation point ask if

00:04:00
you want to throw some questions into that slido but as we go along we'll be answering our questions we'll be taking your time through each of the material and we'll take the day to get through it all. No idea how long this class will go for, no idea. It goes as long as we need it to go. So if folks have questions, we're gonna keep answering questions. If we need to take a little bit longer on the CSS, take a little bit longer on the CSS, that's it. Cool. All righty, let's get into it. Like I said, we're covering HTML fundamentals, CSS fundamentals, JavaScript fundamentals, and then more review. I would like to start off with questions. And the question of the day is, what do you want to review the most? Do you want to review HTML, CSS, or JavaScript the most? Let

00:05:00
me see, you put CSS, HTML, or JavaScript. Okay. Team CSS is the winner here. Well, a lot of JavaScript too. Everything. All right, CSS and JavaScript it is then. Cool. All right, we'll focus on, we'll get through our HTML a little bit faster. We'll slow down at the CSS and we'll go deep in the JavaScript today. Thank you, thank you, thank you. All right, we have some other questions here too. I like to use the Slido. I like to use the Slido early on. Let's just give folks a few seconds to get in here and let me answer some of these top questions in Slido before we jump into our review today. All right, for the socially awkward among us, what advice do you have for those of us who are getting through the homework fine, except for the

00:06:00
networking part? So if you all are following along with 100 Devs, you'll realize that this is not really a coding program, it's a jobs program. And so we put heavy emphasis on networking, working with others and building projects that help us get a job, right? And so that networking piece is often the hardest part of this experience. For some folks, it's not the coding part that's the hardest. It's the actual networking, meeting folks, and then locking down referrals to jobs. One of the most common things, especially if you're new, is that you'll see folks that say, I applied to 200, 300 jobs, and I didn't even get an interview. Well, that's because they applied wrong. We never ever click apply. We network our way into jobs. We make sure our resume is in the hands of a living, breathing human being. And we spend the entire time we're learning also networking. So when we are ready to apply, we have dozens if not hundreds of people we can go back to and say,

00:07:00
hey, I noticed you have an opening at your job. Can you get me in touch with the person that's actually hiring? That strategy is leaps and bounds more practical and more useful than you will ever get out of grinding leet code, that you'll ever get out of even grinding projects, which is what, or even just applying. So that networking piece is super important. Now, I think when a lot of people think about networking and we first talk about it, they have this idea that they have to be like at meetups talking to people. No, you have to find what's comfortable for you. and that's different for every single person. Some folks will never go to a meetup, but they will have a better network by the end than folks that are always going to in-person events or things like that, because you can network just as effectively via text. You can be in Slack channels,

00:08:00
Discords, IRC communities. You can be on Twitter. You can be in these places that don't require you to be on the spot, on demand, maybe a little bit more asynchronous to where you don't feel the pressure of having to respond in the moment, there are plenty of places to build connections that don't have to be just like face-to-face, right? And so there's a lot of things that you can do, but you have to find what works for you. And so when folks tell me that they're having trouble networking, yeah, I think there's a lot of things that can come up there. Um, but one of the things I really try to push folks is to, to not just try one way to try a bunch of different ways and maybe half of them are just absolutely horrible experiences. You never want to do them again, but maybe you find that one thing that really does work for you. So trying different avenues in our networking class, we talked about a lot of different places to find people. Go back to that class, make sure you try all those. And then the other thing that can be really helpful is a buddy system, right? If you know that you're having

00:09:00
some trouble, grab a buddy, right? somebody from the 100 devs community. Maybe you're in a specific study community or maybe you just posted in one of the 100 devs channels on Discord and just say, or maybe we'll create a thread for this later. But if you're having trouble networking, it's way easier with a buddy where you both kind of agreed that you're going to help carry conversation, right? They were both gonna help carry conversation and that can be a little bit less stressful and a little bit more easy to kind of meet a new person. and then you both kind of get a connection at a time. And so I don't recommend bigger groups, but pairs can be often very, very helpful. So buddy up and then try many, many different ways to network. It doesn't have to be like face-to-face or on Zoom or anything like that. It can be text-based as well. Cool. I remember the point of this is to find folks that are already in tech. So things like Omegle, somebody asked. It could maybe be fun,

00:10:00
but it'd be hard to find folks that are already in tech already engineers is what you're really aiming for Yeah, well How long after this cohort is finished will discord channel still be available it ain't ever going away What are you talking about? That's here to stay Yeah discord will always be available Can we go over M, et cetera, and CSS? Yeah, we're gonna get to that stuff today. No worries. All right, let's do two more of these. Let's do two more of these, and then we'll jump into starting our review. Just wanted to give folks a few seconds to get in here. Yeah. Will this session be on YouTube later? I'm not sure. I'm not sure. The VODs are always available on Twitch. So the VOD will be here for at least 60 days on Twitch But I don't know. I kind of like giving folks the incentive to show

00:11:00
up on Sundays Also, we spend more time we spend more time talking and giving like answers to stuff so we'll see We'll see and so many people we have at the end Oh, how many people we got here now? Let's see. Oh, here we go. Boom. All right. We're at almost 2000 right now. We're still at 1500 100 at the end, I'll put it on YouTube. Alrighty, what went into the 50K client? I can't even wrap my mind around what happened, what kind of timeline and deliverables they had. All right,

00:12:00
so that 50K client was for a conference and so they built an app for the conference. So it was a full stack web application and it wound up being 70K. I don't know if Naya is here right now, but yeah, they shared that with us. So yeah, it wasn't like something that was quick. It took a while to build. It was a full stack web application for a conference. All right, one more and we're gonna get into it. Well, actually two. Can you go over the CSS layout trick with Flexbox? Yeah, we're gonna go over Flexbox today. So we're gonna do three simple layouts And then we're gonna do three simple layouts with flexbox Just to kind of show that the two different ways of doing things So we'll see a little bit of flexbox today, and we'll see a little bit of layout with floats today, too And last one before we kind of jump into things today folks, why are we supposed to be labeling ourselves?

00:13:00
Hey Stephanie, thank you for the thousand bits. I appreciate that Thanks for being here Why are we supposed to be labeling ourselves full stack engineers? We don't know any back end right now because it takes a while for your profiles to simmer, right? It takes a while for you to start ranking in Google and for all your profiles to kind of boil up to the top, right? And so if you want your stuff to be picked up by recruiters, by bots, things like that, You can't just the day you learned node put full stack and then expect it to be kind of picked up by all the filters So we do it now so that your profiles can simmer and by the time you're actually interviewing You have kind of you've kind of been around long enough that stuff to get picked up Yeah The other thing too is that like you're not actually interviewing yet So it doesn't matter what you call yourself because you're not running into anyone that like it would be

00:14:00
a problem, right? So give your profiles a chance to simmer and then in a month or so when we're at the back end You'll be ready to go When we start looking for jobs once we get through the back end Yeah, once we get through back end is when we start focusing on that Cool Alrighty folks. Let's get into it A lot of fun stuff to get in today, but we're going to start off at the beginning. Cool So if you're new around these parts, or if you've been around these parts, we have a few kind of really important things that we did at the beginning. And one of the most important things we did at the beginning is we went through a Coursera course called Learning How to Learn by Dr. Barbara Oakley. And so this course kind of lays the foundations for how people learn. And so if If you are trying to learn how to code, if you're trying to learn HTML, CSS, and JavaScript,

00:15:00
you owe it to yourself to develop effective study habits. Guaranteed, most of us do not have effective study habits. Most of us have gone through traditional schooling without good habits, and it was maybe some of the reasons why certain subjects didn't come easy or certain subjects were very difficult for you. And so starting off and laying your foundation with learning how to learn, right, will help you set up the rest of your time learning how to code. Do not sink hundreds of hours in trying to learn how to code, thousands of hours in trying to learn how to code, but not actually having good study habits. You'll just be beating your head against the desk over and over again. You'll be taking up more and more time than you need. And so just make sure that you're putting time into that before you put time into anything else. D is A, thank you for the thousand bits. I appreciate you, thanks for being here, right? So one

00:16:00
of the very key things that we also did in the beginning was we watched two videos by Ali Abdaal. And one of those videos was active recall, right? And then something called spaced repetition. If you listen to nothing else today, Like if you just go off on the rest of your rest of your life without ever coming back to 100 devs This is the thing that I want seared into your brain Uh this idea of active recall all active recall is after you learn something You recall the things you just learned typically like out loud to yourself so you could read a chapter of a book And then once you're done reading that chapter of the book, you say out loud all the things that you learned. And the reason this is so important is just that simple act of retrieval is better than repetition of that material

00:17:00
four times. So if we looked at this right here, on this little sheet we have here, One second, let me pull up my demo pro. There we go. So here we have in one session, repeated study. In one session is important, we're gonna cover that in a second. And then retrieval. And so what you're seeing here is, this was a study where they gave a group of students, I believe it was like a chapter of a biology textbook. They had to read the chapter, and then a week later they had a test on it, right? And so the first one here is just where they read the chapter once and then a week later they did this they did the test here they re-read the chapter four times in one sitting like they just sat there read it re-read it re-read it re-read it and then here they read it once and then said out loud to themselves what they just learned right like they they recalled what they just learned and what you'll notice

00:18:00
is the students did better with reading and recalling once than they did by rereading four freaking times. So could you imagine doing a quarter of the work and getting better results? That's when we talk about like learning how to learn and learning the real mechanisms behind how your brain works, how it stores information, how it learns new material, you can literally be doing a quarter of the work and getting better results if you're active recalling. So for those that are going through the reading this week, I hope you've been doing your active recall. There's a lot of meaty topics in the, in that, in that reading this week, a lot of like honestly painful reading to get through. And if you're not stopping and doing your recall, you're setting yourself up to not learn as effectively as you can.

00:19:00
For me, I recall sometimes every couple of paragraphs. For me, if I kind of go more than two pages without recalling, I kind of teleport to fantasy land. I'll get to the end of the chapter and be like, what just happened to me, right? So for me, I actively recall very frequently, Maybe every couple paragraphs or so and then I recall at the end of the chapter as well Whenever a senior engineer tells me anything at work. I always I always okay. Let me Recap and I repeat everything back to them. It's been working really well. Hell yeah, Deb It's a really good tool even on the job already Next as you're putting in the time to learning all of these concepts, guess what? You're going to forget them. You are trying to

00:20:00
cram in hundreds of hours of learning. There's no way that's gonna stay in your brain without utilizing some very important tools. This was a study of one. It's been somewhat replicated in other studies, but it was just a person that tried to remember three three letter combinations and they would give themselves a three letter combination and then they would ask themselves to kind of recall that three letter combination 20 minutes later and there was like a 40 chance that they forgot that three letter combination just 20 minutes later and by the end of 31 days there was almost an 80% chance they have forgotten that three letter combination. Just three letters, not all of HTML, not all of CSS, not all of JavaScript, just three letters. And so if you, right,

00:21:00
if you are putting in all this time to learn, knowing that your brain is going to forget about 80% after 30 days, that is a fool's errand. You are setting yourself up to fail. So there is a beautiful way to flatten this forgetting curve and it is probably hands down the most important thing you will do on your learning journey and that is resetting your forgetting curve. We can space out some repetition, meaning that we'll cover a topic and then a day later you can cover the topic again, a day later you can cover the topic again, and so on and so forth. And what happens when you review this material, when you review this material multiple times, your forgetting curve starts to get shallower and shallower. what used to be you would forget it in 30 days becomes 60, becomes 90,

00:22:00
becomes 120, becomes almost you'll never forget it ever again. And so we're able to reset our forgetting curve by using a very important tool called Anki. Anki is flashcards with an algorithm behind them, A-N-K-I. And what it does is you can put the things you're learning into Anki and you can review them. and this algorithm will show you the material when you need it most, right? So if you've been kind of acing HTML every single day, you'll start to see that it'll start showing you the HTML further and further along. So meaning that you'll go from seeing that HTML topic every day to maybe once a week, to maybe once a month, to maybe once a year. And so this idea is that you want to be putting Everything you're learning into a tool like Anki so that you never forget stuff Don't put everything Don't put all this time

00:23:00
into learning and then not use Anki Yep, and Anki is completely free. You do not have to pay for it. It's free on Android. It's free on Windows Mac OS etc. The only thing that the only place you have to pay for Anki is on iOS But you don't even need to do that. You can just use the web browser and view your cards on Anki web if you're on iOS. So yeah, everything you learn goes into Anki. All the things that you wanna remember, all the things that you think you need to recall go into Anki. If you are trying to learn how to code and you are not using active recall and spaced repetition, you are doing, you're putting, you're making so much more work for yourself and you're going to get frustrated way more often. I can't tell you the difference between folks that use Anki and that don't. One of the very first things that I always ask my students is when they say, Leon, things aren't

00:24:00
clicking for me, things aren't making sense. My first thing I always say to them, the very first thing I say to every single student that says, Leon, things aren't clicking, things aren't making sense, is show me your Anki. That's it. That's the first thing I ask. Because if I can see that you're doing review every day, if I can see that you're putting good stuff into your Anki deck, right, then we got some other problems to solve. But nine times out of 10, when a student says, Leon, I'm lost, things aren't clicking, things aren't making sense, they're not doing Anki, they're definitely not doing it every day, and they're not taking it seriously. So if you've been having trouble with JavaScript, you've been having trouble with CSS, that you've been having trouble with HTML. Anki, Anki, Anki, Anki, Anki. And there's no way, like people kind of get stressed out about how to use Anki. There's no wrong way to use Anki. Make cards, put stuff

00:25:00
in there. And if it's easy stuff, you'll remember it faster. If it's hard stuff, it'll take a little bit longer. but there's really no right or wrong way to do Anki. The only real change I make to Anki, the only real change I make to Anki, I have no idea where my iTunes popped up. The only real change I make to Anki is that I do a study session, I do a study session of 100 cards. That's it, for me that's like the only change I've ever made in Anki is I do a study. I do I do a study deck of a hundred. That's it That way I'm just reviewing more cards each day, but nothing else special Just get in there get in the muck and do it. If you need help with it watch a YouTube video There's plenty of YouTube videos on how to set up Anki. There's nothing special to it The things that I learn or I read I throw into Anki and then I recall them the stuff that's too easy I will ever see it again. Like I showed you some of my cards It

00:26:00
says like I'll see that card in five years from now the stuff that's harder You see a little bit more frequently. No wrong way to do it Hundred new a day. Yeah when I'm grinding I do a hundred new but nowadays I don't really have as many new cards as I have review Cool My goals have a five-year Anki card it happens quicker than you would think especially if you kind of like get it right all the time. What are you anking today? My Anki is mainly like courses that I do. So I've been working through a lot of MIT's open courseware stuff. They have a lot of really great stuff on Python, advanced algorithms, data structures, math. My big thing right now is trying to get better at math. There's some bigger

00:27:00
type of projects I want to work on and my math abilities is just not where I want it to be. And so a lot of my Anki-ing is around math and going through a lot of MIT's OpenCourseWare stuff related to math and math for programming, programmers. Yeah. Cool. I use Anki for learning Japanese. Yeah, that's kind of like the original use case for it was to learn languages. Well Now the reason why we do this space repetition why we throw everything into Anki is because here's what happens when you do space repetition Here's if you just study something once That's how likely you are to be able to remember something later on look at that Look how pitiful that is if you just went through a reading like like we had to read The eloquent JavaScript and I need to hear like all right. You had to read eloquent JavaScript No, God, please, no,

00:28:00
no, no, no. Right, so you had to read eloquent JavaScript, right? And if you just read that like paragraph once, that's it. Like this is how likely you are to like remember the things that you read. Look how small that is, right? That's how likely you are to remember the stuff that you've read in that book. However, if you were just to recall once to like read it and then say out loud the things that you just read, look how, look how much more you're able to actually recall stuff, right? You went from like, what, like below 5%, almost like 25, 30% just from out there from reading out loud once, right? That's recall once it's not recall a thousand times. It's recall once look at that jump Oh, I guess I just want to like I'm gonna grab

00:29:00
all of you by the shoulders and shake you and say like look at that jump From reading to reading and recalling once like look look at it. Just look at it, right? Recalling once gives you that much more of an impactful learning than if you just read it. Like it just doesn't make sense to not actively recall. Look at a 20% jump you're getting in remembering stuff. What would you do to be able to remember 20% more stuff? Like people would pay, people would take, if I could give you a pill that would make you remember 20% more, you would take that pill all day long. This is the pill, folks. You recall once and look at that jump, right? Look at that jump. It's huge. Now, something that a lot of people do is they'll sit there and they'll reread, right? They'll reread in one session. So they'll read the chapter and then they'll read it again. That repeated study in one session doesn't work,

00:30:00
right? So if you were to like reread that chapter four times, look, it's worse. Like rereading is worse than reading once and then recalling. Like, how is this not on the front page of every textbook that reading once and recalling is better than rereading multiple times? It's criminal that it's not on the front page of every textbook. And then where it gets really wild, where it gets really loopy, is if we look at the repeated repetition that's spaced, meaning we're using a tool like Anki to see it when we need to see it. Look at that jump folks. We went from reading it once and never recalling it to almost an 80% Chance of recalling just through a little bit of spaced repetition. These are cheat codes These are cheat codes to your learning if you are not using them. Why?

00:31:00
Look at the differences folks. Look at the differences. It makes no sense to go through this experience and not actively recall and not space your repetition. You're not doing those two things, you're just wasting your time. Cool. Now, all of this, and the reason why we have 100 devs, is to help folks get jobs. Right now, there is a window open. I have no idea how long this window will be open for but right now there's a window open where you can get a high-paying job that is one of the happiest careers. You don't need a degree and you can learn it for free. Let me say it one more time. High paying job,

00:32:00
one of the happiest careers. You don't need a degree and you can learn it for free. I have no idea how long this window's gonna be open for. I want each and every single one of you to experience what it's like to be a software engineer, to command a good salary with high growth. There are a lot of jobs out there you can get to have decent salaries. But software engineering is a high growth career. The more money you put into it, sorry, the more time you put into it, the more money you can make. One of my favorite things seeing in the celebrations channel was I got a 15K raise, I didn't ask for it. What? What? I got a 15K raise, I didn't ask for it. I got a $5,000 raise. I didn't ask for it. Like, if you've just been in the celebrations channel these past couple of weeks, you've

00:33:00
seen a bunch of messages along that same vein. 15K more, 5K more, didn't even ask for the raise, they just got it. So when I say high growth, that's what I'm talking about, right? It's a good paying job. It's a happy career. You don't need a degree. You can learn it for free. And the growth is there. The more time you put into it, the more you learn, the more you do, the more that that career will grow with you. And so, one of the things I ask all my students is what do you want? Do you want a good paying job with high growth? Do you want a happy career? Right? Do you want something that can give you the freedom to do the things that you want to do? And if you want it, go out and get it. We're laying a path, right? We're laying a path that I have seen help hundreds

00:34:00
of folks get jobs. This is what I do. Been doing this for the past 10 years, teaching people how to code. And for the past five years, I've laser focused on helping folks get jobs. I'm gonna lay down a path that has helped a lot of folks a Lot of folks get jobs. You look at our last cohort. You don't have to take my word for this You can go into our celebrations channel and see all the jobs folks got from following this path right, but As always to follow this path takes a certain amount of privilege. You have to have the privilege of time. You have to have the privilege of being able to learn, right? So I don't want you to think that everyone can do this. I believe everyone can learn how to code. It's one of those things that like, what's the thing that you'll, what's the hill you're willing to die on? The hill I'm willing to die on is I think anyone barring developmental delays can learn

00:35:00
how to code. but it might not be your time to learn how to code. But if it is your time, if you have the privilege to learn, if you have the privilege to invest this time, don't waste it. And then the other really big thing that we like to say around here is that it's a marathon, not a sprint. Some of you are gonna hit classes to a T, right? Some of you are gonna be like, yep, like the classes were absolutely paced perfectly. Some of you are gonna go faster than the classes and some of you are gonna go slower than the classes. One of the beautiful things is that we have the catch up crew here at 100 devs where if you're behind or if you're joining late, or if you just wanna go at your own pace, right? If you just wanna go at your own pace, you have a group of people that are doing something similar. It's a marathon, not a sprint. things don't have to come perfectly as classes going along. You can take

00:36:00
your time, whether it happens in 300 days or 200 days, who cares? This is for the rest of your life, right? You're setting yourself up for a career that'll last the rest of your life, hopefully. And so if it takes 150 days versus 300 days, who cares? Go at your pace, make sure you're learning, make sure you're investing in yourself with active recall, with spaced repetition, and you will get there. I promise, I really do. You put in the work, you ask lots of questions, you do the things we say, the active recall, the spaced repetition, you will get there. I have seen hundreds of folks from all walks of life, from every challenge you can possibly imagine get there if they do the things that we lay out. Now, the last thing I'll say before we move into our review is this path might not be the path for you. That's okay. There are many, many amazing resources out there. Free code camp, the Odin project. There are other bootcamps

00:37:00
that you could join, right? Like you're like my, like you might not like my face, right? You might not like the way that I teach. That's okay. Don't let that stop you from an amazing opportunity when there are so many other free, amazing resources out there, right? There's a window open where you can get paid well, have a happy career. You can learn it for free. You don't have to pay a dime. You don't need a certification. You don't need a degree and you can learn it for free. Thank you. Thank you. Everybody loves my face. It's okay. Alrighty, so if it sounds exciting to you, if this idea of a high-paid happy career where you can learn it for free, you don't need a degree, buckle in. We're gonna review our HTML, CSS, and our JavaScript today. We're gonna answer as many questions

00:38:00
as we can and we're gonna take our time. We're gonna go through it. Remember, this is something we've done over 12, 13, 14 classes, so if there's any topic that we go over a little too fast, you need more time on it, you can always is go back to that class on YouTube. You do exclamation point YouTube always here in chat or at leonnoel.com slash YouTube will take you there as well. Couple of big topics left. We're cramming all of our motivational learnings into the beginning of this class. I know that we're spending a little bit of time on this, but I think it's really important, especially for folks that are new to hear all of the big things we've talked about. So give me, give me like another three or four minutes. We're going to jump into the actual code. A lot of folks, when they first start

00:39:00
trying to learn how to code, they get down on themselves. They feel like they'll never be able to learn it. They'll feel like they'll never be able to actually get a job. They'll feel like they That they just don't have it in them and they'll start to let all these insecurities like all these Doubts all these things creep into their brain telling them that they can't do it and It happens to pretty much every student I've ever taught and there's really two different types of people the folks that let that stuff get to them and the folks that push on knowing that they will eventually get there. And one of my former students and now expert in residence really talked about this one concept that's always stuck with me. And they equated learning how to code to a baby learning how to walk. Babies don't sit

00:40:00
there having an existential crisis about learning how to walk. They see other folks walking around them and go, you know what? I'm gonna learn how to walk, too For some reason when we get into coding People look around and they see all these cool projects They see all these people slinging some good JavaScript and instead of saying I'll get there, too They start to say to themselves. I'll never get there Babies don't do this Babies look around, see people walking, and that's encouraging, that's motivational, and they eventually learn how to walk. That's the mindset you need going into learning how to code. You can't compare yourselves to others. You can't look around and start to feel bad. You have to look around and go, holy shit, that's really cool, I'm gonna get there too. So learning the code is half really

00:41:00
hard work and half believing you can do it. As soon as you believe you can do it, the life changes. You'll be able to study more effectively, you'll be able to put more hours in, and so you just have to make a decision. Am I going to get there or not? And that's one thing I can't do for you. I can't make that switch flip in your head other than to tell you, I have seen every type of student possible folks with ADHD dyslexia folks that are returning citizens parents Every walk of life that I can think of Some of them didn't make it some did the ones that always did were ones that said, you know what I can do this I will get there. Eventually. I'll go at my own pace and I will get there. I won't give up they didn't give up and they all got there hundreds and hundreds and hundreds of them that told themselves

00:42:00
I can do this I will get there I don't care how well you did in school I don't care if you have a degree it's all nonsense it comes down to hard work and the belief that you can do it you can do it we'll stop This also leans into this idea of imposter syndrome, where a lot of us, this idea of I can do it is a harder battle than for others. Some of us have this idea of imposter syndrome where no matter how good we do or what we do do, it's not good enough. And that's one of the primary things that happens to not only new developers, but even developers have been doing this for a really long time. It's one of the things I struggle with the most. I've coded some amazing products. I've worked with some amazing teams I've taught at Harvard. I've taught at MIT

00:43:00
I I've I I think I have a pretty good Rolodex that proves my Engineering muscle, but still there's something in the back of my brain that tells me I can't code and I don't really know what I'm doing I don't know where that comes from. All I know is that you have to squash it You can't let that monster be the thing that drives your learning journey. We did the David Goggins quote where sometimes you have to open up that closet, yell at the monster, and say what's up. That's what I have to do with my imposter syndrome. And it's what a lot of my students have to do as well. Knowing that it's a thing and then working to get over it or to work around it. So for some of you, this imposter syndrome will never go away, so if it's never going to go away and you still want to be an engineer, we got to come up with strategies to work around it. And the strategy is knowing that you're building great things, that you're on your own learning journey, that

00:44:00
you're doing things right, you're doing your active recall, you're doing your space repetition, you're getting your reading in, you're showing up for class. If you're doing those things, you are doing what you need to be doing and you'll get there in time imposter syndrome or not. Cool. The last thing that makes learning how to code super, super difficult is not even the belief. It's not even the imposter syndrome. It's this idea of the trough of sorrow. Most folks come. They want to learn how to code. They're like high-paying job Leon. I saw so many folks get six-figure offers last cohort I saw so many folks get jobs where they can work from home. I saw so many folks change their frickin lives Right. I want that and so they come to us having gone up you Demi Hill where they bought all these courses As buying

00:45:00
courses feels good. Oh, it feels so good buying courses feels like you're doing stuff even though you're not, right? And then you're at the very, very top of Udemy Hill. And then eventually you say to yourself, I'm gonna actually start learning. I'm gonna actually start trying to build projects. And quickly, the wearing off of novelty happens and you plummet into the trough of sorrow. And then you're in this trough of sorrow for months. Months where you can't see the end. Months where you're wading through the muck. and this is what stops people from learning how to code. Once they get into the trough, the imposter syndrome creeps in, that feelings of they can't do it creeps in, and know this is the process that has battle-hardened every engineer that has come before you. I don't care how intelligent or smart you think you are, you're still going through the trough of sorrow. It's

00:46:00
a lot to learn. There's a lot of things to remember. There's a lot of things to learn how to do. You will get through it. And there are a few ways that my students get through the trough of sorrow. And it's really only these three things that I've ever seen across thousands of people that I've taught to learn how to code and hundreds of folks I've helped get great jobs. The three things that my students do well is they know how to manage their frustration, they know how to be consistent, and they know how to take care of themselves. So what the heck do I mean? For adult learners, life is somewhat in our control. We can say when we wanna go to bed, when we wanna wake up, maybe what we wanna eat, what we wanna do, right? We kinda have control over our days. Children really don't have that control, and so it's

00:47:00
easier for them to learn and not get as frustrated. There was a study where individuals looked at when adults learn, sorry, lose the ability to become fluent in languages, and what they found is that they didn't really ever lose the ability. It does somewhat diminish as you get older, but they didn't really lose it. What they realized is that as adults got older, they just lost the ability to manage their frustration When it came time to learn a new language, they didn't make time for it. They got frustrated and they never actually learned it. So the biggest thing that's gonna stop you from learning how to code is not being able to cope with your frustration. There are gonna be weeks where nothing makes sense. Let me say it one more time. There will be weeks where things don't make sense, where you're trudging through the trough of sorrow and it just doesn't, nothing's clicking. It doesn't make sense. You're doing your recall. You're doing all the things you're supposed to do and it just it just won't make sense. I've I'm in that I've done that before like

00:48:00
I've as I'm learning new things There will be weeks where I'm I'm trying I'm grasping on anything and grasp on. I'm on I'm on discords. I'm on YouTube I'm on I'm reading blog posts I'm on stack overflow and it'll just be a week or two that goes by where I just nothing makes sense. I Don't give up because I know that eventually it'll click I have a belief in myself and I can manage my frustration long enough To get to the point where it does click Most folks give up because they can't manage their frustration and they don't want to give themselves that time Give yourself the time the marathon not a sprint The other thing is that people when they're learning and most often are not consistent. And one of the worst things you can do is chunk your learning onto like a Saturday, right? A lot of my students go, Leon, I'm not gonna study during the week, but I'll study 10 hours on Saturday. BS,

00:49:00
you're not gonna study 10 hours on Saturday. You might do it once, and then next week comes and you got a baby shower, the week after, I don't know, grandma needs some new flowers, right? and so what happens when you're not consistent daily is eventually life gets in the way right eventually life gets in the way and so if you want to learn how to code you have to be consistent every day we know why consistency works we just saw the charts on spaced repetition if you're studying every day you're building in that repetition so it just works right so being consistent every day gives you that repetition but also make sure that you are getting that time in and that if you do have an off day or two you're not really super behind so for most folks you're looking at an hour to a day trying to find that hour to

00:50:00
a day is really hard for a lot of folks but if you can you can be consistent then that could be the game changer for you. If I'm a couple of weeks behind on JavaScript, is it too late for me to catch up? Nope. You have the catch up crew that you can join and always complete stuff at your own pace. We're also gonna go through a lot of stuff today. Yeah, that's the point of today's class. This class is for you. To get you caught up, to see all the topics that we've covered so far, and then to be able to kind of know where you gotta go and fill in the gaps. Alright, so you manage your frustration you're able to be consistent. The last thing is you got to take care of yourself You're talking about months of really hard mental work You have to be taking your breaks at the top of the hour. You have to be stretching you have to be Making sure that you can go the distance to get through the trough of sorrow so many folks will start to learn Right.

00:51:00
They'll start to learn a burnout they burn out and once you burn out it's really hard to recover and so the way you stop yourself from burning out is by giving yourself breaks having manageable sessions right having manageable sessions making sure that you are letting your eyes focus on something it's not your screen you're doing the exercises we posted in discord we used dr. Levi the fitness doctors hand exercises, you're going for walks to move around, let your back decompress, right? You got, you got to do all these things to take care of yourself, get good sleep, eat well, right? All of these things will help you when it comes to your learning journey. You can't just sit there for eight hour blocks of time with no breaks and expect to go the distance and learn how to code. It won't happen. Manage your frustration, be consistent and

00:52:00
take care of yourself. physically but also mentally right also mentally right make sure that you are giving yourself grace throughout this entire process understanding there are weeks where stuff will make sense and weeks where there won't making sure that you're being a you're being a baby and and not looking around and comparing yourself to others and saying i can't do this i won't ever learn how to walk. That's bullshit. You will don't use that as an excuse. Cool. And finally. Do it. Just do it. So just do it. Make your dreams come true. Just do it. no wiser words have ever been spoken

00:53:00
just do it a lot of hard work a lot of managing your time a lot of managing your frustrations a lot of being consistent but folks that do it you can reach a dream that I think a lot of folks have a good stable high-paying career with in-demand skills that no one could ever take from you the ability to freelance to put more food on the table whenever you need it. These are super powers that I want for every single person. And so just do it. Don't ever let anyone get in your way. Don't let me get in the way of you learning. Don't let anyone else get in the way of your learning, but do it. And the beautiful thing is you can do it with an amazing community. The most beautiful thing about a hundred devs is that we have folks that are willing to help. You go on discord, you ask your questions, your question's gonna get answered in our help channels. You come to our networking nights, you're gonna meet some amazing

00:54:00
folks, you come to our project nights, you're gonna work with some amazing folks. And so I think a lot of folks, one of the reasons why they don't make it through and they can't just do it is because they're doing it by themselves. Don't learn to code by yourself, join an amazing community of folks that wanna see you be successful, that are going through the trough of sorrow at the same time and that's 100Devs. So if you ever wanna join our community, Discord is where we hang out your exclamation point discord here in chat early on the world comm slash discord OCC, thank you for the bits. Appreciate you. All right You owe you last thing I'll say don't go through today and then not build some Anki cards you owe you Famous words. Dr. Thomas you owe you right? And in that video dr. Thomas video They said if you went to Best Buy you bought something you brought it home and it didn't work. It was broken It didn't do the things that it said it would do you be back at Best Buy demanding

00:55:00
a refund Hold yourself to that same bar Right hold yourself to that same bar. If you're not doing your Anki, you're not doing your active recall You're not putting in your consistent time each day. You got to have a refund on conversation with yourself. You owe you. Alrighty. We're gonna jump into what is the internet and then dive into some HTML and dive into some CSS and then finish up with some JavaScript. But we're at the top of the hour. So we're gonna be healthy. We're gonna take our break. All right, we're gonna take our break. I know we spent the first hour doing all of these kind of Laying the groundwork, but I think it's really important for folks They're joining us new that they understand active recall space repetition. They understand what type of journey they're about to go on And so hope you see some value and making sure the new folks with us get that as well So let's go ahead and take our five minute break

00:56:00
and then we're gonna start jumping back into what is the internet going through HTML? We're locking and loading for a full day folks. We're gonna be here for a while So let's put that timer up there. Make sure you're staying hydrated But five minutes on the clock All right, I've had it we back in five Truly say hey, thank you for the for the three most your three. Thank you Take your break. I want to run ads that you actually take a break

01:00:00
I got six ads. You should have been taking a break. You should have got no ads. Should be taking a break. Okay. All right. One second, I need to set something up. BRB.

01:01:00
Just start putting together a schedule for myself can't keep going like this an hour study on the weekdays more on the weekends Yeah, just make sure you don't burn out on the weekends, though Oh, yeah being consistent awesome All right folks come on back come on back And then I got accepted into an apprenticeship program do you believe it'd be difficult to do both probably Probably pretty intense to do both Good thing is that we'll always be here. All right, folks, come on back.

01:02:00
All righty, so let's just take a quick look at some of these, some of these kind of quick questions in the Slido, And we're gonna jump into how the internet works. I Just want to do like three probably when we come back from each break Having problems with the navigation bar by fully using float only Can you show us how to do that like the BBC navigation bar and believe we did the BBC navigation bar in class But when we get to floats, I'm happy to show a navigation bar Just remind me all we do is we float everything to the left and you got to make sure that it has With right make sure it has with that's all you got to do Why Who should I reach out? To at a company I

01:03:00
like to work at someone doing the job that I like to do or someone higher senior even a director So the question is like you you see a company want to work at who do you reach out to? You want to reach out to as many folks as you can at that company whether they're managers recruiters Engineers because you're going to send out 10 different requests only one of them is probably going to get back to you Yeah, so you want to make sure that you you reach out to as many folks as you can When we get later in the program We're gonna do a hit list process Where we kind of find the companies want to work at we find the best people to talk to each of those companies I'll do a list live so you can actually see who I'm reaching out to I always typically start with recruiters and folks on the engineering team and then work my way out from that I just want to say thank you. No worries. Y'all put in the work, not me.

01:04:00
How do you keep the conversation going in a coffee chat without awkward silence, without asking a lot of questions and making it like an interview? Some coffee chats flow, some don't. Right. And so the full and so the coffee chats that don't flow, don't worry, don't be worried to ask questions, right? Have your list of questions ready to go. If you want to, right. You can, you can have your, like, we, we shared like a list of like five to 10 questions. If you get through the five to 10 questions and it's still not jiving. Say, Hey, I really appreciate you. Thank you so much for your time. I really get a chance to know you a little bit and I hope you have a great rest of your day and then cut it short. You don't have to become best friends with everyone, right? That's why we do so many, because so many of them will be duds, but then some of them will be amazing. But remember, we asked you to read How to Win Friends and Influence People. If you're having a hard time

01:05:00
carrying conversations, definitely read that book. That book gives you the cheat codes to kind of like talking with other humans. And the biggest thing you can do is get them to talk about themselves. So I asked tons of leading questions, let them talk about themselves for a half hour. If half hour, if the conversation is not flowing, called How to Win Friends and Influence People by Dale Carnegie. Yep. Cool. Alrighty, let's talk about the internet folks. So chat, what's the internet? You all here to become software engineers, specifically software engineers that focus on full stack web development. What the heck's the web? Ooh. Yeah, it is a wire. Nice. Uh, or a series of wires. And so let's start off with a wire and

01:06:00
on this wire, we're going to see two kinds of devices. We're going to see client-side devices and we're going to see server-side devices. All right we're going to see client-side devices and server-side devices. Now client-side devices are the devices that we use to consume the internet. So whatever you're watching me on right now, that's a client side device, right? Whether it's a mobile phone, whether it's a tablet, desktop, whatever you use to consume the internet is a client side device. Now, out there on this other side of the wire are servers, which are computers that do a very specific thing for us. What do you think a server does?

01:07:00
A server is just another computer out there on that wire, but what do you think a server does? When a website goes down, that means that the server is having issues, most likely. Yeah. A lot of times I go like a stack overflow, I think went down the other day. Right. And so a lot of times when, when you're not getting, you're trying to go to a website, you're not getting data back. One of the big issues is that the server might not be on or running or something might have happened on it. So it can't serve up the stuff that you need. Right. So when you go to a website, right? Let's pretend it was Netflix, right? We'll go to netflix.com. We hit enter and nothing happens, right? Maybe nothing's happened. We're not getting any information back. That might mean there might be some trouble with Netflix's server. It's a computer that's out there on that wire that's trying to send you information, but for some reason it can't right now.

01:08:00
Now, we have those client side devices. the mobile phones, the tablets, the desktops, the things we use to consume the internet. And running on these devices is typically a bunch of programs. So running on our client-side devices, we typically have something called a browser, right? And that browser enables us to open certain kinds of content. All right, if you were on your client side device, if you were on your laptop, your desktop, right? And I asked you to open a Word document, what program would you use? I should open a Word document, what program would you use? Yeah, you use Microsoft Word to open that Word document. If I asked you to open a PDF,

01:09:00
what program would you use to open a PDF? Yeah, you might use like Adobe to open a PDF. Well, guess what your browser is doing? Your browser is opening very specific kinds of files. The browsers that run on your computer, like Chrome, Safari, Firefox, they are opening very specific files. They're opening HTML, they're opening CSS, and they're opening JavaScript files, right? And so this browser is gonna be opening those files just like Microsoft Word would open Word documents and Adobe would open PDFs. And so when we make a request from our client-side device, we type an address into our browser and hit

01:10:00
enter. That request leaves our client-side device and finds its way to a server. That server hears the request and is in charge of Figuring out what to respond with. So if we typed in dominoes.com, remember we're just gonna pretend here, we're not gonna actually type in dominoes.com, we don't wanna start that, right? So if we were to type in dominoes.com and hit enter, That request would leave our client-side device, make its way all the way to Domino's servers. Domino's would hear that request, right? They would hear that request

01:11:00
and they would respond with a bunch of stuff. They would respond with HTML, they would respond with CSS, they would respond with JavaScript, images, videos, they would respond with all of this stuff, right? And all that stuff would come to our browser and our browser could open those files, it could open the HTML, it could open the CSS, it could open the JavaScript. And That's what we can see in our browser, that's why we can see websites That's why we can see stuff and interact with stuff in our browser is because we made requests to other Computers that sent us all these files now I'm not allowed to go to dominoes.com anymore. It's a long story. Many of you know the story. Let's not get into it No longer allowed to go to dominoes So we're gonna

01:12:00
pretend. We're gonna pretend that I went to dominoes.com, right? Went to dominoes.com, pretended, doop, doop, doop, doop, doop, doop, doop. Hit enter. That request goes to Domino's server. Domino's starts throwing pizza parties. They're high-fiving. They know they're gonna send all their kids to college because I'm back, right? Server hears that request, responds with a bunch of files. Now, Domino's website, I haven't been there in a while, but it used to be glorious, right? Domino's website was beautiful because when you would go to dominoes.com, you would see a delicious pizza at the top of the page, you would see a list of ingredients going down the page, all of that content, right? All of that content, that pizza that you see, that list of ingredients that you see, that's all powered by a technology called HTML. So if you've ever been to a website and

01:13:00
you saw content you were dealing with HTML now On Domino's website the peppers were green The pineapple was yellow. The ham was pink all the ingredients had really beautiful Styling they had different colors. It looked great If you've ever been to a website and it didn't look like a hot dumpster fire, but actually looked good That is CSS. So if you ever been to website you saw content text images, that's HTML Right, but if you ever been to website and it looked good, right? It looked good, right? It had head styling. It was centered. There was color. That is CSS Now the final thing the the coup de gras the the most beautiful thing that was ever on the internet at that time was you could drag the ingredients onto

01:14:00
the pizza, mind blowing revolutionary stuff here. It was the best thing ever. That behavior, that interaction, that ability to drag and drop stuff, that was powered by JavaScript. So HTML is all the content that we see. CSS is how we style it, make it look good. And then if we ever have behavior interaction, we're listening for clicks, we're dragging, we're dropping, that is all JavaScript. And whenever we type in a URL into our phone or our tablet or our desktop and we hit enter, what we are doing is making a request that leaves our computer, goes to the server, and then the server has a bunch of code running on it that determines and figures out what HTML to respond with, what CSS to respond with, what JavaScript to respond with, and sends all of that back to

01:15:00
our device and specifically to our browser for it to be rendered for the user to see. Now, the cool thing is that server, when it hears the request, it might have to do a lot of stuff. Like sometimes it's gonna go to like a database and get all my past orders, right? Sometimes it's gonna go to, sometimes it's going to like look at its files and find the right HTML file to send. Sometimes it's gonna process our credit card information. Sometimes it's gonna send the order to the specific Domino's restaurant. So there's a lot of stuff that can happen server side, right? Once the server hears the request, we ask for dominoes.com. It might need to process credit cards. It might need to talk to a database. It might need to do some other things.

01:16:00
We call all of that backend code. All that stuff that runs on the server, that the server needs to handle, that's back-end code. All the stuff that runs on the client-side device, that HTML, that CSS, that JavaScript, we call that front-end code. Now, someone that works on the client-side code, the HTML, the CSS, the JavaScript, we would call them front-end web developers, someone that just works on the server side, we would call them back end web developers and someone that works on both the front end, right, the front end and the back end, we would call them full stack web developers. So at the end of this program, you will be full stack web developers, meaning that you have the ability to write code not only on

01:17:00
the front end, but also on the back end. So, so far we've covered HTML, CSS and JavaScript enough to make you dangerous as a front end developer. Then we'll quickly move into Node, which will make you dangerous as a back end developer, combine them together and you are a full stack web developer. Now, since we write code and we've already written code, or if you're new, you'll write code today, you're already what we call a software engineer. Someone that write code that understands the tools and systems behind the code that they write. But the thing that we're specializing in as a software engineer is full stack web development. We could write code that runs on TVs or refrigerators or your mobile applications. You would still be a software engineer, But your focus would be different. So here we're software engineers unless you live in Canada and engineers are protected word there But we're focusing on full stack

01:18:00
web development Cool Questions while we're here. I know we cover this in way more depth in our intro to HTML class, but this is review. It's the highlights questions and And Joe's you thank you for the for the hydration cheers to you Mine well, thank you for the prime Is this Mern stack yes Can servers run any language or are they limited to JavaScript? It's a great question. Your servers can actually run a lot of different languages, PHP, Ruby, JavaScript, etc. But we use JavaScript on the backend to run on our server. That way

01:19:00
we like to learn really one language, right? We only have to learn one language. The beautiful thing about learning JavaScript and why I teach it is because it'll run on the client side and the server side. You can't beat that folks. Imagine only having to learn one language and getting an amazing job. That's what I mean. There is a window that is open right now and I don't know how long it's gonna be open, But one of the things that contributes this window being open is the fact you only need to know one Language to build full stack web applications. You can't beat it Thank you for the posture check taco fed Good There we go Best we are live every Tuesday and Thursday at 6 30 p.m. Eastern Time We have our lovely office hours every Sunday at 1 p.m. Eastern Time an amazing discord

01:20:00
community 27,000 strong you can always do exclamation point 100 devs to learn more about the boot camp All right Will we learn react and the back end of course I got you clue All righty, let's keep it moving then. All righty, now we talked about this HTML, the CSS and this JavaScript. And there's one really, really important rule that you have to keep in mind. Zavm2008, thank you for the hydration. Cheers to you.

01:21:00
There's one really important rule that we have to keep in mind. And that's this idea of keeping our HTML, our CSS, and our JavaScript separate. Why might we wanna keep our HTML, our CSS, and our JavaScript separate, chat? Organization, exactly. Organization, right? Organization. This idea that we wanna make sure just our content is in our HTML, just our styles in our CSS, and just our behavior interactions are JavaScript. That way, when we come back to our code and we're trying to make something pink, where do we go? If we're trying to make something pink, where will we go, Jap? Yep. Yeah. We'll go to our CSS. Remember, CSS handles all of our styling. So we want to make something pink. We'll go to our CSS.

01:22:00
What if we want to add some more text for our users to see? I want to add more text for our users to see where are they going? Yeah. They're going to our HTML. Yep. Going to our HTML. and if we want, when our users click on something to see it wiggle, right? When to see something wiggle, what are we going to use? Yeah, because we're clicking as that behaviors interaction to JavaScript, awesome. So we have this separation of concerns, this idea HTML, CSS and JavaScript should be all separate files. It should be all in their own place for organization. and the beautiful thing about this is that it's something that we can all agree to that helps us when we come back to our own code, but if we're working with other developers, we know where to go and they know where to go when dealing with our code as well. Throughout 100 devs, there are gonna be a few things that I think are really

01:23:00
important best practices, right? But we try our best to be baddies and write bad code. When you're first starting out, please don't let these best practices be the thing that holds you back from learning or getting shit done. The only thing that really matters is are you learning? Are you building? Are you building projects, right? And so do not let these best practices get in your way. It just doesn't matter. This idea of clean code, this idea of having to have perfection now it's all bs so many folks stress over best practice so many folks stress over all these things and they don't even know how to code yet could you imagine stressing over best practices and you can't code yet why it makes no sense the reason you're doing that is

01:24:00
because somebody on the internet told you to Right as you're holding it to yourself and what you're doing is slowing your growth Right, you're slowing your growth. You're stopping yourself from actually learning You're worried about best practices. You can't code yet now Best practices are for closers folks that already know how to code folks that are Weighing the options of the code that they are writing to make it more performant to make it better But if you can't code yet, don't weigh yourself down with that be a baddie write bad code Cool so I'll share best practices, but don't let me or anybody else get in your way It makes no sense to be optimizing before you can even code Alrighty the first language we're going to touch on today is HTML hypertext markup language HTML is whenever you've been to a website, you saw content, you saw text,

01:25:00
you saw things, right? You saw things on a website that was all HTML. Now to write HTML, there is a specific syntax you have to keep in mind. And the syntax of HTML is all about tags. Every bit of content must be wrapped in an appropriate tag. So when you're writing HTML, there should be no loose text. Everything needs to be wrapped in the appropriate tags. So here we have a very simple hello world. It's a nice piece of text wrapped in a paragraph tag. And you'll notice that the paragraph tag opens and then it closes. And the only difference between this opening tag and the closing tags are this lovely forward slash that you'll see on the closing tags each time and that your opening tags can sometimes get these superpowers

01:26:00
that we call attribute value pairs that just enable the tags to do a little bit extra sometimes. So when you are trying to get your content onto a website you are going to use to HTML for all of that content. And there are going to be tags for every piece of content you want on the page. Right? There are going to be tags for every bit of content that you want on that page. So you're going to wind up with a bunch of text, and you're going to wrap all of that text in the appropriate semantic HTML tag. When I say semantic, all I mean is is that there's an appropriate choice for each bit of content. Some stuff's gonna be a paragraph, some stuff's gonna be a heading, some stuff is going to be a containing element. And so there's gonna be a tag for every bit of content. So let's look at some tags together.

01:27:00
Alrighty. One of the most common tags we're going to see right out the gate are our heading elements Our h1s twos threes fours fives and sixes. It doesn't go past six and all of these are our headings that describe content that comes after when you see a heading think like a Headline in a newspaper that headline you see it and it describes all the content that comes after When people think of headlines, they often think of something being bolded or bigger than the rest of the content on the page. But if we're thinking about boldness and size, what is that? What do you think would handle that when it comes to front-end web development? Boldness and size, what would handle that? Yeah, CSS would handle boldness and size.

01:28:00
So when you're picking your HTML elements, You really have to fight the urge to pick tags based on how they look You shall be picking tags based off of their importance and their semantic meaning meaning like the logic behind each tag so the logic behind an h1 is to be the most Important content on the page the content that describes what that page is about describes everything that comes after after it. So the H1 is the most important topic on the page. Then we have twos through sixes. Now these you can use as many as you want, right? You can use as many as you want. And typically you're gonna see them cascade in importance. So you'll probably have H1s, then twos, then threes, then fours, then fives, as you get further into your page and things get less important.

01:29:00
Since the h1 is supposed to be the most important thing on the page. How many should we really have? Yeah one I have like one h1 With html5 we got a new caveat that sections can each have their own h1 But let's keep this idea like one one really most important thing Alrighty some other type of text that you will see are paragraph spans and the abomination that is the pre-tag. Paragraphs are for large blocks of text in my opinion like a paragraph so like a sentence or more is a paragraph for me a span is a short piece of text so less than a sentence and then a pre-tag it preserves all your white space so if there are any enters tabbing Carriage returns, any of that stuff, all that whitespace, that gets carried into the browser. Why do you think it's, why do I think I say a

01:30:00
pre-tag is an abomination? What does all that whitespace, the entering, the carriage returns, the moving of stuff around sound like? That sounds an awful lot like CSS to me, so I don't use it. Some other tags that I don't use are BR tags and HR tags, because only nerds use them. Next. So, BR tag, what it does is it puts a break, some spacing between your content, and in HR, it puts a line across the page. And that HR, that line across the page, right? That line across the page could be done with a border. And so I call these nerd fights because I've lost friends over the BR and HR tag. It is true. We were at a meetup, we were having some drinks, as one does at a tech meetup. We brought up the idea of a BR. I said it was style. They didn't think it was style. We had some words we haven't talked in years now. So, was I right and them wrong or them wrong

01:31:00
and I right? Not really, but to me that's styling and so I don't like it, right? And so what you're gonna have to do as an engineer is have strong opinions held weekly. Meaning that you form strong opinions, you form strong decisions about the things that you're doing and why you're doing them. But if somebody presents a better argument, you're willing to go, hey, oh, actually that argument makes sense, and you change the way you do things. So for me, I didn't like the argument for the BR tags, so I didn't change my way. Cool. Some other elements we're gonna see are M and strong tags. M and strong tags, they're a little bit tricky, because when you look at them in the browser, when you look at them in the browser, you see that they're getting M tags are italicized and strong tags are bolded. Like you can see them like italicize the text and make the text bold. This would violate separation of concerns. So using HTML tag to style stuff, that's not keeping our HTML

01:32:00
and our CSS separate. But the reason why we use M and strong tags is not because of how they look, but what they can do for us when we use accessibility devices. When we use things like a screen reader, M and strong tags are read differently. So they enable us to provide emphasis to individuals that might not be able to visually see the page. So we don't care what they look like. You can always change how things look like with CSS. Some other big tags you're gonna see a lot are ordered list and the sibling, which is an unordered list. Ordered lists are for lists that have to come in order. Think things that you would get into trouble if they were not in order. So for me, an order list is like a recipe, right? A recipe, you have to follow specific steps. Otherwise you're gonna wind up with some pretty bad brownies. An unordered list is a list that doesn't have to be in a specific order. For me, an unordered list would be like a grocery list, right? You have your milk, your cheese, your bread, all that stuff

01:33:00
on your list. And it doesn't really matter the order it comes in unless you're a monster and you like organize your list based off of where stuff are in the grocery store. I don't know. And last but not least, last but not least, we have our containing elements. And if you're doing an older tutorial, you're gonna see divs everywhere. Or better yet, if you're doing a tutorial and you see divs everywhere and it's not a React tutorial, run. Because what happens is as HTML matures and evolves, we get new versions of HTML. And we're on like the fifth really big version of HTML. And with that fifth version of HTML, we got all of these containing element. And the beautiful thing about these containing elements is that they all have more semantic meaning than a div has. So the div, you could still use it, just doesn't

01:34:00
have as much meaning as the other elements do. Sections are for like content. So if I had a bunch of stuff that was like liver frosted treats, pumpkin, sardine treats, right? Those don't really make a lot of sense, but when you put them on a dog food website, oh, that makes a little bit more sense to me. So sections are used for grouping like content. Articles are for content that can be shared. Think of like a blog post or a newspaper article. Those are things that could be shared. So that'd be a good case for an article. An aside is for ancillary or extra content. Things that if you remove from the page, the page still makes sense. What's a really good thing for an aside? What would be a really good thing to use for an aside? Yeah, ads are really good uses for asides. Because if we were to remove the ads from

01:35:00
a page, the page just still makes sense. Header is for content at the beginning of your document and footer is for content at the end of your document. Beautiful. Cool. Now, these are a lot of tags that we've talked about so far. Like I said, if you're brand new, we're going a little bit faster than we would have done during our full HTML class. Basically we spent three hours on the stuff we just covered in like a half hour, right? So know that if everything's not super boom-boom-boom making a hundred percent sense You know, let's come back and watch a specific class on HTML that is on our YouTube Leon the world comm slash YouTube Goes to the cohort to playlist and you will see our very first class on HTML Well now there are so many other tags that we don't have on these lists And so one of the things that you're gonna have to get comfortable with It's a little bit further along in the slides. One of the things you're going to have to get comfortable with is using a tool called

01:36:00
the MDN, the Mozilla Developers Network. It is the best resource for looking up HTML tags, CSS styling, and then even JavaScript. Once again, it's the MDN, the Mozilla Developers Network. And what that'll do is that you can look up of all these HTML tags, you can see when you can use them, when you should use them. The examples tie to those tags, right? And so if you're ever having trouble, like I don't know what tags to use, Leon, the MDN is your resource. I think I had another earthquake. All righty, let's look at some websites. I have Khan Academy up here. I'm looking at Khan Academy. We said that the h1 was the most important content on the page. What's the h1 on this page? H1 most important

01:37:00
content on this page. What's the h1? A lot of folks are saying For every student every classroom real results is the h1 Why would that be the H1? Why would that be the H1? I'm going to throw in a chat. Yeah, it would be the H1 because it's the most important. Some folks said because it's big. Why don't we care if it's big? Why don't we care if it's bold? what is size and boldness controlled by? Yeah, boldness and size is controlled by CSS. So when we're choosing our HTML elements, we do not care

01:38:00
how big or bold something is. This could be the tiniest thing on the page, yet still be the most important and therefore still our H1. Now, we always have three different types of users that we have to worry about. We have to worry about general users, accessibility users, and web crawlers. General users are going to come to the site and have a better experience when we use the appropriate tags. Accessibility devices will use these heading elements to jump through the page, right? They can jump from important bit to important bit if they want to. So if they're using something like a screen reader, maybe they have a visual impairment, that screen reader could help them jump from from heading to heading and then Google if Google is going to come to your site and crawl your site and needs to figure out what your site is about what is Google going to look at what's one of the things Google might look at to figure out what your site is about

01:39:00
Yeah, Google might look at your H1. If the H1 is the most important content on the page, it makes a lot of sense to go and look for the H1 to figure out what your site is about. Beautiful. How about this block of text? What would this be chat What html would that be yeah paragraph the sentence are more so for me that's a paragraph How about this thing here, what would that be Yeah be an image we haven't seen an image tag yet, but there'll be an image nice And then look at this when I move my mouse over it. Look what happens What is that? I'm interacting with the site and stuff is happening. What is that? Yeah, it's JavaScript, exactly.

01:40:00
That mouse entering, that behavior, that interaction, that's all powered by JavaScript. Now, it might be triggering a CSS animation, but that listening for the event and doing stuff is all JavaScript, exactly. All righty, Khan Academy Works, what would that be? What tag we looking at? H2, beautiful, beautiful. Yeah, it's an H2. It's definitely less important than the H1 that was up here, but still a heading. It describes the content that comes after, so it's still a heading to me. Okay, how about these three things here? What are each of those? Yep, those are all images, nice. How about these right here? Personalized learning,

01:41:00
trusted content, tools to empower teachers. What could those be? Yeah, maybe like H3s, because they describe what comes after, right? They describe the paragraph that comes after, so there's still headings, but they're definitely less important than the H2. So maybe H3 is there. And then I kind of gave this away, but these big blocks of text all would be paragraphs. And we can kind of keep doing this same pattern over and over again, right? Another heading, maybe an H3, or maybe an H3, another paragraph, another image, right? Heading paragraph image. So we kind of see these kind of like these same bits over and over again. How about this gray box? Would this gray box be? Miriam a thank you for the sub

01:42:00
Yeah, it'd be a section right grouping like content together We have like another white box here. Like if we were to like look at this box here That'd be another section, right? Another section, another section, another section, another section, right? So we can see the really big building blocks that we're gonna see over and over again when it comes to building out with HTML are really gonna be like our sections, our headings, our paragraphs, and we're gonna sprinkle in some other elements too, like images and then eventually links, which we call anchor tags. So there's maybe 10 to 20 tags. You really have to know that you're going to use over and over and over again. Right. Even though there's probably like hundreds of like 100 plus tags, especially now with like all the new inputs and stuff, but it's really only a handful that you're going to use all the time. And so at first,

01:43:00
it's going to seem pretty overwhelming. But once you learn those handful of tags, the ones that are in the slides and the ones we're about to review together today, you can really start to build pretty much whatever you want in HTML. So let's go ahead and code out a brownie recipe website. We've actually done this in class before and you've had some time to do it on your own, but we're gonna code this one together and then we will talk through a BBC website and then we'll take a break. So in your starter code for today is the brownie recipes website So if you need the starter code in our discord Exclamation point discord there is a follow along materials channel to see that channel You have to agree to our rules at the end of our rules is an emoji You have to click once you agree to our rules. You see all the channels open up

01:44:00
to you So agree to the rules and then you will see a follow along materials channel. In that channel, you will see a notice for our super review today and there will be a zip file. You will need that zip file today for all the stuff that we're going to do if you want to code along, right? So this one we're about to do, you don't have to code along. So when we take our break, if you need more time to go get the zip, download it, and unzip it. That's okay. You can do that. And then the other thing you're gonna see me be using is VS Code. VS Code is a free text editor. That's VS Code. The free text editor is where you're gonna see me be writing my code in today. If for some reason you're on a machine that doesn't enable you to download stuff, you can use a website called glitch.com. Like glitch, like it's like glitching, right? Glitch.com. And you can type in all your HTML, your CSS and JavaScript in that as well.

01:45:00
Cool. Alrighty. So what I did is I downloaded my zip file. I unzipped it. And now I can open up, I just always open the entire folder in the S code. So what you'll see me do most of the time is I'll just drag my entire super review folder and I'll drag that to VS Code. And then once you drag it to VS Code, it just opens up the entire folder. And that's great to open the entire folder because then you just have, right? You just have all your stuff ready to go. So down here, I just have brownies.html loose and that's what I'll be starting with today. Alrighty. It looks blurry to you there's two things you can do you can refresh and then also check your quality

01:46:00
settings We're streaming at 1080p 60 frames per second Uh, and you can change your quality depending on your internet speed Min real so is this a code along It's up to you If you're brand new to code, like today's your first class, I wouldn't follow along right now. I would just pay attention. But if you've been doing this for a little while and you wanna type along with me, sure, why not? Alrighty, let's look at this. So we have a brownie recipe website, right? And so chat's gonna help me here. I have at the very top deep dish brownies. What do we think this is going to be? We remember all this is loose text, right? All this is loose text. Every bit of text must be wrapped in an HTML tag. Yeah, so we're gonna wrap this in an H1.

01:47:00
So our H1 opens and then our H1 closes. Whoop. So notice the only difference between the opening and the closing tag is that lovely forward slash. You're always going to see that on your closing tags. This is a bit bigger. There we go. You have that lovely opening and then the closing tag. Every bit of content must be wrapped in a tag. We have an image here. I'm going to save this image to the end, just because it's a little special. We have to do something a little bit different for that one. Next. Recipe by Biz McMahon. Who would that be, chat? Does it describe the recipe? Like, does it describe everything that comes after? So, some people are saying span because it is a short piece of text. This could be a good candidate for a span. I could see that. To me, it also describes the recipe. Like, this whole recipe is by this person, right?

01:48:00
So, it could also be a heading to me. Now, is it an important heading? No. To me, like I don't ever go to a recipe website and look for a specific author, right? Some people might, some people might be like, this is a Rachel Ray household. If it ain't Rachel Ray, I ain't doing it, right? I ain't doing it, right? So to you, it might be more or less important. And that's the beauty of front end web development. A lot of times you're working with a lot of folks, marketing, management that will dictate how important stuff is. And sometimes it's just up to you to figure out what that is. So for me. For me, I'm a Martha and Snoop hassle. Rachel Ray's facility is trash. So for me, I don't think it really matters that much. I'm going to do an H4.

01:49:00
Right, H4. and it opens and closes. I think it does still describe everything that comes after it. It's just not that important. Eventually, when we get deeper into accessibility, there will be this idea of going from one to two to three to fours. But for today, we're just trying to figure out like, all right, based on importance, what tag should it be? Next, we have related recipes. And so what comes after will be related recipes. So all these are related recipes. What are we feeling for related recipes, chat? Why are there spaces between each line? Just for readability. You don't have to have the spaces, but I think when you're first starting it's a little bit easier to see. White space really doesn't matter in HTML. Ooh, I'm seeing a lot of different stuff here. I'm gonna go H2. I'm I think related recipes is super important. Like if you don't

01:50:00
like this recipe, I want you to go to my other recipes, right? I want you to go to my other recipes. So to me, what comes below and related recipes is like super important to me. That's super important, right? Like if I want you to stay on my website, I don't want you to go to some other recipe website. So to me, all the related recipes are really important. All right, then we have a bunch of different recipes, right? We have a bunch of different recipes. So we have a bunch of different recipes. What is, what do you think we're calling for here? There's, we would call this a, a what? Yeah, so people say it's a list. It's a list of recipes. Now does, can't tell their low fat brownies have to come before Chewyish Brownies or does Bodacious Brownies come after EasyFud Brownies? Like, no, the order doesn't really matter here. And so since order

01:51:00
doesn't matter for this list, we can use a UL. So here's my UL. We're gonna make sure that I open and I make sure I close it right away. Come down here. Now my whole list is inside this UL, right? Okay, now list often has something inside them. We call them, if you had a grocery list, what goes on a grocery list? What goes on a grocery list? Items, exactly. So the same thing, same thing we're gonna do here is that since we're using a list, an unordered list, each one of these values here will be a list item or an item on this unordered list. What I just did here is I held down command and I clicked next to each line inside of my list. What this now gives me is

01:52:00
the ability to have my cursor at each line, which enables me to do stuff like this. All right, I can actually go ahead and type everything out that I want to type out. I'm going to explain the anchor tag stuff in a bit. And then I'm closing up my allies, beautiful, right? So for me, all I did is I held down command and I clicked next to each line of code. Now, if you're not on a Mac, you might need to use control. If you're on some other type of operating system, you might need to use alt, right? And so alt or control, try them on your different operating system, right? And that's how you can

01:53:00
type on multiple lines at one time. It's one of the beautiful things about using a text editor is that you get features like that, where you can type multiple lines at one time. You can jump around. So for me, I held down command and I clicked each line. And then the jump to the end on a Mac, it's just command and the right arrow. On Windows, I believe it's just the end key. Yeah, I think it's just the end key on Windows. So for me, I held down command and I clicked. I did command right arrow to jump to the end. You could also use end key on Windows, things like that. So right now I don't need you to stress over knowing all the shortcuts. You can just give it, give a quick vs code shortcuts, uh, Google, right? Just Google vs code shortcuts or go on YouTube and type in vs code shortcuts and learn all the shortcuts. That's not what we're going to spend our time on today. I just want you to know that shortcuts exist. And so you should spend time figuring out what they are for your text editor of choice. Uh, I'll be using vs

01:54:00
code for this entire course. You might use something different. That's okay. But I recommend that you use VS code in Chrome, at least for the beginning parts of this course. So that way the things you're seeing on my end are the things that you're seeing on your end. All right. So you'll notice that each of these lines are wrapped in an LI, right? They're all wrapped in LIs, which is short for list item. But you'll also notice that inside of each LI is also an anchor tag. An anchor tag is a link. It's gonna take you somewhere else. And so when I looked at these related recipes, right? When I looked at these related recipes, what I saw was, wait a minute, oh, I'm gonna click on this and it's gonna take me to that recipe. So if I need to go to that recipe, if I need to go from where I am to that recipe, it needs to be a link.

01:55:00
And so that's why we have these anchor tags. and instead of putting the Octothorpes here, we could put the link to an actual website, right? We could put a link to an actual website there, and then when we clicked on Chewist Brownies, it would take us to that site. Cool. How about prep time? What do we feel about prep time? What do we feel about prep time? Yeah, I'm feeling a two or a three on this one. I think prep time is like one of the things that I actually care about when I look at a recipe. Like how long am I going to spend making this? So I might be inclined to do an H2. I might be, I might be able to be convinced that an H3 could be used here. And how about, how about our 60 seconds? is what would our 60 minutes be? Yeah, I'm gonna go with span here. Short piece of text,

01:56:00
beautiful. So this heading definitely describes the stuff that comes after the 60 minutes. So it's definitely a heading and then a span. I think I'm gonna use the same thing here. I think servings are pretty important to most people as well. But like I said, you might differ on that you might use a slightly different tag here. Beautiful. How about ingredients? Do we feel ingredients are important? Eh, these might be an H3 actually. I might make those H3s, but I'm getting to ingredients. I'm like, hmm, these are definitely really important. And yeah, I think ingredients are definitely an H2 for me. So I'll do my H2 and I'll close my H2. And then I wanna make sure that I have a list

01:57:00
of ingredients. So this is probably a what? I have a list of ingredients, what is it? Yeah, it's an unordered list. It doesn't matter if we put the eggs before the vanilla or the sugar after the butter, it doesn't matter the order for the ingredients. So that's a UL or unordered list. I'm going to break my list and then put the list back inside. I always like to make sure that I open and close everything. Always make sure that everything closes that we don't get into any errors. I'm typing a little slow just so folks can kind of see what we're doing here, but I'm still doing what exactly what I would do where I kind of open it up, Make sure it closes because if you if you don't write if you don't If you don't put the closing elements, you're gonna run into trouble. So always make sure your stuff closes All right. Now each of these are gonna be list items So on a

01:58:00
Mac I can hold down command and alt or option and then use my down arrow and I get the cursor on each line. So instead of having to like click on each one, like you can hold down command and click on each one. On Mac, you can do command and alt, and then just hold down the arrow and get the cursor on each line. And then I can just do my lovely LI, command, right arrow to jump to the end, and then close my LIs. Alt, control, down arrow for windows. Cool, thank you. And so like I said, you don't have to worry about knowing the shortcuts right now. So then you probably Google and watch a video on to get all of them. Cool. It is very convenient, exactly. All right,

01:59:00
finally we have the directions, like the instructions for making it. I think this is going to be an H2 as well. Right, we have a lovely H2. And for me, the directions are very important. Like I can't beat the eggs before I like put the stuff in the bowl. And if I was to put stuff into the oven before I put everything in the bowl, then I run into trouble. So since this has to be in a very specific order, I'm gonna agree with chat here and do an OL, right? All this stuff needs to go inside of the OL. Beautiful. And then once again, you're gonna wrap all of these in an LI. So my LI will

02:00:00
open and I'm not gonna jump to the end here. I'm just gonna click again because the ends are all on different lines. And I will close my LIs, beautiful. Anyone else craving brownies? No, me too, little me too. All right, so we have our order list, our LIs, right? are wonderful. And right now I've made all these changes, but is my file saved? I've made all these changes, but is my file saved? No, how can I tell that I have not saved my file? Yep, the white dot at the top. If we look at the top, there's this lovely white dot. It's letting me know that my page has not been saved. So I can do my command S or file

02:01:00
save, right? Save it, make sure all my changes are saved, beautiful. And you'll notice I'm like not opening this in the browser. Like I'm not checking to see how this looks. Why am I not checking to see how this looks? It doesn't matter. Vanny said it doesn't matter. Exactly, it doesn't matter. I don't care how it looks because how it looks is controlled by CSS. And have I written any CSS? No, I have not written any CSS. And so since I have not written any CSS, I just don't care how it looks. I don't actually have to open it in the browser and see what the heck's going on, right? I'm just writing HTML right now and it doesn't matter. It could look like a hot dumpster fire, It just does not matter All right. How about the tip? Tip for me. It doesn't really matter. It does describe the content that comes after

02:02:00
so I'll do an h4 Right, and then this tip aluminum foil can be used to keep food and moist cook it evenly and make it clean up easier So that's definitely a paragraph of text. I'll open my paragraph and I'll end my paragraph beautiful Nutritional info is an h6 for me Beautiful. Age six for me, just doesn't matter. And if there were, this is how you know that the headings end at six. There's no seven, there's no eighth, there's no nines. Six is as low as we can go, so that's why we use the six here. And then the 40 cows, short piece of text, that's a span for me, and we'll close the span. Hmm, beautiful. All right, find this recipe here. It's a full

02:03:00
sentence, so it's probably another what? Like this line 67 is probably another what? Yep, chat's got it. Seems like another paragraph to me. I'll close my paragraph. But there's something interesting in here, right? It says here. Here sounds an awful lot like a what? An anchor tag. Yep, an anchor tag. So I'm gonna wrap here in an anchor tag. And we saw this anchor tag open and close before. four up top, and we said that we could put an actual URL in the anchor tag, and we have this lovely URL here. So I'm just gonna cut this, and I'm gonna put it, instead of putting a placeholder, I'll put the actual URL. So what's

02:04:00
gonna happen now is when I click on here, it is gonna take me to this allrecipes.com slash deepdishbrownie. That link will actually link me to this page. I'm gonna go ahead and save it. The last thing we have up here is this image tag that we didn't get to. And so that's gonna be img with a source that equals brownies.jpg. And then an alt that equals brownies. And then I close it. So something weird with the image tag. What's weird about the image tag compared to every other tag that we've seen? Yeah, it's self-closing, no closing tag. It's self-closing because the image is already content. If we look at all these other tags, we look at this H4, we look at this H2, we are opening and closing

02:05:00
around content. We open and close, open and close. Here's the content. The image is already content itself. Like it's just an image. you don't need to, there's no text, right? So we don't have to open and close around text. It's just gonna be an image that's gonna show up. And so the source is the location of our image. So right now this would only work if I had this brownies image on my computer at the same level of this HTML file, which I don't. So this would break, we wouldn't see a brownie photo right now. And since I know it's gonna break, you always wanna make sure you have an alt. The alt is the alternative text that shows up in a couple different scenarios. We talked about the three kind of users we have to care about. Our general users, when this image breaks, because I don't actually, there's nothing, if we look over here in my little tree, there's nothing, there's no brownie image over here. So I know that this is

02:06:00
not gonna work. I just don't have the image to show you, right? So our general users will see the word brownies and know, oh, that image should have been brownies. Someone that's using a screen reader, if the screen reader wants to read the image, somebody might have a visual impairment and can't see the brownies image, but at least they could be read that, oh, it was a brownies image. And then last but not least, web crawlers like Google could come and understand that that image is a brownies image. So whenever you create an image, always make sure you have an alt to serve all three of those users. Alrighty Powered through this Let's save it and i'm gonna open it in the browser just to see I'm just gonna open in the browser. I just want to take a quick peek at it. I don't care what it looks like Because we haven't written any css. I just want to take a peek All right What we'll notice is that deep dish brownies

02:07:00
is big bold black and beautiful much like myself There's something interesting about the deep dish brownies being big, bold, black, and beautiful. What's interesting about that? Yeah, Nick something got it. There's no CSS yet. So how the heck did this get big, bold, black, and beautiful if we haven't written any CSS? Well, this is some of the default style that comes inherent in the browsers. So as we move to CSS, one of the things we have to keep in mind is that each browser has a default styling that it wants to impart on our HTML. And we're gonna actually have to come up with ways to either stop it entirely or work with it in the long run. But know that that's gonna be one of our first challenges when we start writing CSS is to handle this default browser styling, right? I call these money problems. It's

02:08:00
something that as you start to learn more and you learn how to handle it, it makes its job security. Right? These little things that we have to quirks, we have to work around, make it so that it's a little bit harder to do what we have to do. And we have to learn how to solve them and, and it helps us keep our jobs. Alrighty. We got a hydration and then we're going to take a break. So Zim 2000 and then MSScot03, both, thank you for the hydrations. and cheers to you. Thank you. We just did, we just powered through HTML in an hour. If you are new, there is no way that you fully understand HTML. We're gonna come back. We're gonna see some more HTML. We're gonna introduce some CSS, right? We literally did that across two, three hour classes. So if there are things you need to fill in that things don't make sense entirely, that's okay. Today's like an overview for you if you're brand new

02:09:00
to see all the wonderful things that you can get into. And then as you need to, you can go back to individual classes and get more hands-on keyboard practice for each of them. And make sure you join the catch up crew on our Discord. Once you agree to the rules, you'll see all these channels open up. Once you click the emojis in the join 100 dev section, you're gonna see a bunch of other channels open up to you like the catch up crew, where you can go through this at your own pace. All right, next up folks, we're gonna look at a site and see if we can talk through some more of the HTML and then we're moving on to CSS. So let's put five minutes on the timer here. Five minutes on the timer. I'm going to run ads so that way new folks that are joining us don't have to sit through ads. Folks that are here and haven't used Prime

02:10:00
or don't have a sub, they get ads sometimes while we're teaching. And so I like to run ads while we're taking a break, because you should be taking a break anyway. You should be getting up if you're able, hydrating, moving around if you're able, looking out, letting your eyes focus on something that's not the screen, right? And then we're going to come back in five minutes and keep pushing. Alrighty folks. See you in five.

02:11:00
you

02:12:00
you you

02:13:00
You

02:14:00
The openinbrowser is a plugin called openinbrowser. So in VS Code, if you go to the extensions, like these little blocks here, you can type in your extensions and I'm using this open in browser by Tech ER. And then that gives you the ability when you right click to open in browser. You can see I don't usually use that many extensions. And I always recommend my students when they first start out to not use too many of them get used to doing stuff the hard way and Then add extensions over time to make your life easier. I Really? I don't I don't like live server in the beginning So I want people to actually be used to saving their files Refreshing the page because I've had so many folks go into interviews and forget to like refresh pages Like write all this code and they don't actually refresh And

02:15:00
then that then they don't get the job because they just haven't practiced that so I like my students to start without it. And then once you feel comfortable saving, refreshing and all that stuff, then you can switch to some other things. Brian, thank you for the comment about the thumbnails. It's just something for now. I got to figure out how to make better ones. Cool. All right, folks, come on back, come on back. All righty, what was it start off each top of the hour with some questions, I'm looking at the slider. Remember you can submit your questions during the Slido and then you can also upvote the questions that you want me to answer the most already. I have a call tonight with my first potential paid

02:16:00
client. I know they're going to ask about SEO. How do you recommend we handle conversations about SEO? So SEO stands for search engine optimization, like getting your site to rank on the first page of Google. When they type something out, you want to show up in the results, that's search engine optimization. The wonderful thing about search engine optimization these days is back in the day, it used to be like a dark art. You do all these weird things to rank and then Google would make an update and all your sites with tank. But these days, Google is pretty clear. There are some things you want to do on site to make sure your site's good. And then you just want to have really good content. So if you have someone that wants SEO, you can make sure their site is SEO optimized, meaning that you've done all the little bells and whistles on the actual site to make sure that Google approves of it. And then it's just getting good content on that site. And so the wonderful thing that we've shown before is that on any site you

02:17:00
can right-click inspect and then there's this Lighthouse tool. You can run that diagnostic and it'll tell you what Google sees in terms of SEO. It's not the everything you need, but it's a really, really, really good starting place. If your site looks really good on Lighthouse, it's gonna look really good to Google. And so when you're talking to your client, you can recommend that, hey, I do everything that's required on site to make your site worthwhile for Google. And then I can help you with making sure that you have a way to generate or a way to post content that you generate so that Google can see your great content and rank you. That's about it. SEO is search engine optimization. The showing of your, like you type something in, like you type something in like dominoes and then domino shows up first, that's search engine optimization. Wow. Hello. All right. Let's do two more and we'll jump into CSS.

02:18:00
I asked the CTO for some advice on getting the first job and he said, keep working on your skills, contribute to open source software and the rest will come. Thoughts? That's pretty good advice. The idea of continuing to progress your skills, build projects is what helps you get a job. Now, open source software, you can, you can replace that with one of three things. Getting a client, open source contributions or volunteering are all kind of replaceable in the, in the, in that category, as long as you're working on projects and you're doing one of those three things where other humans have seen your code and you've worked with others to build good code, you get rid of that stench that that new boot camper smell and uh yeah so if you're doing those those two things you'll eventually get a job the only thing that i that i don't like is the the rest will come no the rest is a hard slog

02:19:00
it's a lot of hard work networking your way into these opportunities um just doing open source and working on your skills won't guarantee a job it's the networking that get you a job quicker. Cool. One more. Do you have any tips on how to make the website's online ordering and checkout section work with a POS system, like how some restaurants have online ordering? Well, look at any website that you see that has online ordering. You can right click inspect and see what system they're using. There are plenty off the shelf solutions for online ordering. you would not be coding that yourself. You're gonna find some sort of application that you can drop into the site for your client that connects with their POS system. It's not something that you would code from scratch. So do research on kind of different ordering systems, ones that you think would integrate well with their POS system, and then you just implement that for them.

02:20:00
My dad wants me to build him a $500 site. Is this a good first project? I have no idea. because for $500, they could be asking for a hell of a lot. So it's really not about price. It's about what can you get done at price points. And so, yeah. POS is point of sale. It's like the thing that you punch in the orders into. So like when a server takes your order, they like type that in so the kitchen can see what's going on. All right, last one before we jump into CSS. That mini hackathon was super fun. Will we be able to do that more often throughout the cohort? Absolutely. We have lots of time. There'll be there'll be budgeted for kind of working on projects as we get deeper into full stack specifically. We'll learn how to work as engineering teams, and then we'll put you all together to work in engineering teams together. So, yeah, lots of other times to work together in the future. here.

02:21:00
Alrighty. Let's go ahead and let's look at the BBC. So here is a real website that a lot of you have already coded. If we're looking at the BBC and we look up top, what would this logo be? What would this logo be? Yeah, it'd be an image. How about sign in? Yep. Span. All right. Probably span for the text, the sign in. Maybe this is an image, right? The little, the little, the little face.

02:22:00
Then here. We have a list of what? A list of what? Okay. Yeah, definitely a list of links, right? So at its core, this is going to be at least a UL, like an unordered list, because news before sports, it doesn't matter if sports become before news or whatever, right? You might have a preference, but it's not something you're going to get in trouble for. So it's an unordered list, and inside of that unordered list is an LI, and each of those LIs have anchor tags in them, right? Like we wanna be able to click on news and go to the news page. So it's a UL LI anchor tag. Now, this will be at the top of every single BBC website. And so Google's gonna see that

02:23:00
they keep saying home, Home, news, sports, home, news, sports, home, news, sports, probably across thousands, if not tens of thousands or hundreds of thousands of pages, right? And so how can we let Google know we're not trying to stuff, right, right? We're not trying to stuff for these keywords. We're not trying to trick you here. We just need this to be part of our navigation on every single page. What can we throw that in? Yeah, we have this lovely tag called a nav tag. And so with HTML5, we got a new tag called nav and all of our navigational content should go in navs. So really this is gonna be a nav that has a UL in it. Each of those ULs have an LI and each of those LIs have an anchor tag inside them. Beautiful. Someone said, why is this a span and not an anchor tag? It could be an anchor tag. I think it's

02:24:00
fair that this could be an anchor tag If you if you're going to click on this and it take you somewhere then it's then it's a link I don't know if this is going to actually take you anywhere though, right? This might just reveal a sign in right? So if you click on this and it just reveals a sign in that to me is not like a link that's taking you somewhere right, so it might not be a Actually a link depends on what happens when we click on it Cool Now all this content at the top, right? all this content at the top, we're gonna put in a special tag called a what? Yeah, a header. So our header, we said a few slides ago, is for content at the beginning of the document. So here is our content at the beginning of the document. So that's our header. Inside of our header, We have like our images, we have our link or our spam.

02:25:00
We also have our nav, which has our UL, which has our LI, which has our anchor tags for all of these, right? And at the end, there's also inside of our header, a what? What is that over here at the end? Yeah, I got a lovely form at the end. So form is one of the things we haven't seen yet when it comes to HTML. A form is an element that enables the user to enter in text, right? So form is the containing element, just like a UL is a containing element. And then inside of that, we would have inputs. So you'd have a form with inputs inside, Just like with a UL, you have allies inside. We never really have allies without a UL or an OL, and you would never have inputs really without a form. Cool. We got like a white block here.

02:26:00
What would that block be? That whole grouping, what would that be? Yep, we got two competitors here. It could be a main, which is a special tag with HTML5 for the main content on the page, or it could be a section. So either a main or a section could be useful here. I might go with main, excuse me, but I could clearly see a section here as well. So section or main either one will go here and then inside of this. Let's say main We can have to what? To what Yep, two more sections

02:27:00
right two more sections inside these sections. What would this be here? Would that that text be I think the text is a really strong candidate for the h1 or a very minimum in h2 I think this describes the rest of the content, right? So it definitely describes like the rest of the content in Maine You might say you know what Leon it doesn't really describe everything on the page. So maybe it's more in h2 You might even say like hey this this might be really important right to the BBC see them knowing that you're on BBC's website and not some other news website might be the most important. So that might be the H1 if they agree that that's the most important, or they might say, you know what? Our biggest headline, right? Our biggest headline is the most important and that would be the H1. So as a front end developer, it might not actually be in our control to

02:28:00
dictate what might be the H1 in this case. So to me, this is either gonna be an H1 or an H2. We got like a nice big block of text here. So what would that be? Paragraph, nice. And then a short piece of text here at the end. What would that be? Nice, span, exactly. So we got a heading, either H1 or 2, depending on your opinion there. A paragraph and a span, lovely. Inside this section on the right, we have four more what? We have four more what? Yeah, we have four more sections. I like them as sections because I think they're containing like content. Some folks might even use a div here, that would be okay. But they're sections to me. Inside those sections we have some sort of heading, maybe like an H3 and

02:29:00
then a span. Each of these have an h3 and a span h3 and a span h3 and a span Beautiful and then down here. We have another what? Another what? Yeah, another section nice You get a lot more out of these reviews if you're typing in chat Just saying if you have the ability to type in chat, you should type in chat I'm gonna help you stay focused as we spend all these hours reviewing No, we're going all the way through JavaScript We're in our second going into our our third hour here, and we're just hitting CSS. So you want to stay Sharp through the whole way definitely Definitely be participating Especially have as we haven't gotten to hands-on keyboard time yet Beautiful. Yeah, it's another section another section beautiful

02:30:00
What this area here, what would that be Would that be what would that be I'm answering out loud. Hey, there you go. I actually like that. It's pretty cool Yeah, I think that's a good candidate for an h2 Super important describes the content that comes after definitely an h2 and then we have three What? Got three what? Yeah, three sections, and each of those sections should have a what? I think it's going to be an H3. If this is an H2, then I think each of these headings are H3s. So I would say H3s on each of these. and then these like bigger blocks of text would all be paragraphs, lovely.

02:31:00
And then spans at the bottom of each of these. So really we were able to do this entire website with mainly sections, headings, paragraphs, and spans. We sprinkled a few extras in there. We sprinkled an anchor tag for links we sprinkled like this idea of like a nav and a header and a form so really with just like 10 or so tags we're able to do pretty much every single thing you see on a very popular website like a popular news website so when you're learning html i know it could definitely seem overwhelming at first there's a lot to learn a lot to remember make sure you're getting your active recall in make sure you're doing your space repetition and realize that there's really not that many tags that you need to know to be dangerous. So if you want more practice with the HTML, definitely go through and watch our HTML classes. We get, we build a lot of stuff. Go back to the brownies

02:32:00
that we just did. The brownies that we just did. Make sure you're starting fresh with just the text, filling in all your HTML and then compare it to the solution that we just did, right? Cool, it's all divs. Yeah, so a lot of sites that you see, like if you just go and inspect their website, you're gonna see a lot of divs because a lot of sites use a CMS or a content management system. It's some system that spits out what you see on the page. Right, so they're not really using the best, most semantic up-to-date stuff. They're using some sort of generator that spits out what you see. Do you ever use divs? Yeah, I still use divs quite frequently. I think they still have their place. It's just often there are more semantic choices to be had When to use main or section let's look it up Let's look it up

02:33:00
mdn main html This is what I would really do if I'm confused on when to use a tag I would type in mdn what i'm confused on and the technology and you see the very first link here is the main tag The main HTML element represents the dominant content in the body of a document. The main content area consists of content is directly to rated to or expands upon the central topic of a document or the central functionality of an application. A document must, mustn't have more than one main element and it doesn't have a heading attribute listed. The main content should be unique content that is repeated across a set of documents or documents such sections such as sidebars, navigation links, copyright info, blah, blah, blah. Shouldn't be included unless it is the main function of the page. So I think that's actually

02:34:00
a really big hint here. All the extra stuff should not be in main. Cool. All right. So if we go back and look at the BBC, all of this stuff, there's no extras. It's not stuff that would be like the copyright at the bottom or like the navigational content. So there's no extras. I think it all relates to the core content of the page, which is the most dominant news. To me, this is the most dominant news according to the BBC. So according to the MDN, my interpretation would be that this is a good candidate for main. It doesn't include any extras. It's the main core functionality of the page. It's the dominant content of the page. It seems like a main to me. Now you might interpret that differently and that's entirely okay, right? Like I said, if I

02:35:00
was to give this site to 10 different front end developers, I'm getting 10 different sets of code back. people would disagree on main or section. It's about making the best, most rationalized decision that you can. And remember, we're baddies, we write bad code. Don't get hung up on this stuff. Just throw a main, just use a section. It really won't matter in the long scheme of stuff. Don't let these little nitpicky decisions actually hold you back from building real stuff. If you're ever sitting there stressing over main or section, you've already messed up. Slap a section, move on. Yeah, just do it, exactly. Cool. But that's how I really do it. I look up on the MDN to help make my decisions. So that's exactly what I would do. All right, we got two things here. We got a hydrate. Pizza pretzel, cheers to you. And we got a stretch. All right, I'm gonna do a real good stretch. You can't watch me stretch, it's not that kind of stream. You know what you gotta do if you want to see all that good content.

02:36:00
One second. All righty, yeah, plenty of good content like that on, on you know where, all righty, let's continue. Let's move into some CSS. CSS is short for cascading style sheets. Remember we talked about CSS being the style. Whenever you go to a website, if you saw content, that's HTML. If the content looked good, it was positioned

02:37:00
well, it had color, it had style, that is all CSS. So where should our CSS go? Should we be writing CSS in line with our HTML? Should we be writing CSS in the head of our HTML? Or should our CSS be in a separate file? Yeah, it should be in a separate file. Now, the good question here is why should our CSS be in a separate file? Longhumans got it, I think first. Organization. Remember, we talked about this golden rule, the rule of the separation of concerns. And so when it comes to separation of concerns, we want our HTML separate from our CSS, our CSS separate from our JavaScript. And if we were putting CSS mixed in line with our HTML, we wouldn't have that organization that we need. If we were putting it in the head, we wouldn't get that organization. There

02:38:00
are some caveats to this rule though, that we're gonna keep everything separate. There is one specific scenario where we put CSS in line with our HTML. Where's that? Yeah, HTML5 email. So when we when we actually write emails we write emails we Put CSS in line with our HTML Emails are actually coded in HTML and we put the CSS in line because they don't really have access to external style sheets So you're writing email you can put CSS in line If you work at Amazon, they have something called critical path CSS Amazon has said for every one second, their page load speed increases, they lose a million dollars a day. And so they have a very strong investment in making sure their page loads as fast as humanly possible, right?

02:39:00
And so that idea of putting it a little bit of CSS in the head, so just the landing page loads a little bit faster, and specifically what we call above the fold. Like if we look at the BBC page, We can see that news and welcome is above the fold, but sports and weekend reads are kind of below the fold. And so what Amazon does is they put a little bit of CSS to make sure what is above the fold loads as fast as possible. And then the rest is put into the regular CSS file. When will we need to write an email in HTML? Hopefully never. Some people, that's their jobs, like they'll get hired as email developers. They just focus on writing HTML emails. It is a grueling job. It's not grueling, it's just very tedious in my mind. But we

02:40:00
actually have some folks from last cohort that that's their job. They write HTML emails professionally. So yeah, that would be when you would do it. Most people are using some sort of email writing software like MailChimp or something like that, that comes with built-in editors that spit out the HTML and CSS for you. How does that pay? It pays a lot less, like 50K-ish is what I normally see. And so there's like kind of like gradients to the salaries I've seen at 100 devs. So of all the folks that we've gotten jobs so far, like 45 to 50 K is typically like on the lower end. But if you live somewhere that's like a major metro area or you're doing something that's not, not like maybe all the way full stack, you're seeing that 45, 50 K range. And so like HTML developers are falling into that range. The next bucket is like 70

02:41:00
to 75. A lot of folks without kind of like, That's kind of where the next tranche starts. So maybe that's starting to dip the toes into full stack development. You're starting to kind of take on a little bit more serious role. And a lot of people fell in that 75 to 75K bucket. And then folks that really kind of broke through that six figure mark, were folks that were really competent or felt really strongly in full stack and maybe added a little bit extra react onto the mix. And so those are kind of the ranges that we've seen so far like the lower end 45 to 50 with kind of more specialized skill 70 75 when you're first hitting that full stack and then six figures is where you feel really confident with full stack And maybe a little bit extra stuff on top. Yeah And the ranges are always dependent

02:42:00
on where you live and things like that Stephanie, hey, thank you for the five gifted subs. I appreciate it. Alrighty. So since we agree that CSS should be in a separate file, we actually have to link to our CSS. So from our HTML, we have to say, hey, go find the CSS file. And so here is the link that we put in the head of our HTML. This is how we're able to write our CSS in a separate file, but have everything connected. We put this link in the head of our HTML, and that link tells us where to go to get the CSS so that we can render everything in the browser correctly. Alrighty. CSS has a different syntax. What the heck do I mean by syntax?

02:43:00
What does syntax mean? Yeah, it's the grammar, the rules, it's the way we write our different languages, right? So the HTML had a syntax of open and close carets. We had our open and close tags. And so that syntax is different than CSS. In CSS, the syntax is composed of selecting elements to be styled and then telling how we want those elements to be styled. In CSS, we write what are called rules. This entire thing here is called a rule. A rule is broken down into two very important parts. The selector

02:44:00
and the declaration block. The selector is the thing that we're gonna actually style. So right here you can see that I'm selecting all of the paragraphs. So every single paragraph is now gonna get this style. The declaration block, which is everything inside the curly braces, is then broken down into declarations. And each declaration has a property and value pair. So in this case, you can see that I'm going to select all of the paragraphs. Then I'm going to make them color red and font weight bold, right? So I'm making them red and bold. Now let's play a little bit of game here. Chat, what is this whole thing called? The whole thing I just circled, what is it called? Yeah, it's called a rule. How about

02:45:00
bold, what would bold be? Value nice about color. property. Nice. Very nice. Very nice. How about this? What would that be? Declaration Nice. How about this? Declaration, nice. And then the paragraph, not including the parentheses though, color brace, I mean. Paragraph would be our selector, exactly.

02:46:00
So we select the things we want to style, then we say how we want to style them. I want them to be red and bold. And so we can take, if we want, we can take this link. We can take this link, and if we wanted to, we could put it at the top of our HTML element here, our HTML file here. Typically we'd have a little bit different of a structure that we'll see later with the template. And then we could link to a style sheet that was inside of a CSS folder, and then called style.css. But I don't have a CSS folder, so I'm just gonna say style.css. Let's save this. And right now, it's gonna look for a file called style.css. If we look over here in my tree view, do I have a file called style.css? Nope, I don't. So let's go ahead and create that file.

02:47:00
You can do command N for new or file new, it's up to you. and I'm immediately gonna save this as style.css. So I'm saving that into my super review folder. And we can see in the super review folder, there's now a style.css. It's on the same, right? The same level, right? Same level as my HTML file. And so now this style.css should work. Cool. So let's go ahead and just take our H1 and make it color red. I save that. I can open up my brownie recipe again. And we see that deep dish brownies is now red, right? It's now red. So we can see I have linked to my style sheet and I have written

02:48:00
my first rule, right? My first rule is color red. Beautiful. Someone asked, what's the difference between a rule and a declaration block? The rule is the whole thing. Right? The rule is the whole thing. The declaration block is technically just what's inside the curly braces. So it separates the selector out. Yeah, it doesn't include the selector exactly. You're gonna notice that a lot of this stuff, like when I asked like, does order matter? A lot of times order doesn't matter in the HTML or CSS, like what way you put like the attribute value pairs. It's just kind of convention for a lot of this stuff, but html css and even javascript is pretty forgiving for a lot of stuff White

02:49:00
space really doesn't matter things like that All righty, let's keep it pushing We just played our game of what is this? We know the whole thing Is a rule a rule is broken up into a selector and a declaration block Declaration block is broken up into declarations And our declarations are broken up into properties and values properties and values nice Now CSS is read from top to bottom. However, the stuff that comes above Can be overwritten by the stuff that comes below So here you can see that my paragraphs start off as red but further down the cascade, they become blue. This is a pretty powerful bit, right? It's a pretty powerful bit

02:50:00
of how CSS works. Poor boy, thank you so much for the gifted subs. Thank you for being here, right? It is a big, big deal in how CSS functions because we can use this cascade to our benefit. We can see that the paragraphs start off with red and boldness, but as we go down the cascade, it changes to blue, but it does not lose its boldness. So we're going to be able to eventually style a bunch of stuff one way and then want to change one or two things and have those changes just affect one or two things at a time and not everything. And so this cascade is not only the namesake of CSS, the cascading style sheets, it's also a major bit of functionality that we're gonna see as we get into some examples. All right, chat, why might we wanna link our CSS to a separate file?

02:51:00
Yeah, for organization, exactly. Keep it organized, beautiful. All right, we're gonna review some simple styles together. And then once we review our simple styles, we will code some CSS. So we're gonna look at some simple styles, then we're gonna take a break. And when we come back, we're gonna get our fingers on the keyboard writing some actual CSS. Alrighty, so one of the most common things you're going to want to change when it comes to CSS is color, right? Is color. There's kind of like four major ways of doing color. When it comes to CSS, you can use the color keywords like color red. You can do a hexadecimal value. You can do an RGB value short for red,

02:52:00
green, blue, alpha channel. And you can do an HSL value, hue, saturation, lightness, alpha. There are all different ways of doing color, which one you use is really up to you. The color keywords are very simple and easy to use. However, you don't really get all the control because when you say color red. Well, what kind of red do you mean? Crimson red. Do you mean like red, red? Right. And so the idea here is that you will use probably different color, different ways of achieving color based on your needs. The native way is normally through hexadecimal values. So you'll see a lot of people that use that. I use RGBA because it's easier for my brain to think about it. Like if I want something to be red, I know that's gonna be 255 because it's from zero to 255 for each category. So I know that 255, zero, zero means red. If I want it green, I could do zero, 255, zero, and that would give me green,

02:53:00
right? And so the idea here is that I like RGBA just because it makes it easier for me to think about color. I also love this alpha channel. It's anywhere between zero and one, one being a solid color and zero being like see-through or opaque, like how much you can see through it. And so you can get that transparency by using an alpha channel, which is something pretty cool with CSS3. Before we used to do a lot of hacks, I used to create like see-through transparent pixels in Photoshop and then repeat that image across my elements to get transparency. But now it's built in with these alpha channels. So know that if you use color keywords, they're great for prototyping, right? They're great for prototyping because you can just put in red and then come back and fix the actual color later. But you'll probably pick one of these three for your color schemes going forward.

02:54:00
One of the other things that we're going to want to change is our font family. So like what font our text is. Now, the beautiful thing is that fonts are actually files, right? So if you want a specific font, you're going to need that font file and you need to load that font file for this to work. So what you're seeing here is in my paragraphs, I am changing the font family to my favorite font, which is Source Sans Pro. And the way I'm gonna be able to change this to Source Sans Pro is that I have also already linked to that font file in the head of my HTML. If I do not link this font file, this font will not load. So remember, if you wanna use special fonts, you need the files for those fonts for it to work. And so often you'll see a font file, a font that you're trying to use here, but you're gonna follow it up with some other fonts. Why do we follow it up

02:55:00
with some other fonts here? Why do we have some other fonts listed here? Yeah, backups, exactly, backups. For some reason, if for some reason Source Sans Pro doesn't load, the browser will try and load Helvetica, and then if Helvetica doesn't work, it'll try and load Sans Serif. And so the idea here is that we can have these wonderful backups that make it so that if for some reason Source Sans Pro doesn't load, we can still have other fonts to use. Now, how do I get fonts? I think the easiest to start off with is by using Google Fonts. So fonts.google.com, fonts.google.com, and then the cool thing is you can just pick a font. So let's find Source Sans Pro. Here's the font. And then you're gonna notice that there are different weights for each font. Each weight is

02:56:00
a different file that you need. So I want the regular 400 and I want the bold 700. So I have selected both of these styles and I can come up here to this little icon. And what you'll see is the link that I can include in my head that'll give me access to those fonts. So I also still have Roboto here. I'm just gonna remove all the Roboto so I just have Source Sans Pro. And so now I have all of my links for Source Sans Pro. Why do they not load sometimes? Well, it could be that this link that Google gives you is down, which happens very, very rarely, but it does happen. That's why you need a backup. What some people will do is they'll download the fonts onto their server so that their server can always serve up the font file. So maybe you don't rely on Google, you rely on your own fonts, but that's a little bit slower.

02:57:00
Google has these fonts all around the world on servers that are probably really close to your users or better yet, the user might already have it installed on their machine. And so Google is just a little bit faster and that's why people like to use it. Cool. So I would just grab this I'd put it in, actually, let me copy it. Boom, copy. And I just put it at the top of my HTML, typically in the head. And we always wanted to link it before our style sheet. Right? Always before our style sheet. Why do we need to link the font before our CSS file? Hey, thank you for the raid. Yeah, we want to link it because we actually need that CSS, right? We need that. We need it before we can load it in our CSS. Hey

02:58:00
Deluxe, thank you so much for the raid. Where are y'all up to today? What are y'all working on? Welcome Raiders, we're doing a full review today. HTML, CSS, JavaScript, we're reviewing everything. So we had a lot of folks that joined us recently, so we're covering all the new stuff, right? We're covering everything, starting all the way from the beginning. So we're at the end of our third hour, and we just got to CSS. And so we're finishing up CSS. We're doing layout. We're doing all this fun stuff. And then we're getting into JavaScript as well. Doing some character interaction, animation work. That's dope. That's dope. For folks that don't know, Lenalex is an amazing streamer. Always live, always working on different aspects of game development. If you're here, cause

02:59:00
you're learning. I know a lot of you are here cause you want to learn how to code so you can build video games. And so they are definitely hands down the person to watch if that's what you're interested in from everything, from the character rigging all the way to building the actual games. I can't recommend their channel enough. If I'm on Twitch, I'm probably lurking in their channel. So let me see if I can do a shout out real quick. Wrong place. Definitely give them a follow if you haven't. I know we have a lot of new folks today you want to make sure right you want to make sure that you're following good folks here on on Twitch right like when we're not live you can watch somebody like actually building stuff and picking up some words of wisdom from them in their chat and And Alex is definitely the best that we got Yeah, we definitely rated them in the past and yeah one of my favorite people to raid for sure All righty.

03:00:00
We have a little bit, let's do this, let's cover this last topic and then we'll take our break. So we have a, we have our link to our actual font and we need that before our CSS file. And the reason why we need it before Is because we're trying to use that font in that css file So if we don't have the font and we can't actually use it inside the file. So that's why the order matters Ammar saeed you found the right place then welcome Could I swear I was following them but no yeah, make sure you're following them for sure. Absolutely 100 One of the best dreamers, definitely one of the best dreamers in our category, one of the best dreamers on Twitch. Always live too.

03:01:00
So definitely somebody you can check out every day. Great community. Let me see if I can spam this a little bit. There we go. Beautiful. Give them a follow if you haven't already. Make my day. Please give them a follow Already Can you go back to the slide that talks about the cascade? Absolutely Got it All right, so we talked about this cascade. This cascade is the idea that what comes above can be overwritten

03:02:00
by what comes below. And so up here, you see we had the color red, but then further down we had the color blue. And with this example, it's kind of hard to be like, all right, why would I ever use this? But imagine we had a bunch of paragraphs that we wanted to be red and bold, but then we had a few paragraphs that we wanted to be blue, but we didn't want them to lose the boldness. We could target these other paragraphs and make them blue and we'd have to change up the selector. Maybe we'd use a class or an ID or something to target that other paragraph specifically, which we'll get to in a second, but we'd be able to use that cascade to not lose the boldness, but to be able to change the color later on. Cool. So we talked about color, we talked about fonts. Let's talk about weight. So boldness is font weight. And so if we want something to be bold, we're gonna use a larger font weight. So here I have a larger font weight of 700.

03:03:00
This is where most fonts become bold. And so if I want my fonts to be bold, I need that specific font weight, which means I also need that specific file for that font to actually render, right? All right, and so when I was on Google Fonts, I asked for the regular 400 and the 700. You can actually see that in the link. I know it's really tiny. It says weight 400 and 700. If I wanted the 900, I would need to include that as well. If I wanted the 300, I would need to include that as well. And so if I want all those different weights, I would have to make sure I have them on my link. Now, as you add more weights, you increase your load time. So people don't go really wild and having all these different fonts, all these different weights. One of my really close designer friends, they always say if you have more than two fonts on a page, you fucked up. And then if you kind of go wild with the weights,

03:04:00
you're messing up as well. So be sparing. Alrighty, now we talked about color. We talked about weight. We talked about fonts, right? But there's so many other things that you might want to know how to do. You might want to know how to italicize stuff. You might want to know how to bold stuff other than the way that we just showed you how to do it. You may want to learn all these different things. Maybe you want to review the stuff that you already feel confident in just to make a better decision, like I did with main. When I didn't know exactly what main was asking for, I went to the MDN. So always use the MDN to look up these things, right? So if you need help remembering HTML, You need help remembering CSS. Use the MDN. It's the best resource we have. It gives you all the details. It'll walk you through everything that you need. If you're brand new and you're trying to get caught up on this HTML and CSS stuff, we have what,

03:05:00
four to six classes on HTML and CSS that you can go back and watch. Part of the homework, if you start over from the beginning with the follow along materials, Is to read Shea how which breaks all this stuff down into further detail But what we're going to do is we are going to take a break and when we come back from that break We're gonna get our fingers on the keyboard. We're gonna write some actual CSS and we're gonna have some fun All right. So when we come back from this break, we're gonna actually start getting our fingers on the keyboard so get your VS code set up make sure you have the The files downloaded from the follow along materials channel If you're new here, you can do exclamation point discord join our discord agreed to the rules And once you agreed to the rules, you will be able to see all these extra channels that open up There's the following materials channel grab the materials unzip it open up in VS code and then join us back How did you copy the font family to the text editor I just copy and pasted it so

03:06:00
Google gave me the font I just highlighted it Copy and then I pasted it in my text editor No. All right, folks Get a good break in this one really take the five minutes, please hydrate stretch where we're just getting started. It's three hours We're just getting started folks. So we're gonna be in this one for the long call. Please take your break Seriously, don't keep sitting here If you're not able if you're able to please get up move around hydrate and I'll see you all in five We're going to run ads so new folks don't have to sit through the ads when they join

03:10:00
All right

03:11:00
folks 30 seconds left All right, folks, come on back, come on back.

03:12:00
All righty Yeah, what are your thoughts on CSS pre-processes like less than SAS I think they're great I use them I don't recommend learning them until you have to for your job Because each company is different you might use something different for each one And so it's just not worth it to put in that extra energy and then not need it on the job It's really disrespectful how you handle Bob, we've had a conversation and he prefers the chin lift. I don't know why, it's his choice. Maybe cuzzy, maybe. Alrighty folks, I'd like to start off each new round, each new hour with questions from in the Slido, always do exclamation point ask to type in your question and to upload the ones that are already there. The top question right now is, is jQuery something worth

03:13:00
learning still or is it outdated? I think at this point, it's pretty outdated. With the newer versions of JavaScript, pretty much every major benefit that jQuery gave us except for a slightly easier syntax has been accomplished with just regular JavaScript. So cross-browser compatibility is there. All the really big things that jQuery helped solve when it first came out, is now kind of handled by just regular old JavaScript. So I think it's definitely outdated. Not something I would worry about picking up unless you're on a job or with a client that has a pretty heavy jQuery code base. But it's not hard to pick up though, if you need to later on. JQuery is still on job listings. Yeah, you're going to see it in a lot of stuff. And also job listings kind of are BS. Uh, I think one of the big things you'll notice from reading the celebrations channel from folks that got jobs is to just straight

03:14:00
up ignore job listings. We've had students that have gotten senior roles. We've had folks that got roles where they didn't know anything that was on the job listing. It kind of just, just doesn't make sense to pay attention to them. So don't, but we'll get there when we get to our, when we get to our applying the jobs phase, we'll talk through all of that. Will we review Git soon? It seems like it would be easier way to submit homework and keep track of our portfolios and client work. Yeah, end of this month, we will be covering Git. So I don't like covering Git and GitHub early on. I think it's one of the things that a lot of other people, like when they're trying to learn, get really lost in the sauce on and it's too much and it's overwhelming. And so I don't like teaching it until later on. I still think it's, I don't think it's super beneficial until you know kind of what you're doing a little bit code wise. And so end of this month, we'll be covering Git and GitHub. And we have a fabulous sponsor. That's right. We're gonna talk more this week on Tuesday about our sponsors that are coming up, but we have a sponsor for our class. So yeah,

03:15:00
it's big news, I guess. All right, let's do two more. All right, I still struggle with Flexbox. Can we touch on that? Yeah, we're gonna touch a little bit of Flexbox today. We're gonna do a little bit of Flexbox. I think a lot of people really wanna do like a full Flexbox class. And so once we get through JavaScript, I'm gonna do a full class on Flexbox. And we'll come back and all of our layouts will be done in Flexbox and we'll incorporate JavaScript into those layouts. Cause I just think some people, it's just not something you need for a job, right? It's just, it's just, it's, it's nice to have, should definitely learn it. We definitely covered the basics of it. And you, a lot of you have done some simple layouts with it. That's good enough to continue on. And so we'll learn enough JavaScript to be dangerous and then we'll incorporate layouts in Flexbox with JavaScript. So we'll come back to it

03:16:00
and we'll build full layouts with it and incorporate JavaScript into those layouts too. But it's like one of those things, I don't know why, But the cohorts always get really like all my students really get hung up on it But it just doesn't it's just like not something you should be investing super super a lot of time into know the basics And I'll do simple layouts with it and then move on. Yeah Can you discuss how to deliver the site to a client I'm confused and scared to take a client don't know how to deliver You just you I mean you've cut out the site and then you put it on Netlify that that's it Just drag the site to netlify.com slash drop. It's live for your client and they're good to go So you would code your site on your own account, on your own Netlify site. Like show them everything as it's live on your server. If they're happy with it, tell them to create a Netlify account or help them create a Netlify account and then just drag the code to their server once they've paid you in full. That's it.

03:17:00
Yeah. Are Netlify's hosting services free and unlimited? Their basic stuff is free, it's not unlimited. If you hit like some like ridiculous amount of traffic, you have to start paying. Yeah, so I think like when a hundred devs kind of went viral this second, like the second round, like Netlify is like, you gotta start paying us money now. I've been on Netlify for years and they were eventually just like, you gotta pay us money now, which I'm happy to pay Cause I've, I've gotten so much out of them for free for so long. Yeah. So once you get like certain amounts of traffic, stuff like that, you got to start paying. Yeah. What if they don't want Netlify, then they can pay and figure it out themselves.

03:18:00
You explain what stack we are learning. we're learning the Mern stack, which is we're learning JavaScript or full stack JavaScript. I don't actually like saying stack. I just like saying full stack JavaScript. We're learning HTML, CSS, JavaScript, and we'll learn Node, MongoDB, and Express, and we'll put a little bit of React cherries on top. How are people finding the time to get through all of this homework, doing the networking and finding time to look for clients? Am I defective? No, you're not defective. A lot of folks, this is a big time commitment, right? You're putting at least six hours in for class, and then at minimum, at minimum, 10 hours outside of class. Minimum 10 hours outside of class. Some people are putting more like 20 hours outside of class. So 10 to 20 hours outside of class is a pretty big time commitment.

03:19:00
The thing that I'll say is that a lot of folks are not effective with the time that they do have. A lot of folks are not, and it's just human nature to not be effective with our time when it comes to learning. to not be able to actually have strong amounts of focus for the hours that we do have. And so one of the things you have to work on is making sure that your active recall is sharp, that your space repetition is sharp. Make sure that you are not going into your days like an accident. Do you have every day planned out? If you do not have your week planned out, then you are messing up, right? If you don't know what topics you're gonna try to get through on each day, like if you don't know how you're going to, like what your goal to learn that day is, Or what your goal to learn on Wednesday is your goal to learn on Saturdays? Like if you don't know what that is at the beginning of each week You're doomed to fail because you're gonna go into the week like an accident You're gonna over invest in one area too much or or skip a day or something like that And then be off track and then get nowhere

03:20:00
and So you have to make sure you're planning out your weeks You have to make sure you know what your game plan for each day is When I like the way I do mine is I look at my month and I figure out here's what I want to get done for the month and then every Sunday, typically I plan out my week and then every night before I go to bed, I write down the three things I'm going to get done the next day. And so I know every day the things I have to get done and I know what my week looks like and I know what my month looks like. If I do not do that, it's all my, my mom's garbage. I won't get stuff done. I won't achieve the things I want it to achieve. And so I think a lot of folks when they say like that they're taking time They're not they're they're going into their days like an accident. They haven't planned out their days. They're not doing their active recall They're not doing their spaced repetition. That's why your days aren't effective It's not that you're defective is that a lot of times the planning is is more important than the doing And so you got to make sure that you're planning out that you're that you're taking

03:21:00
you're setting yourself up to succeed and not to fail Yeah And then you got to really time box your day. You got to use Pomodoro. You got to be like, all right, I'm going to only spend 20 minutes on this topic. If it doesn't make sense, you got to get help. That's the last big thing is most folks fail because they don't ask for help. They don't get on Discord. Every single question on Discord right now has an answer. Sometimes they're not the best answers. Sometimes you have to ask again to get better answers, but pretty much every single question has an answer. So if you're stuck, things aren't making sense. You need to ask really good questions and get better at asking questions, right? And so make sure you're planning out your days. You're using active recall. Make sure you're using space repetition. Make sure you're asking questions. Make sure you're not spending more than 20, 20 minutes on a topic that doesn't make sense without getting help. If you're not asking for help, that's that's how like you're not defective. You're probably not asking for help. You're probably not planning out your days. You're probably not using

03:22:00
the best learning resources you have at your disposal, which are active recall and space repetition. Now, doing all that and fitting it into your time, that's a whole other beast, right? That's why you have to plan out your days and your weeks to make sure you can fit in that time. And a lot of times, a lot of, a lot of my students, they have, they try out, they try two hours a day. That's kind of what I recommend at least two hours a day. And you're doing it every day, Saturdays and Sundays included. A lot of folks have to figure out where they squeeze in those two hours. Some folks wake up early, which I actually recommend. I think working in the morning can help a lot of folks because at the end of the day, if you're working, you're too tired. Nothing's going to sink in. It's not going to digest in your brain. And so you want to make sure that you're figuring out when your two hours makes the most sense. Do you recommend two hours at once? I do because I think for some folks, your Pomodoro, like you have to find the Pomodoro that works for you. Some

03:23:00
folks Pomodoro is like 1515, some is 3030, some is 4515 because different people get into a flow state at different times. So for me, it took me a really long time, but I'm best at like 4515, where I work for 45 minutes straight and then I take 15 minutes off because I find for a lot of problems, it takes me around 20 minutes to really get my head wrapped around it and then start writing good code. And I wouldn't want to stop at like 30 minutes and be like done. So I, some days we'll do 30, 30, but most recently I've been doing 45, 15. I'll work for 45 minutes and then I'll take 15 off. Yeah. That's how I answer that question. But remember, time is a privilege. That's why I always say this might not be your time

03:24:00
literally because of time. That's okay You also might only have an hour a day. That's okay. You don't have to finish this in a certain number of days There's always the catch-up crew. The videos always go on YouTube if you need to go at your own pace, that's okay This is your career for the rest of your life In in five years, you're not gonna be like I really I'm really upset that I took an extra extra three months to figure this stuff out It really just won't matter, right? If you think about the grand scheme of your life, it taking three more months just won't matter in the long run. So don't be afraid for it to take three more months to go at your own pace a little bit, to realize that you might not have the full privilege of time that you might need to do an hour a day instead of two hours a day. And then yeah, don't waste time not asking for help. Alright, we

03:25:00
got through some questions today, let's keep pushing. What's the chance of us landing six-figure jobs? I don't like the idea of aiming for six-figure jobs, I also don't like the idea of aiming for fang. I like my students to aim for being comfortable, right? Making money that's comfortable for them, making enough money to support themselves and their family, having a happy, stable job, not a job that stresses them out, a job that meets their needs. Maybe they have kids and need to work from home, right? I don't like folks to have these like arbitrary goals at the end of the day that don't like increase their happiness or like make it so that they can actually you have something achievable that making 90 K versus a hundred K, like it depends on who you are and where you're at in life. It just doesn't matter. Like that's not the, the, the thing I want folks to focus on. I want you to have a healthy, stable career

03:26:00
that supports you and your loved ones, where you're excited to show up for work every day. That's the type of job I want you to get and having these skills enable you to have access to those types of jobs. Now, did we have a lot of folks that got six figure jobs last cohort? Yes, we did. We had dozens of them. But should that be your goal? Because some YouTuber told you so, I don't know. That's up to you. Alrighty. We have a, some basic CSS. So let's go ahead and if we look at the starter code, we have, I'm going to close these other files here and I'm going to get a little, I'm already a little young. We have this basic CSS. And so if you open up the HTML and the CSS,

03:27:00
you'll see here there's some instructions in the HTML. Make this text blue, underline and have a gold background. Make this text purple, bold it and have an orange border. So go ahead and actually follow these instructions and write out your basic CSS in your style sheet, okay? So I'm gonna go ahead and put, let's put, I know this one is probably, if you're new here, this might be really hard. If you're doing this review, it might be really easy. So we're gonna put, we're just gonna put four minutes on the clock. then we're gonna go over it together. So keep your fingers loose. If you've been doing this for a while, try and flex a little bit on yourself, try and add some more stuff to it. But if you're brand new, this will be pretty hard. Try it and then we'll go over it together. The CSS should be blank. This is called basic CSS. Basic CSS is the folder and it is the HTML and the CSS files you're

03:28:00
writing in that CSS file. Moon, make sure you agree to our rules on Discord. If you do not agree to the rules, you won't see the follow along materials channel. Once you agree to the rules, you'll see the follow along materials channel and the zip will be there for today's class. I need to feed said it's wild how much I struggled with this in the beginning. Yeah. The beauty of coming back and doing review, right? Things do get easier with time. So if you're new, look at that comment in the beginning. It was hard, but now bruising

03:29:00
Yeah, I mean this is basic css What up mitch All right, star, give it a try. Even though you're new to CSS star, still give it a try. You can look at the slides, exclamation point slides if you need it, right? You can copy exactly how we did it in the slides and change it up for your purposes. Hey,

03:30:00
it's glad to hear that week. I knew nothing about programming and I have a paid client in just three months. Let's go. Do the work. The program will work for you. It's no joke under does change my life. Hey glad to hear that week, but you got a client Nice I'm a starter song I'm doing is the color. Hey, that's good. If all you can do is color do color We'll do the rest together. We're gonna go over everything and the solutions will be on discord afterwards as well So do what you can do get your practice in and then we'll go over it together Good luck with the bathroom, Smith. Coding man says, I haven't been able to get my first clients through friends or family. What should I next steps be? It's in that class. We talked about what to do after friends

03:31:00
and family go back to those slides, go back to the point in class and walk through it. There's like 10 different things you can be doing. Got some dunzos, I see you, AVP, wooden fish. Logan said, done. I wouldn't even known how to open a CSS file beginning of this year. Counting this as a W on the board. Hell yeah. Let's go. You always organize your code blocks with the same order. I do, but it doesn't really matter. Too much waste. It's up to you. Cool. Lots of done's right at the timer. All right, let's go ahead and bring this off the page and let's go over it together. If you're still frantically typing, it's time to stop. It's all right. Let's go over it together.

03:32:00
Now we could we could swap from our html to our css We could like go back and forth, right? What i'm gonna do is i'm just gonna copy all of this stuff And then i'm just gonna put it as a comment in my css So comments are pretty cool because what it enables you to do Right. So now all this stuff is commented out what enables me to do is I can read this stuff but my browser won't actually read it. So it won't try to run this as CSS. You can see it's like this lovely green color. So the way I did this is I just highlighted it all and on Macs it's command forward slash, on Windows I'm sure it's like control forward slash. And it just makes it so that we can see it, but the computer or your browser won't actually read it. And that way we don't have to kind of keep jumping around.

03:33:00
All right. So let's look at this first one. Actually I'll do it, I'll do it in each segment. I'll comment on each segment just to make it a little bit easier. All right. So I'll comment this segment, then this segment, then this segment, that way I can put my answers is in line. Do shift tab here. There we go. Shift tab to move it to the left and then comment it out. Beautiful. All right. Make this text blue, underlined and have a gold background. So since it was the H1, I can select the H1. Mary Princess had done so proud of myself. I'm proud of you too. Congrats on finishing. All right. Make this text blue, so we'll do color blue. We're gonna use the color keyword here. We could use hexadecimal, RGBA, HSLA, whatever we want to use, but we'll just use the color keyword.

03:34:00
Underline. How do I underline stuff? Anybody remember the property value pair for underline? Beautiful text decoration. You can see my editor trying to help me here, for text decoration and I can do underline, beautiful. Now, if I didn't know how to underline something, where could I have gone? Where could I have gone? Where could I have gone if I didn't know how to do text decoration underline? Yeah, I could have went through the MDN. Now, what if I gave it the good old Google? What if I gave it the good old MDN try? I scoured Google, I scoured MDN, and I still couldn't figure it out. Where could I go? Where could I go? Discord, absolutely. Thank you. That's a major point, Discord. And in Discord, I would say, hey, I gave it a Google. I went to the MDN. I still can't figure out how to underline. Can somebody show me how?

03:35:00
And someone would help you out. Someone said message Leon directly. Hell no. I don't read my DMs. I don't read my emails. If you want an answer from me, There's two ways. There's the ask Leon channel I respond to every single message in that channel as long as it's actually a question for me and not some like code help thing You can use to help channels for that or mod mail if it's too sensitive Yeah Already All right, we could color blue underline and have a gold background so let's do background Not background attachment, get out of here. Background, gold. Beautiful. Let's go ahead and open this up in the browser and make sure we're actually doing what we're supposed to be doing. Beautiful, look at that. That gold background, blue text, and underline. All right, let's see the next one.

03:36:00
Make this text purple. Bold it. 25 pixels and have an orange border. All right, so we're gonna select our H2. Notice how I always do my H2 and then I open my curly braces, right? Open my curly braces, open and close. And then I go back in and I put my property value pairs or my declarations. All right, make this text purple, color, purple, beautiful. Font weight, bold it, or bold, sorry. And then font size, 25 pixels. We'll learn to use Ms and Rems later on today. And then an orange border. So border is a little interesting. There is an older way of doing it where we do border size, border color, border type as three separate entities. But with the newer versions of CSS,

03:37:00
AKA CSS3, we can all do it on one line. And so we can go ahead and do two pixels, solid orange. Beautiful. What up, Law? Welcome, welcome. Yeah, we got color purple. We got it bolded. We got 25 pixels and an orange border. Let's make sure everything's looking clean. Beautiful, looks good to me. Shout out to Blah again. I love when y'all say hi to Blah when they pop in. But they threw down with those study communities. I can't tell you how much work they put in. Like that was a lot of work and they threw down for sure. Every week they're trying to make your experience better. So I I agree with blood a goat. That's

03:38:00
100% down. Thank you so much for everything you do to help us All right. Next we got a section Make this section a width of 50% height of 200 pixels a Background of gray a border of black and a paragraph text of white All right, so we'll make the width width 50%, beautiful. Remember, you always need your colon in between the property and the value, and you have to end your line with a semicolon. It's not like JavaScript where you can just get rid of the semicolon these days. With CSS, you need it, or else the next declaration won't run properly. So if I forget the semicolon here and I try to go to the next line, it just won't work. Cool, all right. Height, we'll do height, 200 pixels, beautiful. and then a background of gray. Cool. And a border

03:39:00
of black. We'll go ahead and do border. Let's do three pixels, 30 pixels, three pixels solid, black, beautiful. And this is the paragraph text of white. So maybe we can just try color white to see if it inherits. because sometimes you'll notice that the text can inherit from its container. So we'll throw a white on here and see if it inherits the paragraphs. But if not, we'll have to go in and set the paragraph to white exactly. Let's go and save it. Let's refresh. Beautiful. We can see that that white did inherit to the paragraph text. The black border, gray background, white text, and it has some width and some height. You can see the width is 50%, the height's 200 pixels, looking good. Before I would struggle to even remember the property, something just clicked and I got it today. Hey, good to hear it, Chen.

03:40:00
All right, last one here is the footer. All right, make this footer have a black background with a light green border and this text, 20 pixels white plus a font family of Roboto. All right, so let's go and do a black background. So we'll do background, black, beautiful, with a light green border. Do five pixels solid. And what did y'all use for light green? What did y'all use for light green? Light green. Beautiful. Light green. All right. And then I just want to be a little bit more specific. I want to make the H3 inside the footer. So how can I target the H3

03:41:00
inside the footer? We're going to see this in a few seconds. We're going to get into specificity and how we can target things based on relationships. But how could I target the H3 that is inside the footer? Yeah, two kind of ways really I could do footer H3 or I can even do the direct way, but we'll just do space for now. And all that's saying is target the H3 that is inside the footer. We're gonna see this in detail in a few seconds here, but we're saying target the H that's inside of the footer. That's what that relationship, that space means. H3 inside of the footer. If we go and look at our HTML, this H3 is inside of the footer. That's a relationship there, relationship selector. And so we want to make this text a font size of 20 pixels and we want it to be white so we can do color white.

03:42:00
And then we want the font family to be Roboto, Roboto, and then we want a backup so we can do Helvetica. And then we'll just have a sans-serif at the end. Just as a backup backup, right? In case Roboto doesn't work, Helvetica doesn't work. It'll be our, it'll be our all over. And if we save this, the only thing right now is that we don't have Roboto as a font. Like if we go to our HTML, is it in there? No, we can see that we don't have Roboto as a font. So we need to go get that Roboto font. So let's go to Google Fonts. I'm gonna clear out the fonts that I already have. So I'm just gonna remove all the Source Sans Pro. Let's go ahead, go to Fonts. Let's search for Roboto. Ah, it's right here. So I'm just gonna click on it. And then I'm just gonna grab the 400 because that's all I need for right now. Select this style.

03:43:00
I'm gonna grab the link, boom, copy, go back to my HTML before the link to my CSS file. There we go, it's the link to Roboto. And so now if I save all this and I go back and we refresh, boom, we can even see that this text is very different looking than the rest of the text. You can see the curvature on this T versus this T. So we know this is actually Roboto that's coming through All right You

03:44:00
What's the difference between background and background color? With CSS3, we got shorthand for a lot of this stuff. You could easily do background hyphen color. It's just a little old. That's all. It still works. It's just with CSS3, we got newer ways of doing all this stuff and kind of like shortcuts almost. So instead of doing font color just color works they're doing background color background works Uh border all on one line. Yeah Joe flu. Hey, thank you so much for the 10 gifted subs. I appreciate that. Thank you for being here. That's wild. Thank you so much Thank you for the gifted subs A lot of folks got subs. Hey appreciate you. Thank you for being here Talon, kind of exactly what we just said. There's shortcuts you can use for a lot of

03:45:00
this stuff and some of them that you don't really use shortcuts for. Just part of the specification. Cool. All right, let's keep pushing, folks. Was there anything else left in the CSS? Let me just double check. Oh no, I think we got everything that was in the footer. 20 pixels, white, font on the Roboto. It looks like we're good. So like I said, you don't have to frantically type along. Well, we'll go over all this stuff together and I'll share all the solutions after class as well. So all the solutions will be posted on Discord after we're done reviewing. All right, let's keep pushing. Let's talk about relationships. We saw that where I said, how do I get the H3 that was inside of the footer, right? We wanted to be able to kind of go a little bit more deeper with how we're targeting

03:46:00
elements so that we can style them uniquely. And we saw that I wanted to target that H3 that was inside the footer, but not all the H3s, just the H3 that was inside of the footer. and so there are different ways to build out or target these elements based on their relationships. There's a couple key relationships that you need to know when it comes to CSS. The first one is the direct parent child selector. In this case we have a selector here section write caret p. Whenever you see this caret is the direct child. And what that means is we're going to try and find a paragraph that is directly inside of a section. And that's what we see here. We can see hello Twitch is a paragraph that is directly inside of a section.

03:47:00
Right, paragraph is directly inside of the section. So this is a direct parent-child relationship. The paragraph is the child of a section and it is the direct child. There's nothing else wrapping around this paragraph other than the section. Beautiful. Here we have a parent-child relationship, a parent-child selector, but it does not have to be direct. It could be any steps in between. So here we have a paragraph that is inside of a section and that's what we're looking for. So here I have a paragraph. We can see that it's inside of an article and then it is inside the section. This works because it does not need to be a direct parent child. Callow creation, hey, what's going on? How you doing? Thanks for stopping by. Y'all haven't followed Callow creation. We rate them recently definitely give

03:48:00
them a follow for sure Great streamer So here no carrot Right no carrot And so we want to make sure That we understand that it doesn't matter where it's at, right? We can see that this paragraph is inside the article and then it's inside the section. It still works. But if we were to do this If we were to add this carrot, this would no longer turn red because it would no longer work because it's not a direct child, right? It's not a direct child. It is the child of an article. So as soon as we throw that carrot in, this no longer works. It's no longer a direct child. Yeah, Allison ads are normal. It's not a thing that we do on our end. It's a twitch thing. And so when we take breaks, we run ads to hopefully help folks

03:49:00
not get them when they join, but it's not something we have in our control. It's the one of the things of being on Twitch. We do put all of our stuff normally on YouTube, which is, we haven't monetized that so it's ad free. Cool. All right. So we have direct parent child and then just plain old parent child. And then we also have direct sibling, right? And so here we have hello YouTube, which comes immediately after hello Twitch. And so when we have this paragraph plus paragraph what we are saying is find me a paragraph whose immediate sibling like on the same level of it is is up another paragraph so this paragraph as an immediate sibling that is a paragraph so it would turn red this hello twitch would not turn red why why would hello twitch not turn red

03:50:00
it doesn't have a sibling. Exactly. There's no other paragraph up here for it to be the direct sibling of. So hello, Twitch would not work here. Only hello, YouTube would go red because it's the only one that has a direct sibling above it. Cool. Let's actually code this out. Let's, let's, let's put this in the practice. It's too hard when it's theoretical. Let's, let's see it. Let's build it. Let's play with it. And so we have some relationships that we can code out. And so in our starter code, We have relationship CSS. That's the one we're opening Relationship CSS. We have an HTML file and a CSS file and we're gonna play around with it a little bit I'm gonna play around with a little bit. I'll give everybody a second to open it up. I want you to try and code along with me

03:51:00
Relationship CSS Alrighty, so I want to target all of my H2s, right? I want to target all my H2s, thank you, Snake. I want to target all my H2s and make them red. So you can see I have some H2s here, an H2 here, an H2 here. Let's make all of them red. And then once we play around with this, we'll take our break. So, H2, make it color red. We save it. And let's go ahead and open this in the browser. As we can see, all the H2s are red. We're all zebra unicorn duck.

03:52:00
Now, I want all of the H2s inside this section to be blue, but I still want all the other sections to be, sorry, all the other H2s to be red. So I want these two to be blue, but everything else to stay red. So go ahead and take 30 seconds or so to try that out on your own. I want world and zebra blue, but unicorn and duck to stay red. Go for it. Hey, funny, hope you're doing well. Good to see you, what up Dan, just a few more seconds just to try it out on your own, alright let's take a look at this, blue hey thank you for another 10 gifted subs that's wild Thank you so much for being here. Appreciate

03:53:00
you. Falling out. Thank you so much. All right. We have the H2s, right? The H2s that are inside the section. If we look, they're different from every other H2 because this one is directly inside of an article and this one is directly inside of an article too. So we could say section direct child H2 and target these two, right? So let's go ahead and try that. Let's go ahead and do section direct child H2 and make it color blue. And if we did everything right, we should see the first two is blue and the second two is red, beautiful. All righty, so if we look, why did these two stay red?

03:54:00
Why did these two stay red? Why didn't they also turn blue? They're not the direct children, so the cascade didn't override those two, right? Those two are still getting their red color from this rule here. This rule did not apply to them, right? This rule that gave them all red made sure that they were all red, but then two of those H2s were overridden in the cascade to be blue. So if we look, these two were overridden to be blue in the cascade. They started off as red, and then they became blue further down in the cascade. Now, why do I need to use the direct child here? Why can't I just do space? What happens if I do that? Let's save this and see what happens. Section H2.

03:55:00
Huh. Unicorn goes blue. Why did unicorn go blue in this scenario? Let's look at our HTML. Why did unicorn go blue when I got rid of the direct child? Hmm, exactly. Unicorn is still a descendant of the section. If we look, H2, then an article, and then a section. So when H2 is still a child, this unicorn is still a child of this section. It's just not a what child. It's not just a, it's just not a what child. Exactly. It's just not a direct child. This unicorn is the direct child of the article. It is a child of the section, just not a direct child. If we look, these two are direct children of the section. Look, they come immediately inside the section.

03:56:00
So these two are direct children of the section. Beautiful. All right, so let's go back, let's fix that up. All right, love it. Now, one more here and then we'll take our break. How can I target, how could I target duck to be purple? How can I target duck to be purple? I don't want unicorn to be purple. So I can't, I just can't come in and do this. I just can't come in and do, I just can't come in and do that, right? If I do that and I do color purple, right? And I save it and I come back. We see that unicorn and duck

03:57:00
go purple, right? All right, so how do I make just duck go purple? Ah, yeah, we can use everything at our disposal. We can say, all right, we want an article, right? We want an article that's different from this article. Well, how is this article different? Well, this article has a sibling that is a section. This article has no siblings. There's nothing else here inside the section. So I can do section plus article H2. Let's come back here. Let's do section plus article H2. So what this is saying is give me an H2. It is the direct child of an article. And that article must be the direct sibling of a section. And that's what we actually see here. We see, all right, H2 is the direct child of the article. and this article is the direct sibling

03:58:00
of this section. So it should work. Let's save it. Let's go back. Let's refresh. Beautiful. So now we can see that the world and zebra are blue through the cascade. Unicorn keeps its original red from the very first rule. And then the cascade, we override duck to be purple. Lovely. First try. Exactly. Alrighty, let's go ahead and put five minutes on the clock. When we come back, we're gonna spend some time looking at IDs and classes. We're gonna talk about specificity, and then we're gonna get into layouts. So we're going to look at some floats, a little bit of flex box. So lots of good stuff to

03:59:00
come back to. Let's take our five minute break. If you're new around these parts, we like to be healthy at the top of the hour. We like to take a break. If you're able, please get up, move around, hydrate, and then we'll be back in five minutes. I'm also going to run ads. So new folks, hopefully don't see ads when they join us. And as always, if you need the solutions, they'll be on discord after our review. Alrighty. Five minutes on the clock. You deserve this. Take a good break, please. You

04:00:00
You You

04:01:00
You You

04:02:00
You You

04:03:00
You You

04:04:00
You All righty, welcome back everyone

04:05:00
Hope you had a good break. Hope you had to get a stretch and if you're able to Are we gonna be doing alumni tea spills this cohort? Yeah, we had one at the beginning My goal is to do two things like I want two more things that we're we're kind of gearing up to We just had 30 plus Alumni sign up to be alumni mentors, so they'll be joining the study communities And then my goal is to have have them kind of also host Kind of like one-on-ones on discord where you can get more help ask more questions And so we have all them that are rolling out We're hopefully getting them live this week. And so they've already signed up. We've assigned them to different groups And yeah, so we're gonna we're gonna get them to come through and

04:06:00
then I want to have like two different spaces I'm not sure if it's gonna be on discord or Twitter spaces, but I want to have like one where we bring in people once a week probably on Fridays folks that are kind of that want to help the community but have some really interesting stuff to share so folks that are kind of like experts in the field where you get to hear from them and then sometimes it'll be like experts sometimes it'll be alumni sometimes it'll be like a mix and so I want to have that like maybe once a week maybe like every Friday I'm planning on and then I want to have like another space that's just kind of moderated not by myself or mods but maybe like alumni just for like cohort to like share how things are and how they're feeling, stuff like that. And so those are kind of the two bigger spaces I want to figure out how to create. And so hopefully this upcoming week we'll figure all that out as well. Yeah. We kind of had to, we did all the study communities. We're kind of seeing how all that shakes out and now we can kind of work on the next big project, which are kind of those spaces.

04:07:00
Yeah. Different. Welcome back. Hey. Alrighty. I always like to start off each top of the hour with some questions Misro said I didn't know Amazon gave a free sub each month. Whoo Yeah, if you have Amazon Prime you get a free sub and all the subs go to supporting the nonprofit I work at during the day. We're getting ready to make like our next big check to them So I'm really excited to share that hopefully like in the next week or so We'll share where we're at for the next big like tranche. It's pretty big which is wild Yeah, so each time you use your Amazon Prime, you make Jeff Bezos cry. It's completely free to you if you have Amazon Prime. Yeah, I appreciate all the other primes. You said at the beginning of the cohort, that if we are learning to code to make our own product, that there are easier programs to complete.

04:08:00
What programs? Let me read this again. If you're if we are learning to code to make our own product There are easier programs to complete Oh, I think you mean like if you're if you're here to like learn how to code to like not get a job But to build something Yeah There's probably like no code platforms that probably a little bit easier like bubble Or things that can help you build an MVP so where you can make enough money to then hire engineers So I think if you're just trying to build your own products There's probably a way where you don't have to actually learn how to code to get that product built Um, but could still build an mvp to like demonstrate your idea and get your first few customers But I'm not sure if that's what you're talking about or not or what I was talking about or not If we are behind and trying to catch up are we also expected to have a contract by the end of march That's the goal Right. That's the goal. You you don't need any skills to get a contract Right, like you could have zero

04:09:00
coding ability and get a contract. Like it has nothing to do with your ability to code because you can always figure that stuff out once you start. So you don't need to have finished the project. You just need a signed contract. So you actually could just watch that class and call it a day and be able to get the contract. Do you have any suggestions for people that are struggling to find a client? Have you done everything we talked about in that class? I think a lot of folks try like one or two things and then they kind of give up. Have you tried everything? Have you dialed for dollars? Have you done all the things that might be uncomfortable and hard to do? It's very different than if you just posted on Facebook and nothing happened. Yeah. So make sure you watch the freelancing class. It's up on YouTube. Make sure you walk through. We kind of, we did step-by-step, like do this, then this, then this, then this. If you've done all those things, that's a different problem. If you've done all those things,

04:10:00
then post and ask Leon. I'm happy to kind of hear what went well, what didn't go well. Yeah. Sam posted kind of saying that you don't need contracts and that he doesn't use them anymore. Seems like a terrible idea legally, can you weigh in? So I think folks that read that post didn't read what they were talking, like what Sam was mentioning. Sam was talking about for like very small, like mom and pop clients, they don't use contracts anymore. So they're saying like, if like they're, if they're like a small like restaurant that he won't make a client, make a contract that, that, that he'll just go ahead and put all that into the proposal. That's okay. Um, contracts for me are never about getting paid contracts

04:11:00
for me are never about like, the only thing I'm really worried about in a contract is indemnification. So meaning that like if their website causes them to lose orders, they have a harder time suing me. And a lot of people are like, no one's gonna sue over a thousand dollar website. I don't believe that. It's there to protect you. And it's also there to say what happens when things go wrong. And so for me, a lot of people are like, well, if it's a thousand dollars, they're not gonna sue you. They can. Small claims court in a lot of States is up to 5,000. And so it even works the other way too. Like if for some reason they stiff you on the last payment or something like that, you can very easily file in small claims court. And if you have a contract in place, the judge almost automatically like gives you the default judgment. And without that contract in place, if they sue you in small claims, then you pretty much automatically lose. And so for me, I like to have a contract in place. It has nothing to do with getting paid on time because

04:12:00
that's that's based on like me taking a deposit, not doing work without deposit. that it's really just there so that when things go south, we already know what to do and that indemnification clause is in place so that if they do take me to small claims, the judge will look and be like, well, you signed an indemnification clause and that's it. So for me, that's kind of my thoughts on it. And that's why I still use contracts for sure, is I want that indemnification at the end of the day, but I definitely get their point of saying, if you're working with smaller clients, You don't really need super in-depth contracts. There's even somebody that I know that's an angel investor that does like $100,000 deals and doesn't use contracts, just an email. And that kind of works out the same way. It's just a personal thing for me at the end of the day, where I feel like I like that comfort of knowing that if I do go to court, at least it's there. It's better than not being there to me. And I don't lose clients

04:13:00
in the contract phase. A contract really doesn't scare my clients because my contracts are always like in plain English and I'm the one walking them through it so that they don't, I don't really, I look at my freelancing numbers and I never lose folks. I never lose folks in that part of the process. So for me, it's worth it. I don't have any downside but I have potentially a lot of upside and then of course I'm not a lawyer so all of this is just the ramblings of someone that's been there before Judge Judy always rules based on contracts if there are any exactly and a lot of judges the same way you'll go to small claims the judge will read the contract and go oh well it says right here what happens done and you just move on yeah so it's up to you I get where they're coming from, I'm a little bit different and I've been through the ringer a few times, so I like to have it.

04:14:00
Let's do one more, then we're gonna jump into more CSS goodness. For those of us that are unable to freelance due to conflicts with work, restrictions, religious or other reasons, What are our alternatives to meet the requirements? I will talk more about the alternatives like in actual class times. I know we don't have everyone here for office hours but the alternatives are contributing to a free software or open source project where you will join one of those projects. You'll see an open ticket. You'll contribute to that ticket. And then that counts also volunteering counts. And for me, volunteering is almost exactly the same process Except you just don't get paid at the end. You still have a proposal. You still have a contract You still have all that stuff, right? You still have all that stuff and So yeah volunteering or free software is

04:15:00
the way around it if you're not able to Yeah, but you get so much out of having a paid client that don't like don't just be like Oh, I don't want to do it and try doing something else It really is such a huge win to have a paid client on your resume because it really does help blow away the stink The the open source free software projects and the volunteering does help but paid clients are definitely the best Yeah, cool, alright folks, let's move on here We got some more CSS to look at and then we're gonna do some layouts and then we're gonna get to JavaScript eventually We're on what? We're going into our, it's our fifth hour. Alrighty. Oh, this is our fourth hour going into five. Yeah. All right. IDs and classes. IDs are used for targeting

04:16:00
one element and only one element. The beautiful thing is we saw with our selectors, with our regular kind of just element selectors, we can target a lot of the elements at one time. But when we wanna get specific and target only one element and only one element at a time, we can use IDs. So here on this paragraph, you can see the very first kind of attribute value pair that we've actually really seen. We saw, no, that's not true. We saw source and alt on our images, but here is an attribute of ID and its value of zebra, right? And so what we're doing here is we are saying I want to target this element and only this element when you use an ID. IDs can only be used once per page. So since I've given this paragraph the ID of zebra, this paragraph cannot get another ID and I cannot use zebra anywhere else

04:17:00
on my HTML document. That makes it so when I come down here and I write my selector Octothorpe Zebra, that's how I target the ID, it means I'm only ever gonna target this paragraph and there's no chance to target anything else, right? So when you want to target one specific, right? Right? One specific thing, that's when you use the ID. Now, when I'm styling with HTML, sorry, when I'm styling with my CSS, I don't really use IDs that much. IDs become a lot more beneficial to me when I get to JavaScript, and I'm trying to attach like event listeners to one element, like just click that thing. That's when IDs come back for me. But when I'm styling, I typically stop at classes. Classes can be reused. each element can have multiple classes. So right here, you can see this paragraph has

04:18:00
the class of Bob. It could also have the class of dominoes, could also have the class of rubber ducky. So each element can have multiple classes. And the beautiful thing is you can reuse those classes across elements. So you can see that both of these have the class of Bob. So both of them would be colored red, right? So the idea here is I can put these classes on any element that I want and target all of those elements at the same time. Beautiful. So IDs target one element. Classes can target as many elements as you want. And we can reuse that class across multiple elements. The other thing you'll notice is that an element can also have an ID and then have a whole string of classes if it wants as well. Alrighty. When we're talking about these elements, something we have to remember is

04:19:00
that as we are writing out our CSS, we notice that we started everything here, we started everything here, making all of our H2s red. Then in the cascade, as we went further down, we made some of them blue and then one of them purple. I was able to override the red to be blue and purple because the selectors further down had the same or greater specificity, right? The same or greater specificity. If I do not have the same or greater specificity, I cannot override stuff as I go down the cascade. So what the heck does specificity mean? What it means is that there's actually a point value assigned to each thing in our selector. Right? So if we go back and look,

04:20:00
we're gonna give tags. Oh, I always hit end sometimes by accident. Look at all the stuff we've done so far. We should be proud of ourselves. Look at all this. That's wild. All right, we're gonna go ahead and give tags one point. We're gonna give classes 10 points, IDs 100, and other, which we'll see in a second, a thousand points of specificity, right? So if we look at this selector, how many points of specificity does this rule have? How many points of specificity does this rule have? Good job. Chat. People are saying 110. Let's take a look at it. There are no tags here, but there is one class. We can see the dot. That's how we know it's a class. So we have zero tags. We

04:21:00
have one class and we have one ID. This has 110 points of specificity. That means if I ever wanted to override this color in the cascade with like a rule that came below it, I would need at least 110 points of specificity or else I could not override, right? So if we go back and we look, how many points of specificity does this selector have here? Yeah, that's one point of specificity, exactly. So if I want to override this color red, how many points of specificity do I need? I would need at least one or more. So it's always the same or more, right? So here, how many points do I have here? How many points of specificity?

04:22:00
Two, exactly. So since this is two, that's one or more points of specificity. So I'm able to override the red because of the specificity I have online for same thing here How many points of specificity do I have here on line seven? I have three right of h2 an article in the section. That's three points three tags or Three points of specificity. It's just I have three points specificity. That is way more than enough to to override the red color that's in this H2. So that's where the specificity comes into play. If I was to do something wild like this, let's say I gave, let's go back to, let's go ahead and then all of our H2s, on all of our H2s, I'm gonna give them a class of

04:23:00
make red, right? So all of my H2s now have this class of make red, make red, make red, make red, make red. If I was to come back to my CSS and say, make red instead of H2, let's see what happens. Let me refresh. Beautiful. They're all red. They're all red. This H2 no longer becomes blue. This H2 no longer becomes purple. Why? Why? Specificity, exactly. How many points of specificity is make red?

04:24:00
10 points of specificity. So is there a way for two points to override 10? No. Is there a way for three points to override 10? No. So since this is more specific, these two rules cannot override in the cascade. They do not have the same or greater specificity. That's where this comes into play. We need to have the same or greater specificity if we want to use the cascade. Beautiful. We change it back, you get all this stuff we had going back as well. All right, let's take a look at this one. How many points of specificity does this rule have?

04:25:00
Yep. 121. Let's see. Let's see. People are saying 121. Let's take a look. All right. How many tags do we have? Well, we have one tag here, the paragraph. So one, how many How many classes do we have? We have one, two classes, so two classes. And we have one ID. This has 121 points of specificity. Beautiful. Are points a literal measure of override? Meaning if I had 11 tags long, would it override the class? Yes, if you had 10 actual elements, Sorry, 10 or more actual elements you could override a class in the cascade. So that's important to keep in mind,

04:26:00
right? You could have 10 tags to override a class, 10 classes to override an ID, and 10 IDs to override an other. Cool, beautiful, so 121. When two classes are connected, like Domino's Bob, what does it mean? It means that they're on the same element. So if we look, Domino's and Bob, there's no space here. So it's not like a parent-child relationship. You're saying, find me a paragraph that has the class of Domino's pizza and has the class of Bob. And if we look, here we go. We have a paragraph that has the class of Domino's pizza and the class of Bob. So no space means that you're finding something that has all of that stuff. a paragraph and both of those classes. So you're trying to find a paragraph that has both of those classes that is inside of something that has the idea of Diet Coke.

04:27:00
And so here's the idea of Diet Coke. So this paragraph is inside this section, so it works. Does class ordering matter? Not really, no. All righty, let's keep pushing. How many points of specificity does this rule have here? 1200. All right, let's take a look. How many tags do we have? Zero. How many classes do we have? Zero.

04:28:00
How many IDs do we have? Two. So if you said 200, you got got, because there's also this bang important, which is worth 1000. So this is 1200 points of specificity. So I'm not getting got today, not today. Not today, Leon, I said Ta-da! Cool. So 1,000 plus 200, so 1,200 points of specificity. Now, we have this other here. So bang important is for other, and we would throw in that bang important because it makes this super specific. So there's really only one time I actually advocate using bang important, and that is when your client project is due in an hour and you can't get some specific CSS to work. So you just throw bang important on it to get it to work and you'll fix

04:29:00
it after the client meeting. That's the only time I would ever say use bang important is because it overrides the cascade so much that you'll never be able to create styles that override it. And so a lot of times if people are using bang important, you're sitting there like banging your head against the keyboard trying to figure out like why your CSS is not working, why the cascade is not working. And it's because the rule is too specific, right? And since it's too specific, it just, you just can't override it, right? There's one other really thing that we've talked about today that gives you this a thousand points of specificity. What's the other thing that has that a thousand points of specificity? Yeah, inline style. So like putting style inline with your HTML, that's also a bang important, yeah.

04:30:00
Cool. Let's get some specificity practice in. So we have a specificity practice inside of our code here. So if you look for specificity practice, that's the one we're gonna work on. Specificity practice, there's HTML and CSS. And if you open up the CSS, there are some things that I want you to do. Make only Rhino and Zebra blue, make only Hufflepuff gold, please select duck with the highest level of specificity And then rhino with the highest level of specificity possible. Let's go ahead and put Four minutes on the clock here Try and go as much as you can into it and then we're going to go over it together So four minutes on the clock here. This is specificity practice In the super review

04:31:00
folder if you're new All the materials are on discord and our follow along materials channel exclamation point discord here in chat agree to the rules You'll see the following materials channel download it unzip it open it in vs code Alrighty I've had it Remember we'll always have the solutions on discord after class. So if things are taking a while, that's okay I think we're on class 18 now. Yeah class 18

04:32:00
But like four of those were like networking type classes. So really like 14 classes Do I use BEM? I don't personally know. I have in the past. Thank you, Bandit. Appreciate you. There's so many subs and primes today. Thank you everybody. I really appreciate it. Ellen tour boy VR panic rent, you know sound It's a carms Ovar, you know sound that damn coconut Mezro blue with the money gifted sub say it's wild Snake from State Farm. That's hilarious And funny a funny with the 17 most funny that's wild thank you for the 17 months that's huge

04:33:00
I've been this happy about Sunday school in a mad minute me too What happens with the group projects? I'm not sure what you mean, Wolven. Have I seen the Obi-Wan Kenobi trailer? No. What? When did that come out? Leon, everyone I ask usually hates CSS, but I love it. Understand it. Would you advise me to look more in the UX UI side of things? UI, maybe not UX. If you want to still be an engineer. Yeah. But front end, sure. People enjoy it. It's up to you.

04:34:00
Uh, favorite DBZ character, Krillin. It looks good. I'll watch the trailer after, after class. Well, hey, good morning, welcome. You want is the stuff that you like seeing click on like the actual buttons and stuff user experience is like how individuals move through your content and how they experience That's it. All right, folks, a few seconds left.

04:35:00
Good to hear Grady, thank you for being here. All right, folks, come on back. Let's go through this together. You just use Google Calendar plan out your weeks. I use Google calendar to plan out my day to the hour every day. It's not on my Google calendar. I don't do it At one point it was so bad I was scheduling my bathroom breaks on Google calendar Yeah, I have I have executive functioning issues That go along with my attention issues And so I I need something that tells me where to be how to be what to be and how to do it And I need that at all times or else I just don't do stuff Um, so I will, I will literally, I will literally read, read Wikipedia for

04:36:00
10 hours straight, uh, if I don't have something that tells me to go do something. So my Google calendar is set up like by the hour and I get a little chime that tells me to do the next thing and then I, I do it and I never don't do it. And so that's, that's what works for me. Uh, and if I didn't have that, I just won't do stuff. I'll just, whatever my brain is on at that moment is the only thing that that'll happen. All right, please make only Rhino and Zebra blue. Let's take a look at Rhino and Zebra. All right, so Rhino and Zebra both have IDs. So we could use two IDs here, but they also have the class of Africa and four legs. So let's use that class of four legs. or legs and We're gonna make them blue. So we'll do color

04:37:00
blue I Saved it. You can see I don't have that blue circle. So, you know, I saved and then let's open this in the browser Beautiful Rhino and zebra are blue Please make only Hufflepuff gold Let's see Okay, so we have best house as the ID, Harry Potter, Triwizard Champ, Badger. So I could use all these classes, but if I only ever want Hufflepuff to be gold, then I would want it to use the ID of best house. So I'm just gonna use the ID of best house here. Best house, and we'll do color, gold, sure it works. Beautiful. Cool.

04:38:00
All right, so I think we got those two. And there are many different ways that we could have made that blue. There are other things we could have done to make it gold, right? We could have used the classes. We could have just used the ID. It's up to you. Why didn't you use the IDs for the first one? Because that would have been more work. We would have had to have done two IDs. We would have had to have done the ID of rhino and the ID of zebra. We could have done it, right? We could have done ID rhino and ID zebra. Whenever you have the comma, it means target both of these elements at the same time, but that's a little bit more work. So I just did the class of four legs. If we did the class of top, we could have done that too because color would inherit. But if you wanted to be actually like, actually targeting the H2, we would have done like dot top space H2 to target both of these H2s. Now, so for me, this four legs or Africa

04:39:00
probably would have been the shortest one to use. Top works, but only because of inheritance. All righty, please select duck with the highest level of specificity possible. Please select duck with the highest level of specificity possible. So let's go and take a look at duck. All right, here's duck. Duck has two classes, likes to quack and fight 10 or 100. So I'm going to take both of these first and let's start there. And we know it's an H2. I'm gonna do h2 likes to quack fight ten or a hundred no spaces because it is an h2 that has both of those classes So let's start there h2 Likes the quack and then the fight 110 that's that's the start right and then all right. What's what's next after the h2? The h2 is inside of an article that also

04:40:00
has the class are ducks dinosaurs Let's go ahead and copy that Class our ducks dinosaurs true. So let's go ahead and do article dot our ducks dinosaurs space right because this h2 is Inside of the article so we need that parent-child relationship Which is controlled by the space the h2 that is inside the article beautiful All right. This article has a sibling that is the section with the class of middle so let's do that. Section, the class of middle, and it's a sibling. Remember, this is like super, super overkill. You would never ever do this. It's just a fun exercise to see if you can get as specific as possible. All right, so that article, that article was the sibling to this section, and this section has a sibling with

04:41:00
the class of top. Why do I keep going that way? Here There we go. So let's go ahead and do another sibling here, section with the class of top. And then that section has a sibling, which is the H1 with the ID of high. So high H1. So H1, high, it's still a sibling. and then this H1 is inside the body, and the body is the sibling of the head, and the head is inside the HTML. So let's do body, and then we'll do head plus body, and then all of this is inside of the HTML element. This is just being wild, right? and let's just make this color

04:42:00
purple just to make sure it works. Let's open it. All right, it works. We can see duck went to purple. So I think this has the most specificity. If we go back and look, the H2 with both the classes, inside the article with the class, that's the sibling of the section with the class of middle, there's a sibling of the section with the class of top, there's a sibling with the H1 with the ID of high, That's inside the body which is a sibling to the head which is inside the HTML element and then yes I need one more thing. Thank you chat Bang important Second try Code version of spirit bomb I just did my

04:43:00
dance. So that is, I think the most specificity we could have on duck and then Ryan was kind of the same game. So I'll leave that for you to figure out, but that guy, I think it was pretty fun already. Let's keep it moving. We've actually done this last one in class. So if you need it, you can go back to that class, but I think we got enough from that one. Alrighty, next thing we have is the box model, box model. We're going to take a look at the box model. We'll do some box model practice and then we'll take a break and we'll do a longer break for this one. I think we'll do 10 minutes for this next break. Just cause we've been going for five hours and I want folks to be able to have a little bit longer of a break, grab some food, walk their dogs and what you gotta do. So we'll cover

04:44:00
the box model and then we'll do a little bit longer of a break. Cool. And then we'll get the floats. Then after floats, we still got all and Flexbox and then we got a bunch of JavaScript to do. And we also got media queries. So we got floats, media queries, and then we get the JavaScript. So it's gonna be a long day folks. You gotta walk a goldfish, exactly. All right. So every element in web development is a what? Everything when it comes to HTML and CSS, every single element is a what? Every single thing is a box, exactly. Everything is a box. And to calculate the width of that box, you include the width of the element, you include its padding on both sides and you include its border on both sides. That's how you calculate the width of an element. It's the same thing for the height. You take the height of that element, you take its padding on

04:45:00
the top and bottom, and then you take its border on the top or bottom. Now the margin can come in and push this box model around. I don't technically keep it as part of the box model. I see it more as the bully that pushes the box model around. Cool. So let's go ahead and draw out the box model. One second, I pull up the whiteboard. Some folks like to have some shenanigans. All right. So let's draw out our box here. So let's start off with the actual, let's say we have a section, right? So we have a section and we're

04:46:00
gonna give it a height of 100 pixels and a width of 100 pixels. So we would actually see that draw out. Here is our section with a height and width of 100 pixels. Now, we wouldn't actually be able to see this box at first, right? Wouldn't be able to see this, I love all the nonspam. For folks that are new here, my mom is the queen of finding free stuff to do. I always had something to do every weekend and for a long time, my mom would drop me off with these nuns every Saturday for a free arts program. And so my art should be way better than it is basically because I took free art classes for years with the nuns. And so don't blame me, blame the nuns if my art isn't pretty. All right, cool. So we have our section, we have a height and a width of a hundred pixels. We wouldn't actually be able to see it because there's no like border or anything here, but if I was to ask you how

04:47:00
wide this element is, how wide is this element, chat? How wide is it at the moment? 100 pixels, nice. Let's go ahead and add some border. Let's add some border. Let's add our border as, sorry, let's add some padding. Let's add our padding as a green. And let's add a padding of 20 pixels on all sides. So this would add a padding on all sides. So we could do padding on all sides. And if I add padding on all sides, how wide is our element now? Yeah, it's 140 pixels wide, exactly. Because we have 100

04:48:00
pixels for the width, we have 20 on the left and 20 on the right. So that means we have something that is 840 pixels wide. Let's go ahead and add some border and that border, we're gonna make, let's say five pixels wide. So border pixels, solid red, beautiful. So that means I'm gonna have five pixels of border on each side. And so how wide is our element now? Yeah, 150 pixels wide. because we have 100 pixels in the middle, 20 on each side for padding, that's 140 already, 145,

04:49:00
150 pixels wide. Now, this is important because let's say we had a, let's say we had a, let's do a different color here. Let's say we had a 200 pixel container, right? We're at 200 pixel container. How many of our sections could we fit inside of that? 200 pixel container Yeah One Exactly, yeah, only one because we only have, we only have room for 150 pixels. If we put

04:50:00
two of these, that'd be 300 pixels. That would be 300 pixels, right? 300 pixels inside of a 200 pixel container, it can't work. And so we would see it break to a new line. So it's important to understand how the box model works because without it, we don't know how much stuff we can sit next to each other, right? And so we would need to be able to put these two elements next to each other if we wanted to. So if let's say this container was 300 pixels wide, then we'd be able to fit two of them next to each other, right, be able to fit two of them next to each other. But right now, if it's a 200 pixel, we only get one. So it's important to understand this box model, right? Because if we don't know the widths, we don't know how to sit stuff next to each other. Exactly, Demi, then MJ said, this is where I messed up with my nabs, not paying attention to the list of everything. This can get into trouble, especially with things like navigation. If you don't know how much stuff each thing is taking up in terms of space,

04:51:00
especially if you're not using things like Flexbox. So we understand the box model. Let's take a look at some practice with the box model. One second. All right, so for our box model, we drawed it out. Let's go ahead and code it out. So there is a box model practice, box model practice. And so we open up that box model practice. I'm going to close everything else out. So in the box model practice, there are some things that you have here. Here we go. Actually, I think the stuff that's in the CSS is wrong. So in the box model practice

04:52:00
is not the stuff that's in the CSS file. it's actually stuff that's in the HTML file. So in the HTML file, there's some things here that should be in the style.css. So in style.css, it should be different. I'll just copy it from the, copy it from the HTML and paste it into the CSS. And that's what you wanna work on. All right, go ahead. I'm going to put four minutes on the clock, go over it together, and then we'll take our extended break. So you can do what you got to do. I've had it for four minutes. You got this. If you're new, you need the materials, join our discord, exclamation point, discord, agree to the rules. There's a following materials channel with Ariel, the starter code that we're

04:53:00
doing today. So this is box model practice. You're doing what's in the HTML, make the H130 pixels, a little bit of padding, practicing your box model. You got this. You

04:54:00
What do you think about PHP? It's great. I mean, it's so much, so much of the web is built on PHP, WordPress, Laravel. I don't really get the PHP hate. I think it's definitely evolved more. And I think Laravel is kind of like industry standard. I wish Laravel existed for every language. Thanks, Felix. Laravel is like a web application framework. I guess you could call it that does a lot of the heavy lifting for building web applications like all the stuff that you need to handle like, I don't know, email, subscriptions, like all the stuff you would need to build a web application that like is not actual, just like the logic of the application, but all the other stuff that just modern apps

04:55:00
have Laravel handles for you. Hey, Civic doing good, thanks for stopping by. Minute 30 left, we'll finish this up together and we'll take a longer break. So it's like Rails Ruby, yeah, but even better. Blitz and Redwood, similar, yeah. It's super mature. Thoughts on Rust, it's pretty cool. One of these days I'm gonna sit down and try and learn it, get better at it.

04:56:00
I'm really interested in WebAssembly, And so like Rust, the WebAssembly is something that I'd be really interested in. Nick, once we get through full stack JavaScript, like once we get through the backend, yeah. Do you eat a snack during the breaks? Normally, I don't eat until the very end. Yeah, I'm weird like that. I also like typically only eat like really like one big meal a day All right, let's come on back come on back All right, let's take a look at these and we'll take our longer break

04:57:00
Yep, Civic, that's what I do. I do intermittent fasting. It helps my brain. Not just like for weight loss or anything like that. I think the research is a little mixed on that at the moment, but I definitely feel my brain functions better when I intermittently fast. Cool. Alrighty, please make the H1 30 pixels a little bit of padding on the left and a thin red border. Alright, so H1, I'm gonna select that. 30 pixels, so we can do font size. 30 pixels, beautiful. Little bit of padding on the left, so we can do padding, we can do padding left. and we can do just as little. So we'll do five pixels and then we'll do a thin red border. So border and

04:58:00
we'll keep it thin, one pixels, solid red, beautiful. Now we did padding left here. There's also something else that we can do that's pretty nifty, which is padding gets applied in a clockwise order. So top right, bottom left. So you could actually do something like this. where you could do zero on the top, zero on the right, zero on the bottom, and five pixels on the left. That would work exactly the same as doing padding left. So just a little trick to keep in mind, but I think this works. Let's save this up. Let's open this in the browser. Oop, I gotta click over here, open the browser. All right. None of our CSS is being applied here that I can see. So let's take a look.

04:59:00
Oh, cause I didn't comment the rest of this stuff out. I didn't comment any of these things out. So it's like, what the heck is going on in this CSS file? It's like freaking out, like doesn't know how to render the HTML that's inside the CSS. All right, here we go. Let's comment all these things out. Let's save and we should be good. There we go. Beautiful. So we got the little bit of padding on the left. We got the red border and we can always use the inspect tool to see it. So I can try it. So let's go ahead and inspect it. And let's go ahead and take a look. I'm gonna close this here. If you scroll down, You can actually see in the inspector you just right click inspect in the elements tab and you scroll down you can actually see all right Here's the actual element. Here's the padding and notice the five here That five that's letting us know that there's five pixels of padding And you

05:00:00
can actually see the little bit of green here for the padding when I hover over it We can see that the padding is there We can see that our border is one pixel on all sides and we can actually see the margin that's there, too Did we, did we write any margin? Where the heck did that come from? Where did the margin come from? Did we write any margin? Yeah, it's default from the browser, exactly. Default from the browser. All right. Please make the h2. Font size of 20 pixels. So we'll do font size 25 PX with padding on the top and bottom. So we'll use that padding trick that I just showed you padding. So top right, bottom left. So we'll do, um, how much does it want to talk? We'll say 10 pixels. And the other cool thing is we can do 10 pixels, zero. And what this will do, it'll, it'll repeat, right?

05:01:00
So it'll be do 10, zero, 10, zero. So we did 10 on the top, zero on the right, 10 on the bottom, zero on the left. I'm glad I remember all this Anki paying off. Exactly Spidey Dan, exactly. All right, that should handle our padding. Thick gold border. 10 pixels, solid gold and margin on the top and bottom. We can do the same thing that we did with the padding. It works for margin as well. We'll do 30 pixels, zero. So that'll give us 30 pixels on the top, zero on the right, 30 on the bottom and zero on the left. Cool, let's look at this. These make spans of a thin black border. Span, border, one pixel, solid black. We'll get through this and then we'll take our longer break. A little bit of padding.

05:02:00
Do five pixels on each side and we'll make the color blue. Beautiful. All right, Spans have a thin black border, a little padding, and they are blue. And this last one here, section have a width of 25%, 35%. A height of 200 pixels. Centered. How'd y'all center your section? Yeah, do margin zero auto, you can do text align. Oh, sorry, it's not text. So let's do margin, zero,

05:03:00
auto, and then thin border. We'll go ahead and do border, one pixel, solid, purple. Beautiful. Width, 25%, 200 pixels tall, margin, zero, auto. What that's saying, it's saying put zero on the top and bottom and automatically figure it out on the left and right. Beautiful. I think all this looks good. Let's see how it looks in the browser. Oh yeah. Look at us go. Nice and centered. Got the borders going. Everything looks good to me. I got everything going here. Beautiful. All right. I think we got it. I'll leave this up for a second so folks can see. I know we went through that one a little fast. Alrighty. Let's go ahead and

05:04:00
put a longer timer on here. We're gonna go, I think, for 10 minutes. So that should give you a little bit more time to grab some water, hydrate, kiss some babies, do what you gotta do. Then we'll be back in 10. When we come back in 10 minutes, we are going to move into layout. So we'll look at some layouts, we'll do some floats, we'll do some flexbox, and then we'll do some responsiveness with media queries, and then we'll be ready to gear up for some JavaScript. So 10 minutes on the timer, we come back, we're doing layouts. Well, actually we'll look at our starter template first and then we'll do layout. So we'll put 10 minutes on the clock here. Alright, have some fun, see you in a few minutes, if you don't get got we go get, even 5

05:05:00
hours deep on a Sunday. Let's go.

05:06:00
You

05:07:00
You

05:08:00
you You

05:09:00
You

05:10:00
You

05:11:00
You You

05:12:00
You You

05:13:00
You You

05:14:00
You You

05:15:00
You're I came for the replay and it's going live. That's what we do. We ain't outside We inside but we online that's what I'm talking about. We online Let's go turn up Beast sweatshirt is so apparent. I'll take it. Let's go beast mode This is a grandmaster Maurice Ashley chess grandmaster their merch All right, folks, welcome back, welcome back. What's one of the, what's the longest stream you ever did?

05:16:00
One of our reviews went nine hours. I want to say there was an 11 hour one too, I can't remember if that 11 or 12 was broken up into two. I know we definitely did a nine. Where's a hundred dozen merch coming soon, coming soon, folks. We've been sharing some pretty good mock-ups on Twitter. It's been pretty cool to see. There's the one that used like the hundred emoji with devs. I was fire. Can you have a full website while giving it a height? Yeah, you can because height comes from one of two ways. either comes from the elements inside of the content or from giving it a height. So you can get height from just the stuff that's inside of your container, right? So if a lot of texts and things like that, that could give it height just as much as setting a fixed height could be. Who does the thumbnails for YouTube now? I do.

05:17:00
I'm just putting some placeholders for now, figure out how to make them better in the future, but I just been having fun with it. No worries, Miracle, no worries. All right, let's get through some questions in the Slido, and then I will jump back into the starter template and some layout. All right. Can we do a review of the responsive stuff? Yep, that's coming up. Ms and all that fun stuff coming up. For those of us playing catch up, Will there be any way to watch the office hour videos? Yeah, they're they're only on Twitch and they're only on there for 60 days. It's one of the perks of paying of doing the boot camp live. There's very few things that separate the YouTube following along experience from the live experience. And one of them is office hours. So I really do like to encourage folks to participate

05:18:00
in the community, to show up even just for office hours. And so even if you're part of the ketchup crew, There's no reason why you can't come to office hours. A lot of times just answering questions Most of the time it's not even like technical stuff. It's just about how to get jobs how to freelance things like that And so yeah, don't don't feel like you don't feel like you have to skip office hours If you're still in the ketchup crew, in fact office hours is probably more for you than everyone so yeah office hours, we don't really put them on YouTube just because Um, YouTube really doesn't like them because the, the, like the watch time is typically lower and so then it tanks like everyone finding the other videos. It's weird. YouTube is weird. I don't really get the algorithm behind YouTube, but if I put too much stuff that people don't watch, then our videos don't get shown to anyone, which is weird. Um, so it's a game that we play, but also I really do like it as an incentive to follow along live. So maybe one day we'll do like an unlisted. I have them all. So maybe we'll do like an unlisted

05:19:00
YouTube playlist, but for now it's an incentive to show up. The projects listed in our portfolios, do employers drill down to make sure the website projects are real companies? No. 99% of the time they won't ask, the 1% of the time you just chalk that up to an L and keep moving. But yeah, 99% of the time they don't care. I like Blah's answer, no, laugh out loud. They don't care. Yeah, nobody cares. You got to realize that your portfolio is just to get into the first step. No one's hiring you based off of your portfolio. All this stuff is just to make you pass a sniff test that means that you're worthy enough in their eyes, which is a shitty thing to say, to interview. And so all this is just to pass that first sniff test and get you into the interview where your

05:20:00
technical skills or your behavioral skills shine through to get you the job. I still don't understand arrow functions. We haven't covered arrow functions in class yet. We'll get there. Can we get a week or two off to get ourselves in order? It'd be helpful for us with men mentally, family stuff and beyond our control. I want to go to distance breathing room. So that's what this week was for. This week was to give folks a little bit more time to catch up and to not have new class. So that's what this week was for. we'll do another week like this in the future where it's mainly just networking. So that's what this week was for. And we'll probably have another one soon. Once we get a little bit further through JavaScript, we'll take like another week similar between this and backend.

05:21:00
Are we gonna be covering APIs in this course? Absolutely, yeah. Pretty close to APIs too, like in two weeks or so. Maybe less. For homework, what do we need to do in Code Academy? Is it one through six or sections one through six overall? The JS one through six, like all the JavaScript stuff. What are real world practical uses for loops? Whenever you need to do the same thing over and over again is when you use a loop. Counting, use a loop. Doing certain things X number of times you use a loop. So like, let's say you want to show something to a user multiple times, you would use a loop, but we'll get into more loops and stuff later on. When we get to, when we get to objects and we're getting like data back from, from like an API, like, let's say we wanted,

05:22:00
let's say we could ask Domino's for all of my orders, right? And Domino's gives me back like 10,000 orders. I want to be able to show all those orders to you as the user of my new dominoes website And what i'll do is i'll loop through all the orders to put the stuff into the dom for you to see All right, so you would see This day I ordered that this data ordered that this day order that so i would use a loop To loop through and show you all of my order history Yeah Sometimes these songs bop, I love them, alright, getting that second wave energy so let's lean into it, alrighty, so we have the starter template, let's take a look at the starter Template together.

05:23:00
Well, thank you for the hydration. Cheers to you Thank you nice, okay, let's look at the starter template it was in the materials for today So we had this template and In the template are a few things. I like to point out just that they're there This template is what I recommend folks just kind of start with for any of the projects that we do kind of going forward that are HTML, CSS, and JavaScript related. So in the template, there are some goodies that we've covered. The big thing here that I want to talk about is that there's this normalize link here. And if we look inside the CSS folder, right? If we look in the CSS folder, there's the reset and normalize. Arnold, all the materials are on our Discord, exclamation point discord agreed to the rules and then the following materials channel. You'll see everything that you need. So

05:24:00
when you are kind of making that big decision is to, this is probably one of the first big decisions as a front end developer, right? You will need to determine whether or not you're going to use normalize, reset or skip them both, right? And so what happens is we saw a lot today, this default styling coming from the browser, right? We saw that the H1 was big, bold, black, and beautiful, much like myself. We saw some margin coming in. And so all of this default styling is just coming from the browser. And the wild thing is that each browser might be slightly different. And so what normalized does is it says, you know what? I like those default stylings, but I want them to be the same across every browser. And so what normalized does is it really does just normalize all of those default stylings across every browser. The other option that a lot of people will use is something called reset. And reset scorches the

05:25:00
earth. It gets rid of all of the default styling. Everything goes back to zero. Your spans look just like your H1s and you build up from scratch. So it's up to you. I've been in the HTML and CSS game for too long. I'm too used to the default styling. So I use normalize just to make sure it's consistent, but a lot of my students, they typically prefer a reset just because they don't have to think about it. They start from zero. It's up to you. And then we link to our normal style sheet. Instead of our normal style sheet, we got some of the hacks. Oh, this is old. I forgot to fix this. Get rid of this Moz prefix if you're using this template. The one I shared in our actual class had this fixed, but you don't want that Moz prefix. actually just want box sizing border box, which will help you later on today. We have our clear fix and our clear, it's kind of all the hacks that we've gone over in class so far are all in this template.

05:26:00
The box sizing border box comes into play when you're calculating width. Do you include padding and border in those width calculations or not? If you're using box sizing border box, you won't. So it's something to keep in mind. We'll see clear and clearfix in a minute. It's just a mistake, the Moz. I just forgot to pull it off. I used to, back in the day, you had to have vendor prefixes for all of them for box sizing, so that's like really old in there. The code I shared, I don't know why this one's older and has it, but the one from class doesn't have it. No. All right, so we looked at the template. Let's look at some layouts. Now, we've seen two different ways of doing layouts and we're gonna see them again today. At first, we're gonna talk about floats. Now, I am an oddball when it comes to teaching floats. I really like to teach floats because I think it forces you to become intimate with the

05:27:00
box model, to really understand how things come together in the browser. And even if you use Flexbox, you're gonna eventually get into things like Flexbasis, where you still have to know your percentages anyway. And so I like starting with floats. One of the most common things that I get from my students is Leon, thank you for helping me. Thank you for making me learn floats because they joined a company where their first job was to convert an old code base to a new one or they got a freelancing client that had old code and guess what? It's all floats. And guess what? Floats are way harder to learn than Flexbox. So I love floats. I love teaching floats and I want all my students to learn them Because guess what? You're going to run into them in the wild. And when you do think of me, all right, with floats, you're really doing one thing and one thing only. You're telling something to go up and to a corner. And so if I float something to

05:28:00
the left, like this aside, I'm telling you to go up as much as it can and to the left as much as it can, and what it winds up happening is that it winds up sticking in this corner, same thing. if I was to float something to the right, it would go up as much as it can go and to the right as much as it can go, trying to get into this corner. And the beautiful thing is that when you float stuff, the hack that winds up happening is since they're all trying to get into this corner, things wind up sitting next to each other, right? So if we had, let's say three boxes and we floated them, what they would all do would be try to get into that corner. So this box would come up as far as it could go and then to the left as far as it could go And then this box would go up as much as it can go and to the left as much as it can go So just by floating those boxes, they wind up sitting next to each other because they're all trying to get into that corner right

05:29:00
Beautiful All right, let's look at some simple layouts All right, let's look at some simple layouts. So we have everybody gangsta until Leon brings out the flows, exactly. So here's our first layout. We're looking at this layout. What type of HTML element would we use here? Header, how about this down here? How about these three? Sections nice. How about these two? Sections yeah. All right build it. Use your template build this layout.

05:30:00
Use floats, please use floats. We'll do it with flex in a second. So build this layout with floats. I want to put four minutes on the clock here and then we'll go over it together. If you're brand new, you've never used floats before, that's okay. Try writing out the HTML. Try writing out the HTML and then we'll go over it together. Four minutes on the clock and we're going to go over this layout together. You got this. At least get the HTML that we just talked through. Okay, Fox just did this homework earlier today. Hey, glad you did. Neko chats, they go both the same way. So both to the left or both to the right. I prefer going to the left so the order stays the same. You

05:31:00
Can we use classes? Sure, you can use classes. Will we touch on grid? Not today, but in the future. Once we learn JavaScript and we come back, we'll go deeper on Flexbox and we'll touch a little bit of grid. Yeah. I want us to learn enough JavaScript to do like dropdowns and hidden menus and all that fun stuff. And then we'll come back and build real sites with it. Some real layouts and we'll use Flex and we'll touch a little bit on grid. We won't go too deep into

05:32:00
it though. I come on case everything I don't care my bad. Yeah, right bad code. Xbox is more common, but folks use grid now to I forgot so much, adding so much to Anki today. Hey, I love to hear that. It's a great day to add to Anki. I want you to do the HTML and the CSS, but if you're new, just do the HTML. bell.

05:33:00
First try, nice. minute left minute left got this dig deep I Reese's bean it putter cup. Thank you for the prime. Well, thank you for the 13 months They are thank you for the three I Suffer what's good, baby? Whoo. Thank you for the three You're I see that's okay. That's

05:34:00
why we're here HPC We've got some dunzo's coming in. All right. Yeah Wasn't this 15 minutes of pain before it was look at you doing in four minutes today Used to be used to be 15 we did it in seven now we're doing it in four that's progress baby Rubo can't believe how much faster i'm doing this compared to the first time a turn up All right, let's go through this together I'm just going to use my template. We got our header footer and then five sections So let's go in here, go ahead and do our header, and then we're gonna have our sections. And we know that we need five

05:35:00
of these, so I'm just gonna copy and paste it four more times. Boom, boom, boom, boom, and then our footer, beautiful. All right, and the only other thing here that we need to realize is that these last two sections are different than these top three. So instead of doing like some wild relationship selector, I'll just give them a class and I'll give the class of bottom. There you go, cool. So now we have our header, our footer, our three sections and our two sections with the class of bottom, beautiful. All right, so we have our layout. So we could do something like this. We could do our header, give them a height of a hundred pixels. We could give them a border, one pixel solid black so we could see it. And then we could repeat the same thing down here with footer, right? We could read it the same thing with footer. But instead of doing that, I'm just gonna go ahead and put a comma and then footer.

05:36:00
And so what that does is it repeats the same styling on both the header and the footer. And this helps us stay more dry, exactly. Do not repeat yourself. And so this just helps us from not having to repeat ourselves. Let's save it and make sure we can see our header and footer on the page. Let's go ahead and open this in the browser. Wrong browser. All right, open in the browser, there we go. All right, we have our header and footer on the page. We're good, let's keep pushing. So now let's do our sections and let's just get all the sections on the page as well. Sections, and we know they're gonna have a height. Let's get a little different. and let's give them a height of like 200 pixels. Let's give them a width to start. And we know that width, if we're looking at the first like three, and we're looking at the slides, we know that they're gonna be at least what size? 33.3333% repeating of course, right? So we can just

05:37:00
make all the sections 33, and then we'll make these bottom two 50%. Let's go ahead and do width of 33.3333% repeating, of course. And let's just save this for now and see where we're at. Cool. We can't see them. We can see all the space they took up, but we can't see them because we didn't give them border. Let's go ahead and give them a border. Cool. Go back and refresh. There we go. We got one, two, three, four, five. We got our five sections here. We can see that they're all taking up 33% width, but they're not sitting next to each other, right? They're not sitting next to each other. How can I get them to sit next to each other the old school way? Yeah, float left.

05:38:00
Can you use the calc function? You can. Something newer in CSS where you don't have to do the calculation in your head. you can do calc and then divide it by three. We've got to float them left so they sit next to each other, beautiful. And now we have at least, we see the first three sitting next to each other. That looks good. The last two are sitting next to each other. We've got some weird stuff that's happening here, but we'll come back and handle that weird stuff later. These two are still sitting next to each other, but they're still not taking up the full width. So let's go ahead and change bottom to be a width of 50%. And the beautiful thing about bottom is that it still inherits all the other stuff from the sections, right? It still gets the height though the border to the float It's the only thing we're overriding in the cascade is the width. So if we save this and go back We can see that now the bottom two are taking up that 50% The top three

05:39:00
are sitting next to each other. Well, we got this weird thing that's happening here Let's inspect and see what's going on. Right click, inspect. And if we look at the sections, they look good. The sections all look in the right spot. As we come down and we get to the footer, we can see that the footer slid up. It slid up. And here's what's happening. Here are our sections sitting next to each other, right? and here is my footer. My footer right now is hitting the sections and doesn't go anywhere, right? But as soon as I float my sections, the footer goes zoop and slides up. Let's see that one more time. Here are the sections originally, footer is hitting them, it can't go up, but as soon as we float those sections and they go off the

05:40:00
page, the footer slides on up. So we can stop that footer from sliding up by clearing it. So if we go back and we go ahead and we put a clear on the footer, we say both and we come back, the footer is where it should be. Because what the footer just did, right? What the footer just did, instead of sliding under when we floated the content, because we floated all of these sections, we floated all of them off the page. So instead of sliding underneath, it looked to the left, it looked to the right, and it saw all the stuff that was floating and just stayed where it was at, right? It just stayed where it was that so instead of needing to slide under it look to the left It looked to the right and stayed where it was Beautiful

05:41:00
Questions about this one so far and that's the layout folks. That's the layout we got it, right? boom Boom, I'm happy with that. All right. Folks are asking about clear fix. Clear fix is a very specific thing. ClearFix is when your container collapses. So let's go ahead and set this up a little bit differently. Let's wrap these three sections in a main.

05:42:00
And let's wrap these two bottom sections in a section. that we'll call, we'll give it the class of, let's give it a different class. We'll give it like class of, we'll call it bottom, and we'll call these bottom sec. So that'll have the class of bottom, and these will be bottom sec, and I'm gonna change these to bottom sec as well, just so we're consistent. Beautiful. All right, so now we have main and we have a section with the class of bottom. So let's take a look at this. Let me take the float off the sections.

05:43:00
I take the float off the sections and we're gonna look at something. So I'm gonna come back here. I'm going to refresh. And if we look at main, look at all the space main is taking up. Look when I hover over our main, look at all that blue. That right now is the height of main. Look how big it is, look how tall it is. That is the height of main. But wait a minute, if we look at our CSS, do we give main any height? Chat, do we give main any height at all? Nope, there's no height here. Main doesn't have any height anywhere, right? And so if we look, there's no height on main. And so we're going to run into a problem. Main right now is getting its height based on the sections that are inside of it. Each of these have a height of 200 pixels. And so that's how main is getting its height right now.

05:44:00
Main is getting its height from the stuff that's inside of it. As soon as we float this content, look what happens. Let's float it. I'm gonna save, I'm gonna come back, I'm gonna refresh. Main is in shambles. Do you even see main anymore? Look, I'm hovering over main just like I did before. And if you can see, I know it's really tiny. It's gonna say like zero right there. Ready, hold on. It says zero. I floated that content. It says I floated the content, right? I floated it and main went boom it collapsed on itself. I floated the sections that were inside and main boom collapsed, right? It no longer has stuff inside of it that's supporting it, right? Before those sections were holding main open. But

05:45:00
now the sections are floating, it collapsed on itself. Now there's a couple ways to solve this. we could give Maine its own height, or we can use a hack, right? The reason why floats are so hard and why they're weird to use is because there's a lot of hacks that work around this stuff, which is why I like to teach it. Because if you don't actually learn these hacks, you're dead in the water when it comes to actually, like actually using this stuff and actually translating it to flex and all that fun stuff. So if we look, we have this class up here called Clearfix. And what ClearFix does is it puts a dot that is invisible, right, it puts a dot that is invisible after, right? It puts a dot that is invisible after. So if we go back to main, what we can do is we can give this a class

05:46:00
of ClearFix. and what it's going to do is if we refresh, we can see that main has height again. Because what happened is that there is now a little dot that is invisible. And instead of main collapsing, right? Instead of main collapsing, we wrap around that dot. Main is wrapping around that dot. And so it doesn't matter what's happening inside. Doesn't matter if it's floating. Doesn't matter what's going on. We've told it to wrap around that invisible dot so it retains its height. That's all ClearFix does, is it stops containers from collapsing, right? Stops containers from collapsing when you float stuff. That's all it is.

05:47:00
Robodom, thank you for the hydration. Cheers to you. That's it. So that's where Clearfix comes from. And so that's why floats give so much trouble because you have to learn all these weird hacks. You have to learn what Clearfix does, stops containers from collapsing, what? Clearing, stop stuff from floating past other stuff, what? And so you can do layout with floats. We have to learn all of those hacks. Beautiful. All right. We had a few more layouts here, but I think if you can do this layout, you can probably do these layouts, right? This is just one, two, three sections. You give one a class that makes it bigger. Same thing here. One, two, three sections, or maybe this is an aside if you had more content to go off of. And you're just changing the widths on these. So I think if you can do these, you can do these two layouts. And so if you're new you might come back

05:48:00
and try these and remember we've had a whole We have like two classes to get to this one layout. So if you're brand new Don't feel pressured that you have to understand how to do this layout right out the right out the gate Go back and watch our two classes on layout. Yeah. All right, so we did it with floats but now It's time to do a flex box All right, we did it, we did it, we did it with floats. Let's do a flexbox. Cool, let's take a peek. Let's go back. We have our header, footer, our sections. I'm gonna clean out this. I'm going to clean out all of this. Here we go. All right, so we got our header and footer, which are on here, right? They got a height, they got a border.

05:49:00
It looks fine and dandy. And then I want to do the layout that we just did. So what I'm going to do is I'm going to use Flex. And Flex works well when your stuff is in containers and our stuff is in containers. We have main and section class bottom. So what I'm gonna do is I am going to target main and section. I'm going to make sure they're both display display flex and then I'm gonna target all my sections and make sure that they are taking up one space each and they have a border. Let's try that. Let's go ahead and do main and bottom. And we're just going to say display flex. And then for, for all of my sections, I'm just going to target my sections and I'm going to say,

05:50:00
take up one space each and let's give you a border. So we can actually see it pixel solid black. All right, let's save it. Let's go back. Let's refresh. Oh, we didn't give them heights. We gotta give them heights too. My bad. Let's give them height. Height, 200 pixels. Save it. We go back. And boom, same layout, done. No floating, no percentages. We done did it. Let's take a peek. All right, so we have our two containers, main and bottom, right? So if we go back and look, thank you for the sound alert. We have main and bottom. We set both of those containers to be a flexible container. and

05:51:00
the way we did that is by setting display flex. And then the only other thing we had to do was tell our sections, because if we look, they're all sections, right? These three are sections, and these two are sections. The only thing we had to say to them is, hey, take up one space each, and we gave them the height and border. And once we did that, we wound up with the same layout, because these three sections each took up one space each, what's winds up being that 33%. And then these each took up one space each what's winds up being 50% because there was three of them in here and two of them in here. So it does all the stuff for you, right? You didn't have to calculate the percentages. You didn't have to do the floating or anything like that. It just it just does it and so that's why Folks are really jazzed about flexbox.

05:52:00
You can literally Change the game in like two seconds and get all of the layout done Now once you go deeper with flexbox, you're gonna see that there's some other really fun stuff You can do you can do things like space around you can do space between so all of these things that it would enable you to build out more custom layouts. You can do very, very quickly with Flexbox. If you have like all your elements in a nav and you want like space around each element, you would just say space around those elements and it just works without having to calculate percentages or any of that odd stuff. So that's the beauty of Flex and Flexbox. Flex one, somebody asked, it just tells it to take up one space each. So if we look, we have two of them here. So they're each going to take up one space which means 5050 here. We have three of them So that means thirty three point three three three three percent repeating, of course, right? And so it just means that take up one each and so it'll

05:53:00
do the math for you after that So that's the beauty of flexbox. Is that very quickly you can do layout. You don't to do floats or percentages There's less hackiness. You just have to learn some vocabulary to use it. Well, and so Part of the homework we did for flexbox was a couple things there is kind of like three big resources I recommend. One is the complete guide to Flexbox by CSS Tricks. And if you are new, that's all in the follow along materials channel. If you just go to, if you just like search for Flex in that channel, you'll see that recommendation. The complete guide to Flexbox by CSS Tricks. I recommend the Traversee media video on Flexbox. This is a quick overview. And then there are two games that I recommend and that really helps solidify it. And the games are really helpful here. I don't really always like games, but these ones are really helpful. One is Flexbox Froggy, and the other is Flexbox Zombies. If you go through those two tutorials and you do the two games,

05:54:00
you are squared away on needing Flexbox. And so definitely something I recommend, and they're fun, and you'll actually retain it all. Make sure you put it into your Anki. Flex is something that really has to be in your Anki or else you'll forget all the weird terms which you need to know. Grid, we haven't gotten to grid yet. When we come back with our JavaScript skills, we'll touch on a little bit of grid. And all that, of course, is on our Discord. But once again, it was the complete guide to Flexbox by CSS Tricks. Travesty Media, the GOAT, as a Flexbox video that I really like and then. Flexbox zombies and Flexbox froggy are the two the two games. Well, what would flex to do? It would take up two points to two

05:55:00
spaces instead of one. And so there's a couple of ways you can make your containers bigger or smaller. And one of them is something called flex basis. And so it's kind of like almost like using whiffs, but in a flexible container. So definitely can go deep with this stuff. Like I said, I wanted to show you a little bit, show you why people love it so much, but we'll come back and play more of Flex and a little bit of Grid once we learn our JavaScripts. Cool. So I would recommend for homework, if you had not already, try doing this layout with Flex, try doing this layout with Flex and try doing this layout with Flex. You will need Flex basis probably for like this one and this one because it's different sizes. Thank you, cloud, I got it. Alrighty, we're at the top of the hour. So I want to take our five minute break. We're going to do five minutes here. We did a 10 minute one before, but we'll do five now. When we come back from five

05:56:00
minutes, we are going to jump into responsiveness. We're going to look at things called Ms and Rems, and then we're going to make content decisions with media queries. So I will see you all in five minutes. Please, if you're able, get up, move around, hydrate, take care of yourself, and I'll see you all in five minutes. Dying arrows added two minutes to the timer. So we're going for seven minutes. Thank you, dying. I'm gonna run some ads so folks don't see them. I might run like six minutes of ads.

05:57:00
You

05:58:00
You

05:59:00
You

06:01:00
You you

06:02:00
It's impressive, but this is why Pomodoro is important. Exactly. You take your breaks, you can keep going. Cat is wreaking havoc. I got 45 seconds left.

06:03:00
Are we covering arrays and OOP today? Nah, nah, nah. That's because we'll do another review once we get to the end of JavaScript and we'll include arrays and OOP then. Layered cake there is, yep. You go back to our original layout class on YouTube, exclamation point YouTube. What font do you use? I think it's just the default, But I use a like a color scheme for folks that are colorblind Just to hopefully help a little bit on stream Already Oh six hours. Let's go. Come on back folks. Come on back

06:04:00
All right, it wouldn't let me run six minutes of ads. I was hoping that we could get like two in and then it wouldn't like run ads for folks for a while, but it got angry. So all right, it's just getting started y'all, exactly. Alrighty, let's get jumping to responsiveness. So, so far our sites have been what we call fixed width, meaning that no matter what we did, they kind of just stayed the same size. And back in the day, that's what a lot of sites were. They were fixed as opposed to responsive. So here is UPS's website all the way up to like 2017. So in 2017, this is still what their website looked like, where if you opened it up on a larger monitor, it still had all this white space, right? It still had all,

06:05:00
uh, still had all that white space, right? And so we didn't have to, like, that was just, that was just wild sauce, right? And so what happened is eventually the mobile explosion forced companies to really consider making their devices work great across all different kinds of devices. Boston.com is one of my favorite examples of this. Boston.com had a really bad static site. And then what they realized is that if I want eyeballs on my content, I need something that looks good across devices. So as the site gets smaller, so this would be like a tablet size, and then this would be kind of like mobile phone size. The site just looks great across all different sizes of screens. And this is really important because Boston

06:06:00
.com cares about ads. and for it to care about ads, right, it needs eyeballs. And to get eyeballs, they need you watching or reading this content when most people are gonna watch or read it. And for a lot of news websites, especially in metro areas, that's during your commute. And so if you're during your commute, that means you're gonna be on a phone, and if the site does not look good on a phone, then they're not gonna get the eyeballs which means they can't sell ads and it's a wrap. So they really invested pretty heavily in making their site look great across every device. So it looks good on tablet and even mobile phone and every space in between. And so that's the idea of responsiveness. Now, there are a couple of key things that enable a site to be responsive. One, a site is fluid,

06:07:00
meaning that it looks good even between all of what will eventually come known as our breakpoints. And the way a site looks fluid is either you're using a flexible grid or you are using percentages. And as your browser window resizes from larger to smaller or smaller to larger, it still looks good in between. And so if we look at our flexible site here that we use Flexbox on, even as it gets smaller, it still looks kind of good. And as it gets bigger, it still looks fine as well. And so that fluidity is one of the key things that we need to have in mind, right? That fluidity is what we need to have in mind when it comes to building out a responsive website. This fluidity is gonna help us in between our different device sizes. The second thing that we need is elasticity. And elasticity typically has to deal with fonts

06:08:00
or using responsive units of measure. And the responsive unit of measure we're gonna learn about are ems and rems. And so your fonts and then even some of your sizing could eventually be in rems and ems so that as we're responding to the page, as it's getting bigger or smaller, our text can respond as well. And then the last thing are content decisions. If our site is fluid and elastic, the last big thing that we have to figure out are content decisions. What should be here at this screen size, right? What should be here? What should that column still be there? So on desktop, we have all this real estate, right? But once we get to say tablet, this most popular probably can go away. It's a little bit extra. And then once we get to mobile phone, we run out of horizontal space. Right. We run out of horizontal space. We have a lot of vertical space. So everything going

06:09:00
to a singular column is a good idea. So these are content decisions. We pair fluidity, elasticity, and content decisions to make a responsive website. And the way we make our content decisions are with something called media queries. So let's take a peek at each of these step-by-step, and then we'll take a look at building a responsive site very briefly. So, fluidity we've already seen. If our sites are with some percentages or using flex, we're good. The fluidity is baked in. Ms and rems are where some folks tend to trip up, and so let's go ahead and take a look at this together. Now, let's say we had hundreds of lines. Let's say we had thousands of lines of CSS, right? Thousands of lines of CSS. And in these thousands of lines of CSS,

06:10:00
we had all of our font sizes in pixels, right? So we had thousands of lines of CSS and all of our font sizes are in pixels. You go to your client, and your client, or let's say your boss says, I love the site, but I want all the fonts to be double the size. I want all the fonts to be double the size. What would you have to do to fix all those font sizes and pixels across thousands of lines of CSS. You'd have to go and change each one individually. Exactly. You'd be control F-ing through all of your code, finding each one. Once you find them, you also have to do the math. All

06:11:00
right, 12 to 24, 15 to 30, 17 to what, right? And so like, you're gonna do all that math. However, if all of your fonts were in Ms, you could make one change and all your fonts would double. So if we look here, here I have my paragraph sized as an M, oops, sorry, sized as an M. And an M is a responsive unit of measure. An M will look at the parent's font size, right? It'll look at the parent's font size and that's what its basis for size will be. So this paragraph, what is its parent? Real quick in chat, this paragraph, its parent is what? It's the section, exactly. this parent,

06:12:00
the parent of this paragraph is this section. And so this section, right, this section right now has a font size of 20 pixels. So how large is this paragraph right now in terms of font size? What is the font size of this paragraph at the moment? Yeah, it's 20 pixels exactly and if I wanted to double the font size of this paragraph, what would I change? If I wanted this this paragraph to go from 20 pixels to 40 pixels, right, I could do two things. I could make it 2 M's, right, and now it's 40 pixels, or I can leave it at 1M and make this 40 pixels, right? The

06:13:00
M is tied to its parent's font size. So if I had all of my text in M's and I wanted everything to double in size, all I had to do is change this one line. And now all of my fonts that are sized in M's are now double the size. That's it. It's all you got to do. And so this M is really, really powerful because it enables us to not only to change all of our sizes very quickly, but we can get into some really nifty things, right? We can get into this idea of our font sizes being responsive. And what the heck do I mean by that? So to get to that, let me, let me, let me show you one thing that's a problem. Man,

06:14:00
thank you for the hydration. Cheers to you. Let me show you one thing that's a problem. When we use Ms, when we use Ms, right? When we use Ms, what happens is that the M always takes its size from the nearest container. Always takes it from the nearest container. So what's a problem that we could run into if we are using Ms in our code? And let's say we're working with other developers. What's a problem we could run into? Yeah, somebody else can come in and throw in a slightly different container. So this paragraph might get wrapped in an article. And if that article has a font size of

06:15:00
100 pixels, well, guess what? your M just went from being 20 to 100 pixels because this container changed, right? The container, it was originally in the section, but now it's in an article and they put a font size on that article. So all of your M's just messed up. It changed all of them, right? So this kept happening. And so they introduced what are called REMs. REM stand for root M. And so instead of having to like look to the parent to get the size So instead of looking at the section for its size or the article for its size It doesn't matter what size the containers have it's always going to look at the HTML element so whatever Font sizes on the HTML element. That is the only thing a REM will look at it it will never look anywhere else

06:16:00
for its font size. It'll always look at the HTML element. Now this is great because you get all the benefits of Ms, but nobody can come along and mess it all up for you. That's the beauty of REMS. Now, you're gonna notice something funky here. I'm saying 62.5% instead of having like a default font size, like a really easy font size to have here it would be like 10 pixels, right? That'd be really easy because one rem would be 10 pixels, two rems would be 20 pixels, three rems would be 30 pixels, right? That would be really easy to keep in mind. But I have this like 62.5%. Why the heck? Why the heck would I do that? How do we decide between when to use em and rem? It's a preference. I use rems all the time. Yeah, it's for accessibility.

06:17:00
And let me explain why. We got some folks that remember in chat here. The default font size for most browsers is 16 pixels. So if you do 16 times 62.5%, you wind up with 10 pixels. So some quick maths to give us 10 pixels. And the reason why I like to use the percentage here instead of hard coding 10 pixels is because some individuals that have maybe visibility concerns, they will actually change the default sizing of their browser. So they might double the sizing of all their fonts. They might make everything bigger so that they can see it more clearly. And if I hard code 10 pixels, well guess what? It gets rid of all of their defaults and forces everything to be 10 pixels.

06:18:00
But with the percent, I can grow or shrink to accommodate their default sizing and I can still get all the benefits of REMS. So REMS make it really easy to respond, not only for accessibility concerns, but also for us in our speed of development. One rem is whatever we set as the base font size, and we can use that throughout our code. So rems make it really easy to update all of your sizing at one go, right? I could double every rem by doubling this value. And it also helps when it comes to accessibility because we can take whatever that default browser sizing is and have rems be equivalent to that. Does reset mess this up? It can, but you're gonna still come back and put this font size.

06:19:00
Like, oh, I see why Leon uses normalize. Yep, it's one of my reasons. Alrighty. So that's ems and rems. Just one more time because I know folks get really hung up on ems and rems. If we wanted all of our paragraphs to be 10 pixels, we could of course come down here and say font size 10 pixels, right? We could make our paragraphs 10 pixels and it would work. Right? We just say 10 pixels, 10 pixels, 10 pixels. We have a thousand lines of code where we put all of our font sizes in pixels All right, they're all in pixels What up, Sammy? Yeah, we're still going They're all in pixels Right, but when it comes

06:20:00
time to double all the font sizes because our boss asked us to double the font sizing We'd have to go line by line and change 10 to 20 10 to 20 10 to 20 10 to 20. That's so wild However, if we were using REMS, we could just double this number and then this would go from 10 to 20, 10 to 20, right? So you get that ability to double. We also get the ability to whatever the user has set as their base font size, we can use that as a responsive unit of measure for all of our fonts. So not only are we, we're not hard coding anymore. If we were to say 10 pixels for this and somebody needs to see font at three times the size, right? If somebody says, you know what, in my browser, I want my fonts to be three times the size and you force it to be 10 pixels, well, guess what? They're going to see 10 pixels. They're not going

06:21:00
to see the 30 pixels that they want. So there's some accessibility concerns here and there's also like ease of development concerns here as well. Alrighty. Keep pushing here, folks. The last thing that we, the last thing that we still have is content decisions. Right? Well, most professional settings use REMS. Yeah, REMS or EMS, Rems, I think are, I mean, that's my preference for sure. I'll always use rems. I won't like switch between rems and ems. Ems give you more flexibility. You could have some containers that have a certain font size and other containers that have a different one. And so some folks do use ems because they want different areas of their site to have different base font sizes. And so you would use ems, but I like rems.

06:22:00
Cool. So, the last thing that comes in terms of responsiveness is content decisions, content decisions. Meaning that if we're looking at say the Boston website, the Boston website, they decide at a certain screen size to get rid of their column. column, right? That's a content decision. They said at this screen size, I don't want this anymore. They also said at this screen size, I don't want this content anymore. So when you're making a responsive website, you have your fluidity, which is size the percentages are a flexible container. You have your elasticity, which is using your sizing in Ms or Ms. And the last thing you have to figure out is content decisions. And

06:23:00
you make those content decisions by using what? How can we make these content decisions? How do we make content decisions? Yeah, we use media queries to make content decisions. And so media queries just enable us to show certain CSS at different screen sizes. So here's a very simple media query. We're saying at media all. All that means is you can think of, whenever you see these over here, just start counting them at zero. We'll explain what they mean in a second. So we're saying zero and a max width of 600 pixels. So between zero and 600 pixels in screen size or your viewport size, this rule will take effect. But this rule will not be in fact above 600 pixels. right and this all what this means is like when

06:24:00
When do these media queries take effect? You can have media queries that happen for across all your devices. You can have media queries for like printers, you can have media queries for a bunch of different things. And so if you ever like printed out something and it looked different stylistically, that was the media queries that play. Cool. Someone said, do you build mobile first and then add your media queries to get larger the other way around? It's two different schools of thought. Some people start mobile first because that's all your heavy hitting content and then they get bigger and as they get bigger They add their media queries. Some people take their design. They shrink it till it looks bad Write their media query shrink it again media query shrink it again media query That's the way I do I start big to small a lot of folks are in that mobile first camp I think it's great But if you're already working with a designer that's already thought through the mobile first design and it's giving you all like three different layouts like a tablet, desktop, and mobile, I just start big and work my way to small. It's up to you though, it's a preference.

06:25:00
All right. Let's look at a media query. Let's look at one of these together. I'm just gonna copy this one and we'll paste it into the code that we were working on most recently. So here is our layout that we did recently. At the end, I'm gonna come down here and put that media query. And instead of it being an H1, because we don't have any H1, I'm going to make the sections and I'm going to give them a background of blue. Beautiful. All right. So that should, between zero and 600 pixels, make our backgrounds blue. So let's save and see if we get that. All right, let's refresh. Boom, so you can see if you pay attention up here, I know it's really tiny, but as I'm dragging, you can actually see what width I am at.

06:26:00
So I'm at 570, 580, 590, and then right at 600, boom, it goes away, right? Over 600, all that style goes away. Below 600, boom, that rule is in play. above 600, below, above, below, above, below. And so the beauty here is you can set up your media queries so that between different sizes, certain rules take effect. And so what you can get really good at doing is saying, all right, not only can I make stylistic decisions, but I can also make content decisions. So maybe at 600, I don't want the bottom sections anymore. So I can do bottom and I could do something like display none, right? So if I come back here and I refresh and I go below 600,

06:27:00
you can see that those two bottom sections are completely gone. That's the content decision I just made there. Above 600, no color and the two bottoms are there. below 600, they're gone. Boom. And then you can keep going up too. We can then do, you can do, you can kind of cascade them if you want. You can also do like min and max. So we could do at media. Min width. It's a 601. And max width, we can say like 1024, which would be like most like desktops. And a lot of folks will even use ems and rems here, right? Ems and rems here as well as the pixel values.

06:28:00
You'll see that pretty commonly. You'll often see people not really using min, like they'll do all min or all max, just so you kind of have it cascading, which makes it a little bit easier. But we can just put something in here just so we can see it background. And let's just go ahead and do a color, color, red. Cool. Oh, I didn't actually do my, my rule. I didn't say what I was coloring red. I was looking at the one above. There we go. Let me make my section color red. Remember your rules go inside of the media query because here's the media query opening and closing. And this is the whole rule that I put in there. So don't forget that you have to put the rule inside of your curly braces. All right, so let's save this and see where we're at. All right, so we can see above 600,

06:29:00
we're red, below 600 we're blue and we made a content decision. If we go all the way past 1024, the red goes away. So we're able to show different colors, different sizes, we're able to make content decisions, we're able to stack, remove stuff, all using these media queries. And so a very common thing to do would to have at least kind of like three main groupings, something that looks really good on mobile, something that looks really good on tablet and something that looks really good on desktop. And then if your site is fluid and elastic, it still looks good in between, Those specific media queries as well. Alrighty. All right, we looked at a media query together and we kind of saw this already. We kind of already made this responsive. If I want it, if

06:30:00
I want it, right? But if I wanted to make these stack, right? Let's say they're floated, right? Let's say they're floated, let's say they're floated and I want them to stack below 768, which is like a tablet size. So below tablet, I want them to stack. What could I do in my media query? Yeah, at a certain media query, we get to say with 100% and they would stack because they would take up 100% of the page, right? So we could put a media query that was like between, like, I don't know, zero and 768, and then it would, with 100%, meaning that they would stack and that'd be a great content decision. Beautiful. All right. Flex direction

06:31:00
column, yeah, if we're doing flex, So it'd be cool to do it that way too. Cool. All right. That's kind of the quick overview of media queries. Like I said, we will, cause we're already six hours into it. So what we're going to do is once we learn more, once we learn more JavaScript, we're going to come back and we're going to build bigger layouts. So we'll see things like the, like we'll have some examples that are like kind of like the salon websites, right? where we'll come back, we'll use grid on those. We'll make sure they're fully responsive and they respond to JavaScript, meaning that like you click on things, dropdowns pop up, all that stuff. And so we'll come back and do those, but I want to get to JavaScript today. And so we'll save that for once we learn a bit more JavaScript, but hopefully this is enough review for the HTML and CSS. So you feel a little bit better. You got some review in, you got some new stuff in your Anki decks. And so I want to get into some lovely, lovely JavaScript.

06:32:00
Alrighty. Indifferent, hey, thank you for the five gifted subs. Hope you're doing well. Thank you for being here. Appreciate you. Alrighty. Okay, so let's cover the basics of programming and then I think we'll be at the top of the hour so we'll take a break and then we're gonna spend today covering the big four. We're gonna cover variables, functions, conditionals and loops. And we're gonna get some practice in with each of them, make sure we feel comfortable with them and then that's where we'll end today. Cool. How long will you be here? I don't know depends on how quickly we go through all this material so but this one I think it'll be a lot more be a lot more interactive We'll be doing more coding You know we've done a little bit

06:33:00
of coding But this this portion will kind of do some of the like to bring it on and bring it on again stuff Just to get our fingers on the keyboard more cool Alrighty Let's go ahead and do programming When it comes to programming, there's one really important rule and that is a computer will do what you tell it to do. Right? A computer will do what you tell it to do. So, what is a program? Well, a program is a set of instructions that you write to tell a computer what to do. Computers are really good at following instructions very very quickly and way faster than a normal human could follow them. So a program is simply a set of instructions that you follow, sorry, a set of instructions that you write to tell a computer what to do and then that makes programming the

06:34:00
act of writing those instructions in a language that the computer can understand. And this is really important because computers by default don't really understand JavaScript that JavaScript is more for us as humans to understand what we're talking about and the logic that is happening in the program but that JavaScript is then broken down into something that the computer can understand and when we get to node we're going to talk a lot more about that in detail like how it's broken down what's doing the breaking down But for now, all you have to really keep your mind on is that we are writing JavaScript, which is more human readable, but that is broken down into instructions that the computer can really understand. So what the heck do I mean by that, that the computer can actually understand? At a base level, a computer is comprised of a few parts. You have memory, so it can like store stuff and recall stuff

06:35:00
later on you have an arithmetic logic unit that enables it to do like basic programming like basic basic computation you have a program counter there are some like very basic things that make up a computer and underneath all of that are some very very fundamental concepts and so I want to spend a few seconds talking about those fundamental concepts building up to a larger idea as to what JavaScript might be really doing for us so that we don't have to actually be in the muck that I'm about to show right now. All right. Here is a light bulb. And right now this light bulb is not powered. Right? Not powered. If we go ahead and add a battery, now the light bulb is powered and it turns on. Right? Add a battery, there's enough juice going through it, the light bulb turns on.

06:36:00
Now let's add a little bit more complexity to this very very simple circuit. So I am going to have my battery still but what I'm going to do is I'm going to put a switch here and right now the circuit is open which means that it's not complete and the light bulb bulb is not on. As soon as I close this circuit. What happens? As soon as I close that circuit, what happens? Go ahead and chat. What do you think? As soon as I close that circuit, what happens? Yeah, it's on, right? Let there be light. Exactly. It is on and it gives enough juice, the power, the light bulb and the light bulb turns on. Okay, thank you for the hype train, appreciate that. All right, turns on. Now, the really nifty thing is I can represent this circuit, right?

06:37:00
I can represent this circuit as whether the switch is open or closed. And a very simple way of saying on or off, right? So if it is off, I'll say zero and the circuit is open. Or if it is closed and on, I'll say one. So at a very, very simple level, I can represent this circuit as either zero, meaning it is open or off, and one meaning on. So on and off at a very, very base level, zero and one. And once we agree to this, we can start to build up some very, very simple logic. Give me a little bit of creative freedom here on this one, if you're a code weenie, but let's show this. So here we have a circuit, battery still in the middle, but now I have two switches. How could I represent this circuit as it stands right now?

06:38:00
Yeah, we could represent it with zero, zero, right? Both of the circuits are open, both of them are off, And so we could represent this as zero, zero. I could also close both of them. And how could I represent this circuit with both of them on? Yeah, we could do one, one. Do one, one, beautiful. We could do one, one. And as soon as we get to one, one, where both of them are on, we could say this one is on blank, this one is on. How do we describe the circuit right now? We could say this one is on blank, this one is on. What am I trying to say there? This one is on blank, this one is on. What am I saying in there? Yeah, I'm saying and. I'm saying this one is on and this

06:39:00
one is on. So we're at our very, very first bit of simple logic. We could say one, one equals and. Right, and from that very, very simple logic, we can start to build things that are called logic gates where we could say like and or not, or, or all these like more complicated bits of logic. And so from this very simple idea of on and off, we can build up to very simple logic from very simple logic to a language that the computer can understand that really wouldn't be honestly human readable, a lots of zeros and ones and simple complex logic, very rudimentary ways of accessing memory, something we would call like machine code, maybe something called assembly, if you've ever heard of that, or did the, I showed a video of like how like a game boy works, right? So we could do these very, very low level languages. We could all learn assembly and and and be very close

06:40:00
to the language that the computer can understand. But that would take a lot of time and effort. It'd be really hard to like keep that code base maintainable. And thankfully we sit on the shoulders of giants who have taken that very, very. Very very simple logic built it up to assembly built it up to see built it up to the things that we sit on top of that give us JavaScript. So we get the ability to write very clean, readable code that at least is somewhat human readable between us, but it breaks all the way down to this simple logic of on and off for us. And we don't have to worry about that in our day-to-day of programming. That's the beauty of JavaScript. We get a language that we can understand, that we can share and very quickly see what the intent of our other engineers were, but we don't have to get into the muck of on and off zeros and ones. And so we owe them a

06:41:00
lot, we do owe them a lot, for real. And so this leads to this idea of Independence Day being a true story. Now in Independence Day, the alien mothership comes and something really interesting happens. The the alien ship that we have from the Roswell crash landing, it starts to get power and turns on. So we know that they're like power system and maybe like their communication systems are intertwined. We try to we try to nuke the ship that's over the US. It doesn't work. Their shields are too too powerful. It blocks our nukes. And so Jeff Goldblum has to do something that enables them to save the world. What does Jeff Goldblum do that enables us to, enables them to save the world? What do they do? They upload a computer

06:42:00
virus to the alien mothership that brings down the shields, because like their shields communication are linked, right? Shields come down, we nuke them, America, right? Save the world. We refer to this, well, we're not gonna say that yet. Give me a second to get there. How the heck does Jeff Goldblum write a computer virus that takes down an alien mothership? Everybody just keeps saying, bub, binary upload boom, exactly. Now, Jeff Goldblum didn't understand the alien language, but they were able to reverse engineer it all the way down to the primitive values that we just talked about. We assume even if the aliens are a super advanced civilization, right, and they have wild tech, that in their universe, there are still constants, right? Math and physics are still constants.

06:43:00
On and off are still constants. They might have way better transistors that do on and off way faster than us, but at our base level, it's still on and off, right? And so Jeff Goldblum is able to reverse engineer all the way down to these kind of base logic, and then build it all the way back up into something that can infect the alien mothership. It infects the alien mothership binary upload, boom, we nuked America, right? So this idea that we could reverse engineer is actually something a lot of people do. I shared two videos on Discord that I really, really love. The one first video was no Tamagotchis were harmed in the making of this video, which is a lie. They, a lot of Tamagotchis were harmed in making that video where we had someone during a conference presentation reverse engineer Tamagotchis, which is pretty cool. And then I also shared a ScanLime who for a while, if you sent them like an electronic thing, they would reverse engineer it. So this is like a skill that a lot of people and actually have

06:44:00
and develop. So it's actually not too, too, too far-fetched and therefore Independence Day is a true story. If you don't watch either of those videos, they are both in the Follow Along with Heroes channel on Discord. Alrighty, so that leads us up to JavaScript, a human readable language that can be broken down into that base level logic so that we don't have to. We get something that's easy to read, that we can share amongst each other, look at it and maybe quickly discern whether or not it is logical, what's happening. We can kind of look at it and figure out what's happening without having to know this very, very base level logic. Alrighty. So we're going to jump into JavaScript, but we're going to stop here. We're going to take our break a little, a little early, just so that we can kind of transition easily into JavaScript and not have to stop for a little bit while, for a little while. So let's put five minutes on the clock, please. Beautiful and

06:45:00
when we come back we're jumping into the first of our big four Variables so five minutes on the clock Please if you're able get up move around Stretch hydrate important. We've been going for a long time All righty. See you in five folks I'm gonna run some ads. So please really take your break Crazy 101 added two minutes to the timer. This is a seven minute timer now. Thank you, Crazy 101. Alrighty, two minutes on the timer. See you in seven minutes. Can we have another review like this? Yeah, we'll have another one like this in the future. All right, folks, see you in seven. You

06:46:00
Yo bugaboo that's wild congrats finally got a job mad benefits great culture they don't care about my felony convictions let's go that's what I'm talking about congrats bugaboo we're taking our break but uh that's amazing to hear congratulations we that's actually a good idea. I'm going to send you a DM on Discord. We are trying to do a talk with returning citizens actually tomorrow. So I would love to maybe bring you into that talk. And if tomorrow doesn't work, then we can find a different time to bring you in because I think that'd be helpful for

06:47:00
folks to hear from your experience. So maybe we can set up something that's a little bit more long form. But hey, congrats. Tomorrow should be fine. All right. I'll hit you up on Discord after we're done streaming

06:48:00
We don't get got, we go get. You

06:49:00
You You

06:51:00
You You

06:52:00
All right, folks, come on back, come on back.

06:53:00
All right, so we are at the beginnings of JavaScript, but as we've been doing at the top of each hour, I want to answer some more questions from the Slido, and then we'll get into our JavaScript. So I'm going to keep the music on while we go through the questions. Once we feel that we have a good understanding of HTML and CSS, do you have any recommendations for learning best practices? There are so many things to focus on early on that are more impactful than best practices. My advice is to stay current and to keep investing and going deep and not wide. But once you feel pretty good, I would say with full stack There are some like very I don't know and best practices are always debated you talk to ten different engineers You're gonna get ten different references for best practices. The ones I follow are the

06:54:00
Martin Fowler series clean code I try to incorporate clean code into everything whether it's HTML CSS or JavaScript. And so those are pretty good I recommend starting with clean code and then looking at some really good style guides So I love the airbnb style guide. It tells you like good ways to write your html your css your javascript So finding respected style guides and like quintessential books like clean code Are the the best places to kind of to get started with that stuff? Are you bringing shay how for a chat hopefully hopefully Can you upload this to YouTube as an unlisted vid? Well, like I said, if we still have the 1500 when we're done, I'll put it on YouTube proper. It looks like we'll hit that for sure. All right, talked about that. If we are behind in turning in assignments, do we use the original

06:55:00
links to turn in the projects? Yes. Even if you're part of the catch-up crew, does she use the same links? All good. I can see when people submit. So I can see if you submitted them early or late doesn't matter if you're in the catch-up crew How do we navigate a client asking for something we don't know how to do at JS Additionally, how do we price our freelancing clients? So I will say pretty much every client I ever had I mixed up a youtuber with Robert Martin. Yeah, it's clean code by Robert Martin. There's a youtuber. I watched that's Fowler I don't know why I said Fowler, yeah. Clean Code by Robert C. Martin. That's one I recommend. And then like style guides. I would say pretty much every client I have ever had, right, every client I've ever had asked me to do something that I didn't know how to do. And my job as an engineer was to figure out how to do it. And so I would say,

06:56:00
all right, well, I gotta research how to do those things and I would bake that into my proposals. A lot of times there's research time baked into my proposals, but I would talk to other engineers. I would give it a good Google and I'd figure out best ways to go about doing the things that they needed. So I would say pretty much every client I've ever had, there's been whole segments that I had no idea how I was gonna do it. I just knew that I was going to be able to figure it out and I would give myself enough room and budget to figure it out. Not only in terms of time to figure it out, but also if I needed to hire someone, I left enough room in the amount they were paying me to hire someone to figure that piece out. So the way I get around not knowing how to do stuff is I'm an engineer, I'm gonna figure it out. And then I leave enough time and budget to get help if I need it. And then the pricing is, I don't ever price stuff. I figure out what my client needs. I figure out what their budget is, and then I let them know what I can get done for that price point at that budget. I don't ever give hourly rates or prices or anything like that. I think it's just a backwards way of doing it.

06:57:00
I feel like if I tell a client I won't finish a website for four to six months, they will walk away I just don't think that's true depends on how you Deliver that value in those four to six months that that matters if you give them a really good schedule with the basics being up in a month then like the Testing phase being three to six months like there's ways you can structure it that give you that time But it feels like they're getting lots of value along that timeline Yeah Can you share what a project timeline would look like for creating a web application, research production, debugging, validation? So I shared some examples in our freelancing class of what, like those were real, like those were real examples from real folks that got real clients. And so if

06:58:00
you look at the breakdown in the slides, it's like a real breakdown that somebody actually got. That actually that actually someone gave as part of their proposal. Right. So that's what I would take a peek at. There are also really good examples that you can find online of like example proposals, things like that. But each timeline is going to be different depending on what they need. If somebody needs something very simple, it's going to be very quick timeline for me, so I need something complex, very different. So you can look up examples if you ping me in like the ask Leon Maybe I can find some examples to share but some of them are already in the slides What is this hackathon people are talking about that was we had a project night on Thursday That's what people are talking about. So if you were here Thursday, that's what they were talking about Will the super view be in the VOD later today? Yes, everything is always available immediately on twitch and then Uh, most of our all of our classes go up on youtube

06:59:00
and uh office hours just stay on twitch though All righty Let's pause there with the questions and let's get into javascripts Can we have a separate freelancing channel, uh, possibly let me talk to the mods we can think of we can figure out if that makes Sense, we're always apprehensive to add channels because it just increases the moderation that we have to do And so we're pretty slow to add channels and we get rid of ones that people don't use just to free up some of the burden So I'll talk to the mods and then if we think that it people get a lot of value out of it. We'll add it. Yeah All righty Boom, JavaScript, right? JavaScript has a specific syntax. We talked about syntax already with

07:00:00
HTML and CSS, right? We have the HTML and the CSS. They all had specific syntax. HTML had opening and closing tags. CSS had the curly braces that open and close, selector and declaration blocks, while JavaScript will have its own syntax as well, the spelling and grammar rules of that language. And the beautiful thing about JavaScript syntax is it uses a lot of characters that you might not be that familiar with. We have semicolons, brackets, parentheses, quotation marks, all these unique characters that you can kind of just go around the keyboard on and kind of see pop-ups. I'm gonna open the inspector. I'm going to open the inspector and I'm just going to go around and kind of talk about the different characters you might see. Square brackets, curly braces or figure brackets, depending on how cool you are. We're going to have question marks, which are often called ternary selectors, which is weird. Don't worry about that for now.

07:01:00
We have a forward slash, we have double quotes, single quotes. We have double pipe character for or. We have the hyphen for subtraction, parentheses, which we'll see a lot, asterisk for multiplication, double ampersand for and, like the logic we talked about earlier. We have the percent sign, which is the modulus or the remainder, dollar sign, which we call bling, which comes up with our template literals or special ways of creating strings, which we'll see in a little bit. Octothorpe, which we already saw, saw an HTML and CSS and bang for not. So that means like not equals whenever you see the bang exclamation point, what we call it a bang in programming. Plus sign for addition equals what you've seen. You'll see the tilde a lot and ticks. So a lot of these extra characters that you'll be seeing come up in JavaScript. And the reason

07:02:00
why JavaScript can start to be really like wreck your hands and why a lot of my students develop pain is because your body is really Not used to hitting all those extra keys Even if like you're an MMO or and like you're constantly typing and all this stuff hitting all of those extra accessory keys Definitely drains your hands or makes them flex and contort and ways that you're not used to so even if you're like a memer and you're Always typing it's gonna be different when you get to programming, and that's why stopping taking your breaks at the top of the hour at least, letting your hands relax, running them underneath some warm water, doing the light stretches that Dr. Levi recommend, right? Keeping your hands in a good order is going to help you in the long run. My day job, I teach a coding bootcamp called Resilient Coders, and every single cohort, we have students that go to

07:03:00
the hospital. Every single cohort. I don't care how much they've typed before they go to the we have at least one or two people go to hospital every single Cohort just because they start to develop severe wrist and hand issues from typing so much And so, please please please please please make sure you're taking care of yourself good posture good breaks good stretches exercise Because it will come for you if you're not taking care of all this stuff Yeah. Alrighty. Exactly. Dr. Levi, the fitness doctor. Alrighty. The very first thing that we're going to talk about are variables. They're one of the big four, the four things you really have to understand in pretty much every programming language and specifically in JavaScript. So what the heck are variables? Variables enable us to remember a value to use later on the entity that we use to store a value for later on we call a variable

07:04:00
the way I like to remember variables is I just think of them as buckets buckets that we can put data into data buckets and then we can carry these buckets around and whenever we need that data we can take the value out of the bucket. That's all variables are, are buckets full of data that we can carry around and use them when we want them. Now, I talked about computers having memory. And so we can think of memory as like a physical space. So here's our physical memory of our computer. When we're using variables, there are two steps to variables. The first step is called declaration. And that's where we put a space in memory. So in memory, we would now have a space called age, right, called age. The second step

07:05:00
we call assignment. And that's where we put a value into that space. So here we put 25 into that space in memory. So that declaration created the space and assignment put a value into that space. You can also do declaration and assignment at the same time. The beautiful thing is now that we've created that space called age and we put a value inside of it, we can ask for age at any time and it'll give us 25, right? Now, the other cool thing is that we can go ahead and add that space of memory, subtract from it. So we could do something like age equals age plus five. And this value would go from 25 to 30. So this variables are buckets where we can store data and we can create multiple buckets by using declaration. And we can put things into

07:06:00
those buckets by assigning. And you can do both the declaration and assigning at the same time. When you're creating your variable names, I like to use something called CamelCase, and you're gonna see me use CamelCase across my HTML, my CSS, and my JavaScript just to be consistent. So you can see the first word of my variable is lowercase, and then every other word is capitalized. And it's just a way for me to keep, be consistent with my variable names, and it makes it easier for me to read. Now, some people will use hyphens, some people use underscores. It really does matter. It doesn't really matter as long as you're consistent. Each team, each group might do it a little bit differently. How you do it is up to you, but you'll see me use CamelCase everywhere. You'll also notice that I'm using a special keyword here called let. There are three really important keywords when it comes to creating variables.

07:07:00
You're going to see let const and var with the newer versions of JavaScript. Remember, these languages are ever-evolving and we got kind of a really big update, which people call ES6 plus, meaning anything after the 2015 version of JavaScript and forward, we got all of these new things that happened in JavaScript. And one of them was these keywords for creating a variable, let and const. We've seen them in class. We've covered a little bit more detail. We actually have a command here in chat, which is called exclamation point var or bang var. If you want to read about kind of the differences and the breakdowns between let const and var, it's there. But you think of let as a variable that's meant to be reassigned, right? That can change, that can be added to, that can be subtracted from. And then constant something that's gonna stay what it is. We're not gonna change it. It's gonna stay what it is. You'll eventually get into words like mutable and

07:08:00
immutable, but that's too advanced for right now. Just think of let as something that's a variable that might get added to. So maybe we'll add five to age, right? Or maybe each year age goes up by one. So your age is something that would be a let, something that can change over time. But maybe like your, I don't know, Maybe your Twitch name is something that'll never change, right? It's set in stone, that's it. It's all you get, right? Can't change it. So that would be const. All right. Now, variables we saw, those spaces, your birthday. There you go. Birthday is a good example. Birthday is a good example of a const. Your birthday is never gonna change, right? Your birthday is your birthday. it'll never change. So let, maybe things that you can modify, right? And then cons for things that won't change. And then var, there are still use cases for var, but you can read about those

07:09:00
in different, share the link. JavaScript.info slash var. Beautiful. Alrighty. Now we talked about these variables as buckets that we can put data into, But what kind of data can we store in these buckets? Well, there are two major kinds of data we're gonna start off with. The first kind of data are strings, or pieces of text. And we can create strings in three different ways. We can use double quotes, single quotes, or eventually ticks with template literals. But for now, let's just think about double quotes and single quotes. Both of these enable us to keep pieces of text and whatever we wrap in these quotes becomes a piece of text and we can store these pieces of text in our variable should we choose to. The odd thing about strings is that whatever quotes you use on the outside,

07:10:00
you cannot use on the inside without doing a hack. And that's because the strings will terminate. Let's actually open up the console here and see that. So here I'm going to just create like a nice little string. I'm going to assign it to a variable. So let string equal, and we're going to say, let's go to town. I'm going to wrap town in quotes today. Today. Now if we look, something weird happened here. I wanted to wrap town in double quotes because maybe we're not going to like town, maybe we're going into the city, right? And so I tried to wrap town in double quotes. But since I have double quotes on the outside, you can see exactly, it breaks.

07:11:00
It doesn't let me complete that full string. And so to get around this, We could have used single quotes on the outside, right? We could have done single quotes on the outside and then this would have worked, but then we would have ran into a problem with lets. So what do we do here? We have both single quotes and double quotes. How can we get around it? Yes, we can escape it, exactly. So if we do this backslash, beautiful, this backslash enables us to escape the quotes and have one singular string. Now, when I ask for a string back, we get let's go to town today. You can see our single quote is still there. Our double quotes are still there. And the string is stored in memory as a variable. What did I do right here? I'm going to highlight a very specific piece right here. What is that? What did I just highlight there? It was kind of hard to see. Let me even circle it. Maybe a little bit easier. What is this called chat? What is that called right there?

07:12:00
Declaration, exactly. I created a space in memory called string, right? There's a space in memory called STR. And then on this side, I did what? What did I do on this side? I assigned it exactly. Now this space in memory, this space in memory has the let's go to town today inside of it. So we did both the declaration and assignment on one step. And we were able to get around this idea of having the same quotes on the outside as on the inside by escaping them. Beautiful. So that handles strings. That's the first kind of data that can go into our variables, but we also have numbers. This is another kind of data that we can put into our variables.

07:13:00
We have both integer values, which are like whole numbers, and we have floated values, which are numbers with decimal places. So we can have both whole numbers and floated values. Alrighty. Why are the backspaces placed there? Why not after? It's because as JavaScript is reading it, it needs to know that it has to ignore the next character. So that backslash enables you to make sure, right? To make sure that you can escape the next character, which is the double quotes. Well, so with numbers, we can have integer values or floated values. And we can also have signed values. So positive and negative are both up for grabs here. And we can also do arithmetic in JavaScript, of course. Plus for addition,

07:14:00
or the hyphen for subtraction, the asterisk for multiplication, forward slash for division, and then the percent for modulus. Modulus just gives you the remainder. So if we did 10 mod six, what would our remainder be? Yeah, four exactly. Six goes into 10 once and we have four left over. Beautiful. If you're having trouble with a delay, try giving it a refresh. That sometimes helps. All righty, let's go ahead and code variable fun time. So variable fun time, let's go ahead and take a look at that code. And close out the other ones that we have here. Here we have variable fun time, here we go. We have an HTML

07:15:00
file, and then we have some style here, some CSS, oh sorry, not CSS, we don't need CSS anymore. I'm gonna look at my JavaScript here, beautiful. So, I want you to go ahead and practice your variables. We have some easy, we have some mediums, and we have some hards. I'm gonna put four minutes on the timer, and then we're gonna go over them together. So, if this is your first time with JavaScript, this is your first time with variables, that's okay. Look at the slides do as best as you can and then pay attention when we go through them together four minutes on the timer You got this dig deep go for it No problem breaker Pony, if

07:16:00
you need the code, it's on our Discord. Agree to our rules, and then in the follow-on materials, you'll see the zip file. Unzip it, throw it into the VS Code, and here you go. Variable fun time. URLs should just be the same, AJ. It depends on what you're trying to do, though. How do we find the slides to go over? Exclamation point slides here in chat will give you the links to the slides.

07:17:00
Do you think Fiverr is okay to get our first client? If you watch their freelancing class, I kind of talk about my thoughts on Fiverr and all those type of platforms. I think you're way better off building your own network elsewhere that you own and not beholden to those platforms, but each their own, having a lot of trouble. Maybe then you kind of take some time to invest in them, but I was going to be better building your own network than a network that you're locked in to. Can we get an office tour? People keep asking, I got it. I got to do like a short

07:18:00
form video on it. It's a lot. It's it's pretty wild at the moment, honestly. Oh, we've got some Dunzo's nice Minute 15 left Simo says can't wait for JS to become second nature Me too. Me too with time all good things What keyboard do I use I use the kinesis advantage to it's a split keyboard What's your e-commerce platform of choice I mean if it's just straight ecommerce Shopify is really easy to use if

07:19:00
you're building something custom I recommend Nick's you shopping cart. You can do exclamation point Nick and see their code They have a free software project that's sponsored by stripe to build shopping carts and things like that Yep, yeah Yeah, it's a really expensive keyboard. It's not something I recommend you jump into and buy. I got both of mine. I actually got one completely for free. That's a fun story. And then the other one is work paid for. Yeah, the cool thing is like a lot of times I help people negotiate. When you're negotiating an offer, you're gonna negotiate for a lot of stuff. And one of the things you'll negotiate for is like a work from home bonus or a PD funds bonus, like professional development funds. And that's how you can get a lot of cool stuff,

07:20:00
like your keyboards and things like that. But yeah, this is probably my favorite piece of tech, but I always tell everyone is you don't need an expensive keyboard to do well. You're better off investing in like sitting right, typing right, typing the correct way with all your fingers, taking good breaks. You're gonna get 90% of the benefit with just those things. And then that keyboard can help with the last 10% Yeah So I think I think I think some people just try to jump to the keyboard and they still have trouble because they didn't fix all the other stuff like ergonomically sitting and And investing in typing, right? Yeah I do have it. I do. All right, let's take a look at these together. Come on back folks All right, create a variable and assign it a number Let num equal 10 minus 10 from that number num equals num minus 10. Beautiful. Print that number to the console. So it's going to be a console log,

07:21:00
console.log num. So let's save this. Let's open this in the browser and let's inspect. And if we look in the console, we see zero. Lovely. We see zero. Beautiful. All righty. Next one, medium. Create a variable, right? Create a variable that holds a value from the input, add 25 to that number, alert that number. So create a variable that holds the value from the input. So we can do a const, No, we're gonna add 25 to that number, so let's do let. And let's say num from input. Notice my camel casing here, lowercase, capital case, capital

07:22:00
case, equals. And we're gonna say document.querySelector. And we're gonna grab it from the input. Let's look, is there anything on the input? Is there more than one input? but no, there's only one input, but it does have an ID. We can use that ID if we want, but there's only one input. So we're going to say input for now. I'll just say input. And then how do we get the value out of an input? How do we get a value out of the input? What we do here? The value, yeah, yeah, the dot value, beautiful. That'll get the value out of the input. Let's add 25 to it. Num from input. And we saw how to like do the equals syntax up here. Let's do something a little bit different down here. Plus equals 25. It's the same thing as doing the value, reassigning it minus or plus that number. So

07:23:00
we could do num from input equals num from input plus 25, like that totally works. Or we could just do the plus equals 25. Both syntax work. It's either, it's just preference which one you wanna use there. Cool. And then we wanna alert that number. So alert, and let's alert num from input. Let's see if this works and then we're gonna talk about it. All right, let's refresh. All right, it immediately did 25. Wait a minute, it immediately did 25. Let's think about that. It immediately did 25. Why did it immediately do 25? It happened instantly. These three lines of code are not waiting for anything to happen. It's not waiting

07:24:00
for a click event. It's not waiting for something to happen. in, it is simply happening as soon as the page loads. So those three lines run, it's not waiting for anything. So there's no way that our user can be fast enough, right? Fast enough to put a value in the input. They're just not fast enough. So they can't, so we're taking whatever was in that input which is zero and adding 25 to it, right? And that's why we see the alert of 25. It just happens instantly. it never gets a chance to put something into that input. Now, there are a couple of things here that we've talked about in class, but I want to make sure we do it while we're reviewing. I say document here. What the heck do I mean by document? I'm saying document, query selector, and then value. What the heck is document mean? Yeah, it means the DOM,

07:25:00
the document object model. When we're in here, like when we're on our website and we use the inspector, a lot of people see this and they go, oh, this is just the HTML. No, this is the rendering of our HTML files and our CSS files. Remember, we were at the very, very beginning. We talked today about like typing in dominoes.com and making a request to a server and then dominoes responding with files and our browser reading those files. When it reads those files, it just paints a picture. It takes those files and paints a rendering of those files. If I come in here and I change this from like click me to Free Domino's right like there and I hit enter there. They're not losing it. I didn't just hack dominoes, right? I mean, there's not somebody at Domino's headquarters

07:26:00
Freaking out that Leon got him again, right? That didn't happen We've just changed the rendering that we see here. It doesn't actually affect the HTML files. It doesn't actually affect the CSS files. It just affects the rendering. You can think of like an artist. They're looking at their model and they're painting the model that they see. You would never say that that painting was the model. It is the rendering of that model. Same thing here in the browser. The browser reads your HTML, reads your CSS and paints the model, right? It paints the model. Now, the cool thing is JavaScript can come along and mess with this model. It can add stuff, it can remove stuff, it can do wild stuff to this rendering. And then once we refresh, all that stuff goes away, right? That's the beauty of

07:27:00
JavaScript. JavaScript can come in here and mess with that rendering. And we call that rendering the DOM or the document object model. So whenever you see document, what we're referring to is that rendering of the HTML and the CSS, that's it. So what we're saying is, hey, look in that rendering, find something that's an input and grab whatever value is in that input. That's what we're saying there. Cool. Last one. Create a variable that holds the H1. Add an event listener so that the element that console logs the sum, well, hold on. Add an event listener to that element. Oh, that console logs the sum of the previous two variables, cool. So we're gonna create a variable that holds the H1. This could be a const. The H1 is not gonna change. So we can say const h1 equals, and we'll do document.querySelector,

07:28:00
and we'll target the h1, and that's it. So now the h1, like that actual DOM element, is stored in the variable h1. Now we can add an event listener to it, h1.addEventListener. We're gonna give it a click, and then we're gonna say a function that calls addToNums. Now, let me write this all out, and then we're gonna talk about it. Function, add to nums. Beautiful, here we go. All right, so here is an event listener. What this event listener is, is it's going to listen for a specific event, right? That specific event that it's going to listen for, in this case, is a click. I like to think of these as smurfs. what we have done is we have found the H1 and we have placed a Smurf on it. So

07:29:00
let's go back and look at the DOM here. Let's go ahead and look. Let's refresh here and let's look. So here's this H1 of ClickMe. What we have done is we have just put a Smurf that's just chilling on that H1, right? A smurf that's chilling on that H1, right? And as soon as it sees that click, as soon as it sees that click, it's gonna go, hey, yo, right? It sees the click and it's gonna go, hey, yo, I heard the click, right? And as soon as it hears the click, it's gonna run this set of instructions called add to nums. Is smurf an acronym? No, I'm talking about the little blue people that used to be on television. They're little Smurfs sitting on stuff, right? And when it hears or sees that click, it tells this set of instructions to run.

07:30:00
And this set of instructions is gonna do two things. It's gonna console log, oh sorry, it's gonna do one thing. It's gonna console log the addition of the previous two numbers. So that's gonna be, what was the first variable? Numb plus numb from input. Beautiful, there we go. So this Smurf is chilling on this H1. Chilling on this H1, just hanging out, relaxing all cool, shooting some b-ball outside of school. Couple of guys, they were up to no good, started making trouble in their neighborhood. They got in one little fight and their mama got scared and they said, you're moving with your auntie uncle in Bel Air. The cab pulled up, there was dice in the mirror. But anyway, home to Bel Air. Anyway, so we were talking about this Smurf. It's chilling on the H1. It's just

07:31:00
sitting here on the ClickMe, right? Just sitting on the ClickMe. It hears or sees that click and it immediately says it immediately says run this set of instructions and here are the set of instructions. Don't worry about the function yet. Here is the set of instructions and the one thing it says to do is just console log the sum of these two numbers. So let's see if this works. We go here we refresh the page. Let's go to the console here and I'm going to click on click me 321. Boom, it worked right it waited for the click the smurf saw the click and told those sets of instructions to run and what we did is we added those two numbers together. But something weird happened. What happened here chat? What happened?

07:32:00
What's the area? Notice that this number is like purple and this one is white. What happened there? Concatenation, exactly, concatenation. Meaning that we took a number and we added a string to it. That's what happened. So if we go back and look at our code, we can see that the value that we pull from this input, what's the only thing that's gonna be inside that input? Remember that input, we grabbed the value from it instantly. the user never got a chance to put anything into that input. So what's actually in that input before we add 25 to it? Yeah, it's a, it's an empty string. So what we're actually doing here is saying empty string, right, this equals empty string, boom. That equals, that equals empty string. It's the same exact thing. and then we add 25 to

07:33:00
the empty string, which means when we get down here, we're gonna be adding zero to a string 25. So instead of doing zero plus 25, we're gonna do zero plus string 25, which gives us a string. Let me put that back. Yeah, because if we grow to grab the value out of this input, since it happens instantly, there's nothing inside this input. So what it grabs is actually an empty string. Why? That's just how JavaScript works. It's going to grab an empty string out of that input. We add 25 to that empty string. Whenever you add a string to a number, you get a string in JavaScript. It's one of the quirks. So what we wind up doing is trying to do a number zero plus That's a string 25, and that's why we see 025. It's a string, not a number. Cool. Now, we can fix this.

07:34:00
How can we fix this, chat? Type conversion, yeah. Yeah, we could wrap this in, let's say, number. Number, we can wrap this in number. All right, number. Beautiful. Let's save it. Now let's try it again. All right, let's click. Beautiful. Now we can see that it's blue, I'm sorry, that purple again, because they're both numbers. There's no zero being appended. It's not a string anymore. where it's now a number. And so this number right here is a set of instructions that's built into JavaScript that can take strings and give us the number value. And so when we wrap this in number, we don't

07:35:00
ever get an empty string. We actually kind of just get like nothing or zero in this case. Why is it capitalized? You're gonna see that there are some rules that when you are using built-in stuff, there are gonna be certain capitalization rules that we follow. Technically, this is a built-in function, which we call a method, but we're still kind of far away from that. We gotta get through objects first, and once we get the objects, we'll understand better why it's capitalized. Why didn't we have to do that with num? Well, because num wasn't coming from an input. We actually just set it to 10 here ourselves. We subtracted 10 from it here, and then we console logged it. At no point do we turn num into a string. It was a number and it's always going to be a number, at least with the code we have here. Is string the opposite? Yes. Yes, it is the opposite. Yep, num is actually a number,

07:36:00
exactly. Beautiful. All right, let's keep pushing. We did the hard, wonderful. Good job, everyone. We want to make decisions. We eventually want to be able to compare stuff, want to be able to do stuff in certain cases, but not all cases. But before we can start making decisions using things like conditionals, we have to be able to make comparisons. And so to make comparisons, we have to learn how JavaScript compares stuff to other stuff. Now, we're going through this at a pretty good speed. we spent four or five classes on this stuff that we've covered so far. And so if any point in this JavaScript is going too fast, it's too much, you can always come back and watch our individual classes on JavaScript. This is meant as a review and to give you like a good overview so you can come back and just focus on the things that give you trouble. Beautiful. So if we look here, nine does equal nine in JavaScript because

07:37:00
they're both numbers and they both have the same value. Seven does not equal three because yes, they're both numbers, but they don't have the same value. And JavaScript gets a little bit weird because you can actually compare strings to strings. So this string, hello, actually does equal the string, hello, and that would give us a true value. Now, this is where some people get hung up because when you are trying to compare stuff in JavaScript, there's a difference between two equal signs and three equal signs. When I see two equal signs, what am I comparing? It's just what? Two equal signs is comparing just what? Just value, exactly. Two equal signs is just value. Three equal signs is what? Three equal signs is value and type,

07:38:00
exactly. Value and type. So here we have an assignment. We have one equal sign. So one equal sign is always assignment. So we have an X equaling three. All right. Does three equal X in value? Cause we just see two equal signs. So that's a value. Does three equal eight in value? No, three and eight are different values. So that is false. Cool. Now this is where it gets tricky. Number three and listen up for a second is number three equal to string three in Value value first is number three equal to string three in value Yes Number three and string three are the same in Value now we since it's three equal signs. We have to go one step further is

07:39:00
Is number three equal to string three in type? No, one is a number and one is a string. So this is not equal in number and type. We have three here. It's gonna not be equal in number and type. It's equal in, sorry, value and type. It's equal in value but not equal in type so we get a lovely loss. Now is number 3 equal to number 3 in both value and type? Yes, number 3 is equal to number 3 in both value and type, so that would be true. Here we get to see that bang syntax for the first time. All that means is not equal. So is 3 not equal to 8 in value? That is a true statement. 3 does not equal 8 in value. Beautiful. Last thing here, does three not equal

07:40:00
string three in value and type? This is true. This is true because three does not equal string three in type. It does equal it in value, right? So it doesn't equal it in value and type. It does equal it in value, but not value and type. So when you have that not equals that is a true statement because number three does not equal String three in value and type only value not type. So that is a true statement Beautiful Folkman said I want the Red Robin eight and came back now and he's still going I wish there was a not equal sign the bang I get what you mean though it's a little confusing at first

07:41:00
all righty now we know how to do comparison we can introduce the second of the big four, which are conditionals. Conditionals enable us to check if some condition is true inside the parentheses. And if it is true, we do what is inside the curly braces. And we do what is inside the curly braces. So let's take a look at this. Here we have the kind of three things as you'll see in a conditional. We have the if. If what is true inside these parentheses is true, we stop. We do not continue. We just do what's inside the curly braces and we are done. But if what is inside the if is not true, we move onto the else if, and we check what's inside those parentheses. If

07:42:00
it is true, we do what's inside the curly braces and we stop. However, if what is in the if is false, the else if is false, then the else auto magically runs. It does not need, it does not need a condition. It's like a default. The default will just run if every single statement above it was false. And the beautiful thing is, you can have as many else ifs as you want. So you can go if, else if, else if, else if, else if, else if, and you don't actually have to have an else. You can leave it off if you don't want a default case. Alrighty. Here's a good example. Our pizza is a variable, and I use the const keyword here to declare this variable y. Why do I use const here to declare this variable?

07:43:00
It never changes. Pizza will always be dominoes. It'll never be anything other than dominoes. And so since it's never gonna change, we can use const, right? So pizza equals dominoes. We've gone ahead and declared a space of memory for pizza, and we've assigned it the value dominoes. So if we know that pizza is dominoes, what gets printed to the console? What gets printed to the console here? All aboard the train to Flavortown, exactly. So does pizza equal Papa John's? Hell no, that's a false statement. We go into the else if, does pizza equal Domino's? Yes, so since pizza equals Domino's, we stop and we console log all aboard the train to Flavortown and then we're done, we do not continue.

07:44:00
Let's say for some reason we spelled dominoes wrong and we had an E in here, right? We spelled dominoes wrong, so there's an E in there. We would see that pizza does not equal Papa John's. That would be false. Pizza in this case would not equal dominoes because we spelled it wrong. And then the else would automatically run and we would see print is the console. What are you even doing with your life? Beautiful. Alrighty. What's this danger that I speak of? Assignment versus comparison. I got you Gonzo, just for you. What's this danger I speak of? Yeah, one equal sign versus two or three. if I do one equal sign, I am going to reassign something inside of my conditional, which

07:45:00
will probably evaluate to true, which is really weird. It's one of the quirks of JavaScript. If I was to chop off these two things, I would wind up trying to set pizza equal to Papa John's, which would give me an error because my variables, of course, a const of pizza, and it'll never change. So if I dropped these two equal signs, it would try to do reassignment. That reassignment can't happen because I have a const. It would be an error and a hot mess. So you always have to make sure when you're doing comparison, that you're using two or three equal signs and not one, because one is assignment. Beautiful. Now we can also do multiple conditions, right? What happens if there's five equal signs? It's two, three, or one, yeah? Actually, something interesting will happen if you have more equal signs, but I'll let you play around with that. Multiple conditions, right? So we can have and, where both of these have to be true.

07:46:00
Name has to be Leon and status has to be Balin. And so if name is Leon and status is Balin, you get a lovely wink. Right, because both of those were true, so since both of those were true, so if those are true, we get the wink at camera beautiful. We can also do or so if day equals Sunday or sorry if they go Saturday or day equals Sunday we know it's the weekend right so we do what's inside those curly braces. is it is the weekend. Beautiful. All righty. We have an age checker code to do here. So if we go and look at our starter code for today, we have age checker, and we have some JavaScripts

07:47:00
in here, and there are some conditionals that I want you to try. If you're under 16, I want it to console log, they can't drive. under 18, tell me they can't hate from outside the club, under 21, under 25, under 30, et cetera. So we're going to speed run this a little bit. We're going to put three minutes on the clock. Three minutes on the clock on this one. Try and get as many conditionals as you can done. If you're new, look at the slides, see how the if and the else ifs are created and have added. We're going to go over it together. Three minutes, go for it. I've redone this exact page so many times already. Let's go Brooks if you can get it done three minutes

07:48:00
My drinks changed all throughout this right now, I'm just drinking water cold water cold water helps the throat But I was doing some vanilla chai and an energy drink at one point I had some tea I had some Coffee, it's mixed. They're all out here Yeah, I've tried my solid try before yeah

07:49:00
This is the thing everyone is a real Irish speed running it because we've already done this example like hundreds of times. A lot of folks have redone this example like 30 times already because that was their homework like three weeks in a row was just to repeat everything. So to be fair to folks that have done the homework and reviewed this and repeated this a bazillion times, I don't want to have to make them sit here for the full five minutes. So we'll do the full three and then we'll go over it together for folks that are new A minute left We'll go over this and then we'll take our break over this one and we'll take our break and then when we come back from the break we'll finish

07:50:00
up our review on we'll get to our we'll finish up our conditionals and then we got to get to our loops and we'll do some exercises that review everything together. Dying speedrun hurt the fingies. All righty folks, let's take a look at this together and then we'll take our break. All right, let me show the music here. All righty. If under 16, tell them they cannot drive. So first let's create a variable called age. So we'll say let age equal, I want to set it off something

07:51:00
at like 25, I think that's what we did before. And then let's start our first conditional here. Actually, I'm gonna come down to the bottom and just do it all here. If age is less than 16, we are going to console log. We're gonna log to the console. They cannot drive, beautiful. Next, we're gonna do our else if. So we'll do else if and then inside of our else if we're going to check we're going to say all right If age is less than 18 Then we can console log And we'll say I'm just going to copy it. They can't eat from outside the cloaks. They can't even get in Beautiful And we have some characters that we have to escape here. See how these strings are breaking.

07:52:00
So we can use the backslash that we learned earlier to escape the contractions there. And we're good. Let's do another else if for the next age bracket, which is 21 and they cannot drink. So we'll say if age is less than 21 and we will console log. They can not drink, beautiful. Then we'll do our next else if. Notice how I'm always finishing out my parentheses and my curly braces and then going back in. That's way I don't ever forget them. Some people forget to close their parentheses, forget to close their curly braces. And so I always want to make sure that I don't forget them. So I type them all out and then I come back. So age is less than 25. We'll do our next console log. And this one is, they cannot rent cars affordably.

07:53:00
Beautiful. Plug that in. Let's do our next else if. And we'll say age is less than 30. And this one will be, they cannot rent fancy cars affordably. Beautiful. And then we have another one here. If under over 30, if under over 30, tell them there's nothing left to look forward to other than 100 devs. There we go. Beautiful. We'll do our last else if here. And we'll say, if age is less than 30, we already kind of got that controlled. And we'll say, and age is greater than 30. And we'll do

07:54:00
our console log. And we'll say, there's nothing left to look forward to other than a hundred devs. All right, there we go. I'm in my thirties, by the way, I always feel like I have to say that for this one. Alrighty, let's save it. And there we go. So we had something weird, it says under over 30. So as long as it's not 30, right? And so here I'm saying if it's less than 30 and over 30, then I'll console log that, but this actually precludes them from being 30. So we could just have an else here and that else will capture anything if they're 30, right? Because if they're under 30, we got it. If they're over 30, we got it. And then all the other ones are taken care of. So we can just say the else and the else will grab if they're 30. And we'll just say, I don't know, something cool. Right. But the idea here is that you don't ever need an else. It's just a

07:55:00
default. If everything else is not true. Oh, yeah, not and or yeah, not and or so if they're less than 30 or over 30, right? Less than or over, but not actually 30. So the else would grab if they're actually 30. Everything else is handled for the less thans and over then. Beautiful. Yeah. Thank you for the engagement. How can you be under 30 and over 30? Interesting question. Maybe straddling a time zone? There you go. Woo, still got it. Alrighty. Let's go ahead and save this. That way we have it. You'll have this in the code

07:56:00
that I shared to Discord after class, so you don't have to worry about frantically copying. You'll always have it. For the harder, click on the H1, which we just did, take the value from the input we just did that, place the result in the conditional in the paragraph. So we basically just did these two parts. The only thing that we would do differently is instead of it being age like this, it would be document.querySelector, like your input.value. And of course we would wrap this in number. So we literally just did this. So you could combine the previous one we just did with this one and it would work, right? So now we have number coming out of the value. You put this inside of a click event and then it'll work with these conditional down here. So grab all this put it in your your click event and you're good to go Already we're at the

07:57:00
top of the hour. So let's take our break after this Five minute break. We'll come back. We're gonna get into functions and then loops and that's what we'll call it today folks So let's go and put five minutes on the clock If you're able please get up move around hydrate kiss some babies look at something that's in the distance And we'll be back together in five short minutes. Alright folks. See you soon

08:00:00
You

08:02:00
All righty folks, welcome back, welcome back. The harder problem is exactly the same one that we just did. It's exactly the same code. So if you look at the past one, you can just reuse the code for that one. It's clearly the same problem. Let's take a peek at it because folks want to see it. So on the click of the H1, right? So let's go ahead

08:03:00
and do our event listener. document.querySelector, h1, addEventListener. So kind of exactly what we just saw in the last problem. We'll call this ageCheck. Cool. Then we'll have a function called ageCheck. And inside of that, we'll get the value out of the input, which we did here. Yoink. And then we'll do our conditional logic. Yoink. Boom, and that's it. Oh, place the result, the conditional in the paragraph. That's the only thing that's different. So instead of console logging,

08:04:00
you would document. We might actually make a variable for this. We might do a document. Let's say let P equal document.querySelector paragraph. Right, so now this P is holding the paragraph. So we don't have to keep typing document over and over again. So we'll just do p.innerText equals, and then that string. And then we would do this for all of them. So we would just do this over and over again. p.innerText equals. And so you just go through and do it for all of them. I won't repeat it, but that's the idea. Go through, that's it. Cool. Alrighty.

08:05:00
Let's talk about functions, folks. Talk about functions. Oh, actually, let's do a few questions from the Slido before we jump into our functions. What do you put in your Anki for code? Do you put a code snippet and guess the output, or do you try to understand the purpose of an object element of a language, I put code examples. I don't actually use like fill in the blanks or anything like that. I'll have some that are descriptive, like what is a function on the other card is a function. I'll have one that's like, like from like an example from today, I would say declare and assign a variable. And on the other side will be like let age equal 25. So I do a mix of like actual vocabulary and code examples but I don't really do like fill in the blanks or anything like that. How do I locate the people and companies I'm interested in working in? LinkedIn, AngelList, their actual

08:06:00
website. If you watch our how to get a job class, we talk through how to do those things. My plan is to keep pushing through JS, but what can I do to build confidence and catch up? Is it catch up crew? is exactly catch up crew. Join the catch up crew, find a group of supportive folks that are going through the material at the same pace that you are and make sure that you kind of just keep in touch with that community. Always ask for help on discord and you'll get through it as Well, all right, let's keep pushing here, folks. All right, let's see. What is, what are functions? Yeah, the music's a bit loud for some. So here's the thing, it's weird. For some folks, I've asked for like audio samples from a bunch of different people. For some

08:07:00
folks, it's super loud. For some folks, it's not. For some folks, the sound alerts are, some they can barely hear it. And so it's something that I don't think I'm ever gonna truly be able to figure out for everyone. Because I've even asked for audio samples from different people. Yeah, like some people are saying you can barely hear it, right? So I think it's different for each person, but no. I'll keep playing with it, but it's funny because you'll see some people saying it's like deafening and some people are saying we barely hear it. Yeah, it's off now. Yeah, it's off now. All right, what are functions? Functions are simply, simply sets of instructions. Yeah. Functions are simply set of instructions. It's weird, right? I play music. Every single break there's music playing. And so it's odd that

08:08:00
people can't hear the music. So here's music playing now All right, it's very faint you can turn it up a little bit bring it down a little bit yeah Yeah, so nobody's a little bit it's a little bit lower than that yeah But it's funny, because some people say it's deafening, and some people say, oh no, I hear it's crystal clear. That's the music. Functions are simple sets of instructions. And the idea of functions is that they are reusable. The idea is that you can write a set of instructions once and

08:09:00
then reuse those instructions over and over again. So the idea here is that we write out our simple sets of instructions and we can use those as building blocks to build up the rest of our program. And eventually we'll get to a best practice where like really our functions are doing one thing, but don't worry about that for right now. Functions have a very specific syntax, right? with a very specific syntax. That syntax, without syntax, sorry, with the syntax, we have a very specific way that we write our functions. Here we have a function declaration, which is the same thing as a variable declaration. We're putting these sets of instructions into memory, right? So that our program remembers those sets of instructions and can reuse them, right? it can reuse those sets of instructions. But to use those sets of instructions to actually get them to run, you have to call

08:10:00
your function. Without calling the function, you will not, you will not get that set of instructions to run. Now, when you call a function, you can pass in arguments. The way I remember this, I have a healthy relationship with my mother, but I like to say when I call my mom, it's to argue. I'm going to pass in arguments whenever I call. Call is just a fancy word for saying, I want that function that's in memory to run. All right, so here's an example. Here I have a function declaration. It's my set of instructions. And this set of instructions does one thing. It alerts something. And the beautiful thing is, here I am calling this set of instructions and I am passing in the value of string hello. So string hello falls into word. Wherever I see word, it is actually

08:11:00
string hello. We call this thing that we're passing into our function call an argument. We call to argue. So hello is an argument. in. Now in our function declaration are variables or buckets that can hold those values and so these buckets that are built into our function declaration we call parameters. So here we have one parameter and that parameter is word. Hello falls into word and wherever I see word it's actually string hello. So when I call this function yell, this set of instructions runs, it takes in hello and wherever I see word, it's actually hello. So this would alert hello in the browser. Cool.

08:12:00
Here we have another function declaration, but this function declaration has two what chat? What are these? This function declaration has two what? Yeah, it has two parameters, exactly. Word and other word. And this function call has two what? This function call has two what? Two arguments, exactly. Remember, when we call, we argue. When we call, we argue. So two arguments. Now, hello slides into word. Wherever I see word, it's actually hello. And goodbye slides into other word. Wherever I see other word, it's actually goodbye. So this function would do two things.

08:13:00
It would alert hello, and then it would alert Goodbye. Beautiful. Let's code some simple functions. So if you go to our starter code from today, we have a practice here called, what I actually call here simple functions. And if you go ahead and open that simple functions, you'll see some JavaScript that gives us a few functions to work through. Some easy, some medium, and some hard. So I'm going to put four minutes on the clock here. See how far you can get in those four minutes. I'll bring the music up that's been playing this whole time. It's hilarious that you haven't been able to hear of the music. I'll bring the music up a little bit. Have four minutes. Look.

08:14:00
Got this. We're doing simple, simple functions, simple functions. If you've already done this one a bazillion times, just jump right to the hard

08:15:00
I'll work on the on them. It's just weird to me that some people can really hear it though. Some people actually complain about the music being too loud. That's so wild that some people hear it really really loud and some people barely hear it. That blows my mind. Are they lying? I don't think so. People have sent me different clips and I can hear it in some of them. Mobile versus laptop, maybe. It's louder if I change my headphones to mic input, interesting.

08:16:00
I'll keep playing with it. That's weird. I've seen a lot of people saying different things. Some say it's low. Some say it's high. Some say it's different setups. It's interesting. Never hear music during class unless the timer is running. That's the only time I play music is when you're working on stuff. I have music in the background. So that's the only time that you would actually hear music is when we're like working on stuff or taking a break

08:17:00
So weird look at other people in chat saying different things I'm gonna have to look into it more Yep, it's always like lo-fi playing. When I have headphones plugged in, I hear music, but if we're on Bluetooth, I never hear it. Crispy, what do you think that could be? Crispy, I know you're here and you do music stuff. Do you think there's like maybe different like outputs or something? I don't know. That's weird. I'll try and figure it out.

08:18:00
All right, folks, let's go over it together. All righty. Let's create a function that subtracts two numbers and alerts the difference. Create a function that subtracts two numbers and alerts the difference. All right, so function, sub two and alert. That's a good name for that function. Since we're gonna subtract two numbers, we know we need two numbers, so we need two what? We need two what? We're gonna subtract two numbers, we need two what in here? Yeah, two parameters, beautiful. So I'm going to call this num1 and num2, but you can call your parameters, whatever we want. We can call this robot and unicorn. It would work exactly the same.

08:19:00
And then we're going to alert the difference. So I could alert num1 minus num2. That would work perfectly fine. Sometimes I like to make it a little bit more readable and I would do something like, like a let num, Let difference equal num one minus num two, just to have it like on a separate line. And then I could alert the difference. Beautiful. And then we could call this function sub two and alert, and we could pass in two numbers like 10 and five. Beautiful. Now 10 and five are my what? Robot Unicorn Attack was an amazing game, yes. Yeah, 10 and five are my arguments, exactly, beautiful. So sub to an alert, 10 and five are my arguments. 10 goes into num one, five goes into num two, we wind up doing 10 minus five, we should see alert at five, beautiful. Create a

08:20:00
function that divides three numbers and console logs the quotient. Divide two numbers and console logs the quotient. So let's go and create a function called divide three and log, beautiful. And we can pass in N1, N2, N3, and we're going to console log the quotient. I'm not going to do it in two steps this time. I'm just going to do it all on one line. And we'll do N1 divided by N2 divided by N3. Beautiful. We're going to take in them all. Let's call it, divide three and log, and we can pass in like 12. Let's do four and three. There we go. So we would do 12 divided by four, which would give us three. Three divided by three would give us one. All right. Another one here. Create a function that multiplies three numbers and returns the product. Function, multi three.

08:21:00
And return, beautiful. And we're gonna multiply three numbers. So we need three numbers. I'm gonna do N1, N2, and N3 again, right? Crispy said, different speakers emphasize different frequencies and EQing. Could also play a part in that. Subjective preferences also play a big part in it too. Personally, I think your levels are fine. I've listened to your class on everything from cheap headphones, TV speakers, nice audiophile devices. Interesting. That's so weird then. I trust Crispy Nugget. They've been doing a lot of audio stuff for us. Lots of fun things. Yeah, that's weird that folks have such a different experience. All right. We take in three numbers and we're gonna return the product. So let's do return. And we'll do N1 times N2 times N3.

08:22:00
Now, remember, what does return do? What does return do in our code here? It returns the value, but where does it return it to? Where does it return the value to? It returns it to where it was called, exactly. Returns it to where it was called. So right now, is this function being called? Is this function being called? No. So let's call it. Multiply three and return. Let's pass in one, two, and three, right? And what happens here? So we're going to call

08:23:00
this function. It's going to pass in one, two, and three. So we'll do one times two times three, which will give us six. It's going to return six and it's going to get six. And it's going to return six to here. And what happens when this returns six? What happens to it? Yeah, Blue Mango got it. It's going to disappear. It's gonna poof in the thin air. I haven't stored it anywhere. I haven't console logged it. I haven't alerted. So it's gonna get returned to that location and then poof, disappear. So I could do something like storing it in a variable. I could say like let returned num equal, right? And then down here I could do whatever the heck I wanted with it. I could let's say console log it. All right, okay, console.log returned num, beautiful. And now that'll spit out to the console, right? It'll spit out to the console the returned value because we

08:24:00
called it here. So we call it, the value gets returned to here. So six gets returned to there. So return num now equals six, and then I will console.log return num, which is equal to six, cool. The return just spits it out to wherever it's called. So if we call it here, this is where it's gonna get returned to. So it's as though this line does not exist. And so as though we just plugged six in there, assigning the variable to six. Beautiful. Alrighty. Medium. Create a function that takes in three numbers. add the first two numbers and return the remainder of dividing the sum of the first two numbers by the third. All right. So let's create a function, function, sum and remainder. Beautiful. We need three numbers. So I'm gonna just do my num1,

08:25:00
num n1, n2, n3 again. Beautiful. And what are we gonna do with it? We're going to return. We'll use our return keyword. and we're gonna add the first two numbers. I'm gonna use parentheses just to make sure that order of operations is at play in the right way here. So we're gonna add the first two numbers and then get the remainder by dividing in the third number. So we'll do N three. So order of operations, please excuse my dear Aunt Sally or whatever your go-to lingo is. Just make sure we do the addition first before we try and get the remainder. Once again, we would return it. I'm not gonna call it. We kind of get the hang of it here. Does it matter if there are two different functions with N1, N2, and N3? No, because the parameters only exist inside that function. They only

08:26:00
exist inside this function. So this N1, N2, and N3 are completely different than this N1, N2, and N3, right? They're completely different. They're inside their own, eventually we'll call it scope. You might've heard block, scope, things like that. We'll get to scope later on in the course. Hard. Create a function that takes in four numbers, multiply the first two numbers. If the product is greater than 100, add the last two numbers and console log the value. If the product is less than 100, subtract the difference of the last two numbers and console log the value. If the product is 100, multiply the first three numbers together and alert the remainder by dividing the fourth number. I'll let you work on that one. I'll let you work on that one and I'll post the solution in our Discord. I'll let you work on that. We don't need to spend time on this one right now. That's too much math

08:27:00
to be almost nine hours in. That's too much math for us right now Alrighty now before we get into more complex code There's something really important whenever I attempt to write code. I Really don't Sit down and immediately start writing JavaScript I sit down and I write pseudocode, which is plain English for how I am going to solve my coding challenge. So I'm not just writing out mean JavaScript right away. I am writing out my pseudocode, which for me is just plain English. Here's what my program is going to do. Then it's going to do this. Then it's going to do this. Then it's going to do this. And so I think a lot of folks get into hot water early on, especially when we get the coding challenges next week, because they just I just want to jump right into.

08:28:00
Is when I jump right into the JavaScript's right? Instead of jumping right into the JavaScript, actually think through what you want your program to do. Writing out that plain English pseudocode can be really, really impactful because not only is it become like your comments, it'll guide your code, but you do the heavy lifting. First you take out of your brain the logic and then you can kind of just go and cherry pick from examples. The things that you need your code to do. to do so if you need your code to be an event listener, you can go and grab that. If you need the ability to grab something from the DOM, you can go and grab that. You need to grab a value from the input, you can go and do that. And so if you write out your pseudocode first, you can go back through all the examples we've done in class and just cherry pick the code that you need if you can't think of it on the spot. And that's why I asked you all to code and recode so much because I want those examples to be fresh in your brain so that when you write your pseudocode, you

08:29:00
can then use the examples that you've drilled and put into Anki and the puzzles just come together. So by using Anki and pseudocode together, you become unstoppable. Your code snippet should be in Anki, your pseudocode should be written for everything that you do. And you'll realize that you'll just kind of unlock some ability that you didn't know was there in your brain. Alrighty, so we have this idea of coding a temperature converter. So let's go ahead and open up that starter code here. So we have temperature converter. And I want you to convert a value, right? If we look in the index.html, there's actually nothing here in the index.html. But what I want you to do is to write a temperature converter, something that would take in a Celsius value and convert it to Fahrenheit, Celsius to Fahrenheit. Okay,

08:30:00
Celsius to Fahrenheit. Now, if you're new, I just want you to write pseudocode. If you have drilled this a bazillion times, bang out your code, you have three minutes. So three minutes to get this done. If you're new, just pseudocode. If you've already drilled this a bazillion times, write the actual code. So, you're trying to convert something from Celsius to Fahrenheit. How the heck would you do that? Write out your steps in plain pseudocode. If you finish your pseudocode, try actual code. Good luck. Three minutes on the clock. Cal, I do.

08:31:00
I study all the time, I do Anki and it still doesn't make sense to me. Ask good questions in discord, try and articulate what doesn't make sense to you and let somebody explain it in a way that might unlock it for you. So if you're putting in the work, you're doing the repetition, make sure that you're asking good questions on discord so that folks can explain it in a slightly different way. And hopefully that helps you get over those barriers shout out to everyone that's been here for the whole stream Exactly, that's wild

08:32:00
Today's class has been intense for reviewing, loving it, yeah it's a little much, but I'll be dreaming about this stuff in my sleep tonight. I do dream about Cody once in a while. I'm going to rewatch an Anki. Hey, there we go.

08:33:00
30 seconds, folks. Nine hours wasn't planned in my Google calendar. Yeah. I said, I didn't know how long it would go. Takes us what it takes us. All right. Let's take a look at this together, folks. Come on back. All right. So I'm going to write my pseudocode first. If I want to convert something to Fahrenheit, Well, the first thing is I need, I need the value, need the value, then I need to convert the value right from C to F, and then I need to like show the value to

08:34:00
the user, right? So if I had no idea how to do anything, this is a really good start. I know how to get values out of the DOM or out of inputs because we've done that already today. The conversion I might need to Google and then showing the value we've already done today as well. So like two out of the three we've already done. I think I might wrap this in a function just to be like a cool kid and maybe tie it to an event listener. So I might have like an event listener. Let's see. So let's do document.querySelector. And we'll just say when they click on the H1, we'll run the add event listener, like our Smurf that's listening for the click. And when they hear the click, we will run the convert function. There we go. And so then I'll just do function, convert, beautiful. I'm gonna bring this into that function. And

08:35:00
there's nothing in my HTML. We'd have to go and add this stuff to the HTML. I like the H1 that we're clicking and things like that. But let's say we get the value from the input. So let's say, let's create a variable called let enteredVal equal and then we'll go to the document again. We'll use our query selector and we'll look at the input and we'll get the value from that input. Beautiful. So I'm going to get the value from the input. What's something that we learned that I should do today if I'm getting this value out of the input and I'm expecting something specific? Yeah, just so we don't run into that concatenation again, we want to make sure that we wrap this in number just to make sure that we're actually dealing with a number here. We don't know if we'll run into it or not, but it's just, I feel a

08:36:00
bit better at the end of the day. All right, let's convert entered valve from Celsius to Fahrenheit. So we'll do entered. Well, let's actually just do let temp equal. And what's the conversion math for me? Somebody give me the conversion math in chat. What's the conversion you got for me? Oh, there's an easy one, I never remember it. times 1.8 plus 32. All right, so we'll do entered val times 1.8 plus 32. That's it. Cool, awesome. And then we're gonna show the value to the user. So we'll go to the document. We'll go to our query selector and we'll go to let's say our h2 and

08:37:00
inside the h2 we'll use the inner text and we'll put inside of it whatever temp is beautiful so here we have our event listener it's listening for a click on the h1 whenever it heals the click it runs the convert function that convert function grabs the number out of the input make sure it's a number stores that in the variable entered value down here we create a new variable called temp we do the conversion entered value and then we pop that answer into the DOM by selecting the H2, putting some text inside that H2, and that text is the converted value. Boom, let's go. Turn up. It gets me hype. Gets me going. Now,

08:38:00
of course, you're gonna have to go and add. You're gonna have to add the H1, the H2, and the input. OCC, what's up? Hey, thank you for the gifted subs. I appreciate that. Hope you're doing well. Thank you for being here. You've been with us for the whole time almost. I think so. Like the whole time, indeed. So I appreciate you. Thank you for being here and thank you for the gifted subs. A lot of folks got gifted subs today. You got a gifted sub today. You gotta flex those emotes. You got a gifted sub today flex those emotes. I think we're up to like I think it's Wow I think it's like 40 50 gifted subs today flex those emotes. Give me those micro Leon's whatever you feel like spamming We go get whatever you got Couple more streams like this and we don't have to start worrying about only fans. Yep Start doing a few YOLOs here and there it's gonna get it's gonna get wild real quick HondaCivic,

08:39:00
hey, thank you for the five gifted subs as well. I appreciate you, thank you for being here. All right, let's save this up so folks have it when they go back to Discord and let's move on to the next example. All right, y'all are wildin', thank you. TyLove, thank you so much for the gifted subs, I appreciate you, thank you for being here. All righty, chat, what is the best TV show of all time? Answer please. Beautiful, beautiful. Cinder, Cinder's VTA. Thank you for the gift of subs, I appreciate you. Thank you so much, thank you for being here. All right, it's of course The Bachelor. Thank you for everyone for getting the question right. OCC, Honda, Tylo, Cinder's, appreciate y'all, thank you. All right, the answer is The Bachelor, and that enables us to move into our Bachelor code. I'm not gonna have you all spend time on

08:40:00
these. I'm gonna walk through them just so we can see them. I'm just gonna just walk through them so we can see them. So I'm gonna close this out and I'm gonna open up bachelor code and in the bachelor code, we have one, two and three. So let's take a look at number one. And if we look at the HTML, we got some stuff going on here. So let's go ahead and open this in the browser. All right. So here we have Claire, Nikki and Charlene, all contestants on Juan Pablo season of the bachelor, probably the most con one of the most controversial seasons of the bachelor of all time, mainly because Juan Pablo got to the end and did not propose to the lovely Nikki. So what I want to have happen is when you click on final rows, I want Claire and unfortunately Charlene to disappear and for us to only see Nikki, let's go going to take a look at this code. We can see that the thing that we are clicking on has the idea

08:41:00
of final rows, right? The idea of final rows. And then the images down here have the IDs. ID of Claire, ID of Nikki, ID of Charlene. And so if we go here and look at our JavaScripts here, we have to start our event listener. So we can see we have a function down here and we want this set of instructions to run when there is a click on whatever has the idea final rows. If we look, that H1 has the idea final rows. So when we click on this, we want this set of instructions to run. So we're gonna go ahead and put those set of instructions in here. It's gonna say run the hide instructions when you hear that click. Beautiful. Now we know we want it Claire and Charlene to disappear. So if we look, Claire and Charlene both have an ID, so we can use those IDs, Claire and Charlene. So we'll come in here, we'll

08:42:00
select Claire using the ID, so we need the OctoFORP, and we'll unfortunately select Charlene, and we'll use the ID again using the OctoFORP, and there we go. So what should happen now is when we click on final rows, we should run the set of instructions, hide, right? Run the set of instructions, hide, get timed out, cool. Run the set of instructions, hide, and then Claire and Charlene will both be hidden, meaning they'll set the style to display none, meaning that they will no longer be there in the DOM, that rendering of the DOM, right? Beautiful, so let's go ahead and take a look at this. Let's refresh, let's click on final rows, and there we go, Claire and Charlene both hid, and now we just have Nikki left, beautiful.

08:43:00
I agree with the guy that got timed out. All right, there you go, join them, welcome. Hope you have some fun together, beautiful. Okay, there we go. You got beautiful. So there we go. We have the final rose, uh, both Claire and Charlene, uh, disappeared, just like our two friends that don't like the bachelor and just lovely Nikki is left. All right, let's take a look at the next one here. And of course, remember we did this for a whole class. So we're going to go through this one a little bit faster just because because we've seen a lot of this stuff already tonight. But if you go through our JavaScript classes, you'll see this at a much lower pace. We spend more time going over this stuff. Alrighty. All right, this one's a little bit more complex. Let's open up the HTML.

08:44:00
Alrighty. So here we go. We have Andy, Claire, and Charlene. Now, Andy became the next bachelorette. It clearly should have been Charlene, but unfortunately, Andy became the next bachelorette, district attorney, assistant district attorney from Atlanta. But I want that power to be in your hands, right? I want that power to be in your hands. I want for you to click on Andy and for their image to show. If you were to click on Claire, I'd want their image to show. If you were to click on Charlene, I would want their image to show. And so the idea here is if I click on Andy, the others two should disappear and only Andy should show. If I click again, Andy should disappear. And so the idea is I just want to be able to click on these names and see the different individuals appear and disappear. All right. So let's go ahead and take a look.

08:45:00
Let's take a look at this stuff here. It's all jokes, folks, it's all jokes. Alrighty, so we have document query selector Andy, document query selector Claire, document query selector Charlene. What the heck am I doing here with these three? Why am I doing this? What am I saving myself from here with these first three lines? Saving my fingers, exactly. I'm saving time from typing. So instead of having to constantly type out document.querySelector Andy, I can just store that in Andy. Wherever I see Andy, it's now this whole document.querySelector. If we look at the HTML, we can see that these images have the ID of Andy, Charlene, and Claire. And the actual things we click on have a slightly different IDs. Andy next Claire next and Charlene next so instead of having to constantly grab

08:46:00
the images I just grab them once and I store them in these Variables it saves me from having to repeat that document that query selector over and over and over and over again beautiful So if I click on Andy next I want a certain set of instructions to run and if we look down here here's my Andy next set of instructions. And so this is just going to be called Andy next. Beautiful. Now, whenever I click on Andy next, I want something very specific to happen. I want Claire to disappear. And if we look, why are none of their images showing up by default? Like if we look at this page, their images are not here. why are their images not showing up on the page by default?

08:47:00
Exactly, they have that hidden class. So if we look at our CSS, we can see that they have that hidden class, which is making them display none. So we can actually use this to our advantage. We can hide stuff by giving that class and we can make it appear by removing that class and that's what we get to here with this set of code we're saying alright. If we just clicked on Andy, we obviously want to see Andy. So let's make sure that Claire is hidden by adding that class of hidden. So if Claire already has the class, it doesn't really do anything. But if Claire was visible, we would add that hidden class and they would disappear. So that's what that adding is doing. We're saying look at Claire, right? Remember document query selector Claire,

08:48:00
find Claire, look at all the classes, look at all the classes on Claire and add the hidden class to Claire, right? Same thing for Charlene. Let's go ahead and add the hidden class as well. And then on Andy, the one that we actually want to be seen, we're going to not just add hidden, we're going to toggle hidden. Now toggle is very interesting. It's like a light switch. If the lights are on and you hit the button, the lights go off. If the lights are off and you hit the button, the lights come on, it's a toggle. The lights are on, you hit the button, they go off. If the lights are off, you hit the button, they come on. It's the same thing with toggle, right? It's the same thing with toggle. So the idea here is if Andy already

08:49:00
has hidden, it'll remove it, and if it doesn't have hidden, it'll add it, that's the beauty of toggle. So if we save this and we actually go look in the DOM, we'll see what's actually up and happening. So let's go ahead. I'm going to inspect on Andy next. And let's actually look at the images down here. So right now, we can see that Claire, Andy, and Charlene all have the hidden class. So pay attention to these classes here. They're about to change. Ready? I'm going to click on Andy. Three, two, one. Oh, did I refresh? There we go. I'm gonna come down here. Three, two, one. Oh, I forgot, we didn't comment out the other code. Let's go and comment the other code. It's really not liking all the other stuff that we have here. Let's comment that out. Let's comment these out. It was getting too many errors because of all that gibberish insert

08:50:00
code here. So let's save that. Let's go back. Let's give it a refresh. Beautiful. All right, let's do our Andy next, let's click. All right, so when we click, notice what happened. Claire and Charlene still have the hidden class, but notice hidden is removed from Andy. Andy no longer has the hidden class. It was toggled off. If we click on Andy again, we can see the hidden class come back. Go away, come back, go away, come back. That's the beauty of the toggle. And as you toggle and you're adding and removing that class, Andy will appear and disappear, appear and disappear. And the beautiful thing is we have gone ahead and added hidden to Claire and Charlene, even though they already had hidden. We're just covering our bases because we don't

08:51:00
know if we're clicking somewhere else and Claire is visible if Claire was Visible and we would want Claire to disappear so that Andy could be shown So we always just kind of we just kind of hard-coded the hidden on Claire and Charlene Just in case we had originally clicked on there We don't want to have to keep track of like state and keep track of whether or not those things have been clicked in the pass. So every single time we click on Andy, we hide the other two and show Andy no matter what. All right, let's see an example of that. Let's fix Claire and we'll leave the last one just to save some time. All right, so Claire next. Let's go ahead and call Claire next. Beautiful. And Claire next we will target uh let's target Andy and we'll add the class hidden

08:52:00
beautiful let's target Charlene and we'll add the class hidden and then let's target Claire and we will toggle the class hidden again. Beautiful. Now I created these variables up here, but if I wasn't creating these variables, I would wind up having to be typing this out every single time. So this is what it would look like without the variable. Document that query selector Andy, every single time I'd be doing that over and over and over again. So to save me some time, I created that variable. Oh, beautiful. All right, let's go back and look in the DOM. Let's refresh. Let's look at these images. So I'm gonna click on Claire. Oh, did I not save? Let's see. Oh, I forgot to... Nope, everything's commented out. Let's

08:53:00
save, let's make sure I refresh. All right, let's look at the error that's in the console. Claire is not defined. Oh, that's a good error. What happened? There is not defined. What happened? It doesn't like it. It says line 18. It does not like line 18. Let's go look at line 18. Line 18 does not like Claire. It's not defined. That means we don't have a variable named Claire, but wait a minute, let's go up and look. Oh, we forgot the I. So since it's missing the eye doesn't work. We get that undefined. There's no variable with that name Come back and refresh let's click on let's go back to elements so we can see the images and let's click on Claire Great so we can see that Andy

08:54:00
and Charlene keep the hidden class but the hidden is removed from Claire. Now here's where it gets fun, because now I'm going to click on Andy. Three, two, one. We saw that Claire got the hidden class, but Andy had the hidden class toggled off. So that's the cool thing. We can jump between contestants now, because we set it up so that as we click on the contestant, the other two get hidden. Beautiful. And the other thing that we can do here is we can actually toggle Claire off as well. Boom, Clary disappears because we have that toggle on the hidden. So we toggle it off, toggle it on, toggle it off, toggle it on. And so we can actually jump between people and even toggle those individuals off. Beautiful. I can see clearly now, hey, glad you're doing it. Like I said, we went through these ones in detail during class, so if you need to see a little bit slower, Definitely

08:55:00
watch our class on this one All right. We have one more here that I'm just going to talk through and then we're going to Take our break at the top of the hour Well, so number three here All right, this one gets a little wild Little wild so if we look at the HTML We have two contestants We have Claire and we have Nikki. They both have the class of contestant. Right? We both have the class of contestant. However, one also has the class of Rose, which is Nikki because Nikki indeed had the final Rose. Beautiful. So what we want to do is if, If the contestant has rose, we want to, let's go back and take a look. If the contestant has a rose, we want to show their image, which would be showing Nikki's

08:56:00
image. But if the user is to click on Claire, which does not have a rose, then we would alert wrong. And there's some special stuff in here that I want you to see. So we're going to talk through it. So we can select all the contestants and use the class contestant. Beautiful, we gotta use the dot, don't forget, because we're selecting all the contestants that have the class contestant. And the beautiful thing is this query selector all. This enables us to select all of the elements that have the class contestant. Then here, what we are doing is a special kind of built-in loop. And what we are doing is we are adding an event listener to every single thing that was inside of contestants. So all of the contestants, every person that had the class contestant is now going to get this event listener. We loop through all the DOM elements and we

08:57:00
add the event listener. Now I don't need that to make sense right now, but we're gonna get to a raise in the coming week or so. And then when we get to a raise, this will make more sense. What's happening here is we basically have a list of all the contestants were looping through that list of contestants and adding an event listener to each one and that event listener is going to call the function check for Rose. So what we just did is we added a smurf to Claire and to Nikki because they both have the class of contestant. Beautiful. So now each of those words, each of those contestants have the click event. And so what we're gonna do is we're gonna click on one of those contestants. And we're gonna say, hey, the contestant we just clicked on, that's the target. The one we just clicked on, check its classes. If its classes contains rows,

08:58:00
if it contains rows, we know that we clicked on Nikki and we should toggle the hidden class on Nikki. If the contestant we clicked on, right, if we clicked on it and it does not contain Rose, like if this is false, this will not run and the else will automatically run and we'll see the alert of wrong. So in this case, if the thing we clicked on has Rose, we know we clicked on Nikki, we show Nikki's image, but if it does not have Rose, is we know we clicked on Claire and we alert wrong. Beautiful. And so we save all that. Let's see if it's running. You click on Claire. Oh, this is the wrong one. I haven't even opened up the right code. Here we go. Beautiful. Click on Claire. We get wrong because

08:59:00
Claire did not have the class of Rose. We click on Nikki. We see their lovely photo. Oh, beautiful. Already folks, we're at the top of the hour. When we come back from our break, we're hitting the home stretch, which is loops. We're gonna finish up our loops. We will do a review that reviews all the JavaScript and then we'll call it for today. So top of the hour, let's take our five minute breaks and then we should finish up shortly. All right, five minutes on the clock here. Please, if you're able, get up, move around, hydrate. It's been a long session, So please take care of yourselves five minutes You got this see in five I'm gonna run some ads

09:00:00
You

09:02:00
you You

09:03:00
I Goldfish grew legs and took me for a walk a All righty, about a minute left, folks. How do you feel about taking crypto as a form of payment? Well, the cool thing is that there are a lot of like the major payment processors also do crypto. Stripe, I believe, still does crypto. I think they should just rolled out like new stuff for crypto as well. I mean, I wouldn't personally do

09:04:00
it, But I know a lot of companies are interested in it. Well, I'm just waiting until I'm done. I'm weird like that. I don't know why. What should we say if someone approaches us for an interview and we don't know the framework required yet? That's gonna happen pretty much for every job that you apply to. You're not gonna know all the tools that they use. That's impossible. If you're really interested in the job, maybe do a quick tutorial over the weekend before your interview Just to show that you can work with it, but that's about it All righty All right. Let's finish this up strong folks. Welcome back. Welcome back This will be our our last last minutes together today. We'll back at it on tuesday though. Don't worry All right. Let's talk about loops

09:05:00
What are loops? Loops are a way to repeat an action some number of times. So if you want to do something and do it again, to do it again, to do it again, right? That's what loops are for. There are three main kinds of loops in JavaScript, for, while, and do while. And they all just kind of offer a different way to like start and stop your loop. That's about it. We actually know that there are more than this, just those three types of loops, because we just saw one. We just saw this lovely like for each, which is a method built into JavaScript that enables us to loop through stuff. So there are more than just the for while and do while, but those are the first three that will kind of emphasize in class together. For loops, kind of break down having three key things. The count, when we stop counting, and how we increment that count. They all have very specific words like initial expression, and condition expression increment. But I just like to look at them

09:06:00
as like, hey, this is the thing we're counting by. This is when we stop counting. And this is how much our count goes up by each time we're done doing something. So if we were to let this for loop run, what we would wind up having is the very first time this runs, I is equal to one. We're gonna check is one less than five. Since that is true, we're gonna do what's inside the curly braces and we would console log one. Slaggy A, thank you for the, Slaggy 90, thank you so much for the gifted subs, thank you for being here. All right, so we'll do the one. Then we're gonna add one to our counter. So I would now become two. Is two less than five? Yes, that is a true statement. We do what's inside the curly braces and we console log two. Then we go up by one. So now I is three. Is three less

09:07:00
than five? Yes, that is a true statement. We do what is inside the curly braces and we print three to the console. Then our I goes up by one. Is four less than five? Yes, that is a true statement. But we do what's inside the curly braces and we console log four. Then we add one to I and now we're at five. Is five less than five? No, that is a false statement. So we are done. Five is not less than five. It is equal, but it's not less than. So we stop. And so this for loop would wind up printing one through four. Beautiful. Right, just James, Dan, thank you so much for the gift of subs, thank you for being here. Cool, so it just stops. If I wanted this to print out five, what could I change? Like if I wanted to do one through five, what

09:08:00
could I change about this for loop so that I would also get the number five? Yeah, the equal sign, exactly, we could do an equal sign. Equals five, beautiful. So now that would go all the way up to five. And once I was five, we would say, is five less than or equal to five? That would be true. So then we would console log five. We'd wind up adding one to I, and then it'd be six. Is six less than or equal to five? No, that's a false statement. It's actually greater. So then we would stop. Beautiful. Alrighty. Let's take a look at our 21 savage loop. 21, 21, 21. If we look at our starter code We have 21 savage loop here So in our serve savage the 21st We have some JavaScripts and I want you to create a function that has a loop That prints 21 times the

09:09:00
console and then call that function Bonus if you can print 21 21 times to the DOM, so I'm gonna give folks I want you to practice your for loop. We just saw it on the slides I'm just gonna put two minutes on the timer here practice your for loop. See if you can get this running And we're gonna go over it together two minutes on the clock as quickly as you can and we're going to go over it together Is this the last topic yeah Tony this will be our last one we're going to do a review of kind of everything real quick and then we'll do a raid and call it a day.

09:10:00
How to negotiate ballpark budget is too low. Sometimes you just got to walk away. Sometimes they just don't have the budget for you. That's okay. Just point them to somebody else that might be able to do their, their, uh, their budget. It's about the ethernet. It's up until class Tuesday. No, my resilient coders cohort starts tomorrow. I'm super excited. it. New cohort starts tomorrow. Moogle. Hey, thank you for the tier three. I appreciate that. I have about 30 seconds left.

09:11:00
All right, come on back folks, come on back. All righty, let's create a function that prints 21, 21 times to the console and then call that function. So we're gonna call this 21 console. Or let's call it console 21. Sorry. I don't like don't start with variables.

09:12:00
I'm sorry variables with our function names with the numbers So we'll call this uh console 21 cool And we're going to print this 21 times to the console. So let's create a let's create a for loop in here And in that for loop, let's start our I Equaling to one and then we'll go while I is less than or equal to 21 and then we'll go up by one each time. And every single time we do this, we will console log 21, the console. Beautiful. And then let's go ahead and call this. Console 21. Beautiful. And that should be good. Well, I is less than or equal to 21. Make sure we don't have an infinite loop. Looks good. Let's save. Let's go ahead and open this in the browser. All right, let's open up our inspector.

09:13:00
Let's look at the console, and there we go. 21 times to the console. Let's see if we can do the second step here, which is the make it print 21 times to the DOM. So let's comment out our console log here, and do we have a place that we can put it in the DOM? Yeah, we have this ID that says Savage Says. Let's put it in that H2. There's only one H2. I'm just gonna use the H2 instead of the ID. Let's go ahead and do document.querySelector, and we're gonna grab that H2 just like we've been doing all night, all day, and we're gonna put inside of there 21. 21, now if we just did this, what it's going to do is it's just gonna put 21 over and over and over again, but we're not gonna see it like add it, it's just gonna say 21. So let's actually save this and see it. We know that that loop

09:14:00
runs 21 times, but at the end we just see 21 here, right? We just see 21 here at the end. It's because we haven't like actually concatenated it, we just did something 21 times. So let's go ahead and make sure we're actually doing some concatenation here. So instead of doing the equal, we're just gonna do plus equals. So we're gonna keep adding 21 each time. I'm gonna put a space in between each one and I'm gonna save it. And now when we refresh, we'll see 21, 21 times to the DOM. Beautiful. All right. Alrighty, well done everyone, good one. Alrighty, we also have other types of loops, while and do while, but we'll see those next week. Alright, one last challenge, and then we'll end the evening folks. It's the bring it on challenge. So let's finish strong, please. So I'm gonna go ahead and show you the challenge.

09:15:00
It's bring it on. We got some JavaScript to practice here, some variables, some functions, some conditionals, some loops. Let's put five minutes on the timer, give it your all, try and recall all the things we did tonight. If you need help, go back and look at the other examples, look at the slides. Let's do this. Let's go through it together. Don't leave now. You've been here the whole time. Finish strong. Then we'll do a raid, get those sweet, sweet channel points, and we'll end it here today. Five minutes on the clock, folks. You got this.

09:16:00
Got this folks, four minutes left. My brain left the house, eh? I went go-karting last night and now I have a headache from getting rammed into? I hope it's not a concussion. Bird Laws! Hey! I'm well versed in Bird

09:17:00
Laws actually. Thank you so much for the gifted subs. Thank you for being here How do we set up the plus equals in the savage loop again, I'll show it while folks are working on it Work more. Hey, thank you for the for the thousand bits. Appreciate you Here it was, it's just the plus equals here, that's all the secret is to it, plus equals. Birds aren't real, get out of here. Just some light whiplash. I'm working on

09:18:00
the bring it on again 2 minutes 22 seconds left You got this folks Yeah, where are we at? What's our uptime? I don't even know 921 let's go turn up nine plus hours. Let's go, we should just go for Tentenoc.

09:19:00
Sam squared, no worries. This was a, this was a quick overview. We got 18 classes for you. Locked and loaded on YouTube, exclamation point, YouTube. We got a catch up crew on discord. So you can go at your own pace and get caught up. I really think we have an 11 hour one somewhere. I don't know why I think that I know we had a niner. I think there was an 11 to Maybe we worked it up in the two and it equaled 11. But yeah, this is up there for sure Just play word on page it just turns into me playing Pokemon just to beat the long longest stream No, I need to eat That's a good idea though I'm gonna go on ham on the crosswords. I'd love a Pictionary stream. Let's do it. Well, let's do a Pictionary stream.

09:20:00
All right, 20 seconds, folks, this is strong. Hey, turn up. All right, we're gonna make it happen. Chat is full of champs. Heck yeah, they are. We don't get got, we go get. Well, I got to say, go get. We came, we got. We came, we saw, we got. Alrighty, folks. Let's go ahead and do some variables here. Create a variable and console log the value. All right, let's call this let almost done and set it equal to five. and then let's console log, almost done. Beautiful. Create a variable, add 10 to it, alert the value. Let num equal

09:21:00
55 and we're gonna add 10 to it. Num plus equals 10 and then alert num. Wonderful. Beautiful. Create a function that subtracts four numbers and alerts the difference. Function, sub four, and alert. Beautiful. And so let's go ahead and take in our four numbers. And one, and two, and three, and four. And then let's go ahead and alert the difference. We'll do an alert. And we'll do N1 minus N2 minus N3 minus N4. Beautiful. And we alert that difference. It doesn't say to call it, so we'll just keep moving. Create a function that divides one number by another and returns the remainder. So it's not going to be division. What is it going to be? It's going to be what? Not divide.

09:22:00
Not divide, but what? Modulus, exactly. So let's create a function, return remainder, beautiful. And then let's go ahead, we need to take in two numbers, do N1, N2, or actually, no, let's get funky with it. Zebra, unicorn, beautiful. Just to show that it doesn't have to be N1 or N2. Some people, sometimes you get tripped up on that. And we'll return zebra modulus unicorn. Beautiful. Zebra modulus unicorn. That'll be the remainder that we are returning. That should be good. Conditionals. Function that adds two numbers that the sum is greater than 50 alerts Jumanji. So we'll create a function. Sum greater than 50 Jumanji. Let's go, let's take in two numbers, n1,

09:23:00
n2. Let's add them together. So let's say let sum equal, we could do it directly in the conditional, but it's a little bit neater, n1 plus n2. And then let's go and set up our conditional. And we're gonna say, if sum is greater than 50, we can come in and alert Jumanji. Jumanji. Exactly, beautiful. Adds two numbers. The sum is greater than 50. Alerts Jumanji. Beautiful, beautiful. All right. Create a function that multiplies three numbers and the product is divisible by three. Alert Zebra. So let's go and create a function here. Multi three and alert zebra. Zebra, not fully descriptive there, but close enough. Let's pass in N1, N2, N3, N1, N2, N3. Multiplies three numbers. Let's go ahead and say let product

09:24:00
equal N1 times N2 times N3. And if the product is divisible by three, so we can use modulus to check to see if it's divisible by three. So if, beautiful, you can say if product mod three equals zero, because if three goes evenly into product and we get zero back as the remainder, so if that, if both, if zero equals zero, So we know that it was divisible by three and we can go ahead and alert zebra. Beautiful. All right, we've got a loop down here. Create a function that takes in a word and a number, console log the word X times where X was the number that's passed in. We'll create a function called log word X, X times.

09:25:00
Beautiful. And we're going to take in a word and num. And we're going to set up a for loop in here. And that for loop, we're going to set, let i equal one. And while i is less than or equal to num, we're going to keep doing our loop. We'll add one to i each time. And so this will go from one all the way to our number. And each time that that runs, We will console log No, I'm putting will console log the word Beautiful alrighty that is We are the logs we carried them all first try Let's go easy easy nine and a half hours Easy nine and a half hours. Let's go Alrighty folks, hope

09:26:00
you got something out of the review. I hope you had a chance to see stuff for another time to, to, to, to, to have it wash over you again, right? To make sure that you saw all these things. And if you're brand new to us, welcome. I know this was a lot, it was a lot to do in one sitting. We've broken all this stuff up into 18 different classes that you can go back through on YouTube Leon Noel comm slash YouTube look at the cohort to playlist. It's all there for you If this was a review for you I hope things click maybe a little bit better at a second time and Even though we've done review not all these concepts should be there yet. Remember the marathon not a sprint It doesn't have to click. It doesn't have to be all there for you. That's okay We're going to keep trudging going to keep putting in more time more effort and things will come With that time that you put in so it was an absolute blast to have you all for For nine and a half

09:27:00
hours together. What a day I'll share all of this code on discord in a few minutes afterwards So if you want all the solutions we did today, those will all be dis on discord in just a few minutes Where we at? Let's see We're over 1500 people, so this will go on YouTube. We have to wait the day because we're partnered on Twitch and it'll go up on YouTube on Tuesday. So we're there. Let's do a raid. Let's spread some love and positivity around. I know we're all tired. Let's go. Let's give this person some follows, give them some love, say what's up. We're going to Dion Saga. They're working on some character creation. It looks like they're building some games. Let's go ahead. Let's spread some love, some positivity, and then have a wonderful rest of your day. Rest of your night. You deserve it. Thanks for being champs. Thanks for being here the whole time. I'm gonna queue up the raid Beautiful they're working on some game development So

09:28:00
I'll see you all over there at the raid Have a wonderful rest of your day get some rest get some hydration in I'll see you on Tuesday We got a lot more stuff to get into on Tuesday folks I'm excited. Lots of really big news this week. Big news. I'm super excited to share the news on Tuesday. I'll see you all in the raid. Peace. Have a good rest of your day.