Introduction

We're back, did it again, did it again. Let's go. Fingers only. Hey, good morning. Good afternoon. Good evening. No matter where you're coming from. Hope you all are doing well. Welcome back everybody. Welcome back. Class three. Let's go. Turn up. So today's today's the first day with the hair down. So we got to, you know, make sure we're focused on it.

Prime with the raid. Let's go What up, how you doing? Hope you're doing well. Hope your stream was well We got to make sure that we get folks coming your way Hopefully maybe like I don't know if you're alive on a Sunday, but one of these nights We got to get make sure everyone here gets to come back and see y'all now folks Hands down the best streamer in our category prime with the raid. I appreciate it. Thank you so much Hands down the best tech streamer, best coding streamer. If you have not checked them out, I'll make sure I'll drop a link to their channel. We'll shout them out as we get going. But you definitely need to swing by their stream. Hands down the best. So one of these days, hopefully soon, we gotta get the raid coming back to you. I appreciate y'all swinging by. Welcome everybody. Hey, let's go. So for folks that are new, we're doing a 30-week software engineering bootcamp.

We're starting from the beginnings. We're just in HTML land right now. We're going to go full 30 weeks to give you the skills that you need to be a full stack software engineer. Last cohort, we saw 75 folks get jobs. It's probably a little bit higher now. We had a few come in a couple of days ago. So yeah, welcome. Hey. Yeah, yeah. First day with the hair down, you know, you got to do it right. You gotta make sure that it's just just just the focus Right just the focus Alrighty folks tonight. We got a really good class. Uh, we're probably gonna end a little early tonight We're gonna get some lots of hands on keyboard practice tonight We got some more html to get to uh on class two We didn't get to the end of everything we need to cover So tonight we're getting our spaced repetition in we're getting our review in we're making sure that we feel comfortable with the topics That have been taught so far and then we're pushing I'll push a little bit further All right, we're gonna push a little bit further. All right, and then we're gonna get down to actually typing some stuff tonight We're gonna be building three different websites something. We've already seen before we're gonna make sure we go over the BBC together We're gonna look at Khan Academy together, and we're gonna look at TechCrunch together, and we're gonna code it all out.

So if you're here to get some practice in tonight, you're in the right spot. If you're here to just look at some beautiful hair, you're in the right spot. But if you're down to learn, let's get into it. We always like to start with a little bit of questions. So the question of the evening, the question of the evening is as such would you rather like snap your fingers and they produce a new season of your favorite television show or you snap your fingers and they produce a sequel to your favorite movie so do show or movie in chat for me please show a movie Primogen thanks again for for the raid. I really appreciate it. Oh Folks are going show Seeing that show go wild, okay Man, I thought I'd be a little bit more balanced But now you all are definitely feeling the the show over the movie here. So I just watched over the weekend two seasons of Snowpiercer, two whole seasons. While y'all were doing your Shay Howe reading, I just, I tore through Snowpiercer. It was, it was pretty, it's pretty wild. Love the movie, love the TV show. And so as soon as I was done the second season, I was like, come on, they gotta give me a third. And so if I could have snapped my fingers in that moment, I would have picked another season is still piercer, but Third season comes out in a couple days and then they've already planned a fourth season. I'm still gonna snap it Give me a give me a fifth season All right, everybody I was this our questions what questions you got for me tonight Will we use Emmett for abbreviation at some point not really It's not something that I like my folks to start off especially in the beginning But like I said, once we get through the basics together, it's up to you. You can do whatever you want.

I just like to show the basics first. I like to get folks comfortable using tools that they might not have access to during interviews. And then if you decide that there's something that's gonna improve your workflow, by all means, go for it. What if we didn't get the homework done? I'll talk about the homework in a little bit. We got a whole slide for it. But yeah, the goal is that you get the homework done on time. Uh, if you're shooting for touring or hopper, you actually got to get stuff in on time. If you're in Hamilton, you can take your own pace. Uh, and life happens, right? Life happens. Uh, one of my dear friends and somebody I consider a mentor, uh, always told me God, family academics, right? So God, family academics, something I live up to family's going to come first, right? Your, your, your, your, your responsibilities have to come first. learning will take a backseat to that, but you can always catch up.

In fact, we have catch up crew, which we'll talk about in a few seconds. Roy said, why are you a floating head right now? Because I want you to focus on the hair tonight. We're going to be a little bit shorter of a class cause we're just getting a lot of review in. And so if we're going to get a little bit short of a class, a little bit more time to focus. Uh, I might as well focus on the hair. Let's get a few more questions in while folks get in here. Folks are always trying to run to their computer right as the stream is starting. Where do we submit the homework? We're gonna get into all that in a bit, but if you noticed, whenever there's homework due, in the message for today, in the Follow Along with Serials channel, There will always be a place to submit it My hair routine. My hair routine is not that wild. I Use OGX products. I don't shampoo every day. I Don't even wash my hair every day, which is pretty normal. So a lot of times I'll just have my hair up I feel special for y'all so I get in there and then Shea moisture every other every couple of days as well.

And then just lots of water. You gotta drink your water folks How far advanced will we learn CSS? So on Thursday we start CSS. So today is like our last day of just HTML. Thursday we get into the thick of it with CSS. And so by the end of our time with HTML and CSS, I should be able to give you a photo and you should be able to build that photo in HTML and CSS. Like if I give you a website, you should be able to build that website in HTML and CSS. Now, you could spend your whole career building stuff, right? Building stuff with just HTML and CSS. We don't care about perfection. We write vomity code around here. We just want it to work. We want it to look at it and be like, yep, that was the design, that was the site. And so you'll have your whole career to like get really into it. So like really understand all the nitty gritty details, why things work, to go super deep into all the different types of layout systems.

But for us and our purposes, our goal is the job, right? And so we're gonna learn enough so that we can get our sites up and live looking good and move on. We don't have to be pixel perfect, exactly. No pixel perfect around here. What is my preference? Front-end, back-end, I love back-end. Stick me in the back-ends, I don't have to worry about stuff. Let me build my APIs in peace and call it a day. Yeah, fronting, fronting gives me too many nightmares. Will we cover a sequel? No, we're gonna be focusing mainly on MongoDB. We'll touch a little bit of Postgres, but mainly MongoDB. What kind of tea am I drinking? It's always the same. It's always that that Tazo vanilla chat.

I need to I need to get a t-sponsor is what we need Oh bootstrap material or tailwind well our og sam you can do bang exclamation point sam here in chat, uh They uh, they're they're going with material ui so i'm going to go with them as well It's got a new gig Cool. Alrighty, folks. Looks like we got the whole crew in here. I'm glad you stuck by. Let's move on from the questions and let's see what we're gonna talk about tonight. So, tonight we're getting our review in. I like to go slow in the beginning. I really do. For folks, if this is your first time, a lot of this stuff can be overwhelming. A lot of this stuff can just be a real torture in the beginning if you've never touched code. So we have folks from all ranges here. We've had folks that have like built full stack apps already and they're here to learn stuff that's going to help them get a job. And we have folks that have literally never opened a text editor before. So this first week, two weeks is really going to go a little bit slower than you would see in other programs, see in other places. I really do want to get that review in.

I really do want to make sure that folks kind of get a clue as to what's going on, then we pick it up. We get a little bit faster, we get a little bit faster, we get a little bit faster, right? So if you're brand new, this is gonna be great review for you today. If you already kind of know what you're doing with HTML and CSS, great, go fast. Like when we get to our coding challenges today, see how fast you can go, see how far you can go, push yourself in that moment. But for folks that are brand new, let's take our time, let's ease into it and we'll move on to CSS on Thursday. Cool, so we're gonna review, of course, the client server model. We're gonna see some HTML tags. We're gonna take a peek again at that brownie recipe, just to talk through some of those semantic decisions. We're gonna see some new HTML tags that we didn't get to on Thursday. We're gonna talk about the second most important thing of the evening. First is always separation of concerns, but the second most important thing this evening will be progressive enhancement and talking through why that's an important concept and why, as newly knighted developers of the web, We need to incorporate that into our building of our front ends. We're going to build, uh, the BBC together. So if you've been sweating that homework, that's going to be due on Thursday. We're going to actually do some of it together.

Not all of it, but some of it. We're going to do Khan Academy together and we're going to look at another newspaper or news website called TechCrunch and build it. So there'll be kind of like us walking through it together. We're going to, we're going to highlight circle stuff. We're going to not like highlight it in terms of notes. We're going to like circle different pieces of it. We're gonna talk through the design and then you're gonna get a few minutes to code it and then we're gonna go over it together and we're gonna do that at least three times today. So if you've kind of been sweating the writing the HTML, boom, we're gonna get into it three, four times tonight. Any way to get rid of the ads while watching the VODs? Well, our past two classes are up on YouTube and I do not monetize my YouTube. so you can go on YouTube and watch the past two classes without any ads. Yeah, so that's why I keep the YouTube not monetized so that you can just watch them ad-free, yeah. Yeah. Now, there are some rumors that YouTube will be, that YouTube will be kind of turning on ads even for non-monetized channels. If that happens, then we'll have to figure out some other way, but for now, I'm monetized.

Bugaboo, got two interviews back-to-back tomorrow. Let's go, wish you luck. Hey, wish you all the luck in the world. Good luck. You don't need it, you got it, you're built for this. Alrighty, so that's what we're up to today. And at the start, we gotta talk about a few things. So we got to talk about some discord stuff. Discord has been popping off. We got 20,000 people in there now. So we're going to talk through some changes that we made, some more changes that are coming. And so that's where I spent a little bit of time in the beginning, just to make sure everybody's on the same page in terms of how we're gonna use the discord going forward to make sure folks get the help that they need and to reduce the burden on some of our mods, right? So let's get into that and then we'll get into the actual code. All right, if you haven't checked in yet, please go ahead and check in. You can always do exclamation point check in.

Remember the link to check in is always in the follow along materials channel and it's always in the go live message, right? So you don't have to wait until you get here to check in. You can always just go ahead and look at those two messages and grab the link. Cool. You might have to scroll over chat and slow it as Nightbot posts it if you need the link. As always, please go ahead and give it a like and a retweet. That's your attendance. If you're shooting for Turing or Hopper, attendance is mandatory. If you're in Hamilton and just want to support the stream, go ahead and do the like and the retweeting. If you're following on YouTube, go ahead and give us a like, a thumbs up. Go ahead and click the notification bell, right? That helps a lot in the folks finding a free software engineering boot camp instead of paying lots of money to go to one cool Submitting your homework Finally, if there's one question that has been asked to me have the past week is how do you submit the homework? That's somebody come through on the raid I don't remember who that was. Thank you for the raid. Not showing up in my notifications.

Appreciate the raid, thank you. If anybody saw who that was, can you paste it into the chat for me, please? Here. Cool. Alrighty. Cool, so here's how you submit the homework. Stark for Machines A, thank you so much for the host, I appreciate it. Alrighty, here is how you submit the homework. For homework that was due today, you had to watch two Ali Abdaal videos, which are amazing videos, and then you had to go through the Coursera learning how to learn. What I want is for you to submit that completion of Coursera, right? So on Coursera, you will have like a section that shows you all the stuff that you completed. I want you to take a screenshot of that. You're gonna have to figure out how to do a screenshot on your operating system. Each operating system is slightly different how you do a screenshot, right? But you're gonna do a screenshot of that page where you've completed everything, right?

And so you're gonna do that screenshot where you've completed everything and you're going to upload that screenshot to that Google form in the link right there on the slides, or if you looked in the follow along materials channel, I give you the link there as well. Now the wonderful thing about Coursera is it covers so many topics that we don't have a chance to cover in class. That was a four-week course that I asked you to get done in one week. There's no way we could spend all that time live going through everything and what you'll notice is that a Lot of the things were covered in that Coursera course that are going to help you day to day learning how to code But they also supplement the things that we do cover in class Right this idea of chunking is so important when you tie that in with your space repetition and your active recall They're like things that if you did not go through that course, you are at a severe disadvantage going forward So please if you have it, you must get through that course. You must finish it Don't do the rest of this program without having gone through that course You will be at a severe disadvantage for everything that we cover going forward. Well Now take your screenshot proving that you completed everything upload it to some sort of image sharing. I gave you image BB and then go ahead and submit it in that Google form, okay? If you're trying to keep up with Toring and Hopper, guess what? Homework's due when it's due. You gotta get it in, okay? Once the houses are formed, we'll have a special channel where you can let us know that like, hey, like I'm gonna be late because family or something else popped up, that's okay. Like life, life gets in the way. That's okay. We understand that you're giving up your nights and your weekends to be here. And so stuff's going to happen.

Try and get it in on time. Alrighty. Before we get into some of the discord stuff and the things that I want to cover tonight, I got to give a PSA and that's to be, uh, to be careful in these streets, folks, uh, to be careful, uh, interacting with folks out there in this world, because a hundred devs we've been, we've gone trending folks, we've gone trending. The a hundred devs has hit the trending on Twitter a couple of times in the technology section. And so now everyone knows who we are. We out there, right? We outside, we were inside, but we outside, you know what I'm saying? And so be careful. Now that 100 devs has become bigger and we're 20,000 deep on discord there's gonna be scammers there's gonna be folks that are trying to get you twisted and do things that you shouldn't do but around here we don't get got we go get so don't get got out in these streets make sure you're taking care of yourself and look out for others in the community if you're using the hundred devs hashtag tag on Twitter, I've seen it all. I've seen people like trying to make you buy courses. I've seen people that are like sending you to like weird discords. I've seen folks that are like using 100 devs and pretending that they're like me, like be careful. I'm never, ever, ever, ever, ever, I gotta go big for this. Ever, ever, ever, ever, ever gonna ask you for money. Just, I'm just not, there's never going to come a time where I ask you for money.

There's never going to be a time where I ask you for a go fund me. Uh, there's never going to be a time where I asked you for some cryptocurrency. Uh, there's never going to be a time, uh, where I asked for monetary things of any nature. So if someone is pretending to me to be me and asking you for those things, Please know that I have told you that I will never ask for those things. Okay, so be careful We only have one discord. That's the learn with Leon and friends discord. There's 20,000 of us on there There are a lot of people pretending that we have other discords. We don't we have one amazing discord that is Overseen by an amazing crew of moderators that want to keep you safe and healthy Even in this amazing moderated space, we still have scammers. You gotta be careful. Do not click those free Nitro links, right? We stepped up to security on Discord, but nobody's sharing free Nitro links. Please don't click that stuff. Like, be careful out here. We're a bigger community. Unfortunately, there are some shitty people in this world, and they're gonna wanna take advantage of a bigger group of people that are all new to learning how to code, right?

and that might be willing to click on a few things. OK, so please be careful as we get larger. Be careful. I feel like a boomer with nitro nitros like discords like boost, Like you get like extra features when you're nitro on discord and so a lot of people try to scam others by like Giving them free nitro links where they input their credit card and stuff like that Just don't don't ever worry about that stuff. Don't do it. Um Thank you to everyone that nitro boosts our server on discord, but it's never needed I'm never going to share a way for you to do it. Uh, there's no links to do it. Please please don't Be careful. Okay If you see somebody scamming or spamming on discord, please just at the mods. You can just do at friends mods so that we can see it. And we're pretty quick to delete, delete everything and ban those people. Right now you need to have a verified email to join discord. And in like a week or two, we're going to make it so that you have to have a verified phone number if you want to join discord like again, right? So if you're in, you're good, you're in, you're good, But going forward, we're going to crank the protection all the way up to stop folks from coming in when we don't want them to. So just know, be careful out in these streets.

It's getting wild. I've seen it all. Be careful. All right. The other thing that I've been seeing a lot and that I really want to take some time to emphasize is that going through this program is going to take a little bit of trust in myself, a little bit of trust in our moderators, a little bit of trust in our alumni who've gone through the program. And like I told you, I'm gonna work on earning it, but you gotta give me a little time to earn it, right? And the very first rule, once ever somebody asks you to trust them, is just as this gift mentions, trust nobody, not even me. That's right, you heard it folks first. You heard it first here, don't trust me. Right? Here's why. What we are going through together is a process that I've been working on for 10 plus years. I've been teaching people to code for 10 years. I have seen it all. I have assigned things that sucked.

I have assigned things that were great. I have assigned things that nobody needed to use on the job and I have assigned things that everyone needed on the job. I Used to be in the classroom I had eight plus years like in the classroom with multiple cohorts of students Like two to three nights a week for like eight years like literally in the classroom with real living breathing people like meat space Like I could I could poke them. All right, I could poke them. All right, I I stay in contact with a lot of my students. I know what's been helpful to them, and I know what's not been helpful to them. I know what comes up, and I know what doesn't come up. I'm trying to distill all of that into a course, right? So that means sometimes I'm gonna do stuff that seems a little weird. I'm gonna do stuff that maybe other tutorials aren't doing, One of the questions I get asked all, once we get to CSS, this is gonna be the, I just know, I can just see Discord a bazillion times. Leon, why do you teach floats? Well, I teach floats because I have had dozens of students that have come back to me and said, Leon, thank you so much for teaching me floats because the very first project I got was converting an old code base from floats to Flexbox. I would have been fucked if I did not know what floats were, right? And so that's why we start with floats. Now, do I love Flexbox?

Do I love CSS Grid? Yes, do I want you to use that going forward? Yes, but I understand working with that stuff is an overwhelming privilege that not all of you will get. So I need you to show up on the job and be ready. And I can't have you showing up to the job and not knowing the simple stuff. So I spend a lot of time on simple stuff that other kind of programs might skip or go through faster because I don't want you to show up and week one, fumble the easy project. I don't want you to show up in that first month fumbling the stuff that you should probably have already done. The reason why I don't tell you to use prettier out the gate is because I want you to be able to do it Because when you're on a system for some reason on a on a on a VM that you have to log into you have to use Their editor and their editor doesn't have prettier. I want you to know how to do it, right? I've seen it all I've seen people get twisted and do weird stuff So we're gonna do it in a way that I know has helped a lot of people that has worked for a lot of people now my way Might not be the way that works for you Okay, the way I teach you might not like, might not like my hair down today, that's okay. This is my attempt at helping as many folks as I can. But if this isn't for you, after you give me a couple of classes, you give me that month, you say, Leon, you know what, seemed like a cool person. It's going too slow, it's going too fast. It might not be for me, that's okay. Hey, that's okay.

There are so many phenomenal courses out there that you can do. For folks that need a little bit more kind of handholding, more fingers on keyboard time, Free Code Camp is amazing at that. For folks that wanna go a little bit faster and wanna learn Ruby instead of JavaScript, the Odin Project is phenomenal. For folks that have already coded before, right, and want to know the modern, modern stack, Full stack open is incredible. I tell all of my alumni to go do full stack open because it's just that good. So there are some phenomenal resources out there, right? That are not this. So when you come here, you're buying into, right? You're buying into the path that I've seen work for a lot of folks, and we're gonna do things a little bit differently. And so I'm going to ask you to trust me a little bit. I'm going to work on earning that trust. Hopefully you see me popping off in Discord, answering all those questions, putting in hours every day to help y'all, right? But you don't have to take my word for it. You don't have to trust me, right? And I don't want you to, because there are lots of folks out there that are scamming, that are scheming.

So go into it with a skeptical heart, right? Go into it with a skeptical eye. Don't trust me, let me earn it, right? Let me earn it, right? Let me earn it, right? Go check the Celebrations channel. Let me bring alumni to talk to you. Let me show you the way, right? But you don't have to do this. Like there are so many other phenomenal programs that might be more your speed and I don't want you to feel upset. I don't want you to feel guilt. I don't want you to feel like you're doing something wrong by choosing one of those other programs because they are good and you might get something out of it that you might not have gotten here. But what I'm going to do is try and put together material and a process and a way of doing things that I've seen be successful in my 10 years in the classroom. And if you think that has value, then stick around. Let me earn a little bit of that trust.

But if I can tell you anything, don't give people that Trust implicitly just because we look good. We got good hair. We talk a big game Check the receipts Check the receipts. Okay, and I say this as a way of telling you to be careful out in these streets Right. Let's be careful on these streets there. Everybody at every turn wants that dollar, right? They want you to do things that you probably shouldn't be doing that. You don't have to do So may people earn that trust a little bit and then see if it's for you no harm No foul if it's not for you, but I think we're building a phenomenal community that wants you to be successful I think we're building a phenomenal program that's gonna give you what you need to get a job in tech and it's not just code It's everything else Okay Now one last thing about this is that this ain't my job This ain't my moderator's job. This ain't our alumni's job. We do this because we want to help others, right? If it's not fun, we're not going to do it, right? So don't be mean to the mods. Don't be mean to me. Like we're just going to ban you, right? Like, and we're not going to lose any sleep over this.

We don't, we don't, we don't got numbers to keep. We don't, we don't have some boss that we have to make happy. We're doing this because we want folks to be successful and a career in software engineering, but we could go do other stuff with our hours, right? So shout out to the mods, right? Please be helpful. Please listen to them. Please take their guidance because they don't have to be here. I can't tell you how many hours these mods have given up in the past week or so. Like hours, like we're in meetings for two hours and they're moderating for four or five hours a day, right? Like this ain't this ain't their job. They don't have to be here They could they could click off this court and go away, but they don't because they want you to be successful Right, so just be a little bit kind to them Right, like make sure you respect that idea and make sure that that you're you're participating community that you want to belong to Because as I said in the beginning You can't be nice If you can't realize or realize that people have flaws or things coming into this process, that they might not be the best engineer right out the gate, if you can't accept that, get the fuck out. Click exit, get the fuck out. I'm gonna keep saying it. For the first moment, I'm gonna keep saying it because I just don't want people in this community that can't be kind first, that can't be nice first, that can't go out of their way to help others. If you don't wanna do that, get the fuck out.

Cool. And that includes being positive to yourself, being kind to yourself. I see so many folks that are kind to others, but they can't be kind to themselves. Be positive, even on Discord. Carry your head high, you're gonna get this stuff. You're gonna work out, you're gonna get the help that you need. But I see some people that take time out of their day to be nice to others, but then I see them saying like stuff in the threads, calling themselves dumb or that they'll never get it. No, keep your head up. Be kind to yourself. It's not just others. No. All right. Next big thing on the docket houses. Uh, I feel attacked. It's not there to be attacked.

It's just meant to be a good reminder. The positivity like that you put out comes back. Right. And so when you're on discord try and be positive right try try and keep a head up doesn't mean that you can't go into The struggle bus channel and lay it all on the line. That's totally fine. But uh, be kind to yourself. That's all I'm asking there Cool Houses next week. A lot of folks are asking about touring hopper We are going to settle that all next week We're going to make sure that if you're interested in joining those houses that you can We won't share anything else before next week. So you don't have to ask, can you still apply? You don't have to ask, is it still open? Yes, it's still open. Still shoot your shot, still apply. We're gonna cover how that whole process will shake down next week. And the part of the reason why we're doing that is because we wanna see who got the homework in. We wanna see who's been participating in the community.

We need a little bit more information from y'all to make sure that we're doing good, right? And so next week we're gonna share more about the houses. If you're like, I have no idea what the houses are, boy, do we have a lovely FAQ section that's on Discord or on leonuel.com slash 100 devs. You can do bang 100 devs, see that wonderful FAQ section that describe what we shared about houses so far. So FAQ on Discord or FAQ on my site, I will tell you more about it, but next week. Also, not this, but next week, we're gonna be doing a Twitter space. Y'all love Twitter spaces. Y'all really do so we're going to do an alumni Twitter space not this week, but next week Friday So be Friday January 28th. We're gonna start at 6 o'clock And we're gonna have a bunch of alumni there that you can ask a bunch of questions They're gonna tell you about their background their experience how they got their jobs all that fun stuff So if you don't want to Twitter spaces, don't worry. I'll share out more information And Twitter space is kind of like a voice call on Twitter. It's just a way for folks to all get into a call and hear each other talk and ask questions. And it's a little bit easier to facilitate a larger conversation. So we'll be doing that Twitter space, not this Friday, but the following Friday. All right. Also this week, however, we'll be sharing our survey.

We'll be sharing our survey for smaller study groups. It is like Clubhouse. Yeah, it's exactly like Clubhouse. We'll be sharing our survey for smaller study groups. So if you're feeling that, you know what, the larger Discord is too overwhelming, it's too much for you, right? We're gonna be forming smaller study groups. They'll be based on a lot of different stuff. It can be location, it can be affinities for different things. It can be profession. We have a lot of teachers that have been wanting to organize. So we're gonna have these study groups. It'll be ways of kind of connecting with smaller groups of folks in a hundred devs And we're gonna have ways for those little pockets to have their own channels their own voice channels So that you can really start using discord to hang out more and to get help a little bit more easily And so we'll be sharing that survey this week. You fill that out and then next week. We'll be placing you into those study groups All right We've been tearing up on that discord folks There's a lot of stuff that we've been changing a lot of stuff that we're still trying to figure out and get right But I wanted to talk through some really important stuff when it comes to discord Okay, some important stuff that I need. I need your help with I need you all to buy into some of these ideas and and help us reduce some of the burden on the moderators and On all the folks that show up to help you.

There's so many folks that show up to help And we just wanna make sure that Discord is running well so that folks can get the help that they need, okay? Alrighty. If your username is still gray, click today. When you join the server, there's a couple things you have to do. You have to click our rules. If you do not click the rules and agree to the rules on the server, you don't see anything, right? And so, Orange Squad, exactly, right? And so if on Discord, you haven't clicked the rule, like agreed to the rules, you're like missing out on like most of Discord, right? And then once you've agreed to the rules, there's also this channel called Join 100 Devs. You have to click those emojis to get access to all the 100 Devs stuff, right? So if you have a gray username, you have not joined 100 devs on Discord, which means that there's a lot of channels that are still missing for you. So make sure today you go to join 100 devs, you click those emojis so you get access to everything. If you have a gray username, right? If your username is still gray, click today. You don't wanna be missing out on those channels and all the stuff that we'll be adding.

You won't be able to get into study groups, you won't be able to get into any of the other stuff that's coming on Discord if you don't click those two emojis. Well, thank you for the posture check I'm good. All right All righty Please please Pretty please with the biggest of cherries on top use the search bar But I gotta go big for this Please, please use the search bar, okay? Please use the search bar. If I see one more person asks how to submit the homework... Here's what that looks like. I just typed in turn in homework, not submit homework, not something, but look, 75 results or turn in homework. And that was like, that was like a, that was a couple of days ago today. I bet you it's like over 100 easily easily 150 right And then if you turn it to like submit like another hundred like so like 200 times it's been asked, right? But our lovely moderator Already answered that question. They've already answered it multiple times So before you ask a simple question, right? homework, simple question, right? Just use the search bar, please use the search bar. Because when you search for it, you're probably gonna see a lot of other people that asked and you're gonna see some responses, right? So if you have a question that you think a lot of other people might have, or you just wanna check, just use the search bar, right?

Use the search bar, you're gonna see the response in there. And the beautiful thing is that the search bar, right? The search bar actually has a lot of like ways to like dial in, right? You can search for just messages from me, right? So that'd be really cool. Like if you know, like if you look at our, if you look on Discord, you'll see a list of moderators, right? So you could look for messages just from me. You could look for messages just from our moderators because they've probably already answered that question, Or if there's somebody that you know is really helpful in the cohort, you could just search for their username and see all the responses that they've done. And so it's in the top right-hand corner of Discord. You can always search for stuff. You can search in certain channels. You can search from certain individuals. You can look at certain times. You can see if it has a certain thing. And so just get comfortable.

Before you ask something kind of basic or simple, just use the search bar, because I guarantee somebody else has probably already asked it. Cool. Let's not let, let me make sure. That me leaning is me trying to unlock my iPad. I want to turn on my, my drawing capabilities here. Cool, let's, let's, let's stop. Let's stop, hold on, demo, there we go, sorry. All right, let's stop this from happening in the future. No. I don't know. All right, it's not letting me draw. There we go, okay. There we go. I think my Apple Pencil died. That's why I used my finger.

Let's stop that from happening again, please. Please, please, please. All right. Another really important thing that comes up on Discord, right, that comes up on Discord, but it also just comes up in any other place that you get help as an engineer. We have a like, and I think this is for a lot of people. We have this idea of like wanting to be respectful of people's time and their space. And so we'll often ask, hey, can I ask a question? Right? Or does anybody have some time to answer a question or is anybody really good at HTML or is anybody really, really good at discord? Like you'll, you'll put that out there, right? You'll put out that you'll put out like that question, hoping to get a response, and then you'll ask your question, please don't do that. Right? You don't, exactly. You don't need permission to ask. We're all here because we want to help you.

We're all here because we want to answer those questions. Right? So just ask your question, right? Just, just be to the point, ask your question. You can use things like please, and you can put a thank you at the end of it, right? If you feel like you gotta be extra nice, right? But just go ahead and ask your question. Really try to stop yourself from like asking to ask a question, okay? We all a lot of us start off by doing it. It's okay. It's just that When you are interacting with other engineers, like eventually when you get on a team with other engineers You just got to ask the question so that they can do it asynchronously. They can come back later and And and and fill in that answer when they have time But if you say does anyone have time to answer a question they don't know how long that's going to take to answer. It puts more weight on the person that's going to answer the question if they don't know what it is. So just ask your question, okay? Before you type in a Discord channel, please read the channel heading, right?

Okay, each channel has like a heading that describes like what you can do inside of that channel, okay? And so please make sure you give those a read before you actually start typing in it because some things are allowed in some channels and some aren't allowed in others, okay? So make sure you just read that channel heading. And something weird happened last class. And I know I'm opening myself up to the slaughter here a little bit, but I think it's worthwhile to bring it up again. Last class, I said, please don't ask questions in the AskLeon channel that other folks could answer. And then, like, a hundred of you all just asked the question. And so I think that there's a little bit of maybe me not being clear enough or it's not coming through a little bit. That's okay, but please don't use the Ask Leon channel or something that somebody else could answer. We have a lovely new channel called New Need Help. So if you're new and you need help, we have people that are paying attention to that channel that wanna help folks that are new, okay? Then if you need homework help, we have a channel called Homework Help, right? So you could go there, right? Things that moderators or other folks can answer, they don't go and ask Leon. I like to keep Ask Leon clean because it's really important that when folks have something that they really need help with, I can get to them.

Like things that can go in the Ask Leon channel are, Leon, I have an interview coming up and I need you to be a reference. Or Leon, I just got an offer, I need help negotiating, right? If you're filling that with stuff that are just like basic, like how the course works when to submit homework that means it's really hard for me to see the folks that really do need my help like when they need it okay and so please keep ask Leon clear use every other channel before ask Leon cool Robo thank you for the gift it's a cool And Each channel has a heading that tells you like what can happen in there And we're gonna be pretty serious now like the first week We kind of gave it to you. We let you do what you like We let it kind of slide, but now if you're in ask Leon and you're not asking a question I'm just gonna delete it like the mods are just gonna delete it I'm just gonna delete it right if you're responding to someone in ask Leon We're just gonna delete it because the only person that should be responding there is myself or the mods Okay So please, we're gonna start turning up Discord a little bit and to make it work, we're just gonna start deleting, okay? All right. Often, myself and mods will put really important messages in the channels, right? And they'll be very clear. Like, it'll be very clear when we're trying to get your attention. Here is me trying to be very, very clear that please only share your Twitter and LinkedIn and threads above. All of this will be deleted. Thank you. And then I shit you not, like three seconds later, not even three, it was like a minute later, somebody posted their Twitter right below, right? So please when you see like flashing lights and stop signs, uh, please stop and read that stuff Right, I blanked out their name I don't want like I don't want anybody to see it but like please read it Uh You're making more work for our mods Right, you're making more work for our mods And like I said, nobody's getting paid. This ain't our job We do it because we love this community and we want to help y'all to make our lives a little bit easier So we don't have to kind of deal with this stuff. Okay That being said in the networking channel The networking channel should be more for like networking events like places that you're going things that you're doing Conferences stuff like that We have these two threads a Twitter thread and a LinkedIn thread for folks that want to share their Twitter or LinkedIn, right?

We're gonna have like lots of like meet and greets. We're gonna have like our own events where we get to know each other as a cohort. So you'll have time to like meet folks as we get into the program. We don't do those super early because we only want folks that are like actually in the program. A lot of y'all are kind of checking it out, seeing this is for you. But like a month in, we'll start doing more meet and greets. We'll start doing more sessions where you can hang out with each other, get to know each other a little bit more. but if for some reason you're just burning to share your Twitter and your LinkedIn, there's threads for it now. Anything that's not put in those threads, snip, snip, we're gonna delete it, okay? Alrighty. Got a few more and then we'll take our break. We tested something starting yesterday. In the homework help channel, we have a new bot that makes everything a thread, okay? So any question that you ask is now a thread, right? So you can see here in the example, hey everyone for the BBC HTML, do we need to build the HTML for the navigation bar too?

Great question. Discord is way too hard to like read all the replies and everything, especially when there's a lot of responses. So now your question will automatically be turned into a thread. And if you want to answer that person's question, right? If you wanna answer that person's question, you have to go into the thread to respond to them. If you click reply like normal, we're going to delete it. Let me say that again. If you just click reply, we're going to delete that reply. You have to go into the thread to respond to that person directly. And so before you even ask a question, use the search bar. See if somebody else has already asked that question. And then if not, just go ahead and type out your question and it will automatically be turned into a thread. You don't have to worry about threads or anything. Any question you type into the help channels will automatically be turned into a thread and people can respond to you in that thread. That way you're not scrolling through thousands of replies and other chit chat.

So in the help channels, there should only be questions that are threads and then people responding in those threads, okay? If you type anything else into the help channel, it's gonna get turned into a thread and it's gonna be weird. If you're like, if you're like, hazzah, I figured out the BBC homework, right? That's gonna be a thread. We don't need that in the help channel. You can do that somewhere else, right? Like in our general chit chat channels or something like that. But be mindful of people are coming to the help channels. We gotta be respectful of people that are coming to those channels. We have mentors giving up hours of their day coming after work tired and weary To go into those help channels and go to war, right? And so let's make it easier for them to help others right by having these threads Okay Already So we add threads and you have the power to help. Now that we have these threads, jump on in there, right? You all will know something that somebody else does not at different stages of this process, okay? I don't care if you think you're a super new beginner, that's okay. You're gonna pick something up that might be able to help somebody else.

So jump into their thread and help them out a little bit, right? If you know how to solve something that they ask, go ahead and help them out, right? Because I guarantee you, at some point, you're gonna know something that somebody else does not. And then a few weeks later, they're gonna know something that you don't know, and they're gonna jump in that thread to help you, right? So don't forget that you got power. If you made it through some of the Shay How, you know more than folks that haven't made it through the Shay How. Also, shout out to Shay How. They just sent me a DM on Twitter. They wanna come and hang out with us. So we're gonna have maybe either a Twitter space so we might bring them up on stream to talk through some of the decisions that they put into their course or the thing that we've been working through. Yeah, it's pretty cool. All right, so you got the power. Jump into those threads, help each other out. During this course, any assignment I give you, I'm going to eventually give you the solution. Okay, any assignment that I give you, there will eventually be a solution.

Most of the time, like 80% of the time, we're gonna do it together live, right? Like you're gonna get assigned something and then like the week later, we're probably gonna go over it together, okay? If for some reason we don't go over it together, You're just gonna get a file. That is the solution file, right? But like 80 90 % of the time We're probably gonna go over it together So you don't actually need like a full cold review Something a lot of people ask for on discord that you don't really need somebody say like can somebody check this BBC for me? You don't have to do that. We're gonna have the solution We're gonna see you're gonna be able to compare it, right? You're gonna be able to put in that cognitive effort to like look at yours, look at mine and go, hmm, where do I agree with Leon and where do I not, right? I don't think he made the most semantic choice here. Or I think in terms of accessibility, he might have done things a little bit differently, right? And so you will always have the ability to like compare your answers to mine. Now, please don't ask for full code review, right? That's just too much time for someone when you're going to get, right, when you're going to get the full solution down the line, okay? If you have specific questions, that's totally fair game. If you're stuck on something, if there's something that you think doesn't make sense, right, like if you're really confused about something in your code, that's a really worthwhile question.

But just saying look at all this, that's a pretty lazy question, right? That puts too much on the person that wants to help you, right? That puts too much on the person that wants to help you to have to figure out everything for you. We want Barb. All right. The idea here is make sure that you're being respectful of the other person's time is gonna help you. Don't ask for a full code review. You got you have a specific question, right? If you have a specific thing that you that you get stuck on ask that people will help cool We'll be taking our top of the hour break soon got a few more here The Sam thank you for the hydration cheers to you Please leave voice channels when you're not chatting so you don't get got a A lot of y'all jump in the voice channels and then you like forget that you're in voice channels And I've heard some some wild stuff I've heard some things I've heard some things and so, uh, please please make sure Make sure that you leave voice channels when you're done chatting. So you don't get got just make it a habit Don't hang out on voice channels. Just leave them if you're not actively talking leave There's been there's been a lot of hot mic situations and I don't want that to happen to you so don't get got leave your voice channels Often mods will kick you out of voice channels if like nobody's talking just because we don't want that to happen to you So if you like really if you got kicked out of a voice channels probably because we thought maybe like nobody was talking in that Channel, we don't want you to get got but please leave voice channels I Know a few of you what you had for dinner Because I heard you talking in the background about what you were gonna eat for dinner with your significant other So so please leave which channels That's why Leon's always sipping tea Quantum Alrighty we got some new channels We got a new need help channel. So if you're new and you need help, go to that channel first. Lots of folks will be able to help you. And if you've been around for a week or more, guess what? You can help the new folks that joined.

So hang out in the new need help, answer their questions. Homework help is a new channel, right? Where if you have questions about the homework, you can go there. That homework help channel was the first channel that we had the thread system on. And we're gonna bring that thread system to every other help channel. So the new need help the the other help channels, though. They will turn into those threaded Channels later tonight. So tonight you'll see the full switch all the help channels will be threads Please do not reply and any of those channels going forward. It'll just be deleted. Make sure you're replying to folks in threads cool And the other channel I'm really excited about is the ketchup crew So a lot of folks are not watching this live on twitch because they got work They're a different time zone and they catch up with the VODs on twitch a shout out to you in the future So we have the ketchup crew and the ketchup crew has their own channel. So feel free to jump into that channel Share a time maybe that you're gonna be watching the channel and there's actually a voice channel jump into that voice channel and start watching the class if you want. You can watch, you can share your screen and watch the VODs together. That's something that the last cohort did a lot. So there's a Ketchup Crew channel. I expect folks to be in that channel, like watching the VODs together and having a grand old time answering each other's questions.

And so feel free to jump into that Ketchup Crew channel, watch the VODs together, be able to talk about what's going on together. And so if you're not watching live, join the Ketchup Crew, get in there and have some fun. All right, we got one more. One more and we're gonna take our top of the hour break. I know we're three minutes over. The last one is please keep in mind our server rules. We are super invested in creating a safe environment for folks to learn and to do their best and to eventually get that job. We can't moderate stuff that's not on our server, right? So I I know wild stuff has been happening on Twitter. I know wild stuff has been happening on other discords We can't control or help with that what we can do is make a wonderful space for you on our discord and we're super invested in Keeping it a great place for folks to be in so we have one rule That's really important that I want to shout out and then we're gonna go through the chat etiquette and then we're gonna take our break We have this rule for no advertising. I'm gonna read it again Advertising your YouTube, Twitch, Discord, social media does not belong on this server. This includes private study groups or other things that may split the community and leading folks to unmoderated 100 dev spaces. If somebody is sharing a space about 100 devs on our Discord, the assumption is that we have created it or that we are moderating it or that we are taking care of that space. That means if you're leading folks to spaces that are about 100 devs that are not on our Discord, we're going to delete them and we're going to ban you. Because we really do want to make sure that folks are kept safe and we can moderate as we need.

We prefer folks to be in our voice channels. We prefer folks to be in there where moderators can listen in and make sure folks aren't wiling, right? And so if you share something that's like trying to convince other people to leave Discord and go somewhere else, we're going to give you a ban. Like you won't be invited back and we're just going to delete the post, okay? Yeah, and that's just because we've cared deeply about making sure that we have a space that works for everyone, right? Now, the last thing I read out loud, I think on class one, I'm gonna read it out loud again. And it's something that comes from a dear, dear friend and my executive director at Resilient Coders. They put this out there, something that we read to every cohort at RC, and I wanna make sure I'm reading it out to you. The no advertising rule, right? There are some, there are two exceptions to that rule. We have a self-promo channel. In that self-promo channel, you wanna share your YouTube, your Twitch, your Discord. Go ahead. Oh, sorry, not your Discord. Your YouTube, your Twitch, your Twitter, go ahead, right?

Don't share other communities. Don't share other things that you might try and brand as 100 devs. They'll be deleted. But if you wanna share a video you've been working on or if you're gonna go stream, go ahead, put it in the self-promo channel. Lots of really cool people doing lots of cool stuff. We do have a stream team that if you start streaming and you feel like you wanna stream some 100 devs content or learning to code content, you can join our stream team. We'll share more information about that. You'll see some of our stream team going live soon. The other exception to this rule is the threads that we created. We have a Twitter thread and a LinkedIn thread in the networking section, go wild in there. But any other place don't advertise Cool Two things and then we're gonna take a break. Like I said comes from my dear dear executive director Dell Be kind to one another be the type of person who stays positive gives people the benefit of the doubt See the best in people Embrace diversity of backgrounds perspective of those things we can choose and those that we can't accept your own failures and those of your peers as an important part of the process. We're all here to write some vomity, chunky, chunky code. We're all here to get things wrong, to break, to fail, to learn, to grow, to become a great software engineer. Right, and so that's all part of that process.

And before you share anything on Discord, please, please ask yourself this one question. It's the only thing I care about. If you're on Discord and this is the only thing you think about, this is what I want you to think about. Please ask yourself, is this the most supportive message I can send in this moment? If not, please choose a new message. If it's not the kindest, most supportive thing you can send in that moment, don't send it. I can't tell you how many times I type out messages and have to delete them. I do it all the time. In the Ask Leon channel, I typically give short responses because it's just a lot of them. But a lot of times you all ask some wild questions that are out of left field and I want to type something. And the first time I type it out, guess what? It's not kind. It's not kind. So I delete it. I sit back, I think about it, and I go, how can I say this in a supportive way?

How can I say this in a kind way? And then I rewrite it. And sometimes I rewrite it three or four times. But that's what you're committing to if you want to be part of this community, right? We're not all perfect, we get it wrong, right? That's okay, but ask yourself, is that the most kind, most supportive thing you can send? And if that's too much for you, you're like, Leon, I don't wanna do that, right? I don't wanna do that, that's not for me. That's fine, leave, go away, don't join our Discord, don't come to class, go bye, we don't need it. Try to build a supportive, inclusive, wonderful community to belong to. If you can't be kind, get the fuck out. All right, folks, with that being said, So let's take our well-deserved break. I know that this first hour was not anything coding, but I think this is stuff that's really important for our community to survive and thrive and do really well. So if you're new around here, we take a break at the top of every hour for five minutes, please. If you're able, get up, move around, stretch, go grab some water, kiss some babies, look out the window, focus your eyes on something that's not here.

Right? Hey, welcome back. And Alex, thank you so much for the raid. You all know them. We raided them on Sunday. Amazing raid. The amazing, if you're interested in game development, this is the person to watch. We're going to raid them again because they're just amazing in being able to like build stuff from beginning to end. You see the whole process from like building actual models to building out like them actually moving around a room. They're the channel I have on in the background if I'm working because their energy helps me work better. So super thankful for the raid and we're definitely coming right back because it's just an amazing group to hang out with. So thank you so much for, for the rate. I really appreciate it. Um, we are actually getting ready to take a break, uh, at the top of every hour. We take a five minute break just to be healthy and make sure that we're, we're stretching, moving around a little bit.

And so let's go ahead and take that break, but I appreciate the rate. Thank you all for stopping by. Uh, we're definitely going to swing by again soon. Uh, the, uh, that, that, that Sunday crew is, uh, is a smaller crew and I, we love to come hang out. So I appreciate the rain. All right, folks, go ahead and take our break. And let's see if we can do a shout out for them. I'll put it in the channel. Or if Maja, if you could throw it in there. Ah, there we go, awesome. You haven't followed them yet? Go ahead and give them a follow. There we go, all right, gonna go ahead and go ahead and start our timer here together. All right, folks, go ahead and take your break, please. We'll be back here together and we turn on the music.

Thank you for the raid again. Bob Wildin over here, that's funny. I Put their Their twitch name in chat again But if you haven't given them a follow on Alex the person that rated us go ahead and give them a follow amazing amazing og of the Streaming, coding, creating space, for sure. Byron, I appreciate that. Highest quality floating head I've ever seen. I appreciate it, thank you. I have a Gnome shirt that I wear, like the Linux. Can somebody tell me what a raid is? A raid is is like when folks are done their stream, they can go to another streamer and all of their audience goes with them, right? Like all the people that are in that channel go with them. And so at the end of each stream, we raid someone. And so on Sunday we raided Lionelux and they're an amazing streamer. They build video games from like soup to nuts, like the whole thing. And so they raided us a few minutes ago. And the cool thing about their channel is that they are literally like live every day So if you like them, you can just like chill there all the time I love it because I like seeing like all the process of how they create like that whole world that they're building But it's just a chill stream to have on the background too So I like to have that in the background when I'm working a lot All right.

Jim, thank you for the stretch. I just got a good one in before we came back. All right, folks, come on back. Come on back. Let me show the music here. This course is Also introducing the whole world of streaming. Yeah, it's pretty cool. There's so many different people that are in this space that do really cool stuff. Like we had two amazing raids tonight. The Primogen is just next level. Like they're an engineer at Netflix and they like stream them working on Netflix. Like that's so cool. And then Menelux is the like just building video games from nothing into something that you can like actually play and see them working around, like it's wild. So I really love being able to like see people's process and how they do stuff, and so, yeah. Primogen, they're also live quite often.

We're gonna rate them, so all the people that are dope, we're gonna wind up rating, and so you'll be able to see them and get to jump in their channel. Oh yeah, I appreciate that, thank you. Alex, appreciate that. All right, folks, let's get back into it. I think we're all back from the break. All right. Trough of sorrow. Who's in it? Who's in the trough of sorrow? Who, who with HTML? Are, are you, are you at the peak or are you plummeting downwards? Where are you at? Not yet. You are almost peak of despair, the peak, peak, peak. So I think a lot of y'all, I think a lot of y'all jumped into that trough when I assigned the homework.

See now, some of y'all thought this was gonna be something else, but then you saw that I assigned four weeks of a Coursera course in a week. And you went, I don't know about this. I don't know about this. They say four weeks, Leon's asked me to do it in one. And then you're like, all right, no worries. I got it. I got this. You know what? I'm just gonna do it, gonna do it, gonna do it. And you're with me. You saw it. You're like, you know what? I can do it. I believe in, I believe in this. I can do it.

I want this for myself. I'm just gonna do it. And then I, and then I hit you with the Shay how and I felt bad for the first person that asked But that first person asked Leon just just the first section, right? Just the first section, right? I was like nah nah dog Nope, I need all 12 and I need all 12 in a week And as soon as I said, I need it 12 in one week I was all I could see the bells a-turning and as soon as I said 12 in one week They took off. They're like, not for me, dog. Not, not this ain't, this, this is, this is not what I signed up for. I don't know if I can do that. So I think a lot of y'all, you made it to the tip and now you're crashing into the trough of sorrow. I think you're still like on the really fun part of it though. I think like your hands are still in the air. You're still being Beyonce. You're like, you're, you're, you're like riding down. You haven't hit the bottom yet, trust me. If you haven't had like that existential, like dread, like not knowing, like what's upside down, what's upside right side up.

Like if you haven't hit that point yet, you're still like in the fun part. You're still on the wee part. Like you're still like, I'm Beyonce. Like I'm like, I'm, I'm flying down the Hill. Right. I feel really bad for people that just joined live and have no idea what our reference is. I'm just talking about like dominoes, nuns and being Beyonce. And they're just like, what are you talking about? Um, so you're probably not there yet, um, but you're going to get there at some point in time. I'm going to assign something that's going to be a lot and you're just going to, you're going to hit the bottom and you'll know when you're there, you'll know when you've hit the bottom and you're officially in the trough of sorrow. There's like a very sharp, like there's a moment where you wake up and just go fuck. Right. I got 29 more weeks to go. So if you're not there yet, enjoy, enjoy the ride down. Enjoy being Beyonce and we'll all get there soon.

But one thing I'll say about the homework is that homework is just the first pass. When you're going through the homework, I want you to give it the old, hold on, my chair's in a weird spot. I want you to give it the old 100 devs try, right? Like when I give you homework, give it the old 100 devs try. But know that it's just the first pass. OK. All the important bits, all the stuff that really matters we're going to cover together. Right, so if if you're like Leon, it's too much, I just don't get it. Don't worry, all the really important bits and bobs we're going to go over together, right? So you have this homework. This homework is really broad in scope. It's gonna give you so many little things that are interesting and things that you should learn about, but it's the first pass. All the core, really important stuff, we're gonna recover in class. So when I give you reading, I expect that to be your first time going through that type of material, but I need it to be not, I need class not to be the first time you've heard about CSS. I need class to not be the first time that you've heard about the box model.

I Need class to not be the first time you've heard about floats or flex box, right? Because if it's the first time Your brain just won't be able to make the connections in class Right, so I give you this homework as a means of a first pass You're gonna give it the good old 100 devs try you're gonna try and do your active recall your space repetition But if there's something that fundamentally does not make sense to you, that's okay. We're probably gonna cover it in class so on Thursday you have the Shea how do But that's just when we start CSS Literally, the the the beginning of CSS is the day that's really hard material is due and so we're gonna come together and learn the basics of CSS with the expectation that you've done the The reading already. All right, and so I don't want you to panic I don't want you to feel bad if it doesn't make sense Know that that's your first pass and we'll go over all the meaty stuff together All right I asked you all I gave you the three secrets you manage your frustration you be consistent you take care of yourself And so I got one question for you. Did you make a plan who made a plan? Who made a plan for their week who who who woke up today like an accident Who woke up today like an accident Who made a who made a plan now i'm just getting y'all twisted you're saying yes for both. All right If you haven't made a plan for your day for your weeks for your month you must Being consistent takes some planning Don't wake up like an accident, have a plan, right? Know what you're getting yourself into, right? So if you haven't made a plan for your week, if you haven't had that conversation with the other folks in your life, figure that out, right? You gotta let folks around you know, hey, Tuesday, Thursdays, I'm in class. Sundays, I'm at office hours. Friday, I might be doing a Twitter space with the alumni, right, you gotta let folks know that you need that time. Okay, I made a plan A, there you go. All right, active recall. Remember, you can do a quarter of the work, all right, but get better results.

Indifference said, Leon's calendar is the most scheduled and wild thing I've ever seen. Yeah, I can't show you all my calendar because I have a lot of like meetings with people on there that I can't like put on stream, but I promise you it's glorious as we get later on I do one-on-ones with a lot of folks and so if you're in a one-on-one with me I'll show you all right you can do a quarter of the work but get better results just by recalling the things that you learn don't take notes take questions right take questions all right and then remember don't put in all this work just to forget everything you have to reset your forgetting curve if you learn something new there's a good chance by the end of that 30 30 day period there's an 80% chance that you've forgotten it flatten that forgetting curve by using a space repetition tool like Anki right cider and said do you just not sleep hell no i need sleep to do what i do if i don't get sleep my whole my whole week's ruined like not even just the day like the week's a wrap And so I'm very very very into making sure I get good sleep. I'm bipolar and so since I'm bipolar I take medication that like zonks me like it like it puts me out and If I like do something dumb like watch a lot of YouTube while I'm in like that good period where it's trying to put me To sleep and I get through it I ain't going to sleep and then my whole day's ruined my whole week's ruined And so for me sleep is one of the most important things you can do And you learned about that exactly you learned about that in the course about like what sleep does how it helps with memory Consolidation and if you're not getting sleep, you know, you messed up Sleep in water exactly All right chat, what's the Internet Watch those brain toxins It's a wire, yes. A wire that connects two different kinds of devices. We have our client side devices and our server side devices. The code that runs on the client side, the code that runs on our desktops, our laptops, our mobile phones, what type of, the person that works on that type of code, what do we call them? Yeah, we call them front-end developers. And the individuals that write the code that runs on the server, that hears those requests, knows how to respond, store stuff into a database, processes credit cards, the person that works on all that stuff, what do we call them? Yeah, we call them back-end developers. Nice, cool. If somebody works on both, no. If somebody works on both, we call them what? There we go, if somebody works on both, we call them full stack, exactly. Now, I keep saying that requests and responses are sent between the client and the server. What enables those requests to go back and forth between the client and server?

Like, what's enabling this to happen? What technology? Oh, some people got it, okay. Yeah, it's sitting on top of the hypertext transfer protocol. It's just way of sending those requests and getting those responses, sending information back and forth across this internet. Nice, well done. All right, I mentioned that separation of concerns is the most important thing that we cover in the beginning. It is called the golden rule. We want to keep our content in our HTML, our style in our CSS and our behavior interaction, our JavaScript. We don't want to mix any of these things together. Why is this so important? Why do we keep separation of concerns? Especially as we get into on Thursday, CSS, why do we keep everything separate? Yeah, organization, nice organization, right? Organization for ourselves and organizations for the developers that we work with, right?

If we join another team and somebody wants to make something yellow, where do we send them? They want to make something yellow. Where do we send them? Perfect, we send them to our CSS. If we want them to make something, when they click on it, wiggle, where do we send them? JS, nice. And if we want to have them enter in like a new headline and for a newspaper article, where do we send them? HTML, nice. All right, we're good, we're good. Let's keep pushing. All right, we talked about HTML as the first language that we are learning, right? We said it's a markup language. And like all languages, it has spelling and grammar rules. What do we call the spelling and grammar rules of a language? There's a special word for it.

What do we call it? Yeah, we call that syntax, like the spelling, grammar rules, the punctuation that make up that language, we call it syntax. So HTML has a very interesting bit of syntax. You have your opening tag, right, and your closing tag. And the way that the closing tag differs from the opening tag is that lovely And sometimes our opening tags can have some superpowers or some extra things that enables that tag to do. And so here we see one of those superpowers, we call them attribute value pairs. So next week when we get into CSS and we're trying to style things, we're gonna see these classes and IDs and all these things pop up that we need to put on our HTML so we know what tags we're talking to, right? So we noticed that in our opening tags, we can have attribute value pairs, and our closing tags always have that lovely forward slash. Sometimes, however, sometimes, however, right? There's a tag that doesn't need a closing tag. Why would a tag maybe not need a closing tag? Yeah, because it's self-closing, yeah. Because if they're already content, right? So we saw images, images don't have a closing tag because they're already content. Here, you can see we're wrapping around the content that is text.

Hello world is the text, right? And so we're wrapping around that text. Beautiful. However, when we are looking at say an image, it already is content. We don't need to wrap around the content, it is content. Beautiful. All right. Now, why do we have to follow these rules? Why do we need to have the opening tags and the closing tags? Why do we need to choose the right semantic, important HTML tag? Why do we need to have, why do we need to follow these rules? Ah, I see a lot of people throwing different ways here. Yeah. Talks about like kind of like three different main things that we probably care about, right? We care one about our general users.

we saw that if for some reason, like an image broke, having that alt tag helped our general users know that there should have been a brownie photo there. Right? So we have our general users, if we don't use the right tags, they're just not going to have a good experience. We also talked about accessibility, right? Somebody that might be using the internet in a way that is something that might need assistance to move through that content, like a screen reader, right? So you might see somebody with a screen reader if you don't use the right tags They can't move through your page in the right way or things aren't read to them in the right way And so you want to make sure right you want to make sure that you're following the rules for general users users using accessibility devices And then the last one is SEO or search engine optimization If you want to show up on Google you want to show up in these search engines Google comes to your site and they're gonna try to figure out what your site is about Now, I don't say, I'm not saying Google does this, but let's just use this as a thought experiment. If Google was to come to our site and want to figure out what our site is about, right? What do you think they're going to look at first? What do you think they're going to look at first? I can't decide what to make for dinner. Yeah, they could look at the H1. If the H1 is the most important content on the page, right? If the H1 is the most important content on the page, then they should probably look at the H1, right? And so there you go. We can see how it could work for general users, assistive devices or accessibility concerns, and then our search engine observation or kind of our web crawlers that might be looking for those things.

Yeah, I'm trying to sound off on y'all. All right, so we looked at some basic tags last time. We looked at our heading elements, right? We looked at our heading elements. We have H1s through H6s, right? We have H1s through H6s. And what we realize is that we pick these heading elements, right? They're headings that describe the content that comes after. Think of like a newspaper, you have a heading and then something comes after, right? You have a heading and then something comes after. So when we're picking those heading elements, What do we use to pick them? Gabby Lisa, does it ever go past h6? No, that's that's where we stop Yeah, we're picking these heading elements based on importance Exactly based on importance. Nice. Cool.

So When we see an h4 We know that an h4 is a little bit less important than an h3 That's important than h2 and then h1 is the most important content we have on our page Now we talked about h1 is probably only having one per page There is, as you get deeper into the semantics of HTML, sections can technically have their own H1s. But for now, let's just think about, all right, most important content, let's just have one. We saw some other elements. We saw for big blocks of text, what do we use? Big blocks of text, big boys, big blocks of text, what do we use? Paragraph, nice. If we want to be an abomination and have white space be preserved in our tags, what do we use? Pre tags but get out of here exactly and if you have a short piece of text, what do we want that to be? All right, all right we got it be our tags HR tags, yep, let's skip those All right. Assisted device elements. We have M and strong tags, right? M and strong tags. Remember we talked about M and strong tags being somewhat like odd. If you look at an M tag, it makes our content italicized. And if we look at our strong tag, it makes it bold.

If we use an M and strong tag to make something italicized and bolded, Did we violate separation of concerns? Yeah, if we use an M in strong tag because we like the way it looks. It was at this moment that he knew he fucked up. Exactly, we don't use them based on how they look, we use them because of what they help us with, right? What they help us with when it comes to accessibility. Remember individuals that come to your sites and might not be able to see Hey cross. Thank you for the 10 gifts that serves. I appreciate that Thank you so much. Ah Cross is here so we can actually we can actually bring something back You can do exclamation point bingo And this lovely person recently got a job by the way can check out the celebrations channel made a bingo game early in the last last cohort and so some people religiously play bingo while the stream is going on to to just have something to help them stay a little bit more focused and I repeat a lot of words and I say a lot of funny stuff and so there's some things that come up quite often though and bingo if you're interested. Let's see. Let me see if I can grab the, there we go. All right. tiny.cc slash Leon bingo. And it takes you to a, to a Netlify app, which we'll all learn how to use Netlify, and we can create a board. And so you can see lovely things here.

Don't call yourself a junior dev. Join us for office hours. Leon mentions his OnlyFans. Leon says automagically, I say that word a lot. It's not stalking, it's networking. No, no. Someone redeems a soundboard alert and so each time you create a card it's a completely different card and so you can play bingo if you would like tiny.cc slash Leon bingo and there you go thank you indifferent just something fun to do while you're watching and thank you cross for it and thank you for the 10 gifted subs I appreciate you. All right, let's keep pushing folks. All right, we also talked about there are lists. We have two kinds of lists, ordered lists, where if something is not in the right order, it messes up, like it's a problem, right? So we think recipes should be an ordered list, whereas something like a grocery list, doesn't matter if you put the bread before the pickles, right, so that list doesn't matter, and so you can keep a different order. All right, we also have containing elements, right? Containing elements are how we're gonna group content together. They're gonna be the tags that we probably use the most. Divs, it's not that divs are wrong or you shouldn't use them.

We just have a lot more semantic decisions that we can make these days, a lot more semantic choices that we can use. And one of the common tags that we'll use a lot are sections, we can group lots of content together. Articles are for content that should be shared. So think newspaper articles, think blog posts, things that you could like cut out and share. Those are good articles. And aside, if you read the MDM, which you should all have open, the Mozilla Developers Network. Thank you, Booty Licker. Hey, hope you're doing well. Thank you for stopping by. If you, I still don't, I still, I still can't not laugh what you're doing a side is for ancillary extra content, like things like add their sidebars, headers for content, the beginning of a document footers for content at the end of a document, beautiful booty liquor has returned. Nice. All right. We also talked about, there was some deprecated elements like elements that we can no longer use, right? things that we used to see all the time, right? Back when we were building our MySpace pages, our Neopets accounts, right?

We had this idea of blink tags and marquee tags and bold tags and eye tags. Why are all these tags deprecated and no longer used? Mon and Lucky Tiger, thank you for the hydration. Cheers to you. Yeah, a lot of those are CSS and maybe the marquee is like JavaScript, right? So as separation of concerns became a thing that we agreed to, a lot of this stuff really shouldn't be part of HTML and it's deprecated. Thank you. All right. We did this brownie code recipe and I just want to review it quickly. I just want to take a look at what we did together and then we're going to move on. So here is the brownie code recipe that we did together. We went through, we chose the different tags that we thought made the most semantic sense, right? They were based on the real reason why we'd use that tag. And we talked about the importance behind our tags as well. Now, when we get through here, we have some stuff that we did that I want to take a second just to talk about and cover a little bit more deeply before we move on to some new tags and then finally get our fingers going and writing some code of our own.

So one thing we did here was an image. And we talked about this image being a hot linked image, meaning that we took somebody else's image that they are hosting on their own server And we're linking to that and we talked about some some some odd things that could happen Because we are doing that. What are some bad things that could happen because we are a hot linking the image They could take it down Y'all just y'all popped off of this so So the Twitch has a filter. And when you put stuff that like breaks the filter, I can still see it sometimes if my mods don't remove before I see it. But sometimes I get to see them and they're funny. People said they could change it to a turd. Someone said they could, they could change it to a picture of poop. And now your lovely website has a picture of poop on it. So let's not hot link a photo, right? Let's go ahead and let's actually like download a photo. So let's go back to Google and I'm gonna go to Google images and we're going to say brownie, yeah, brownies. There we go. So if you, a lot of folks asked me about this. They said, Leon, what was that? That was that bang gi that I just did So I use duck duck go as my search engine, right?

and When you use duck duck go you have these bang syntaxes that enable you to do a bunch of different stuff So if like I do bang g it takes me to google I do bang gi it takes me to google images I do bang a it takes me to amazon, right? So if you use duck duck go as like your main search It really does speed up a lot of the things that you do and you get all the wonderful stuff that comes along with using DuckDuckGo. All right, give me a moment. Oh, Cosmic Brownies. Hmm. Oh, give me a second, sorry. If you, I can know a lot about you. I know a lot about you if you grew up eating a honey bun and a cosmic brownie for breakfast. I know we've gone through a certain struggle together and so that's how I know and so give me a second here. I haven't seen I haven't had a cosmic brownie in a minute all right let's click on this one. Nope, I don't want to go there, Google. Let me just right click. Oh, because this is an ad. I got got. That's why that, I got got.

It's an ad. When did they start putting ads in here? Oh, that's so dirty. That's so dirty. Because you're like trying to get the image and they put ads up there. What Wow a while and oh Hmm I can't we can't go wrong with these ones. I'll look at that All right, right click save image as and We're going to Look at all my screenshots I did for the stream All right, we're gonna go to class three and we're gonna save this as brownies. All right, so now we saved our brownies to our class three folder. So what I can do is if I go back, all right, if I go back and I look in the folder, So when I opened up in VS code, I didn't just open the file, I opened my entire folder. And so what I did is I drug my entire folder. So I have like my 100 devs folder, and then I have my class three folder. And what I did is I drug this whole class three folder into VS code, right? Oh, I just drug it to my desktop. Anyway, I, I want to make sure I didn't screw that over. Hold on.

I just drugged the folder to my desktop. Sorry. One second. I got to bring that back. All right. One second. All right. All right, there we go. So I drug my class three folder into VS Code and what that did is it opened up the entire folder for me in VS code, right? And the beautiful thing is I just saved my brownies photo into that class three folder. You can see it here, right? That brownies.jpg. You can see it. If I open it up, look at that delicious photo, right? So now I have the photo on my computer.

I just right clicked, right? I just right clicked. See, I say certain words wrong because it increases my engagement. Y 'all got got, you're all saying drag, drag, drag. No, I drug it. You're gonna have to deal with it. Thank you for the engagement. You got got, you got got. All right, so I drug the entire folder into VS Code and it opens the whole thing for you. So now you can see that like I have like the file that was just downloaded inside of the folder, right? Cool. So now instead of hot linking this photo, what I can do is I can actually just link to that photo directly. Cause my brownies.html is in the same folder as that brownies.jpg, right? That JPEG, right? So I just type in brownies dot JPEG that source will know From this HTML file to grab that image Got a lot of hydrates in here for Tuga Memphis.

No math. Thank you for the hydration. Cheers to you Right, and so now I have that lovely photo that no one can change on me, right? No one can change it on me. And so if I go ahead and open this in the browser you can see that my photo still is there. I don't have the hot linked version anymore. It's the photo that I just downloaded, right? Now, somebody saying, does this work on CodePen? No, because CodePen doesn't give you the ability to upload or download like an image. On Glitch, it might work, because on Glitch, you can upload stuff, right? You can upload files and things like that. So that's why I like Glitch. If you're gonna be stuck, like, not sorry, not stuck. If you're gonna be using like, say like a Chromebook or you have a computer that can only really use the browser, using Glitch is good because you can upload different stuff to Glitch, right? So if you're gonna use Glitch, like let's create a new project, let's start a website.

It takes a while for Glitch to kind of get going, right? It takes a while for glitch to get going. And there are other things, I just happen to like glitch, I think it's easy. The cool thing here is you can like do files, right? So if I do plus files, I can upload a file, and then let's go ahead to stream, 100 devs, class three, I can upload the brownie, and can I do two files at the same time? No, just one at a time. So I can upload my brownies.html file and boom, my brownies.html file, right? My brownies.html file is just up here on Glitch. Let's see if it'll let us do the images too. Not sure. Oh, assets. Probably have to do it through assets. Yeah. Upload an asset, brownies.jpeg. Let's see.

Cool. Now we've got our brownies.jpeg here and cool. And so with this, you can actually like preview and do a bunch of other stuff. Right? Like, but now you could go to this brownies.jpeg. Sorry, there's brownies.html and see it. Let's see. Open preview in a new window. And then let's go to brownies.html slash brownies.html, cause that was the name of our HTML file. All right. So it doesn't like the linking directly to brownies, but I'm sure there's a way to do in a glitch. I don't use glitch that often, but I'm sure there's a way to take your asset and connect it to the brownies.html, right? Oh, is there a folder called assets? Is that what it is? Let's see.

Let's see. Assets slash brownie. Does that work? Cool. Let's try again. No, I know there's a way to do it. I just, I gotta look at it now. So that's the idea here, right? Might have to be like a, like a real link. Sorry, let me try this real quick. Nope, let's try that. No. I'll figure it out when we take a break, but the idea here is that you can, is it uppercase? They wouldn't do that. They're not monsters, right?

It is a capital A, no way. Let's check. Curious, there has to be a way now. Anyway, we'll figure it out, but that's the idea, right? You can if you need to be if you need to use just your Just your oh, yeah, cuz it's gonna be in a separate they want us to go up a level See, I get I get invested in these things You should be I'll just go in are we like inside of a folder somehow, let's see I have one more thing. I want to just look at some curious No, all right, we'll figure it out. But that's the idea. Like if you need to be inside of your browser, right? You need to be inside of your browser and you don't have access to like VS code or something like that, right? You can use glitch to upload your HTML and then we'll figure out how to do the images and stuff like that as well. But that's the idea is that you can link everything together and have it work like that inside of just your browser. So I'm gonna use VS Code this whole time. That's what I'm comfortable with. That's what I use, right? But if you, for some reason, can't use VS Code, there are other options, right?

Cool. And we'll figure out the image thing. I'm not sure, because I don't use Glitch that often. Cool, all right. So here we have our local version of the image working. We had some other lovely things down here I wanted to show out. We have our lovely alt tags that were working. So we have an anchor tag that opened and an anchor tag that closed. And we had the ability to put in our actual href, right? Right, right, put in actual href, right? And there we go. Oh, I think we did. I think people figured it out. Yeah, so mine was a, was a, was mine a JPG? Let's see.

Nah, it was JPG. Did I put JPEG? Let's see. Nah, I had it right. I thought that was a good idea though. Cool. Click the image. Is it not a JPEG? Did they convert it to something else when it got uploaded? This, this is, no. Oh, it does give us the CDN though. Copy URL so we can do that and we can come back to our HTML and put it in like that There we go, okay and then which I know you autosave it's just a habit Boom there we go So they give you a CDN, which is pretty dope. So for those that don't know what a CDN, a CDN is a content delivery network. And what it means is that images are like heavy. They take a while to download.

I know that like in the modern world, and we're gonna talk about this tonight, right? Like for those that have access to high speed broadband, images load instantly, right? But if you were with me back in the day, we'd be waiting a half an hour for that image to load. Right? And so what a CDN does is it takes that image and it puts it on servers around the world, right? So that you don't have to wait as long to download that image or any of your heavier files, right? So if you were in say Los Angeles, but your server was in London, your request would have to go across the entire United States, across the Atlantic Ocean, and to London, and then back, right? So why not put my image on a server closer, right? And so that's what a CDN can do. A CDN can put your images on servers that are closer, right? So that you don't have to wait for that delay. So there you go. Cool. That's how you can do a glitch. I haven't used glitch too much, But I'm glad to see that it works.

And so for folks that have to be in their browser, this is what I recommend. Uh, in fact, for some of your homework, I'm going to ask you to like, put it on glitch, uh, because the other cool thing about glitch is that you can just, uh, share the link, right? You can share the code and you can share the live link, which is pretty dope. And then the other cool thing is for those that are like in the catch up crew, you can actually share your glitch with like other people and collaboratively edit. Which is pretty dope. Yeah. And so I really like that because it's kind of like a Google Doc for your code And so a lot of times we'll see folks that are like working together on discord Just share a glitch with each other and go at it No Already Keep pushing But like I said, I'm using VS Code. We're gonna see me use that the most, but I wanted to show another option for folks that don't have that luxury. There's one other thing I wanted to show you. What you'll be noticing I do a lot is I right click and I open in my default browser. There are many plugins that you can use. This is one of the very few plugins I'll ask you to use in the beginning, or extensions as VS Code calls them. And that's called an open in browser plugin. I use Tech ER's open in browser plugin, right? And what that does is it just opens the file for you in your default browser.

So instead of having to like drag your file to the browser or doing file open in the browser, it just opens it. I don't like live preview or any of those in the beginning just because I want you to get used to saving. I know it sounds really dumb to have to like get used to saving, but I really do want you to get used to saving because I've had so many people like in real interviews, like staring at their editor, because you don't always use like your own editor, you use some other, like you use like a editor that's in the cloud, right? I've had people in interviews staring at it going like, I don't know what's happening, like it should work because they didn't save. So get used to saving for a week or two, and then if you wanna use things that like auto save and refresh for you, do it, but get used to saving, refreshing, just so that it becomes some muscle memory so that when you're like in the actual interview, you don't get got. It sounds silly. OCC said, I've done that live coding interview, didn't update because I didn't save. Exactly, so get into the habit so that like something clicks in your brain when it does happen. So I use the open in browser one, which I find really helpful. Something else a lot of people were kind of confused about last time is that you can change a lot of settings in VS Code. And so on Mac OS, it's command comma on your operating system. It might be a control comma, but that opens up settings and you can type things like HTML and it'll give you all your settings for HTML. So I just did command comma, which opens up settings. You could also do like code and then preferences which will take you to settings. But I did command comment might be control comma on yours.

And then in settings, you can type in HTML and I have my auto closing off, right? I don't like that auto closing where I open a tag and it automatically closes it. So I turn that off. So just some settings that I use to make my life a lot easier while I'm using VS Code. I wanted to show you some local images. We're gonna have lots of practice with local images, local files when we get to CSS because we gotta get good at it. So I just wanted to show you the basics today with something that we've already seen. And what we're gonna do now is we are going to move into HTML structure. We're gonna learn about a really important topic called progressive enhancement. We're gonna see some new tags, like nav tags, and then we're gonna actually start coding out some websites together, but before we do that, we gotta take a break. If you're new around these parts, we like to stay healthy. We like to make sure that we get our, if you're able to, that you get up, you move around, you stretch, You let your eyes relax on something that's not your screen. You grab some water, you hydrate, you say hello to your loved ones. Yeah, yeah, yeah, yeah. Maybe you say hello to your haters.

I don't know, you pop on Twitter for a second. But whatever you do, just like leave if you're able to. And come back to us in five minutes. All right, I'm gonna put the timer on, the music on, and I'm gonna give y'all what you really want, Bob. You You You What do you think of Notepad++? Plus, I mean, I used it like 15 years ago, but now VS Code is where it's at. Do you vape? Nah. Great stuff so far, learning a lot. Hey, glad you are. Thanks for remembering. Do you like, people always, I mean, I like Digimon, I haven't been involved in it in a very long time. Do I make vegan pho at home? Of course, like all the time. Have you read Stormlight Archive?

No, I have not. Can we see your computer setup? It's wild. It's super ridiculous. One of these days I'll share a photo with y'all, but it's pretty wild. I request Bob on screen for channel points goal. It's just the camera points the Bob. I keep talking, but it's just Bob the whole time. I love it. Good one. You watch sports. It's not really, the only sports I really watch are rugby and a little bit of soccer here and there. What mouse and keyboard should you get? Whatever's the cheapest and serves your purpose. It's more like keyboards are more about like really deep personal preferences or if you're talking about like being like safe, just like typing posture and ergonomic stuff is way more important than like the gear you actually use.

And then keyboards come in so many shapes, sizes, colors, flavors. Like, it's just you could go all in on that. Rotary Pops. Oh, you just start playing, that's pretty cool. Yeah. I want to join a new team this, uh, this fall. That's the goal. What kind of rubber ducks should I get? There are so many fun, weird ones out there. I get one that's fun. All right, folks. Come on back. Come on back. How about that? Microsoft news?

Yeah. Did it, did it actually go through? Like, did they actually buy them or no? Cause they bought them. That's wild. Good on them. It's actually gone through. Dope. Yeah. So Microsoft bought Activision blizzard. Um, Oh, bring that to a Xbox game pass, please. You know, let's get in there. Was it cost a lot of money? Oh, could like your wow subscription be part of Xbox, uh, we're just getting ahead of ourselves here. Welcome back folks.

Hope you had a good break. 68 billion is. All right, folks. Come on back up. Y'all did well. Yeah, that's what I thought. Apple, like, yeah, they got to go underneath some sort of review, right? Like they got to make sure it's not some sort of monopolistic Behavior or something like that, but that's pretty wild if it does actually go through All righty, look at I got my posture right jcoder got my hydration right? Thank you All right Welcome back. Welcome back Chill the music here. So we looked at that brownie code recipes that we did together But there was something that we didn't get a chance to get into on on Thursday. That's like how we actually structure our HTML, right? And so our HTML has a structure that we should bring to each HTML document, right? So a very common structure for an HTML document is to have this doc type at the top, and this doc type lets the browser know kind of like what type of HTML are we dealing with, right? What type of HTML are we dealing with here?

Because if you look back a couple of years ago and you're looking at something that was pre like HTML5, that doc type was messy and long, right? But when you see this nice clean doc type, you know that you're dealing with the latest, the greatest, the HTML5, right? And then we have the largest or we call the root element. So every single thing that goes on your HTML document goes inside of that HTML tag. So we call that the root tag. And whenever you have a root tag, anything that goes inside of it are children. So in HTML, we have the HTML element, which is the root element. And then everything else inside of it is a child, right? Whenever you have something inside of something, we call that a parent-child relationship. So here we see inside of the HTML, we have the head and the body. We would say that the head and the body are both children of the HTML element, right? And then what you'll notice is that the head and body are like where everything happens, right? All right, excuse me. Thank you. All right.

The head and the body are where everything happens, right? And the head is for everything that the browser needs to do its job, right? And the body is everything that we can see and interact with. So if you can see it, you can click on it, you can look at it, right? You can highlight it. that content has gone into the browser, right? I did censor my sneeze, you were here for it. Everything that you can see and interact with goes in the body, right? The stuff that the browser needs to do its job, like what characters are we using, any of the meta stuff that we're eventually gonna get into, all that stuff goes into the head. So the way I like to remember this is, Damn, this joke does not work today. Hold on, I gotta do this right. This joke doesn't work today. There we go, hold on one second. There we go, better. The way I like to remember this is that you can see my sexy body, but you can't see what's going on inside my head, right?

You can see my sexy body, but you can't see what's going on inside my head. Let that burn into you for a second. Hold on. You can see my sexy body, but you can't see what's going on inside my head. Okay? That's the same thing that you have when we get to our HTML. If you can see it, interact with it, it goes inside the body, right? You can see it, you can interact with it. it goes inside the body. But if you can't see it, if it's something that just the browser needs to do its job, that goes inside the head. So if we were to go back to our HTML here, where does all of this stuff go inside? Every single thing that we just coded out with the brownie recipe, where does that all go? It goes inside the body. Nice. Well, it goes inside the body.

So, let's actually set that up. Something neat inside of most text editors and specifically VS Code, is that you can do a little shortcut. So if we go to the top here, and I just type HTML, and I hit tab, it kind of does everything for me. Let me do that again. Hold on, let me do it. I just typed out HTML, and I went to this like HTML5, right? Like, cause I didn't do the HTML, it just gives me the HTML tag. But if I type out HTML and I get this little dropdown, I go to HTML5 and I just hit tab. It gives me everything that I just showed you. You don't actually have to type it out. It does make it a little bit quicker for you. And this is like the one time that I would recommend you do it. Everything else I think you should type out. Heck, I even think you should type out this stuff, right? I think you should even type out this stuff as well, right?

But you can see there's a lot of stuff here that the browser might need. And don't worry about this stuff here for right now. We'll cover all this stuff when we get to like CSS. But for right now, we got our doc type HTML, we got our root element, and then it's two children, the head and the body. And I always like to indent. So I always do a little tab just to indent. and then all of the content that we did before, right? All the stuff that we did before, I'm going to cut it or command X in my case, or control X in your case, cut it. I'm gonna come up to the body. I'm gonna paste it in there. Now, for some reason, it didn't auto indent. So I'm just gonna highlight it all and I'm gonna indent. Now, Leon, why do you indent? Indent, I indent because whenever you had a parent-child relationship, right? Whenever you have a parent-child relationship, you wanna put a little respect on the name, right?

You just wanna do the indentation so it's easier to see, right? It's easier to see that this H1 is inside of the body, right? It's easier to see that this H1 is inside the body, that the image is inside the body. So whenever you have a tag that is inside of another tag, we put a little respect on the name and we indent, okay? Right now is my code saved? Nope, it's not saved. You can tell because I have this little white dot up top here, that's how you know it's not saved. So as soon as I do Command S or Control S, if you're in a different operating system, you can see that it's now saved. If I go back and I refresh, is there anything that's going to change here? I added all this extra HTML, but is anything going to change? No, right? We just added more structure to our HTML. And as we start to build out richer and richer sites and eventually applications, this stuff all starts to be needed, right? All starts to be needed, right? Thank you for the hydration, cheers to you.

All starts to be needed, just to make sure that we're agreeing to those rules. Remember, we talked about, like why do we have to follow these rules? Because it will help our general users, it'll help our accessibility users, it'll help our screen readers, right? And so we gotta make sure that we are following these rules so that we can serve all the best interests of our users. And there's a lot of stuff going on here, right? Like we see this lang preference, which is for letting the browser know that we are doing a site that's in English. You can also do like a left to right or right to left designation so that you know which way you're gonna read the language, right? There's a bunch of other stuff that as we get into it, we'll go over. We talked about the char set the other day, but there's a bunch of other stuff that'll just go in here. More meta than this, what's here right now. So don't worry about that for right now. We're gonna go into that more stuff when we get to CSS. Cool. So folks are saying, how did I do that? Let me do it again for you.

So I just came up here, I typed in HTML and I went to like, see I have these options. I went to the HTML5 one and hit tab, right? Now this won't work. this won't work unless your file is saved as an HTML file. If it's not saved as an HTML file, it won't know what options to give you, right? So make sure that it's an HTML file. Yeah, I didn't type in the caret. It was just, I just typed out the word HTML and hit tab. But if it's not saved as an HTML file, you won't get those options. So make sure it's saved as an HTML file and then you'll get those options. How do I indent so fast? I hit tab, you know. A lot of people keep asking tabs versus spaces. I have my tab set to spaces. Cool.

All righty, folks. Let's look at some new tags. Let's look at some new tags here. All right, this navigation tag is something that we got with HTML5, right? With HTML5, we got some new tags. And one of the tags that came along with us was a nav tag. A nav tag, short for navigation, is for the content that's gonna help your user move around your website, right? And so you gotta think that there are a lot of repeated code in our sites these days, right? When you go to a site, there's often some content at the top, right? There's some content at the top that enables you to move around that site, right? And so if we look at something like Khan Academy, we have this kind of, this navigational content that's gonna be at the top of every single page, right? And sometimes you might have like, let's say like your Amazon, right? Let's say your Amazon and you have thousands and thousands, if not hundreds of thousands of pages and Google comes to your site and they see this word donate over and over and over again, or they see like buy gift cards over and over and over again. They might start to think you're trying to do some shady stuff called keyword stuffing where you're trying to convince Google that your site, it's about, say, donation or your site is about. Gift cards or something like that, but that's not what you're saying.

We are what you're trying to say is, hey, I need this stuff to navigate around the site. It's probably going to show up over and over and over again. And so what we were able to do is have these lovely nav tags. And in terms of like search analyzation, they kind of just get like ignored, right? Like they don't count against you. They don't count for you. But you don't have to worry about that too much right now. What they do is it just enables you to have like repeated content across all your pages and useful in a way so that you know that you're gonna use this to navigate. Really helpful when it comes to screen readers as well. They know that they can use the content in that tag to help them move around. All right, got a lot of hydrates that came in. Cheers to y'all, thank you. Ruby, thank you for the stretch. Let me get a little cheer stretching. Thank you, thank you.

Cool, so whenever you have navigational content, we're gonna use this lovely nav tag, right? And we're gonna see this over and over again. We're gonna put this in the practice, right? We're gonna put this in the practice, but this nav tag is something that we're going to use to help us when it comes time to having content that directs people around your site. So right up here, we see a nav on TechCrunch. We maybe have like a nav on the left-hand side. On BBC, we had a nav up top as well. So this idea is that we're going to have these navigational elements that enable us to move around our application. Now, inside the nav, we often have a list of links, like the places that we're going to go to. And so that's why you'd often see like a UL with LIs and anchor tags inside. Now, so far, right? So far, we have only shown data to users, right? We've only shown data to users, right? But how do we get data from users? What can we use to get data?

If you did the Shay Howell reading, you should know this already, what do we do? How can we get data from users? We use a form, exactly. And so here we have a form tag, and a form is an open and closing tag that wraps around inputs. Just like you have an OL and a UL that wraps around LIs, like you would never have just an LI, right? Your LIs are always gonna be wrapped in an OL or a UL, right? It's always gonna be wrapped in an OL or a UL. Same thing with a form. We're gonna have inputs, and those inputs are always gonna be wrapped in a form tag. Now, form tags have some pretty cool, what are these called? What are these called up here? Let me ask y'all, what is that called? What are these called? Yeah. Forms have some pretty cool attribute value pairs.

We don't have to worry about them right now when we get to like building our full stack applications, these become a lot more important. Actions are like what happens when the form submits. So if you've ever submitted a form and it's taking you to like a thank you page or a confirmation page, it could have been one of those attribute value pairs that helped you do that. And then also like, what are we doing with that information? Are we sending it somewhere? That's where the post comes in. But like I said, you don't have to know about these attribute value pairs just yet. We'll get to them later on when it becomes important. But what we do need to know is that that inside of a form can go a bunch of different kinds of inputs. We can have text inputs, password inputs, tell inputs, email inputs, button inputs, all these different types of inputs that can go inside of a form. And there's a lot of them. With HTML5, we got a lot of these new input types and the MDN has a full list of them should you want to see them, right? So MDN has a full list of all the input types. But let's go ahead and build a simple form together. So I am gonna go back to my brownie dishes here.

And I'm just gonna go ahead and give myself a little form at the top here. It's a little bit of room. And I'm going to go ahead and just do form. And I'm gonna hit tab. There we go. Cool. So I have my form. I don't really care about any of the attribute value pairs right now. We can just let that be. And inside of my form, I'm gonna put three inputs. I'm gonna do input type text, and then I'm also gonna do an input type tell and an input type email. So let's go ahead and do tell, and let's go ahead and do email. Cool, is my site saved? Nope, some folks are saying that they can't see the screen. That's most likely due to your quality settings.

So the beautiful thing is that we have quality settings. You can change the quality of the screen to a higher quality if you have the bandwidth to do it. All right, and then sometimes you just got to refresh. Yeah, sometimes you got to refresh. All right, so now it's saved, beautiful. And let's go ahead and take a look at this in the browser. Which one it was, there we go. All right, let me refresh because I can't see it, right? I can't see, I can't see my form yet. Why can't I see my form yet? I say, let's go back, let's look. I saved, look, my X is a circle, my circle's an X, right? Why can't I see the form? Ah, I didn't refresh. It's mine?

Okay. That's weird. What happened? Oh, there we go. I just didn't scroll up. I didn't refresh, right? I had to refresh and then I had to scroll up. I didn't refresh and then I had to scroll up. So now that I've refreshed, you can see my form, but there's something interesting. Let's go back and take a look at these real quick. Some folks are saying, wait, the input doesn't have a closing tag. It's one of those very few tags that are self-closing. The input is content itself. We're not wrapping around content, right? It is an input, doesn't need a closing tag.

It's not wrapping around content. It is self-closing, just like images, right? But we have these different types, text, tell, email. When I go back, nothing really changed about each three of them, right? They're all the same. They all look the same. I know we don't care what it looks like when we're writing HTML, but they all look the same. So why with HTML5 did we get all of these new input types? Well, something really important changed. No cheating if you watched the class before. Something really important happened. Something fundamentally changed about the way that we use the internet. Something big, the massive impact on everything that we do, how we consume the internet, what we use on a regular day-to-day basis. It just kind of consumed how the internet functions and works, so what changed? Yeah, mobile.

And so with mobile, we need ways of helping one very particular things. How do phones and mobile change inputs? Like what do we need with inputs if we're using a mobile? Yeah, Tony got it. Tony got it. We need different keyboards, right? We need different keyboards. When we type, when we have an input type text, it's gonna give us like a normal keyboard. We have input type tell, it's gonna give us the number pad. We have an input type email, it might give us the at sign or like your email provider on the keyboard. So we needed all these different types of keyboards and the wonderful types on the inputs Let's help us with that. Cool. There's also one other thing that I want to show you about forms that are really helpful. And so here we have a form and I'm going to have a label and there are a couple of different ways of doing labels but let's just say that this was, we want the first input to be like your first name. So let's put a label called first name, right?

first name. And what I want to have happen is I want to tie this label to this input. And the way you can tie a label to an input is by having the same for attribute as the id attribute on the input. So I'm going to give the for the attribute of zebra. And I'm gonna use Zebra a lot because there is nothing in HTML, CSS, or JavaScript, right, that has the word Zebra in it or zebra, if you want to say it that way, right? You want to have a way, like I want a way to like show you that like I'm making it up. So if I use zebra or zebra anywhere, I am making that word up. So my label is gonna have a four of zebra, and I'm gonna give this input the ID of zebra. Cool. Cool. So my label has the four, and my ID has a zebra as well. I'm gonna save this. I'm gonna go back. Let me refresh. All right.

So now I have this label. Let me make it a little bit bigger here. I have this label and what I'm going to do is I'm going to click on the label, okay? Let me go ahead and click on this label, ready? Three, two, one. Did you see it? You see what happened? One more time, one more time, hold on. All right, I'm gonna click on this label. Three, two, one. Boom, you see what happened? Ah, we got this cursor. So when I clicked on the label, it focused in that input, right? It focused for us. It focused in on that input.

I clicked the label and it focused in on that input, okay? Now, why might that be important? Like why might we want that to be a thing? Like why go through the extra labor of creating labels for each of our inputs? Yeah, accessibility. And so accessibility is great because individuals might be reading out your website. So the website might be read out to them. And then as they're kind of like hovering over the text, they wanna be able to tap that text, right? So that it can focus into that input for them. And so it might be harder for them to find the inputs, but they might be able to tap the text and have it focused for them. So there are some accessibility concerns there. There's some things that make it easier for folks to interact with your forms. And so I wanted to show you some of these basics. We'll get deeper into forms. Our forms will do more, but for now this is some very simple forms and you'll see more in the reading in the homework that you get as well.

Cool. All right, I said, this is the most Where am I saying? Why is zebra? so I use zebra a lot and I taught a class At GA and it was like a it was just like a front-end class which is like two nights a week for 12 weeks They're phenomenal classes. I love teaching them and I always use zebra as my example and at the end of that cohort A person came up to me, they gave me a beautiful zebra pencil as like a thank you and said it's called zebra and then they walked out. And so as an homage to that wonderful person, I now say zebra. I think they were from South Africa where it is pronounced zebra and not zebra. And I think I think folks from South Africa should be dictating how we say zebra More than than my Philly ash should be saying how zebra said so I'm gonna call it zebra Cool Now I Said that this was the second most important thing. We're going to talk about tonight and it's called progressive enhancement and progressive enhancement is is a really important concept for a lot of our users. And all progressive enhancement really means is that we should be focusing when we're building our websites at the core of our website should be our content, our HTML, right? That should be our chief focus. That's why we start with HTML. If you're thinking about building a website, your focus should be the content, the HTML. And then we're gonna take that HTML and put a nice chocolatey coating around it. And that chocolatey coating is our CSS.

And then we're gonna wrap that chocolate and peanut in a very thin candy coating that is our JavaScript. Okay? So the idea here, the idea here is that the core and the most important is the content, the HTML. We wrap some presentation on it. And then the very last thing is that very thin candy coating. And what you need to do is you have to realize that not everyone has broadband internet access. In fact, a lot of your users, a lot of your consumers might not have access to super fast internet, right? And so if you are pulling in all the latest and greatest CSS, you're pulling in all the fancy client side JavaScript and you're making your sites You're making your sites heavy, right? You're making your sites heavy. That increases the page load speed of that site. Let's look at a site. Let's look at CNN. I don't know what that was, cnn.com. I'm gonna do something. I'm gonna right-click, inspect, and don't worry about seeing this, but I'm just gonna show you something.

I'm gonna go to network, and I'm gonna refresh. Ready? Hard refresh. And what we're really trying to focus on, and let me turn off the ad blockers here. Turn that off, turn that off, and we're gonna do a refresh here. And we're gonna let this run for a second. Give me a second here. So what I just did is I just refreshed the CNN website, okay? And what we're seeing, it's still loading. You see all that movement, that is it still loading, right? We're 26 seconds in and there's still stuff happening. There are 17 megabytes of resources that are coming in. 897 requests that have been made so far. Remember, when you go to a website, you make a request to a server and you get stuff back. Oh my, I don't even know if I can stream that.

You're getting all those responses back. So that's like almost a thousand requests that have been made to different content, right? 21 megabytes of resources, right? And there is a good chance that some of our users might not be able to load that site. That's a lot. That's somebody's data cap that we're eating into just going to a news website, right? Just going to a news website, 21 megabytes of space, over a thousand requests. And so this really escapes progressive enhancement. But they realized that. They said, you know what? Let's get back to our roots, right? Let's make it so that our users that may not have access to high speed broadband could still use our site. And they did with a lot of sites are doing now. And they made a light version of CNN. So this is light.cnn.com, right?

Let's do the same thing. and let's go ahead and inspect. Let me turn off my ad blockers for this site again. Notice there's only one that popped up and let's go to network and let's do a hard refresh. So we're at like a third of a megabyte, right? And only five requests as opposed to a thousand and untold megabytes of data, right? And so this is a beautiful website that takes into account progressive enhancement. The idea that the thing that people really care about, right, hey Rob, thank you for the bits. The thing that people really care about are the articles, the stories, right? And so they wanna be able to look at that and have a clean experience. This is a beautiful website in terms of progressive enhancement because it just gives you what you want. There is no need for the chocolatey coding, maybe a smidge of CSS, and definitely no need for the heavy JavaScript, right? And it's important to keep these things in mind. And I pulled this up. In 2017, the US said that 22 million Americans, or roughly 35% of the nation's rural residents Did not have broadband access Let's think about that in just 2017 in 2017 22 million Americans about 35% of all rural residents lacked broadband access so that's a huge portion of your consumers a Huge portion of folks that are trying to access the internet that if you go out and you while out and you add tons of really heavy things to your site that doesn't really matter, right?

It doesn't really matter, you are impacting your users. Now, something that was really cool that I looked up too is that in 2015, 2015, AOL had two million dial-up subscribers. In 2015, in 2015, AOL had two million dial-up subscribers. They now said that they have very few, like in the thousands, but in just 2015, two million people still are paying for AOL dial-up, and that's just AOL. So when you think about progressive enhancement, I don't want you to think about some other places. Like even in just the US, which has decent infrastructure, we still have lots of individuals that do not have access to broadband. And so then when you expand that to the rest of the world, you got to think about, do you want to reach people or not? And you should be keeping progressive enhancement in mind. Actually just got, I don't know if it's in the room. I just got a 56K modem cause I want to do some fun stuff with it, but yeah. All right, so with all that we have in mind and all that we've learned, let's look at this BBC website. Let's see if we can get this going here. Let's see if we can get some things popping here and see if we can start writing some code together. So let's go ahead and look at the BBC website. All right, so when we look at the BBC, we got a few things that are happening here.

We got, what do we have up here at the top? What do we got up here at the top? What do we say that is? We definitely know it's a nav, and that nav might be inside of another tag. We talked about one tag very, very briefly that that nav might be sitting in. Anybody know what that might be? Yeah, it could be our header. So we know that everything on this page, right? We know that everything on this page is sitting inside the what? Everything we can see right now sitting inside the what? Yep, it's sitting inside the body. It's sitting inside the body. Perfect. And then inside that body, we know that we have our header. And inside our header, we probably have our nav.

And then inside of our nav, we probably have like our UL and all of our LIs. All right, so just by taking a quick look at this, I know that I have like my header, my nav, my UL, my LIs, probably my anchor tags inside of those LIs. And then we also have something over here that search, what is that going to be? A form, exactly. Somebody says, why a UL? Well, it's because we have a list of links. We have a list of links. They don't have to be in a specific order, so it's not an OL. Since it's a list of links, we put them in a UL. Cool. So if we look at this, we have a header, a nav, UL, allies, maybe a form. Cool. How about when we look here? What would that be? Big block, taking up some space, what would that be?

A section, nice. How about welcome to bbc.com, what would that be? Maybe some sort of heading. Some folks might say that's the H1. Some folks might say that might be an H2. It's up to you. I'm thinking the H1 might be one of these down here. That seems really important. Like if you come to BBC, that's the thing they want you to know. Their H1 might change a lot, all right? Maybe we got another section here that's holding the heading, the paragraph, and the span. Maybe we got four more sections over here, each holding maybe a heading and a span. All right. Down here we probably have like another section and maybe three sections inside of that. And maybe some sort of, maybe like an H2 for news.

And then inside of those sections, maybe like an image, an H3, a paragraph, a span, maybe an image, a heading, a paragraph, and a span, right? All right, so what you're seeing me do right here is something I do with every single site that I ever get. Right, I mark it up. Some folks are saying, are they articles? So articles I think are interesting. There are some people that are purists when it comes to the articles, and it's used just for articles, like things that you would clip out and share. To me, these all link to the actual article, right? These all link to the actual article. So some developers would say, oh, if they actually link to the article, then they're not actually articles, they're like links to the article that'll be the actual articles, right? And then there are some people that say, actually, those things could be shared, so maybe you can also give them article tags as well. So it's kind of a decision you have to make. Are you a purist that says that that's not really an article just links to one or is that something that could also be shared? Right could also be shared and therefore as an article Right to you I'll show you why I do it, but don't take my word for it reading rainbow, you know But what you're seeing here this this mess on my screen, right is what I do for every single layout. If I ever am on the job or I have a client and I work with a designer and they give me a layout, until I got an iPad, I printed it out. So maybe until like a year or two ago, I printed it out.

I'm not ashamed to admit this. I printed out every single design I ever got and I would sit down with a pencil and a piece of paper and I would draw out my boxes. All right, this is gonna be a section. This is gonna be a heading. this is gonna be a header, and I would sit there and I would draw it all out, and then that just helped me think through it so that when I went to my, boomer, so when I went to my HTML, I kinda had like a direction, like I knew where I was going. And so whenever I give you a design that you have to write the HTML and then starting next week the CSS for, I really recommend like drawing it out. Some people will use some sort of program from on their computer to draw it out. Some folks will literally print it out and draw on it. But I really think there's a lot of value in drawing it out. Even if it's, even if you just have a blank piece of paper and you draw your boxes on that blank piece of paper, it really does help my brain think through all the decisions I have to make so that I can go ahead and get through them, you know? Let's look at another one. Khan Academy. If we're looking up here, everything that we see, everything that we see right now is inside the what? Everything we see is inside the body. All right, how about this area up here?

What would that area be? Yep, that's the header. Nice. Inside the header, we have the what? We got the nav, all right. Inside that nav, we got some, some what? And maybe a nav and then maybe like a UL and there's some LIs in there, right? We can definitely see some LIs and some anchor tags. And then maybe in one of those LIs, we have a, or maybe outside of the nav, depending on how you think about it. We have a form. We have a what? How about that? What would that be? An image, nice. And then these will just be like Norma LIs.

And those LIs would have what inside of them? Yeah, those LIs would have anchor tags. And there are links that go somewhere to sign up, to log in, to donate. All right, how about this white area here? What could that be? Yep, that's probably a section, nice. Inside that section we have a what, what would that be? An image of some sort, beautiful. And then we have a what? Would that be h1 nice how about this here would that be Paragraph nice. I feel a paragraph there and then this one's tricky. What do you all think this could be? What are those what are those To me, it's a UL with LIs and anchor tags inside of them. Each one of those I think are links to other places. They just so happen to look like buttons.

Now I don't care what they look like. We'll get to that with CSS. So are they buttons or are they anchor tags? To me, it's gonna be a UL, LI with anchor tags inside. I can even see some people saying that's also a nav, right? Like if that's navigation, that's gonna take you to learners, teachers, districts, parents, and that shows up on every page, then that could be like a nav to me. But for me right now, I feel comfortable with like a UL, LI and anchor tags inside. Cool. About below right here, I'm just getting to the fold. Another what? Another section, nice. And then how about this inside of the section? H2, nice. Look at us go. Look at us go.

Come on now, look at us go. Y'all just knew every single thing on this site. This is like a normal in production site and y'all are just blasting through this, right? I told you, it's not too much, right? Like you learn some of the basics, Beyonce has arrived. You learn some of the basics and you could start to really kind of, to really do the HTML for these sites. Now we're gonna get to CSS and stuff next week, but for now, like y'all rocking and rolling with this HTML. Kudos to you. Well done. I'll just do one more. TechCrunch. Ooh, this one's a little, Well, a little odd. What is everything we see inside of? Everything we can see right here, but what are we inside of? Body.

All right, when I look at this, I kind of see like three distinct areas. All right, I see that, that, and that, okay? Okay, so what would this be? It's definitely a nav, right? Definitely a nav. Some people might throw it in a header, some people might not. I think it could be a header to the beginning of the document. Notice why I always say beginning of a document. I don't say top or bottom, right? It could be a header, it could have a nav inside of it, could just be a nav, right? All right, inside of that nav, we have a what? What's inside of that nav? A UL, exactly, with LIs, and inside of those LIs are probably what? Anchor tags, nice. And we also have probably up here like an image that's their logo or something, cool.

How about the box next to it, what would that be? Like this big boy over here, what would this be? Like that whole box, what would it be? Section, I can see it being a section. That comes down to that argument again, right? Is it a section, is it an article? To me, section. Some other folks might argue and say, nah, it's an article, but to me, articles are meant to be fully shared, right? So I would say section here, and then what would this be at the top? H1, I feel an H1 there, yep. Most important thing, it's like their biggest headline. You come here, that's what they want you to walk away with. How about the person underneath? Amanda, would Amanda be? Could be a span, could also, you can make an argument that it doesn't describe the content that comes after, because if it describes the content that comes after, it's a heading, and then maybe we have to start thinking about what type of heading it might be based on how important we think it is.

If you don't think it describes that content, describes that section at all, then it would be a span. Yeah, I might lean into the heading category here, the heading camp on this one. And then this one should be easy. Wait, what would that be? Yeah, an image, cool. And then we got something interesting over here on the right. Got something interesting over here on the right. What do you all think that this could be? I see a lot of people saying an aside. I don't think it's an aside. I think that's important content. I think it's not ancillary or extra or something that they could like remove and the site still be okay. I think these are like, they're like important stories. Like they want you, they definitely want you to go to these stories, right? So to me, this could be a section and then inside that section could definitely be a UL.

Some people might just make it a UL, which can be weird, right? But like, you could just make it maybe a UL. It could be a section with a UL inside of it. Or some people might even do a section with an article inside. Those could all be, all four of those could be articles. I actually think TechCrunch does list those as articles, but to me, I'm a purist. I think articles are meant to be shared, and that to me isn't, I think those link to articles. So for me, this would be a UL, well, it would be a section with a UL, with LIs, with anchor tags inside, but, or maybe not even anchor tags, it might be headings first, like H2s and either a, I would say span. All right, so that's what mine looks like. I think this box is a section. And then this whole thing is a UL. And then each of these are LIs. And each of those LIs has a heading in them and a span. I'm literally using my fingertip because my Apple pencil doesn't work for some reason. Y'all don't blame, look, we already talked about this.

We've been through this. Don't blame me, blame the nuns. Don't blame me, blame the nuns. We've been through this. Now, this can be overwhelming at first, right? And so what I really want to put on yourself is don't worry about perfection here. Pick the most semantic thing you can think of and go with that. You're gonna have plenty of time to figure all this out the high heavens. give yourself a little bit of grace, give yourself a little bit of breathing room, write vomit code, get something on the board, get it working, right? You don't have to have it perfect. It doesn't have to be the best HTML. And hell, if I give this image to 10 different front-end developers, I am getting 10 completely different sets of code back. So nobody has this perfect, right? Nobody has this perfect. It's up to you to make the best semantic decision that you can reason about and then put it into practice.

It could be inside of an anchor tag too. Like this stuff could be wrapped in an anchor tag. Like that h2 and span could be inside of an anchor tag. So like that whole thing, that like that whole area could be clickable. and that whole thing could be an anchor tag. It seems like the box is not clickable, but the heading is. And so that gets us into some interesting territory. Cool. Are all these layers nesting? Yes, they are. They are nesting. So what I wanna do is I wanna do one quickly together. I know we're gonna go a little over. I should thought we could end a little bit early Which is you're gonna find as a meme. I want to do one together and Then we'll wrap for the evening.

So I wanted you I want to I want you to get some fingers on keyboard time Right once you get some fingers on keyboard time, and then I want you to we're gonna do a raid, right? We're gonna do a raid and then after the raid like after you've hung out in the raid a little bit You've given them some likes and follows you shared the love a little bit. I want you to maybe finish it up I like this TechCrunch one. I think this one's weird. I think this one's weird. And so since it's weird, I want to take a look at it. All right, I want to take a look at it. So let's go ahead and look at, let's go ahead and look at this one. So we already kind of talked through it. So I'm just going to open up a HTML file. All right, let me go ahead and open up an HTML file. And I'm just gonna do file new. So on my operating system, I do Command N. It might be Control N for you. And what I'm gonna do is I'm gonna immediately save this as an HTML file.

So I'm gonna call this techcrunch.html. So I did Command N, right? I did Command N. And when I did Command N, that brought me to the new file, and I immediately saved that file. I did Command S to save the file, and I'm just gonna call it techcrunch.html. You have to save it as an HTML file. If you do not save it as an HTML file, you don't get all the stuff that we kinda just walked through that can help you. So now that I saved it as an HTML file, I can just type out the word HTML. Yep, and I'm gonna do the HTML5, hit enter. Now I have my head, I have my body, and I'm ready to rock and roll. I like to indent my head and body, put a little respect on the HTML elements name. And then inside the body, all right, inside the body, I'm gonna start writing my HTML here. So I have, let's just say that that's the header, and we're gonna have an image, and then we're gonna have a nav with UL and LI. So let's go ahead and put our header in here. Cool.

And you don't have to code along for right now. Kind of just watch this one. This isn't like a, you don't have to be coding this live. Like pay attention, watch, ask questions, and then we'll go over it together. All right, so I have my header. Inside my header, I know I have like an image and then I had my UL. Inside my UL, I have my LIs. And inside my allies, I had my anchor tag. And that anchor tag was all different stuff. So it was search. Well, that's probably like a form of some sort, but startups, TechCrunch, let's just say startups. And I'm just gonna copy and paste this because there's like eight of them. Right, so there's some of them. And just to have some placeholders, I'm gonna do the Octothorpe, there we go. So the idea here is we looked at it, we said that this whole area was a header maybe.

Like I said, we don't care. We're trying to figure this stuff out. There's no perfection here. There's no absolutely right, absolutely wrong thing. Inside that header, we had like our logo, which was an image. We had maybe a UL with a bunch of links in it. And so that's what we're kind of working through here. We got our header, the image. Let's just put like logo in here. Cool is the alt. We had a UL, right? With a bunch of LIs and anchor tags in it. But let's think about this. What is this? What is this?

It's a nav, exactly, it's a nav. And so if we go ahead, we should actually put that all in a nav. I'm going to go ahead and bring out my nav and I'm going to put my UL in there. Boom, there we go. So now we got a nice header. We got a nice nav, our UL, our LIs are looking good. Right? Maybe the images inside the nav, that could be true. Yeah. Maybe the image is inside the nav, that would be okay. Maybe we have an LI that's just for the logo. That's fine. Could be. Is this saved? Not saved, nope.

There we go. We also, I have some other stuff in here. This might be like a form. We could wind up with like a form in here somewhere. Like we might have a form outside the nav. It depends on whether or not, it depends on whether or not this search shows up on every single page, right? If this search shows up on every single page, we might put it inside the nav. That would be okay. Like we can do that. Remember, fight the urge to pick stuff based on how it looks, right? All right, and then we could have like a text for like our search, right? All right, so the idea being here that we could have image in our nav, Maybe the form's inside there, maybe it's inside one of our LIs. The idea here is that like it's, I want you to be a little bit free flowing with this. Don't get caught up in it having to be perfect, right? We're kind of riffing here a little bit.

We're trying to think through the semantic decisions behind what we're doing, right? And it doesn't have to be perfect, right? Get the idea of it being perfect out of your head. It just doesn't, you don't have to worry about that right now. You're gonna have years and years to be perfect. Right now, get a win on the board. or get some ideas flowing, right? Think through what it should be, right? Cool. All right, so I think we got a rough idea of what the header might look like. I'm gonna save it and let's go look at this next portion. All right, we got like this next big thing, which I'm probably gonna say is a section. And so I'm just gonna go ahead and put a section after my header here. Some folks might argue an article here, but I'm going to go with a section. I'm going to have an H1 in it and Microsoft buys Activision slash Blizzard, right?

Brooks it's your quality settings. You have to improve your, you have to change your quality settings on Twitch if it looks It's blurry. Cool. Derek, thank you for the hydration. Abin, thank you for the posture check. Robo, thank you for the hydration. Cool. All right, so we got that section with the H1 Microsoft buys Blizzard. Let's take a look at it again. We have the Amanda Silberling. That could be a span or it could be some sort of heading that describes the content that comes after. I don't know. Does the person's name actually describe the content? It is their article. I'm not gonna get up in my feels about it for right now.

I'm just gonna say a span. Something I might come back to, right? I might come back to it and say, you know what? That should be somebody's, like that describes the content, I might come back to it, right? I'm gonna take another look. Image, that's definitely an image for me. and so I'm gonna go ahead and put an image in here and I'm just gonna put the alt in for now and that's gonna be like the, I think it was like the Call of Duty. Activision, there you go, cool. Is it okay to be lost? It absolutely is okay to be lost but you better jump in one of those voice channels and get help, you know, this is stuff that you should have seen in the Shay how, but if it's your first time ever being in a tech center and it's your first time ever even looking at this stuff, it's gonna be completely just a, it's like a whole different language, right? And so it's okay to be lost. It's okay for a lot of this stuff not to make sense, but you gotta put in the cognitive effort to get over it. Right, you gotta put in the work to get there. So come back, rewatch the video if you have to, make sure you're doing your active recall. Whatever I do, you try doing afterwards, right?

So when you're done the raid make sure you yeah, yeah, yeah. Yeah. Yeah you go back, you know All right So we got that section there a lot of stuff we might come back and change We might add some anchor tags here or there All right. We've got this last one over here like this last area I'm just going to say a section with a ul in it and that's what i'm going to come over here and do Cool section with a UL. And then each one of those LIs is gonna have for me, it was like an H2 we'll say, H2, some text. And then there was like a span, which was the person's name. Let's go back and take a look real quick. Yep, heading, maybe a span. and then these were all like in a list somehow. Cool. Might add anchor tags here. We might make some of these things clickable, right? Right, this whole thing might be inside of an anchor tag. The text here, right, the text here, that might be an anchor tag. So let's go ahead and get rid of that real quick.

So we might put like our some text and we might make it an anchor tag, right? Right, we might make it an anchor tag, right? So like I said, there's a lot of little things you can come back and do and I want you to play with this, right? The idea is I want you to play with these things. So I showed you a kind of a quick run through, right? I'm gonna share this file after class, of course, but I want you to come back. I want you to rewatch this. I want you to see if you can come to some of the same, same ideas that I came to. Get the practice, right? Get the practice of typing all this out, right? So I'm gonna share this file, but what I want you to do tonight, like what I want you to do if you have time tonight or as part of your homework, I want you to take this TechCrunch, right? And type it out, right? Get get this get this nav going get this section going get this this list going, right? I want you to do the same thing for Khan Academy. We talked through it get it going We have the same thing for the BBC homework get it going.

You got to practice it You got to get into your text editor. You got it. You got to mess up You got to make sure that things aren't like things aren't right, right? You got to make sure that like you You play with it, right? and The more you do it the more you get in there the more you practice the more you feel Uncomfortable the easier this becomes Okay, but do what you got to do jump into a voice channel rewatch the video in a voice channel I'm sure you have a bunch of folks that will join you talk through together Talk through your semantic decisions together If you're catching up as a VOD jump into the catch-up crew channel watch it together talk through it together to practice it together, get your fingers moving, get into your tech center to break stuff. It doesn't have to be perfect. So that's what I really want you to focus on tonight is that it does not have to be perfect, right? You saw me making some guesses, some educated guesses. I put it in there, I might come back to it, I might change it, but it doesn't have to be perfect, okay? This is your first time, right? It's your first time for a lot of you writing HTML. And so let's get into it. When we come back on Thursday, we shift some gears though, folks. We get into some CSS. So make sure you've gotten through the Shay Howe reading.

And we're gonna do a little raid here. We talked about the Primogen. Let's see if they're live. Let's see. I think they're live. Yep, let's go ahead and do a raid. Remember, when you raid, you get the channel points. You want the channel points, folks. It's all about the channel points. So let's go ahead and get a raid in, Primeogen. They're a wizard on the keyboard. That's what I want you to see. I want you to see what you could get up to, like how fast your fingers can move, how leet your code could become. And so let's go ahead and raid Prime while they're alive. We're going to the primogen.

Folks asked me to say it out loud before we do it. We're ready in the primogen. We're gonna start the raid and we're gonna be over there in 10 seconds, but please give yourself some grace. Get into your text editor, have some fun, break some things. I'm gonna see you all on Thursday to do it all again. Well, I'll see you all over there folks. Peace, have a wonderful evening. Let's raid.

End of Transcript