Introduction

I'm ready to be Beyonce today. Ready to be Beyonce today. Now the question is, are you good morning? Good afternoon. Good evening. No matter where you're coming from. Hope you all are doing well. Let's go What's going on everybody hope everybody's doing well, hope you're ready for another class, uh, bobby bangers With the sub bangers only that's how we start each stream. What's going on everybody. Let's get in here Hey We we got the slow chat on tonight So maybe a little little little a little little easier tonight maybe in the chats to read the things But welcome everybody. Hope y'all are doing well Rufio what's up? What's going on? Everybody? Hey, so we got a question tonight. We got a question.

The question tonight is Rob, what's going on? Bringing the whole gang, let's go. Thank you for the raid. We're returning the favor, we're coming right back. As soon as I see you live after we're done, we're coming right back. What's up everybody, hope your stream went well. Thank you for joining us. We're all ready to be Beyonce today, so thank you for stopping by, thank you for being here. What's going on everybody? All right, so the question in chat today, to start us off, as folks get in, they get the stream right, they get the volume up, is would you rather win a bronze medal at the Olympics or be a recurring actor on one season of a somewhat popular Netflix show? So give me like actor or medal, what do you want? Actor or medal? We should start doing polls for this. That's wild, all right, you know, it's kind of mixed it's kind of mixed It's kind of mixed we're seeing actor we're seeing metal we're seeing both I like it You know what I'm gonna go with hmm I'm gonna go with I was gonna say metal metal came out so easy like it was about to flow out the tongue but I don't know what's what's what's gonna last longer the Olympics or Netflix I don't know see a lot of people go an actor I don't know I think actor be more fun I feel like I had to do more to get the metal I feel like that's a lot of late nights early mornings A lot. I'm a big boy.

I'm a big boy. That's a lot of moving actor. That's it. That's old it Sponsored by Domino's Pizza Actor it is for me. Welcome everybody glad you're in here Rob, thank you for the raid What's going on? Alright, so tonight we got a lot of stuff in store Last class we set the stage. What does it mean to be a software engineer? What's the opportunity that's in front of you? What is the internet? What was the beginnings of HTML? And tonight we continue that. So we're going to lay down our first lines of code together. By the end of this stream, you will be a software engineer. You'll be writing code with the best of them. And so I hope you're ready for it.

A lot of y'all came back. I'm glad you're here. Don't tell the wife. Welcome back, everybody. All right, let me bring up the slides here. We're gonna go a little later on. Cool. So, agenda tonight. Every single stream, we are going to get our spaced repetition in. We're starting from the beginning, and these first couple classes, we're building up the steam, right? For some of you, this might be a lot of review. For some of you, this might be the very first time. I care about the folks that are starting from zero the very first time. You can always push yourself if you want, right? So we're gonna start at zero.

We're gonna get our spaced repetition in, but I promise you, I promise you it picks up steam. It gets faster, it gets harder, but we start at the beginning and we get our spaced repetition in. All right. After we get started, I'm gonna open up some time for some questions. After we get started, we're gonna review the client server model, the basics of the internet. How do we make those requests and receive those responses? What the heck is going on? Hey, what's up? Thank you so much for the, get the subs. After we review the client server model, We're jumping into the basics of HTML. We're viewing those tags. We're seeing some new ones. We're seeing what's changed with HTML 5 Once we kind of learn the basics you're gonna get the first chance to get your fingers on those keyboards right to get your fingers on those keyboards and Start coding an actual assignment while we're live After that, we'll show a few more HTML tags. We'll talk about another important rule. Last class, we learned about separation of concerns.

This class, we're gonna learn about progressive enhancement and then I will leave you to the raid and then to your homework. Sound good? We feeling good? You ready to get into this? All right. Every stream, I like to start off with some questions. So if you got a question, you got a question for me. Now's the time to ask the question. This just gives folks a few more minutes to get here. If they're running late, they had to grab the Cheetos and they're running. They're opening up the computer. They're slamming to get in here. What's a raid? Jesus said, what's a raid? At the end of each stream, we go to somebody else's stream just to spread a little bit of positivity, give them some follows and say, what's up?

What is your headband? My headband is a buff. It's actually like, you get it at REI, like hikers use it to keep away mosquitoes, but I just like it, it doesn't keep my hair too tight. Do you know of any coders with dyslexia? Yes, I absolutely do. One of my more recent RC students had pretty severe dyslexia and we actually were able to come up with a lot of tips and strategies on how to like work around that, and they wound up getting a phenomenal job. So if you ping me in the Ask Leon channel with just say like dyslexia resources, I'll share them out. But yeah, definitely doable. Abraham in the house. Hey, thank you for the gift of subs. How do you use Anki? We'll share some videos that I think would be helpful, but we're also gonna do it in class. So I'm gonna show you my Anki decks. We're gonna break it all down. We're gonna do that next week together Question if you miss class, are you screwed?

No Immediately after class the VODs are available and then each weekend they go up on YouTube We have to have a little bit of delay before the videos go up on YouTube because we're partnered here on Twitch Any partners any any folks here that are hearing impaired? Yes We have quite a few just as a note. You can turn on closed captioning on Twitch You can also turn on closed captioning on YouTube Wu said is it worth $25? Hold on. Wait a minute, please No, God, no, God, please, no, no, no, no. Don't pay for anything. If you are here, please do never pay a dime for anything. I will never, ever give you a resource that you have to pay for, right? That you have to pay for. Anki is a completely free tool. You can use it for free on Mac OS, Windows, GNU, Linux, Android, however, if you want the app on iOS, there is like a $25 version of that app, do not buy it. You can use, there are other free ones you can get, or you can use the web version. I use the web version a lot, and the web version is completely free. Please don't ever pay money. The whole point of this experience is to go from complete beginner to employed without paying any money to get there.

You'll see a lot of folks are subscribing, a lot of folks giving out gifted subs. I appreciate that. That goes to a donation to the nonprofit I work at during the day. That does not go to me. There's no way for you to give me money. I want this to be a completely free experience. So if I ever give you a resource, there sometimes are paid components to them, but you don't have to. Like with our learning how to learn there is like if you want the certificate you can pay for it Please don't do that completely unnecessary All right, one or two more questions I'm gonna jump into it Will we Learn how to practice on our own. Absolutely. We're gonna build up to it though A lot of people love to come out the gate super hot, right? And they really, I mean, and I understand it, right? A lot of folks, they're up against the wall and coding is the way out. I understand it. But we gotta realize that this program is a jobs program. Okay, let me say that one more time.

This is not necessarily a coding program. this is a jobs program. What the heck does that mean? Well, if underwater basket weaving, if underwater basket weaving, let me get big here. If underwater basket weaving was a high paying career, if it was consistently ranked one of the happiest professions, if you could learn it for free And you didn't need a degree my ass would be on this stream with with hold on. I got to get it This would be stream this would be it it's with what we'd be doing for the next 30 weeks Right, we'd be sitting here. This is how you do it folks. This is called a cross weave This is a this is a top sectional. This is a fiber material This is the top of the line of basket weaving technology. However, thankfully, that is not the case. It just so happens that being a software engineer and full stack web development is the path to a high paying job that is consistently ranked one of the happiest that you can learn for free and you don't need a degree. So let's not get a twist it. That's why we're here, folks. That's why we're here. Cool.

All right, let's jump into it. This isn't a programming course. It is a programming course. Let's not get that wrong. Like we got to learn it to get to the end goal, but, um, there are lots and lots of programming courses out there that, let's be real, are way more in depth, probably cover way more material that are harder, that may even be completely free, but they're not geared to get you a job. If you're just here to learn how to code, great, hang out, have some fun. But this is more than just learning how to code. I have been teaching people how to code for 10 plus years. And across those 10 plus years, I have done things the right way. I have done things the complete wrong way. I've given resources that have helped people get closer to their goals and farther from their goals. But we're at a version of that where I I feel pretty confident that I'm just giving you straight bangers. I said, we only started with bangers today. We're gonna keep that going throughout the entire course. I'm not gonna give you material that won't help you.

I'm not gonna give you material just because I think I should assign it. I'm giving you material that I've literally seen help others get to their end goal of knowing how to code and being confident enough to get a job as a software engineer. I'm cutting out all the fluff. I don't care about being 100% correct. I don't care about teaching the thing that should be, like, no, I'm teaching the thing that's gonna help you get the job. And I'm gonna make it so that it's in a way where you can pick it up, you can absorb it, you can digest it, and you can put it into practice. Hundreds of other places you could go if that's not what you want that are probably better, harder, easier to sit through that, that, but no, what I've seen time and time again is that there's too much crap. It's not distilled and there's no body there to help. That's what we're here for. Cool. All right. Let's go back to little Leon here. We got a lot of stuff to catch up on tonight. Remember, if you are here, I would appreciate you checking in, please. You can do exclamation point check-in.

The check-in is also always in the Discord messages that you get. That link will take you to the tweet. Please go ahead and give it a retweet. Go ahead and give it a like. And that really does help the community grow. It does help other folks find us so that hopefully they don't wind up paying hundreds and like hundreds of dollars, thousands of dollars to learn the same stuff they can learn here for free. Also, this is a practice you wanna get into. Twitter's gonna be a really important tool for us as we continue on. That networking piece that we talked about on Tuesday, Twitter makes that a lot easier. So when you check in, you're using that 100 devs hashtag, you can find each other, you can follow each other. You can start to build that network of folks that are going to help. Jorgen gave me the posture check. All right, there we go. Give me a nice little posture check. Somebody says I have heterochromia.

I do have heterochromia. How would you see it? Maybe when I went to Big Leon? Means one of my eyes is a different color than the other. That's wild. Thanks for paying attention. All right. We're making a lot of changes and there is a lot of y'all. A lot of y'all showed up and a lot of y'all came back. I'm so happy that you're taking this journey with us, but it is definitely a surprise. And so give us a little bit of time to make things a smooth and comfortable experience for everyone. You can see that we made some changes here on Twitch. We're using slow mode. We're making sure that if you joined us recently, so like if you're brand new to the stream, you have to have been here for a few minutes before you can start chatting. You'll notice that you can only really send one message every 30 seconds.

So we're gonna be playing with those. We're gonna dial it in. We're gonna figure out what works, what doesn't work. All right, and we're gonna make some changes, right? We're gonna make some changes to Twitch, and then we're gonna make a lot of changes to Discord. So this weekend, this Saturday, expect it to be wild on Discord. We'll be getting rid of some channels, adding a lot of channels, and making it easier to use threads and to find the things that you wanna find. But we're gonna make it nice and neat and easy for everyone. And so give us a little bit of time Over the weekend myself the mods are working really really hard to make this a wonderful experience for you we're blessed to have so many people that are tuning in to join us on this experience and build this community and Build off the community we built before and so I asked for a little bit of time a little bit of grace We're gonna get there with you now One of the other really exciting things that are coming up and one of the big things that people keep asking me So I wanted to throw it out there at the beginning And that was, hey, Leon, I want like a smaller group. I want to get to know people better. Why can't I have like this type of group or that type of group? We're working on it. Next week, we will have a survey that will go out to all of you. And you'll be able to select what type of group you want to be involved in. They're going to be like study groups, like a smaller microcosm of the 100 devs community where you can get to know each other better, work together.

And so we're going to have it across different time zones, different kind of languages, affinities, groups, so that you can all come together and you're all going to have your own space on the Discord. So you'll have your private text channel, your private voice channel. So just know that that's coming. Hopefully that'll make it easier for you to make friends and to find the community that you deserve here on Twitch and Discord. So just know that that's coming That all start happening next week and then this weekend expect a lot of changes on Twitch and discord Remember we have our office hours on Sunday. So I'm excited to see you all there. Remember office hours are not Required it's just a time for us to come get questions answered We're gonna use a slightly different format where you can upvote the questions. So the only bangers get answered But yeah, so lots of changes to be had because a lot of folks showed up, but we're happy that you're here Now I have one major ask I commit Hours upon hours each day to answering you all on discord like a lot of time I don't know if you've looked in that ask Leon channel But I I just go in waves and I respond to as much as I can now The the the ask I have of you is that you please only put questions into the ask Leon channel on discord. Don't respond to other folks. Don't say even like, thank you. Just put your questions. Lady. Thank you for the hydration. Lady wrath. Thank you.

Just your questions. Don't you don't have to say thank you don't have to do any responses and the reason why It's because I need to be able to bang through each of those questions, right? And be able to answer you as quickly as possible So, please keep keep that channel sacred in a little bit of a way right just your questions just no responses and Make sure that it's like a question that only I could answer right? So if it's like something general about the program, when do I submit something? Where do I do this? there are plenty of other 100 devs channels that you could ask those questions in where you're gonna be able to get the help that you need. Cool. All right, I think folks found that the GIFT itself makes sounds and now they're using them, so I'm just gonna turn down my sound. There we go. Cool. What am I drinking? I'm always drinking tea most likely on stream. Cool, all right, thank you so much for that. I appreciate that, thank you. Now, a big question that came up a lot between now and class was homework.

When's it due? Ah, how do I turn it in, right? Well, don't worry, homework is always due a week after it is assigned. So on Tuesday, you were assigned the two videos by Ali Abdaal, and you were assigned the Coursera course, learning how to learn. All of that is due next Tuesday. Let me say it again. Watching the two videos and the entire, the entire Coursera learning how to learn course, not just the first week, the entire course. Please do not do the essays and do not pay for the certificate, but it's all four weeks It's because it is straight heat. It is the thing that will be the difference maker in your time with us here at 100 Devs. If you can learn all those tools, tips, tricks, and put them into practice each class, you're gonna be a lean, mean, studying machine and I want that for you, so that's why I sign it. Now, the expectation is that you're putting in at least 10 hours a week outside of class time. Say again, expectation, right, is that you're putting in like 10 hours a week outside of class time. So that means those two videos and that course, easy peasy. Right, you should be able to get that done. And notice I'm not giving you like really wild programming assignments yet.

We're not there yet. but we're gonna work our way up to writing code and getting that kind of being the main focus, but it's so much more important that you lay a foundation of learning how to learn before you ramp up in terms of your technical knowledge. Yeah, slow degree said two hours a day, yes. Remember, we don't chunk our time. We take a consistent approach. So many folks, so many folks start that journey to learn how to code and they're on the starting line and they trip and that's it. They had a brief moment, whereas they were crashing into the ground, they were studying and then that was it. Don't burn out, don't trip out the gate, be Beyonce. All right. Oh, before I also move on, is that the homework that is assigned today will be due next Thursday. So you're going to have some extra work that's assigned today. That is due next Thursday. So next week, some of those 10 hours are going to be doing not only the homework due Tuesday, but the homework due Thursday as well. Now, some of you, well, y'all came back, so that means something, right? We lost a few folks, that's expected, right?

We're gonna lose some as people figure out, like, is this experience for me or not? But you came back, so that's great. And for some folks, when they start to hear all of the things that have to get done, right? They start to hear. All right, Leon. I need to watch videos. I need to do homework I need to do all these things you're standing on the tip of this hill All right you're standing on the tip of this hill looking over into the trough of sorrow and you all have a decision to make I can't make that decision for you You all have a decision to make, right? Do you want to become a software engineer? And are you going to commit to the process, what it takes to become a software engineer? I can't make that decision for you. What I can do over this week and next week is present the opportunity to you. I presented it on Tuesday. We're gonna present it again tonight. But what I can tell you is that I have helped hundreds, thousands of people go on this journey. I know where you're gonna get stuck.

I know where you're gonna hit a roadblock and I'm gonna try and make it as a smooth as a process as I possibly can. So if you're standing on top of Udemy Hill and you're looking over and screaming, know that you are in good company. Now, I have a secret to tell you. I have a secret to tell you. I tell you my secret in your arms. I have a secret to tell you. I'm gonna show you something. On my GitHub, GitHub is a place that you can store your code so you can share with other developers. On my GitHub, and don't you all do this. This is for other people. On my GitHub, I've had this for a very long time. If you're learning how to code, I'm happy to build you a custom learning plan that takes into account your strengths and what you want to learn. This has been on my GitHub for a while, but I've also made this promise to lots of folks. At my day job, I run a bootcamp called Resilient Coders, and we have hundreds and hundreds of people that come to learn how to code at Resilient Coders. We used to have open office hours before the pandemic where anyone from the city could stop in, meet us, and I would build them out a custom learning plan.

Now, what I always told these individuals was, hey, I will happily build you out a custom learning plan. I will build out the next couple weeks for you. I will meet with you every week. We'll go through it together. We'll make sure you get unstuck when you get unstuck. But here's what I want you to do first. Here's what I want you to do first. I want you to do the first segment of Free Code Camp. I want you to do the HTML and CSS all the way to that first project. Do it. and when you come back to me, I am going to build you out a full plan, I will be your mentor, I will meet with you week by week by week, okay? I gave that promise to hundreds of people. Let's say the first hundred. Out of the first hundred people I made that promise to, just do this first section of a program, come back to me and we'll work out the rest. Out of that first hundred, how many you think actually came back to me with it done?

Some people already know. How many, out of the first hundred that I gave that promise to, how many came back to me with it done? Now, that's nothing against Free Code Camp. I love Free Code Camp. I think it's a great way to get some practice in. but it speaks to something bigger. It's that a lot of folks come out the gate wanting to learn how to code, but something happens. Something happens. Something happens that stops them from getting to the thing that they wanted. People are saying stress, sadness, burnout. There are so many things that will stop someone from being successful at learning to code, even if they really wanted it. And we talked about some of the solutions to these problems, but I have found a method that increases the success rate of that gambit that I've given the people. So the first thing that helps people when I give them that first assignment to actually get through that trough of sorrow, to get through that initial push of wanting to learn how to code, that very first thing is community. If they don't have community, they don't come back. The students that would come back to our open office hours every week, those were the ones that actually continued on the path to learning how to code.

It was the folks that knew when they sat down in the room, they were around other people. Even if they didn't talk to a single person in that room, just being in that room, knowing that other people were grinding out learning how to code, that energy, that made them more successful. So community was one of the very first things that I saw that unlocked the ability to actually get over that initial hump of learning. That's why all of us being here together is so important. It's why us coming together on Tuesday, Thursdays and Sundays is important. It's why Discord, as wild as it is right now, is so important. There's a reason I don't use a forum. There's a reason why we make it so that it's live. There's a difference when you're with folks that are going through the same experience. There's a difference when there's folks that will help you get unstuck, and there's a difference just when the energy is in the room. And so I am glad that you came back here. I'm glad that you want to go on this journey together and I'm glad that you found us because we're gonna work tirelessly to build a community that supports each and every single one of you on that journey to learn how to code so that that two is a number that I don't ever have to talk about again. Now, we talked about the other things last class that help folks make it to the end. And screw making it to the end, let's make it to next week first. So many folks come out the gate, Should I do this tutorial?

Should I do that tutorial? Ah, I'm freaking out, like there's so much on the line. Let's just chill for a second. Let's get the next week. We got 30 of them, let's get the next week first. Let's get the next week first. You'll have plenty of time to go chase that thing and that thing, let's focus. Maybe for the first time in a while, let's focus on one process, one way of doing things, and let's do it together so that we can make it to next week and the next one and the next one. There are lots of other things that could take up your attention, that could suck up your mental energy for learning, but what I am telling you is I have laid a path that has helped thousands of people learn how to code and hundreds get jobs, and I'm gonna keep saying that you don't need to take my word for it. Whenever I make these claims, I check the weather and it's real oppy outside. I always check the weather when I make these claims. It gets real, real oppy outside. And so what I want you to do is to not take my word for it, but go to the Celebrations channel. Don't spam in the Celebrations channel, but go to Celebrations channel. I pinned 50 folks that got jobs that were celebrating this community.

That were celebrating that this community was the thing that helped them get across the finish line. So don't take my word for it, literally just go to the Celebrations channel, look at the pinned, look at the pinned messages that are in that channel, and I pin 50 of them. You know why there's only 50? You know why there's only 50? There's only 50 because that's all it lets you pin. I could keep going, baby. I could keep going, I could keep going, but that's the limit. That is the limit. That's all they let me do. So that's what I had to do. That's what I had to do. they said they only get 50 that's what I had to do Oh Check all right. That's all I got to say about that. I can pin 50 cuz that's all I could pin Only bangers All right So we talked about community we go get exactly you don't get got we go get around here All right, pin 50 what? So I went into the celebrations channel and I pinned every person that mentioned getting a job and celebrating this channel.

So don't take my word for it. Ignore the ops, go take a look for yourself. All right, now the other things that we talked about that get you off of this hill of damnation, we talked about community being one of the secrets, but it's that idea of managing frustration, right? All of you all are about to get frustrated, like real frustrated. There's no way that you make it through this program without being at a point where you wanna give up. Every single one of you are gonna hit that point. And the difference between folks that make it from here to the end are simply individuals, when they have the privilege of being here, don't give up. Now, the next thing that we talked about was that consistency. Making sure that we're not chunking our time. We learned, we learned, right? We learned that if we chunk our time, if we just study all day Saturday, that that is less effective as a study habit than it is to spread out our learning each day. No chunkers, there you go. And the last thing that I see folks time and time again trip up on is they don't take care of themselves. They don't take care of themselves. They burden themselves with having to juggle 14 different tutorials and feeling like they gotta grind leak code until their eyes fall out.

They're staying up until three o'clock in the morning because they gotta code, code, code. When they would be way better off having stopped six hours ago, had some tea, given a light stretch, and gone to bed. So give me a couple weeks. Give me a month. Give me a month to paint a picture. At the end of the month, if you're like, screw it, Leon, I don't like this, you can go. It was free, you can go. But I think if you give me that month to show you that you can manage that frustration, that you can be consistent, that we can create a space where not only you are learning, but you are taking care of yourself, I think you're gonna find that maybe for a lot of you, it's the first time that a lot of this clicks. Now, part of that consistency, right, part of that consistency is making a plan. You gotta make a plan. You gotta make a plan for how your days are gonna be structured. A lot of folks wake up and go into their day like an accident. You can't do that anymore. If you're committing to becoming a software engineer and learning everything that it takes to get to that job within these 30 weeks, you gotta wake up with a plan. So what I do is every month I plan out my month, every Sunday I plan out my week, and then I plan out every single day.

My Google Calendar, I wish I could show it to you. every single day has exactly what I should be doing and where I should be. If it's not on my calendar, it does not happen. And that's a symptom of some of the issues I deal with day to day, but for me, that's the way that the plan works. So one of the things I want you to do this weekend is to make a plan. What are your days gonna look like? When are you going to study? What works for you, right? And then you must realize that you might have to get some other folks involved, right? A lot of you have partners, or a lot of you have family, or a lot of you have jobs or other responsibilities. You gotta plan that in. You gotta have those conversations with those that you care about saying, hey look I'm committing to these next 30 weeks because I think it's the best move for myself, for you, for our family, for our friends and so I'm gonna need some time. Some of you might actually have to ask for that time because it's not a given. Some of you might have to realize that studying in the morning is way easier than studying at night. And so make a plan.

If you want to be one of the folks that make it to the end, they all had a plan. They didn't go into each day hoping to find the time to study. That time to study was already on their calendar and that calendar was already shared with their partner. Cool. Now, talked about the other kind of little tricks that I've noticed that help folks get through the beginning stages of learning how to code, community is the biggest, managing frustration, being consistent with a plan, being consistent with a plan, taking care of themselves, getting good sleep, hydrating. Every single one of my resilient coders cohorts, every single one, somebody goes to the hospital, Every, every single one we've ever taught. Somebody has gone to the hospital. Every single one. And it's always because their hands start to hurt. Their hands start to hurt. They start to get really serious pain in their forearms and their wrists and their fingers. And that's always because when I said this very important thing, take care of yourself, they don't do it. So, when we take those breaks at the top of the hour, please take that break. Get up from your chair, right? If you're able to.

Walk around if you're able to. Make sure you're letting your eyes focus on something that is not what you'll be focusing on. Let your hands relax, shake them out, give a little bit of a light stretch. I'm going to share some videos next week on the stretches that I do to stay healthy. I'm a big boy, but I still stretch every day. I have a Split keyboard a rollerball mouse. Like I I take this seriously. And so that taking care of yourself is a lot. It's it's Understanding that what you're about to do you might not have ever done before Hitting all those accessory keys makes your fingers move in ways that unless yes Some people play saying they play piano unless you play piano. You've never really stretched your fingers in those way You never stretched your forearms in those ways. It is a serious Toll on your body, so you have to take care of yourself All right, you got to get that sleep in if you want memory consolidation to happen So they've made a plan. They're taking care of themselves. Then here. Here's a cheat code ready for a cheat code Tell someone I I want every single one of you right now to tell someone that you are becoming a, no, fuck that, that you are a software engineer and that you are committed to learning web development over the next 30 weeks. Tell someone.

If you don't have someone to text or call, put it up on Twitter, put it into the void. All right, tell someone I'm serious. I'm gonna stop right here. I'm gonna put the tunes on Go ahead. I'm gonna put a timer up I'll give you a minute You want the Chico this is it that commitment tell someone Go for it. I'll wait You're a software engineer you committed to learning web development tell someone Well, oh shit, I didn't even realize hold up fuck That was not intentional all right got 20 seconds left to tell someone Done, I see a bunch of done's, nice. Alright there we go. All right, let's come back. You told someone, beautiful. That was the first cheat code. You ready for the second cheat code? I gave you the first one. Telling someone does something to our brains where we have to be more successful. Are you ready for the second cheat code? Here's the second one.

Now tell everyone, tell everyone, put it public, go on your Instagram, your Twitter, whatever it is, tell everyone, I'm serious, whatever social media you use the most, where the most people that care about you will see it, but it software engineer on my journey, becoming a full stack web developer, do it, put it in your bio, live that life. I'm going to give you another minute for this. You got, got, you got, got. So I'm telling you, you asked Leon, what are the tricks? What are the secrets? There's there's, there's, I guarantee you at least a thousand of you. They're not gonna do this and in a couple weeks from now when times are getting tough and you're like Leon My brain's just not working. Why can't I sit down and study more? It's cuz you didn't do this right now My students that share publicly what they're doing their aspirations the things that they're working on they succeed I'm gonna be with you got Telling you take the 20 seconds Hold your family good Twitter bios updated wonderful Kimberly's boyfriend looked at them sideways. That's alright. They'll see Kimberly. They're gonna see they're gonna realize That's the secret folks, that's the secret. You put it out there, people now know. And here's the beautiful thing about this. You will be surprised how many folks are in your network that are also software engineers, or that need somebody to build a website to do things.

So the more you put it out there, the more that comes back your way. Now you're a little bit more accountable. You've built up some things here that are in your favor. All right, you've built up some things that were in your favor. You're committing, all right? You're committing to a community, a community that you're gonna support and that in turn is gonna support you. You're committing to knowing how to manage your frustration or at least working on it, Knowing that in the moment when you are frustrated, that's something that you are going to work on. You're committing to consistency and a plan for each one of your days to learn how to code. You're committing to the idea of taking care of yourself, not overextending, taking breaks when you need them or should take them, and getting good sleep. You've told someone, you've told everyone, now you gotta do it. And on the days where you feel like you can't do it, guess what? We're here to help. All right. Last class we saw the amazing, amazing Active Recall. Anybody get a chance to watch the videos yet?

They're amazing. I hope you got a chance to watch them already. If not, you're in for a treat this weekend. Active Recall. The idea, the idea that I can do a fourth of the work and get better results is mind blowing. We know that if you were to just read something once and then actively recall the things that you learned, you are better off than rereading that material four times. four times folks you're better off once and a recall versus four times come on now now here's the real question we had a lovely raid phenomenal raid rav is one of the best people on this earth always in our discord helping everyone but after that raid did you active recall did you actively recall the things that we learned yes i'm looking at you you right there in the back, right there. Did you actively recall? Because if you didn't, you fucked up. If you didn't, you fucked up. So that's all right, all right, all right. All right, that's cool. All right, it was the first one. You didn't listen to me that one. Listen to me now.

When you go through these classes, remember, we're not taking notes. We know that's an inefficient, right? An inefficient study habit, but probably taking questions is a really good idea, right? So taking questions so that at the end of stream, right? At the end of stream, you can go to the raid, have some fun, hang out. I'm always hanging out post-raid. And then when the raid's done, you feel good, you go look through your questions, right? You look through your questions and you actively recall. Now, today, right? Today, right? Today, you're gonna get into more material, right? You're gonna get into more material. And so today, it's really important that you do actually actively recall post-class. You could've got away with it a little bit last class, but no more classes will you be able to get away without actively recalling, okay? And that's because learning to code is a cumulative career.

The things that we learn today are things that you're gonna have to put into action next week, the week after, months from now, years from now. And so we have to flatten our forgetting curve. Right now, if you put in all the work, if you watched all the videos, if you paid attention the whole class, you actively recalled after that class, there is still a good chance that by day eight, you forgot everything. There's a good chance. Even if you did everything right, you came, you took questions, you actively recalled, right? There is still a good chance that in eight days you will have forgotten something. And so we need to flatten our forgetting curves. We need to flatten our forgetting curves and make sure that you're using some sort of spaced repetition tool like Anki. Anki will stop this forgetfulness from happening. And so please, when you make your plans this weekend And you're setting up your days for studying and for class. Don't forget to include Yankee Well, I Can't use it unless you show me Leon No, that's not how this course is gonna work. You are all gonna get Superpowers Your ability to Google will be next level Your ability to figure things out will be next level. And then when you really have given it the good old bootcamp try, right, when you've given it the good old bootcamp try, you've researched, you've put in the work and you can't figure it out, then you come to Discord, we'll be there to help you. All right, but you gotta take control, all right? You got to be the type of person that solves the problems that comes their way Because that's what a software engineer does we solve Problems that have not been solved before and we get paid good money to do it So you need to start practicing that Okay, you got to start practicing that every day Now I'm not gonna skip the good stuff or the big stuff.

We're always gonna have classes on it we're going to have a class on Anki. But please, before you say, oh, what about this? What about that? Give it a try. Get into that mode of researching, exploring, trying to figure out on your own before you come to the community to get unstuck. It's freeing, right? It's being freeing. Right? Freeing. There's some people saying like start already leave go you don't have to be here but close your eyes like take out your headphones and like walk away this is called spaced repetition if you were here last class you know what we're doing every single class is going to be like this, right? Every single class is gonna be like this, where we spend a good 30 minutes plus reviewing. Because folks here are starting from the beginning. You can go do some other tutorial, you can go do some other stuff if you want. You don't have to be here. Skedaddle, leave, sayonara, I don't need you here.

Because every single class, guess what? But we're going to start off by actively recalling, getting our space repetition in. And in the beginning, it's going to be a third of class. As we get further into the course, guess what? We don't need to repeat as much, right? You don't have to repeat as much. If you don't want to be here, don't be here. I don't know why you're here. Go! Oh, I'm looking cute today, that's what it is. That's all it is, folks. I'm looking cute today. It's my raw animal magnetism that's pulling them in. They're staying here for that. I understand, I get it.

You came here for the code. You met me and now you're in love and you just can't go away, so you're frustrated. You don't know how to handle the feelings that you have right now. That's okay. We're here for you, but you can just close your eyes. That's all you got to do. All righty, now to continue our spaced repetition, I got him, got him to continue our spaced repetition. We got him. To continue our space repetition, we are going to talk about what is the Internet. We're going to review the basics. What the heck does a front end web developer do? What that is a back end web developer do? of why are we software engineers, but also full-stack web developers? So we're gonna review that, but before we review it, it's top of the hour. This is the top of the hour.

We must stay healthy, must be Beyonce. We must take our break. So let me go ahead and slide up the five-minute timer here. We're gonna take our full five minutes. Cool i'll put some tunes on please if you are able get up stretch move around Go to the bathroom Say hello to your loved ones I don't know Play with your your rubik's cube I whatever whatever gets you going during the break to get you away from this screen moving around Let your eyes focus on something else and we'll be back in four minutes and 38 seconds Oh, alright folks, please take that break. I am going to take the break myself and I will see you soon The people want Bob you'll get Bob You You you how are you liking the Eagles chances this weekend I don't really follow football I know I'm a bad Philadelphian I don't really follow sports honestly other than like rugby basically my grandfather calls me and keeps me up the date. I'm from California. Is the Philly cheesesteak that good? It's the best of the sandwiches by far. Phil's on 24th street, best cheesesteak spot in Philly. Mods, if If anybody says something other than Philz and 24th street, give him a light ban. I'm the hell eat a real flea cheesesteak. Do you fancy pony ties? There was, um, a meta a couple of years ago that was like the rapid dash and like the pony Tom meta. I forgot there was a meta deck that was really good.

My Google calendar is much more busy now. Let's go. All right, folks, come on back. Come on back. You can actually see if you do exclamation point Pokemon in chat, there's like the list of Pokemon cards that are available for channel points. and I send them anywhere in the world. Send out a bunch, you can see what's on the list there. All right folks, come on back, hope you had a good break. Yeah, hold on, let me see if I can grab the list here. Yeah, so we can see here we got some good ones And these values are way off now, like way off in terms of value. I have no idea what these cards are worth right now, but we got some, some good cards here. We got like the full, the full legendary sets, which are pretty cool. Um, I used to run a Typhlosion deck that was really like a big deal in one of the older metas. Um, so I got a bunch of like the good Typhlosions. Yeah.

So there you go. Some other fun things you can do at channel points. If you would like, I remember channel points. You just get by being here. So the more you're in stream, the more channel points you get. And when we do raids, if you do the raid, you also get channel points. Favorite Pokemon is Bulbasaur. All right, let's get back into it, folks. We've got a lot of stuff to get to tonight. And so I want to make sure we cover it all. Let's come on back. Come back from your stretches, grabbing your water and let's go through this All right, so last class we talked about what the internet is, so chat, what is the internet? A wire, it's wires, series of cables, how I get milk, series of tubes, wires across Yeah, it starts off with a wire, right? And we can actually look at these transatlantic internet cables and see them. So we got these like big beefy cables that lay across the ocean.

And we can see that there's a bunch of them all across like connecting all of the countries together. These were like originally telegraph cables, like the first people to do that. And then like eventually they became fiber cables and other wonderful stuff now. And so there are a lot of these, right? There's a lot that we know of, I'm sure, like high-frequency trading firms and other governmental agencies have their own as well, but there's a lot of these cables that connect around the world. In fact, there was this trading firm that ran a cable from New York to Chicago just to get a better connection, which is pretty cool. And so we have these wires that we can send data across. And the idea of the internet is that we can have this system that relies on top of this protocol called HTTP. And it's a system where we can send requests and get responses. And it's a system where we can make requests from our client-side devices and get a response from our server. What type of code runs on our client-side devices that we know of so far? What type of code do we know that runs on our client-side devices? HTML, CSS, JavaScript, yep. These are all client side, like all code that runs on the client side. And so someone that specializes in that HTML, CSS, and JavaScript, the HTML that we're gonna be writing today, somebody that specializes in that HTML, that CSS, that JavaScript, what would we call them?

Like what would be their job title? Yep, they'd be a front end web developer, right? They're a web developer developing stuff for the web But if they focus just on the client side They focus just on the stuff that runs on our phones or tablets or desktops in the browser We would call them a front-end web developer now Those devices make requests to our servers and our servers do a lot of stuff The primary thing that a server does is it listens for those requests and there's some code that's running on it that knows how to to respond to those requests. Sometimes it hears a request from our client side device and it needs to talk to a database or it needs to process a credit card or it needs to just respond with some things, right? So the code that runs on the server, if you focus just on that, what type of developer would you be? Someone that just focus on stuff that runs on the server. Yeah, you'd be a backend web developer And then just the last question here, if you worked on both the server side and the client side, both the front end and the back end, you consider yourself a what? A full stack web developer, and that's exactly what we are to be here. We are full stack with developers. Now, if you're someone that can write code, conduct yourself as a professional, knows the tools and systems behind the code that you're writing, maybe knows a little bit more about the math and the efficiency of the code you're writing, what would you call yourself? You would call yourself a software engineer, exactly. So after today, we will all be software engineers that focus on full-stack web development, right? You just told your friends, that's what we're doing here. We're trying to become full-stack web developers, right? We're already software engineers, but we're gonna focus on full-stack web development.

We could go write code for robots. We could go write code for refrigerators. We're focusing on a skill called full-stack web development. And the reason why we're focused on full-stack web development is solely because of job demand. Right now there is an overwhelming amount of demand for web developers, specifically folks that know the front end and the back end. And the beautiful thing is you only need to learn one language, and that's JavaScript, because JavaScript works both on the front end and the server side via something called Node, right? So there's this beautiful window open right now where we don't have to go and learn Ruby and Rails. We don't have to learn Python. We can learn JavaScript and write code both on the client side and the server side. It's a good time to be alive, folks. All right. Now, last class I said separation of concerns was the golden rule, the most important thing that I was going to teach you, right? Why is this rule so important? Why do we want our HTML separate from our CSS? our CSS separate from our JavaScript, why is that important?

Yeah, for organization, exactly. When we come back to our code a month later, we wanna be able to go to a place and figure something out, right? We wanna know where to go. If we're working with other developers, we wanna be able to tell them where to go and look to find things. So if I said to you, hey, I wanna make my pizza ordering app, right? I want to be able to drag the ingredients onto the pizza. Shout out Domino's, right? I want to drag those ingredients onto the pizza. What technology am I using? Yeah, I'll be using JavaScript. And if Domino's comes out with a new ingredient that they're now making available to all their pizzas, and they have to update the content on that website, what technology would we use to list that new ingredient? Yeah, B-H-T-M-L, nice. And if that new ingredient is blue, right? If it's blue, I don't think I can use green. If I use green, I think it'll get chroma keyed.

Yeah, that's green. It's just chroma keyed out because I have the green screen behind me. So if it was blue or green, did blue get chroma keyed? No, it's interesting. If it was blue or green, what would we use? Yeah, CSS, cool. So if Domino's adds a new ingredient, that content, that's HTML. If that content is going to be blue or green, that's CSS. And then if they want to make it so they can drag it onto the pizza, that's all JavaScript. We learned some stuff last class. Look at us. Look at us, chat. Hey, proud of you. Keep it going. and keep it up.

All right, we also learned the beginnings of HTML. Now, we briefly mentioned that HTML and CSS are not really programming languages. They're what we call markup languages. Alan Turing, modern grandfather of computer science had this completeness test that said, if you give a language like an operation and you get a response back, then you might be dealing with like a programming language. So if I was to give HTML two plus two, I'm never getting four back. If I was to give CSS five plus five, I'm never getting 10 back. But if I was to give JavaScript, I don't know, three plus three, it's gonna give me six back all day long, right? And so that makes HTML and CSS, not full programming languages, but rather markup languages. But they're all languages the same. And just like any language, there's gonna be spelling and grammar rules that that language has to abide by. Like when you're writing Spanish, you have the enneas, right? Like when you're learning other languages, you might have special characters, right? That you could use. Each language has its own spelling, grammar, punctuation that makes it up. When we're talking about markup languages and programming languages, we call that syntax, right?

So each language will have its own syntax. Thank you, Mac, thank you for the hydration. Cheers to you. Each language has its own syntax. All right, now, the beautiful thing about HTML is that we have an opening tag and a closing tag. Every bit of content that you have on the page must be wrapped in tags. And sometimes those tags, we give them a little bit of like a superpower and we call those superpowers an attribute value pair. For today and next week, we won't really have to worry about too many of these attribute value pairs, they're kind of like two that we're gonna run into a lot. When we have links, that link has to go somewhere. So there'll be a special attribute value pair for that. And then when we get the images, they're gonna need like a source that shows you what image to show. So outside of those, we won't really see too many. And today we're gonna cover the basic tags that you need to be successful for building pretty much any website. We're gonna learn about 15 tags today. They're probably around like 30 that I use day to day and there are a bunch more There is a wonderful website.

However called the MDN the Mozilla Developers Network. It's by the people that make Firefox well, they have this documentation for HTML CSS and JavaScript It's actually linked as part of your homework on discord But anything that you would ever want to know about HTML is on this site and it's beautiful, it's perfect, it's always good. And so you're gonna typically keep the MDN open while you're working on this stuff, okay? Jasmine, don't worry, we're gonna talk more about those attribute value pairs. Give me a chance to show you one live. Cool. Would W3 school suffice? No, get out of here. Run. Absolutely not. Absolutely not. So what happened with W3Schools is, remember we talked about that worldwide web consortium, the W3C that Sir Tim Berners-Lee created? Well, W3Schools just kind of like took that name, right, and built out like their site. And when it first started, it was horrendous. Like it was really bad.

And they always had wrong stuff on there. They didn't update it. And so it was just, it was just bad all around. And it was the bane of my existence because they had really good SEO. It always showed up, but it just led my students astray. They over the past few years have like modernized it and made it better, but they don't get a pass. They fucked up, they ruined the web for a while, so it's over. We're not making up. They're done. So no. Get out of here. MDN is where it's at. We also took a quick, we took a quick peek at this first kind of throw at HTML. I didn't want you to type any of this stuff. I just wanted to show you some HTML and we were kind of running out of time.

So I went a little bit quicker Day, I was exactly raised Add them to add them to the ops list We we added some HTML here you could see that all of my content right all of my content is is wrapped in tags. There's not any text that is not wrapped in tags. You can see that everything is wrapped in these lovely tags, right? This is VS Code, yep, VS Code. Now, we have here this last paragraph, and this last paragraph is appropriately wrapped in that paragraph tag. Remember, each tag that we choose has a rhyme and reason, and like the purpose behind why we would pick that tag. Anybody remember what that's called? Like the purpose or the rhyme and reason behind why we chose that tag. The specific word for that. Yes, semantics. The semantic meaning, yes. So this was a big block of text. So semantically, it is a paragraph. So I wrapped it in a paragraph tag. Beautiful.

Now, if we were to read this paragraph, however, let me read it. If you would like real-time answers to your questions, please join our Discord here. What the heck does here sound like? What should that be? A link. Yeah, it should be a link. So in HTML, we have a tag that handles links, okay? We have a tag that handles links. And so that tag is an anchor tag. So I'm gonna go ahead, I'm gonna open up my a tag, and then I'm gonna go around the text where I want it to close. And then notice how the closing tag, simply the only differentiation is that it has a lovely forward slash. So the open tag and the closing tag are the same, except for that forward slash. However, remember, we talked about those superpowers, right? We talked about how sometimes we need our tags to do a little bit more, right? We need our tags to just be able to do something a little bit extra.

And so our anchor tags, which are for our links, has an attribute value pair that we can use. I don't like this, going to a new line. As an attribute value pair that we can use, right, that is called an href. So the href equals, and then inside these quotes, I can put the link. So our Discord link is https://leonnoelle.com slash Discord, right? That's the actual link to our Discord. Now, the text, right? The text that will show up in the browser, and don't worry about following along right now, I'm just showing you, you shouldn't be typing anything, right, you're here to absorb right now, right? What you'll notice is that this text here will still show up, however, when I click on it, it'll go to this link. That's the power of having an attribute called an href. Our anchor tags or our link tags can have that href that'll take the user somewhere. Now, something interesting about this page. Right now, this page is not saved. Can anyone in chat tell me how I know I have not saved my work? What does href stand for?

it stands for hypertext reference. Remember how we said that the protocol that the internet uses, that HTTP, that hypertext transfer protocol? Well, this href is a hypertext reference. It's old school, it's how the internet works. Yeah, this dot at the top, right? This dot at the top tells me that my, this dot at the top tells me that my file has not been saved, right? And so as soon as I save, you can see that that dot goes away. Right? As soon as that dot goes away, I can't even repeat that, but it's hilarious. as soon as we save, that dot goes away and we are able to now go ahead and open this, go ahead and open this in our browser. So I already have it open and if I come over here and I refresh, we'll notice that this here, right, this here, All right, this here is underlined and like purple or blue Why the heck is this like underlined and purple? Why the heck is The the h1 big bold black and beautiful much like myself. Why is that all there? What happened Yeah, that's automatically coming from the browser. Remember how we said the browser wars back in the day on Tuesday?

Every browser's kind of fighting to be the best. Well, there are still some things that browsers do by default. And if you are a front end web developer, this is one of the things you have to think about when you start a project. There are many ways to handle this problem of having not written CSS. We didn't write any CSS. We didn't write any CSS. So this shouldn't be happening. And so it's one of the things that we have to start remembering. I like to call these money problems. Cause they're problems, but that's what makes us the money. Cause we know how to fix these. And as we go on, I'll show you how to fix these. Right now, however, when we write HTML, do I care how it looks? Let me say it one more time. When I write HTML, do I care how it looks?

No, I don't. I'll be able to fix all of that, right? I'll be able to fix all of that when I get to CSS. All right, when I get to CSS, I can go ahead and fix anything that looks the way I don't want it to look, right? And so what I want you to make sure that you're doing, right, is make sure that when you're writing HTML, right, when you're writing HTML, do not care what it looks like. We'll get there with CSS. Cool. All right, so we looked at that about page, and what you're gonna notice is there are some rules when it comes to HTML, right? And one of the things you might be saying is, Leon, who cares? Who cares if I use the semantically appropriate tag? Like, why does that matter, right? Why does it matter if I use the semantically appropriate tag? Well, there are actually three big reasons why you should care about writing semantically appropriate HTML, like picking the right tags and using them correctly. One of the first reasons is that if you do not use the appropriate tags and the appropriate attribute value pairs, your content might just not render. So for our general users, if you're not using the regular tags, right?

If you're not using the regular tags, you might not give your users a good experience. Things might break, they might not be in the right spot. And so using the appropriately semantic tags means that your general users are gonna have good content and displayed the way that you wanted it to be shown. Now, the second set of users we wanna be concerned about are folks that may be using accessibility devices, folks that may be consuming the web in a way that the general public might not. So we're talking about things like screen readers, things that make it easier for certain folks to use and consume the web. If you are not using the appropriate semantic HTML tags, things like screen readers have a more difficult time moving through the content of your page, right? And then the last users that we wanna be concerned with are web crawlers. We wanna make sure that when Google tries and comes and figures out what our site is about so that it can list it in the search engines, right? We call this SEO, search engine optimization. If we do not use the appropriate semantically structured HTML tags, Google will not rank your content. So, I like to say we have a moral reason and a greedy reason. Morally, I hope every person in this community cares about accessibility and uses the correct and appropriate HTML tags so that folks have a better experience on the web. But then there are also greedy reasons. First, the greedy reason is that you want your website to rank in Google, and if you're not using the right tags, it won't show up in Google. And then the other greedy reason is that individuals using accessibility devices is a large portion of the internet.

You have a lot of your customers, future consumers of your content that are using accessibility devices, and if you don't use the right tags, they won't be able to enjoy it. So, pick which one you care about, but remember, remember, you are all newly knighted developers of the web. It is your job to go out there and do good. And with this information, that is your mandate. Cool. Now, we'll cover more accessibility stuff as it goes on. For today, we're not gonna go too deep into it, but we're gonna have a full class on accessibility. All right, now I would like to take a look at some tags. Remember, we said every HTML tag has a specific reason, right, that it would be used. And so we wanna look at some tags and see, all right, in what situations would I use that tag? What is the semantic reasoning behind that tag? When we choose tags to write in our HTML, it comes down to two things. It comes down to the semantic importance behind that tag, and it comes down to the importance behind that content. Cool. If folks are having some trouble with the closed captioning, we'll have to figure that out.

When we take a break, I'll double check. Alrighty. Now, this right here was a, This was a YouTube rabbit hole for me, right? This right here, we're gonna look at some tags and I don't mean this type of tag. I mean like the HTML tags. And so this was a pretty deep YouTube hole. This was like a weekend or two of just consuming content. This is competitive tag. Imagine if the sport of tag had a full community, an audience and brought in all the best free runners and parkour specialists to play tag. Yes, the Ocho, exactly. It's amazing. I watched every single episode I could find on YouTube. So tonight I'm not talking about competitive tag. I'm talking about HTML tag. Got the store army in here.

I see y'all. All right. So here are the first set of tags that we're gonna look at. All right, here's the first set of tags we're gonna look at. We're gonna look at heading elements. These are called heading elements. You've seen heading elements all the time. Heading elements are the elements on a page that describe all the content that comes after it. So if you've ever been to like say a news website, you're typically gonna have like a heading that describes the article that comes after it, right? And so when we're looking at our content, we might have multiple headings throughout the page. And there are six kinds of headings. You can have an H1, a 2, a 3, a 4, a 5, or a 6. Typically, the most important content on your page, the thing that describes the page the best or whatever else is to come, that heading gets the H1. All right, so if that content is the most important, how many H1s do you think we should have? Yeah, you should have one H1.

It is the most important thing on the page, so you should have one. Now, I know you're watching. There is just somebody that literally, when I said there should only be one H1, this is what they did. They went, Leon, I don't know. I don't know about that. There is this one. There's this there's this edge case. There's there's edge case technically with HTML five semantically. Each section could have its own each one like that. That's that's changed now. Like that's different. They could have contained themselves. They're like they're literally yelling at the screen right now. They just they just can't contain it. That they're all there.

They had to hit up stack overflow yet today. Like it just boiled out of them. They like it just fell out their mouth. They couldn't they couldn't hold themselves back Yes, the code weenies. I don't care about them It's not the time to nitpick We're all here trying to get the general picture There will always be edge cases Right, there will always be caveats to the things that we're learning but when it's day one of HTML on your journey to become a software engineer, you don't need to give a fuck about any of that. Release yourself. Feel the weight come off your shoulders to not write perfect code. We love, we love, we love to write Vomity code here. All right, we love to write Vomity code. I'll bring this little logo up whenever I'm writing vomit code, because I just don't care. Remember, this isn't a coding tutorial. This is a jobs program. I'm trying to get you to have a wide breadth of knowledge that you can use to build out a series of amazing projects to get clients and ultimately get the job. There are gonna be some things that are chunky, vomiting that don't look good, but I don't give a crap because I'd rather you learn than become a code weenie. And if you're not okay with that, that's fine.

Some people have to be perfect. They have to be right. But that's an awful lot of energy to expend when you still don't really know that much about HTML. Let's get the job done. Let's get our sites built. Right? And then we can worry about being perfect. I really like to hearken this to learning a language. Some people will sit there and study the conjugations of the word to be for five hours instead of having a conversation with someone. You're way better off having a conversation than you are sitting there conjugating in the dark room by yourself. Don't be that person. Get the wide breadth of knowledge, be able to build, be able to bring things into existence, to make things exist that did not exist. By the end of this class, you will be able to build basic websites. It doesn't matter if you got the semantic update to HTML5 that sections can include H1s. Cool?

All right. Cool. So, we can also have H2s, 3s, 4s, 5s, and 6s. And the way we know when to move from a two to a three is based on the importance. Like how important is that heading as opposed to another? So, sometimes you'll have twos, then you'll have threes because that content is less important than the other. Cool. Now we have some other tags that we are going to learn tonight and some that we've already kind of seen. We have paragraphs, which are for large blocks of text. We have spans, which are for short pieces of text. So you have a big block of text, right? That would be a paragraph. If you have a small piece of text, that would be a span. Like that's what you're gonna wrap it in as a span. And then we have the pre-tag, which is an abomination.

It should never be used. It should be yeeted into oblivion. And let's just move on. Like, Leon, what's a pre-tag? So here's what a pre-tag does. A pre-tag, when you're writing out your HTML, keeps all the whitespace, the enters, the carriage returns, and all that stuff, right? All that stuff, right? All that stuff gets put on the site. So all that spacing that positioning that movement that gets put onto your site if you use a pre tag Why do you think I don't like pre tags? Why do you think I don't like pre tags That's CSS. There's nothing you can ever convince me that that's not CSS and That leads us to talk about nerd fights. So at this point you're gonna start to realize that some of my opinions are opinions and And here's the most beautiful thing about learning, specifically front-end or even any programming, is that there's often not a 100% correct way of doing things, right? For some folks, that's very freeing, and for some folks, that's very frustrating. The idea that there's never gonna be like a 100% correct way of doing something. What you're gonna have is a bunch of nerds arguing over what is the correct thing, right?

And so I bring this story up whenever I teach this class. No one ever believes me this is a true story, but I promise you it's a true story. I have lost a friend over the BR tag. So I was at a tech meetup with my friend. We were a few beers deep, eating some good food as you'd normally do at tech meetups. And got to talking somehow about the BR tag. I said, the BR tag introduces a space that's an abomination, that's clearly style. The HR tech puts a line that's clearly a border, right? And so to me, right, that's style. There's nothing you're gonna ever say to convince me that introducing spacing, pushing stuff away is not something that should be handled with CSS. Now, was I right and they wrong? Are they wrong and I right? No. We're both nerds at the end of the day, yes. Now, the beautiful thing is that really good engineers, like really good entry-level engineers, like the folks that are here watching the stream, the best entry-level engineers that I've worked with do something very special.

They form strong opinions, but they hold them weakly. Let me say that one more time. They form strong opinions, but they hold them weakly. What that means as as you are writing your HTML tonight and as you are writing your HTML this weekend You are gonna be tasked to pick the appropriate Semantic HTML tag and that will be your decision You have to come up with reasons why you chose that tag once you are on a team or working with other developers if they present a a better way of doing something, then you let go of that assumption that you've made, that decision that you made when they present the better argument. But you don't wanna go into your code just like you're weak by accident. You wanna be making good, strong semantic decisions and thinking behind the moves that you make. Cool. Now, I'll say it, I said it last class and I'm gonna say it this one because there's a lot more people here friend You're watching this. Maybe the Twitter went viral. I don't know. I Apologize, I shouldn't have raised my voice in the way that I did around the br tag I would like to be friends again. So if you ever do happen to see this send me a message let's go grab a beer, you know, that's where this started and and maybe we can talk about all the new stuff that's coming out. All right. We got some other tags. We got some other tags.

If you see an mtag, when you wrap content in an mtag, it makes that content, all right, it makes that content look italicized. and when you wrap content in a strong tag, it makes that content bolded. If you use an M or a strong tag, did you violate separations of concerns? Put yes or no in chat for me, please. If you used an M or strong tag, did you violate separation of concerns? Yes or no? You're both right. All of you are right. If you wrote yes or no, you're right. Let me tell you why you're right. So if you used an M tag and a strong tag to make it italicized or make it bold, you fucked up. Right? We do not choose HTML tags based on how they are going to look. The beautiful thing, however, is that M or strong tags do something else. They're accessibility tags.

What they do is they provide emphasis to words that screen readers can pick up on. All right. So when you go to a website and there could be a banner at the top that's flashing red saying like warning like we've just been hacked or you go to a website and it's like flashing like yellow. There's a sale. There's a sale. There's a sale If you have the means to see the page, you would be able to see that there is a sale going on All right, you'd be able to see that there is a sale going on But if you had a visual impairment, you might not be able to see that sale. So how do we convey to our users emphasis? Well, that's where these tags come in the hand. So if you use these tags If you use these tags to provide emphasis to folks that might have an accessibility concern, then you're doing the right thing. But if you chose these tags based on how they look, that violates separation of concerns. Now, the beautiful thing is it just so happens that these M and strong tags make them look that way, but we can always overwrite how it looks with what. We can always overwrite how it looks with what? Exactly. There we go, chat. There we go, pop off, CSS.

Cool. Keep pushing here. We saw this one last class, an ordered list. We saw an unordered list last class. Well, the sibling to the unordered list is the ordered list. An ordered list expects that every single thing in that list is coming in a specific order. I always think a great candidate for ordered lists are recipes, right? They are recipes because if I pour the brownie mix onto the pan, put it in the oven for 30 minutes, pull out the pan and sprinkle water on it, I'm not gonna have good brownies. They're just not gonna be good brownies, right? There's a specific order to the brownies. And so recipes, Smith said directions exactly. These are things that make sense to be in an ordered list as opposed to an unordered list where it's still a list of stuff but there's no specific order to it. So think of things like a grocery list. There doesn't have to be a specific order to your grocery list. Actually, I found out there are some monsters among us.

Last time I said that a grocery list doesn't have to be in a specific order I got I got some people that reached out and they're like Leon I Make sure that my That my grocery list right is in the order in which I Will move through the supermarket Right, like they put the things on their grocery list, but it's like aisle by aisle Does that, who does that? So in that case, maybe that'd be an ordered list, but that's some next level efficiency. Yeah, they're playing 5D chess out there. Oh, thank you for the hydration. Well, thank you for the hydration. Oh, that's hilarious. All right. Containing elements. a lot of what we're gonna do on the web is like containing other content. And the beautiful thing with HTML5 is that we got a lot of new containing elements. Okay, we got a lot of new containing elements. Before HTML5, we kind of used divs everywhere. And so if you're doing a tutorial, right? If you're doing a tutorial and it's not a react tutorial and there are divs everywhere It's not a good tutorial right we we have it's been years we've progressed there are a lot better containing elements Okay, there are a lot better containing elements. Containing elements that got rich semantic meaning.

Now it doesn't mean that you can't use divs, right? Let me make that clear. It's not that you can't use divs. It's just that we got all of these rich, right? We've got these rich semantic tags that we can use in its stead, right? And so sections help us group like content. So if you had some content that was all about liver frosted treats What the heck would be a liver frosted treat? It just doesn't make sense but if you're grouping like content and that content is on a Dog food website then it makes a little bit more sense So we got these sections that are probably gonna be one of the bigger tags that you use. It's a it's a container It's gonna help us group all of our light content together. We also got articles which are containing elements that help us contain things that are meant to be shared. Think of like a newspaper article. I could clip that newspaper article out and hand it to you, and you would be able to read it and understand what the heck's going on. You don't really need other context for it. It might be helpful to know where it originated from, but you don't need it. So for content that's meant to be shared, think blog posts, articles, we got a new containing element called the article tag.

We also got a new tag called an aside. An aside stands for ancillary or extra content according to the MDN. It was originally created because back when the standard came out, sidebars were all the rage. You remember sidebars? So the aside was there. The aside was there to help with sidebars. Now, the semantic meaning behind an aside is for extra or ancillary content. What do you think might be a good candidate for asides? What do you think is a good candidate for asides? Yeah, ads, exactly, ads. Ads are all really good candidates for asides. Beautiful. We also got headers and footers. Headers are for content at the beginning of the document. Helps us group our content at the beginning of a document.

Footer is for grouping content at the end of a document. Notice I didn't say top or bottom because that gets too close to CSS. And there are some really interesting things like articles can actually have their own headers and footers. So you're like, Leon, what the heck does this all mean? Like, what do you mean all these tags? Let's take a look at some websites and let's see if we can guess what the tag would be. I need to like have like a millionaire sound that's like, let's see if we can guess the tag. All right, so I really love Khan Academy and I love Khan Academy's website. If I was looking at Khan Academy's website, what tag do we think this would be? What could this be? Yeah, an H1. Now, here's my question to you. Why would that content be the H1? More important question. Oh, oh, it's so good to see.

So some folks I saw some folks have slipped in here. Some folks said it because it's the biggest Do we ever choose HTML tags based on how big or how styled they're going to be? Does it matter where it's located doesn't matter anything about style no The reason why that would be the h1 is because it is the most important thing on the page. That's what they want you to come here and remember, right? For every student, every classroom, real results. If you think Khan Academy, that's what they want you to remember, right? It is the most important thing. Now, if I wanted to, I can make it real small and put it all the way like in the bottom corner. I can just like yeet it over here, right? That would still work, right? I could use CSS to make it small and dump it down into the bottom, right? But if it's the most important thing, I'm probably never going to do that. But remember, style positioning has no bearing on the HTML tags that we use. We got three hydrates in a row. Burberry, Newby, Clued.

Thank you for the hydration. Cheers to you. And thank you everyone for the subs tonight. It's been pretty wild. I appreciate you all that all goes directly into the emergency fund at RC. So, thank you All right How about this big block of text here? What would that be? That was weird Yeah, it's a paragraph big block of text full sentence at least it's a paragraph cool We also notice something here. Are you ready for this? Look what happens when my mouse moves in you see that Hey, turn up, yeah, oh, oh, you can go fast too, hold up. What's handling that, that behavior, that interaction? What would that be? Yeah, I looked at chat, it's already flooded with JavaScript, I love it. Yeah, that'd be JavaScript. So there's definitely some JavaScript afoot here.

That's beautiful. All right, how about we come down here? What about why Khan Academy? Well, actually, let's start here. What would this big block be? It's kind of like gray. I don't know if you can see it. But what would that what would that block be? But what tag would we use for that block Yep, that's a section that'd be a section and how about why Khan Academy works What would that be Definitely an h2. Yep. I think it's definitely an h2 How about we come down here, we kind of have like a, I was almost perfect too. We have another box here. Right, we have another box here. What would that box be? Another box, yep.

Another section, yep. Another section, nice. How about Khan Academy boost student learning? What would that be? Oh, this is like the first big point of contention of the evening. Some people are saying two, some people are saying three. I would argue that that's another H2. I think to me, to me, right, why Khan Academy works and Khan Academy boosts student learning, to me that is equally important, right? To me, that's equally important. And so for me, those will both be H2s, right? When we get down here, right, I'm finally able to truly differentiate my classroom. That's when it gets a little bit less. That to me, H3, right? That would be an H3 to me. But up here, these are both the same, H2s and H2s, right?

That would be mine. We got paragraphs all over the place. Boom, boom, boom. Boom how about here? How about district? Guys I hate to the end. How about districts? What could that be? Span I think that's a span. Yeah, someone said how do you decide? Importance that's a phenomenal question. That's a really good question. How do you decide? importance. It depends on the team that you are on.

Sometimes this will be up to you. Specifically also if like you're a front-end web developer you might be making those decisions by yourself. Sometimes you're working with a designer that gives you the design and the designer will say here's the hierarchy of the site. This should be this, should be that, right? Sometimes you're working with a UX professional that would get their hands dirty with that stuff, right? sometimes you're working with marketing and somebody from marketing will come down in their nice suit and say, actually, this should be an H2, this should be an H1 because of SEO. So the cool thing about being a front-end web developer is you often actually work with a lot of different people, designers, user experience professionals, marketing, other folks on your team, right? And so it does really depend on who you're working with, how big your team is, who makes those decisions, but you all need to start making those decisions for yourself. You have to, at the end of the day, say from what I know about the semantics of the tags I have at my disposal, this makes the most sense. And we're going to see a lot of these over and over again. This is your first time for a lot of you seeing these words, hearing the words coming out of my mouth, semantics, tags. That's that's that's scary shit. It sounds like a lot, but don't worry. We're going to see it over and over again. We will get our spaced repetition in.

We're going to write some real code together and we're going to review it. And then we're next week. We're going to do it again. We got that. We're going to do it again. We will always get our repetition in. So if the very first time you hear a word, it doesn't make sense. That's your test. That's your frustration test. Do you get frustrated and turn off the stream? Or do you stick it out? Do you ask questions? Do you go to Discord after and be like, I had no idea what Leon meant by span. Right? That's it.

This is the moment. Right? Mama spaghetti. Right? Let's do... So I think that's pretty interesting, right? Like just looking at this site, we saw that the site was mainly sections, headings, and paragraphs. Like we could probably do 70% of this site with just those three tags. Like probably 70% of this site, sections, headings, and paragraphs. Like we could probably get there. Throw in a few spans, maybe an article, like an anchor tag and we did it, right? Like we got it. And so yes, these things are hard. Yes, these things are new, but it's really not that many, right? You're gonna learn about 15 today, 30 over the next week or two.

And then you'll be able to lay, you'll be able to build any site that you want in terms of content with the stuff that we learned today and next week. So hang with me. We're at the top of the hour. So you know that that means a break. When we come back, you officially become a software engineer. When we come back from this break, your hands get on the keyboard, you're gonna write some actual real code, you're gonna earn that badge, you're gonna earn the messages that you said to all your friends and that you put out into the world. So please, if you're able, get up, move around, hydrate, let your eyes focus on something else. We will be back together in five minutes. Alright folks, get up, hydrate, move around, I'll see you all soon. Don't worry about the text editor yet. Take your break. We'll come back. I'm not going to lead you astray. You got this. Go take your break.

You You What split keyboard do I use? I use the Kinesis Advantage 2. Do I play Magic? I did when I was younger. I haven't played it in a long time. Excuse me. Sorry. I got a HyperX keyboard with lights that lights up. Yeah, I have the Logitech Uh g like the 915 that's pretty pretty I use that for gaming What boom arm do I use I use the road pro whatever it is when everybody uses I want a vertical mouse. I really like my rollerball mouse It's really helpful. Yeah I I get really really bad wrist pain like severe like have to go to the doctors is like my bones have rubbed together. It's pretty bad. So that plus split keyboard is like what keeps the pain away. And I really take my breaks. I stretch out top of every hour.

Even when you're not here, I take my breaks. Super important. All right, folks, come on back. Come on back. Hope you had a good break. Hope you're able to stretch a little bit. Grab some water. So I prefer one OS over another. I use Mac OS, Windows, and GNU Linux every day. All three of them. So I don't really have a preference. I like doing my business on Mac OS. I like doing my tinkering on GNU Linux and I enjoy gaming on Windows. So they all have their tools to me. I'm a big fan of realizing that a lot of technology stuff is really just about having tools on your tool belt.

A lot of people get really stressed out in the beginning. They're like, Leon, should I learn Angular? Should I learn React? Should I learn Flim Flop or Flap Flam or Zaboomafoo? Right? And my answer is no, you learn the thing you need to learn when the job requires you to learn it. Right? And you gotta realize that they're all just different tools on your tool belt of success. Right? That's so cheesy, but it is true. Sometimes I'm surprised what comes out of my mouth, but yeah, they're just all different tools. They have their, their rhymes and their reasons that when you should use them, when you shouldn't use them. And so don't worry about having to learn everything. Get good at a core set of stuff and the skills that you learn will be transferable to whatever else you need to pick up. All right, folks, come on back.

All right, we're in the home stretch. We're going to start writing some real code tonight. You're gonna have some lab time to do it. I'm just gonna sit here look pretty you're gonna write some code Let's get into it All right, so we looked at some websites and We learned some tags But it is Interesting to note that all the tags we started with are not still here So back in the day, I had a Dragon Ball Z Pokemon Harry Potter fan site It was lit, had like Pikachu running across the top. It like flashed. A lot of those tags that we used are now we called deprecated. Why do you think things like blinking tags and marquee tags, why do you think we no longer use those tags? They gone. Yeah, that's all CSS or somehow even JavaScript too. Somebody said it looks dumb. Yeah, it was CSS, right? It was CSS or JavaScript. Like we've now separated our concerns. Exactly. It violates separation of concerns.

We've separated our concerns so that we can't have HTML that does things like CSS or HTML that does things like JavaScript. So once we separated those concerns, we got rid of those tags and they're now called deprecated. So a lot of the tags that you might've used back in the day, They might have been repurposed to something that's a little bit more semantically correct, or they might just be gone. So like B and I tags that made stuff bold and italicized. Obviously, like those can't be used anymore. You have a tag to make something bold and something that makes italicized that clearly violates separation of concerns. So they like tweak those tags to do other things. I is really commonly used for things like called Font Awesome and other fun stuff that we'll get into later. But a lot of stuff we worried about are used back in the day are gone. Now, I have a fun question I always like to ask that's related to deprecated elements. There's a survey that went out one year to a bunch of software engineers. And the question was, where did you get your start as a software engineer? Now, if you know the answer to this, don't don't spam it. But where did where do you think based on the survey of like thousands of engineers? Where do you think most engineers got their start as a software engineer?

Victoria, thank you for the hydration. Cheers to you. A lot of folks are saying MySpace. Believe it or not, MySpace was the number two place. The number one place folks got their start as a software engineer according to that survey was Neopets, Neopets. Let me say it one more time. The number one place that these software engineers got their start with Neopets. Back in the day on Neopets, you could have like your pet pages and like store pages and you could write HTML and like write inline CSS and all these like what would be now horrible practices that violate separation of concerns. That's where most engineers got their start. So I want you to keep that in the back of your brain. The day some software engineer tries to tell you that you're not a software engineer, that tries to gatekeep you from this industry, you could tell them to go fuck themselves because they probably got their start on fucking Neopets. Get out, go home, you cut, it's over. You got your start on neopets get the hell out of here Get out All righty It's time for a lab the first true test in frustration so today in in the materials that you needed for this class. If you are new around these parts, welcome. We are doing a free 30 week software engineer bootcamp where you can go from zero technical skill to employable.

If you would like the materials, the materials are shared on our Discord. Exclamation point, Discord. We have a follow along materials channel that has the zip for today. You all need that zip file now. Now, what you're going to do is unzip that file. Each operating system has a different way to unzip files. On macOS, you can just double click on it. On most Windows operating systems, you can typically right click and unzip or extract here. GNU Linux has the ability to unzip. So you're gonna need to figure out the way to unzip your file. If for some reason you cannot figure out how to unzip, that is okay. You're gonna go to Discord after class and you're gonna get help on how to unzip your files. Okay? Thank you. Thank you Indifferent.

You can use other tools to unzip, but the idea is that you need to unzip that file because inside of that file are the files that we're gonna use today. So I'm gonna go ahead and show you what's in those files. So from today, you can see that I have this lovely class two material zip. I double clicked on that zip because I'm using Mac OS and inside that file that I open or that file that I opened, it wound up being a folder that had two things in it. Brownies HTML and BBC image. So you unzip and you get both of those files. Now, what you're going to do is open this Brownies HTML file in a text editor. In a text editor. Now the text editor that I am using is called VS Code. You can simply Google VS Code and you will find the ability to download that text editor. If for some reason you cannot download a text editor to your computer, maybe it's a work computer or something like that, there are plenty of websites that you can use that you can just type directly in your browser. So you can use a website like Glitch. Glitch is completely free to use, and you can go ahead and start writing your code directly in the browser. I like Glitch over things like CodePen, just because it's a little bit easier to use to do more advanced stuff, and I use Repl.it a lot as well. Also again, completely free.

right inside of here, you can just click create, and then you can say that you want HTML, CSS, and JavaScript, and then you can create the REPL. So if for some reason you cannot download VS Code, right, you cannot download VS Code, you can start with REPLit or Glitch, right? All right, cool. Now, if for some reason you have trouble downloading VS Code, you don't know how to open it, the computer basics are a little bit hard there, you're gonna have to come to Discord. We're gonna help you out there, all right? We're gonna help you out there. Cool. Some folks are saying, like, how do I open it in Repli? Well, there's a couple of ways you can open files in here, but one thing that you'll know is if you click on this Brownies HTML, this Brownies HTML is already an HTML file. So one of the interesting things you can do is you can just open Brownies HTML in the browser and you'll see all the text and content right there. You can copy and paste to your heart's content, right? Does VS Code work with a Chromebook? There is a newer version of VS Code that would. You can actually use VS Code in the browser now if you would like, but otherwise you're gonna have to download it. Okay?

Now, like I said, you do not need to download VS Code tonight. You can use Glitch, you can use Repl.it directly in your browser, whatever browser you're watching me right now, right? Whatever your browser you're watching me on right now, you can just use that with Glitch or Repl.it. Where are the materials? The materials are in the follow along materials channel. Before every single class, I will always put materials in there. Can you use Atom? Of course. The text editor is up to you, however you wish, whatever one you wish to use, you can. I will be using VS Code. I recommend that you use VS Code for the duration, at least the beginning of the program. So that way, all this stuff I do is similar. Right? Cool. All right, so what I want to do is I want to open this brownie file inside of my text editor.

There are lots of places that I can, there are lots of ways I can open that file in my text editor, right? If I already have my text editor open, I can simply do like file open and open that file. a lot of times you might have the VS code like in your doc. And so what you could do is you could drag this file to VS code and it'll open, right? So I just dragged that file right to VS code and it opened it up for me, right? So there are many ways you can open the file in VS code, file open, dragging the file, right? It's all open to you, okay? Now, if you're panicking, you don't know how to unzip files, you're having trouble opening it in a text editor, right? You're gonna have to come to Discord and get that help. Remember, this is your first exercise in frustration. Cool. So I decided to just drag the file. Remember, I unzipped the folder and then I drag that file into VS Code, right? Now, my VS Code is pretty simplified right now, right? It's pretty simplified.

I really highly recommend early on not really adding stuff to VS Code. Don't use any of the tools or tips or tricks that improve your workflow, right? There are gonna be stuff that makes your code look prettier. There are gonna be stuff that automatically saves files for you. There's gonna be stuff that will make your life as a developer much, much easier. Don't use those at the beginning. Now, the reason why I tell you not to add all those things or use those tools in the beginning is because there is nothing more embarrassing All right, then finally getting that technical interview and they use a platform that does not have all your magic plugins and you struggle to indent, you struggle to save, you struggle to do the very, very basics. And I've seen it happen, seen it happen multiple times. So please get used to doing stuff manually without all those gadgets until you feel comfortable doing it on your own. Once you feel comfortable, you can zip zap through it, then add all that other stuff to make your life easier. Specifically prettier, like you wanna get good at indenting and stuff like that just for a week or two, just to make sure you know it on your own, right? And then you will bring all that stuff back if you want. All right, so once again, I'm using VS Code here. You do not need to use VS Code. I unzip the folder, I drug out the file, and I drag the file to my VS Code.

You could also have done file open. I am using VS Code, but you could have also used Glitch or any of the other kind of browser-based editors for right now. All right. Like I said, if you're stuck on this step, you're going to have to come to Discord. Cool. Now, here we have a bunch of content. All of this content must be wrapped in what? All of this content must be wrapped in what? Tags, exactly. Every bit of content on this page must be wrapped in tags. So I come here and I see deep dish brownies. Chat, what do you think deep dish brownies should be? What should deep dish brownies be? Yeah, that's definitely our H1. So I'm gonna open my H1 and I'm gonna close my H1.

Remember, our H1, the closing and the opening tags are very similar except for that closing slash. All right, right now, is my page saved? Nope, it's not saved. How can you tell? You can tell because the dot up here, right, is white and circle and not the X, so I have to save this. So I did Command S to save. You can do file save, But getting used to your shortcuts is really helpful. So on on Mac, it's command s on windows It can be ctrl s right but get used to saving the biggest The biggest issue that a lot of folks have early on that comes to me Leon. Why? right, why Why is it not working Why, why did these changes not like, why can't I see the changes in the browser? And it's almost always because you didn't save. So get used to saving manually, right? Alrighty. So we have a lot of content here. We have a lot of content here.

I want you to go through this content and give your best honest attempt at semantically marking up this content. Everything must be wrapped in tags. You can use the previous slides, right? You can use the previous slides to get a hint of tags, but you can also use the MDN, the Mozilla Developers Network, if you need help looking up tags. All right. Gonna let you try it. If you run across something odd, if your stuff were on auto, if it's not, if your tech center is doing something you don't want it to do, start with a Google. People are throwing in chat how to fix certain things. Let's start with a Google. Get used to it, right? And then if you still need help with something, Discord. Alrighty. I'm gonna put a 10 minute timer up on the clock here. Just ignore me. For these 10 minutes, just ignore me.

I'm gonna keep talking. I'm gonna keep talking. I'm gonna be answering people's questions in chat, but the expectation is that for these 10 minutes, you are writing code. So go ahead, get your fingers moving, get to typing, get to wrapping each of this content in tags, and then we're gonna do it all together, right? So if you get stuck, you don't know how to do it, You're gonna have the ability to go through it. Remember, there's two different sets of slides. There are the live slides, right, that only I control, and then there are the second set of slides that you have full control over. So if there's the live link, you can't move those slides around, only I can. The second link wasn't working, but it should be working now. If you opened it in the beginning, you gotta give it a hard refresh. Let's take a look at them. I'm gonna bring up my regular screen, Just in case I pull up something, one sec. Just checking on the slides for folks that are having trouble. Hmm, I see the error now, hold on, I'm working on it. Working on the slides, one second.

Yep. Public. What I'll also do is I'll just download the slides for y'all, one second. I think slides.com is down. I think it's the actual place I use to host the slides. Checking it out, still working on it. Can you use the MDN or hopefully it took questions you can actively recall. Yeah, I think it might've been, I think we might've crashed it because they were working but it won't even let me export the you need HTTPS to make the link. Don't worry about it. I think we broke it. After class, I will put the PDF into Discord. Give your best shot. This is a good chance for actively recalling. Use the MDN if you need it. Zip file is on Discord.

If you're lost, that's okay. Make sure you come back after the five minutes. We're gonna go through it together. this is your first chance at trying to write some code. Folks are putting, if you don't like the auto-closing tags, people are putting that in chat. So that initial question you have, like how do you stop auto-closing tags? That's a Googleable question. That's something you definitely should use, but there's other people throwing the pattern in chat for you if you want it. Preferences, search HTML, uncheck auto-close. Beans, Google it, I love it. Is there something I can do on your mobile? Yeah, you can just use Glitch or Repl.it that work in the browser. Nugget Realm, that's on your side. There is Celled. The zip is in the follow along materials channel.

All the code will always be in that channel. Hey, how you doing? Thank you for the hydration. Cheers to you. How do I revert the file? You can do control Z or command Z to go back a step. Yep, the zip file should not have the brownies image, not to figure that out. We have an HTML and CSS help channel. Hey Marie, what are you confused about? Can I have a section one tag? No, the only ones that have numbers are the heading elements. Where's the brownies image? I didn't give you one. You have to find one. Nope, no brownie image for me.

Do you know Cobol? Hell no. You need your dual monitors back. Yeah, they do you help Yep, just wrapping all the content and tags exactly Do I play League no, I would just be the end of me Who Ryan with the first stretch that I've seen I can't give you too much of the stretching, it's the only fan's goal. I could do this but not in 10 minutes. Yeah, that that's totally fine Done hey if you're done throw it done in there. That's wild job Wow who came in that's funny there must be like a like a like a a pace You got the brownie that's good use the MDN could have helped there Crunch time you get it in and get it done you finish up All righty folks, stop, come, regroup with us, no matter if you had trouble opening the file or you finished, we took our 10 minutes, we're going to stop, we're going to go over it together. All right. So come on back. Come on back. Yeah, I know you're the person. You're still typing. Stop typing. Come on back. First of all, congrats.

You're working with code. even if you struggled to open the file, you were still working with a code file, you're a software engineer. You wrote a line of code, you're a software engineer. So let's take a second. I know that can be very frustrating. Some folks are still stuck, that's okay. But you are now all officially software engineers. You're struggling, you're in the muck with the code. Over the next 30 weeks, you're gonna add the tools and the knowledge behind that. But right now carry yourself high matter if you got stuck. You didn't know what you were doing. It didn't make sense. That's okay We'll get there together You're a software engineer Congrats All right, take a look at this together Remember the VODs are always available right after we're done streaming so you can always go back take a look at it All right. We got some stuff here This first one is a tricky one. We haven't even seen images.

So if you looked at this and you saw images, right? Remember, you can also change your quality settings. Since we're partnered, you can change your quality settings to make it more or less blurry. Like if it's blurry, you probably have the quality settings too low. No? All right. Now look, if you didn't know how to do, We didn't cover the image. So if you didn't know how to do the image, what could you have done? You don't know how to use an image tag, what could you have done? Oh, y'all, y'all next level, y'all saying Google, y'all saying MDN, but you know what else you could have done? Skipped it. Could have skipped it, went on to the next thing. don't sit there and bang your head against the keyboard trying to do something that you don't know how to do. You gave it a quick Google, you looked on the MDN, you didn't see it, you skip it, and then you come back to it when you have more time. So for all of y'all that just stopped here, let that be a lesson.

You had all this other stuff to figure out, you could've skipped it, you could've came back, You could have figured it out later. You could have Googled it, had MDN'd it. You could have gotten help on Discord, right? But you have to think about. And the reason why I like to bring this up is because in less than six weeks, you will all be getting paid clients. That'll be your task is to get a paid client. And let's say the client project is due in 10 minutes. You wanna tell the client, hey, I got the image working. It's the best image you've ever seen. It's a delicious image of brownie, but nothing else works. Or do you want to say to your client, all the content is here, everything looks good. We're just still tweaking this image, right? Think about that. Think about that. Under promise over deliver, exactly.

Cool. All right. So if I didn't know how the image worked, I could go to the MDN. I could do something as very simple as kind of like Google MDN brownie. Oh, I'm so I'm a big boy MDN image. That was sad. Clip it clip it. Alright, there you go. I could did MDN image and then boom here you go. Everything I need to know about the image tag. Oh, there's this source property. Oh, there's this alt property. Source is required. Alt does this other stuff for accessibility. All this stuff I would ever need to know with very clear examples.

The HTML is here for us. We can see the output. How wonderful. I love the MDN. You should use the MDN. And you saw, I didn't use any big brain tricks here. I just typed in MDN brownie that didn't work. So I typed in MDN image and here you go, your new best friend, the MDN shows you exactly how to do images, beautiful. All right, so let's go back and let's take a look at some more code here and say, all right, well, based on this, I know I need to open my tag and I need to close it. But something interesting about images is that they're one of the very few tags that don't need an open and a close tag. The reason why images don't need an open and a close tag is because it's already content. For all these other things, you're wrapping around content, but the image is already content. So it is self-closing. You don't need a closing tag. It already is the content instead of wrapping around the content.

Cool. Now we saw on the MDN that we needed a source. So SRC equals and the brownies.jpg. So that could be my source. And the interesting thing about the source though, is that I didn't give you a brownies image. So we have to go get a brownies image. We could have a local image, which means that the image is on our computer, or we could go hot link somebody else's image. That's what we're gonna do. We're gonna go and Google brownies. Let's get some images here. Oh, it's gonna be a problem. Hmm. Yeah, that's what I'm talking about. All right, right click, copy image address. All right, copy image address.

He's taking his time with it. And then in the source, I'm gonna paste that image address. Right? All right, there you go. I just went to the image, I right-clicked, copy image address, and I posted it into my source. So now, when I open this Brownies HTML, remember, I could drag the HTML file to the browser. You can right-click open if you want to. There's so many ways you can get this file open in the browser. For me, let's see, I already have it open here. So what I'll do is I will bring up my browser and I'm gonna drag the file into my browser. And there we go. It opened it up. All right. That looks delicious. So what I did here is I gave it a source and I grabbed an image source just from a random image on the internet.

You can go to pretty much any image you want on the internet and right click on it and copy image address. That's gonna give you the image address, right? You copy that, you paste it into your source and you're good to go. This is called hot linking. This is not a file on my computer. I am using this file from BuzzFeed. This could cause me some problems down the line if I kept it this way. What could happen if I kept the source this way? You're thinking big brain, you're saying like copyright. No, I don't own this image. I don't own where it's stored. I don't own the server that it's sitting on so BuzzFeed could change this link Right could change this link and then my image would break right or worse if you were a little Leon back in the day and Somebody hot linked your image Well, they own that server. They could change this to whatever the heck they wanted I could I could think it would be brownies and I come in the next day and it's a picture of rubber ducks Or if you were back on the forums in my day, it wasn't rubber ducks. I'll tell you that much. All right All right, so they control it All right, they control it and so they could change it to whatever they want So there's a chance that it could break in the future So next week we'll download our images and I'll show you how to use the images that are on like your side like your local or your server, right?

But it could break. And since it could break, we wanna make sure that we also have a what? If we know that this might break in the future, what do we wanna also give it? Yeah, we wanna give it an alt. So alt is something that we also saw in the MDN, and we can just say brownies, right? So now, if for some reason, this image was to break and not show up, the user would still see brownies. Like they would still know that that should have been a brownie photo. The other wonderful thing is that for accessibility, if someone has a visual impairment and maybe they're using a screen reader, they can know what that image is by having the alt text read to them. So somebody with a visual impairment wouldn't maybe not be able to see the brownies, but they would be able to hear that it was a brownie. And then Google's kind of moved on from this a little bit, but it does help SEO too. Like Google might have an easier time figuring out that these are brownies Also, can you can you test messing with the link sure So let's get rid of the b I'm going to save i'm going to go back to my my site here So boom It broke But look you see next to the broken however, I can make this bigger Next to the broken image is the word brownies So the alt tag is there, right? I broke that link. And so you can still see the alt tag. So even though the image is broken, I know that that was brownies. Cool.

All right, so we got our image tag going. And next to this image tag, we see this thing here that looks weird. It's like a different color. And that definitely wasn't in the browser. is like if I go back, I don't see the word hint. Like if I make this a little bit bigger, there's no word hint here, right? So that's called a comment. A comment is a way of like leaving a note for yourself or a note for another developer. It doesn't actually make its way into the browser. It's just in the file for you to see it. It's called a comment. In HTML, the comments are made by doing our arrows and then our bangs. So this we call it exclamation point bangs. So you'll do your left carrot or your left arrow We're going to call it your left carrot bang Hyphen hyphen and on the end hyphen hyphen right carrot, right anything you put in between This and this is now a comment. It won't show up in the browser There's also typically shortcuts to do this, right?

In VS code and a lot of text editors, if you do command and then forward slash, it automatically turns it into a comment for you. That was command forward slash control forward slash beans. Thank you for the gifted subs, right? So there are ways to do these comments that'll be important. All right. If the image is large, we can fix it with CSS. Exactly. Let me go and put the B back here. Cool. So next I have this recipe by Biz McMahon. What were you feeling for the tag here? What tag should we use for Biz here? What tag should we use for Biz? H2, H1. So here's a question for you.

Have you ever read who made the recipe? Like, is that important to you when you go to a recipe website? Never. I don't think I've ever landed on a recipe and gone, oh, that's biz, I'm dipping out of here. Fuck that guy, like, no. I've never even cared before, right? So to me, there's no way that that's an H2. That's so not important that it has to be like, I don't know, like an H4 at least, right? Like, like just not anything that's important, right? Now I am jumping here. There is some accessibility things that we have to get to where we go from ones to twos to threes and we should lay out our content more accessibly. But for now let's just focus on making good semantic decisions here, okay? So for me, that's just not important. So it's at least a four. Now, here's the thing.

You might be a Rachel Ray household, right? You might only cook Rachel Ray recipes. If it's not Rachel Ray, you ain't cooking it. So to you, that might be an H2. It might be really important to you. And so that's where these semantic decisions have to be made. That's why there's never gonna be one exact way to do this. If I give this site to 10 different front end developers, I might get 10 different versions of the same code back Right now some people are saying why is it not a span? To me it's a heading it describes what comes after everything that comes after that line Right everything that comes after that line is the recipe by biz Right. So to me, it's a heading. It's not just a short piece of text. It definitely does describe What comes after a span would just be a short piece of text So to me it's a heading, it does describe what comes after. Cool. How about related recipes? What do we think that is?

To me that's an H2. It's really important to me that if you don't like my deep dish brownie recipe, you go to my other recipes. Right? So if you don't like the deep dish brownie recipes, you go to my other recipes. So H2 is really important for me here. Cool. So I'm gonna go ahead and make this an H2, right? Cool. And then here, I have a what? What are all of these? Yes, that's a list of the related recipes. So this is a list of all the related recipes, but I'm gonna do something a little funky here. Stay with me for a second. So it's definitely a list of recipes. So that's a UL.

It's not in any specific order. So it's not an ordered list. It's definitely an unordered list of recipes, but all of them are, yes, people are thinking, they're all links to those recipes. So it's a list of links. So I am gonna use some developer magic here. You can, as you're clicking, hold down Command or Control or Alt, depending on what type of operating system you're using. Shell, hey, thank you for all the gifted subs. 20 gifted subs, wow, I appreciate that. Shell, I appreciate you, thanks for stopping by. That's wild, thank you so much. So you can hold down command, control, right? Or alt depending on your operating system. And then wherever you click, you got to keep it held down. For me, it's command. Wherever you click, you get the REPL, right?

You get the REPL, right? And so now I can do whatever I want. I can tab them in. I can do my LI. I can start my anchor tag. I can give them all an href just as a placeholder. We're going to put an OctoThorp in there. I can jump to the end. For me, it's command right arrow. It might be control right arrow if you want to jump to the end. And then I can go ahead and close my anchor tags. I can go ahead and close my allies, right? So how do I do that again? I got you. Depending on what operating system, for me it's command.

So I would just hold down command and wherever I click while holding down command, and I get that REPL. For you, it might be Control or it might be Alt. It does depend on your operating system. Cool. Once you're doing that, you'll notice that you have this little flashing REPL. That flashing REPL means that you can now type on each one of those lines. Yep, Alt for Windows and GNU Linux, yep. There you go. Cool. And so that's how it would do it. but I knew that this was a list of links. And so each one of these links is wrapped in an LI and then it's wrapped in an anchor tag. And right now I don't actually have the links to the chewiest brownies. I don't have the link to the can't you tell, I don't have the link to the bodacious brownies, but I just put an octothorpe in here. Some people might call that the pound sign or if you're hip a hashtag, but in programming we call them octothorpes.

Yeah, or sharp, exactly, an octothorpe. Cool. Let's look down here. How about prep time? What are we feeling for prep time, chat? I'm feeling like a an h2 here. I think that's really important. I think it's like the only thing I look at I look at like is it Rachel Ray and is it like gonna take me a long time? So that to me is an h2 Like I said, you gotta make your own semantic decisions make your own semantic decisions If you don't think that's an h2, what the heck am I doing? If you don't think that's an h2, that's okay Okay, make your own semantic decisions How about 60 minutes? What is that? It's a short piece of text. So if it's a short piece of text, that's a span for me. Yep, that's a span for me. And for me, short piece of text.

Beautiful. All right, how about servings? Some people really care about the servings. That could also be like an H2 again, maybe an H3. I don't know. The servings matter. I'm a big boy. I'm gonna eat the whole thing anyway. Yeah. H2, H3, I don't know. Maybe H3, just so we can see something new. Just so we can see something new. Is that the most demanding? I'm not sure. And probably a span again, right?

Span with the nine. There we go. Casey always check for servings. That's good to hear. I don't think I'm gonna eat the whole thing. Anyway, don't matter All right Why is it a span instead of a paragraph because it's a short piece of text if it was like a long piece of Text like a sentence or more then we're talking paragraph but short piece of text. That's a span Cool. All right. Ingredients. What do we think that is? How do we feel about ingredients? I think that's an H2 as well. H2 as well, yeah. If you're like Leon, I have no idea what the hell you're doing right now. That's okay.

That's all right. Guess what? You have homework that's gonna walk you through all of these things. You literally have homework that's gonna span you a couple hours of you sitting down with this material again. So if it doesn't make sense in this moment, that's okay. This is your first time seeing a lot of this stuff. This is your first time seeing a lot of this stuff. Give yourself some grace. It'll come. All right. I don't like how this is like all indented already. Ooh. So the thing is here, eventually you're gonna start to notice some indentation. Like, Leon, why did you indent here? We have something called parent-child relationships, right?

We have parent-child relationships where these allies, since they're inside of the UL, that parent-child relationship, you put a little respect on the name and you give it a little bit of an indentation. Don't worry about that for right now, but if you're like, Leon, why are you indenting? That's because we have some parent-child relations that we got to deal with. Cool. All right. So we have the ingredients. What is this here? What do we think this is? We have the ingredients. What is this? Yeah, it's a list. So again, is this an unordered list or an ordered list? Yeah, unordered, right? It doesn't matter if I put the eggs before the vanilla. It's not like when I use them, it's just the things I need to grab from the grocery store.

So unordered list, I'm gonna put all of this stuff inside of my list, and then I'm gonna use my developer magic again. Now, the cool thing is you don't have to click, right? You don't have to click, look at this. I'm not clicking, I'm just pressing the down arrow. So on Mac, I can do Command Alt, and then just press the down arrow, and I get the REPL going all the way down my list, right? On your operating system, it might be different. There's gonna be something different for Windows or something for GNU and Linux, but for me, yeah, there you go. Control, Alt, down arrow on Windows, people are saying. Yep. Yep. Yep. There you go. Beautiful. Beautiful. Beautiful.

We already have, we got Codeweenies. See, that's not a REPL. You see the code weenie? Oh boy, they found us, they got us. All right, cool, there we go. Now. Now we can go ahead and do our LI. We can jump to the end. There we go, beautiful. So now each of our ingredients are wrapped in an in an ally. Beautiful. Cool. Almost at the top of the hour. We're gonna finish this out. We'll do our raid and we'll end it there.

So let's finish this up together. Maybe another two minutes or so to finish this up and then we'll do our raid. Alrighty. Direction, what would we say that would be? Ah, yes, our lovely H2 again. Directions are very important. Let's go ahead and do our H2 here. Once again, we're gonna have the ingredients that we have to wrap in our lovely UL. There we go. I'm gonna, we could just break it down here. I'm just gonna copy everything, I'm gonna paste it in. Boom. Alrighty, now, is this a UL? Ah, y'all paying attention, look at you. Y'all paying attention.

No, that's not a UL, it's an OL, right? OL, right, OL. Anybody ever watch the Mistborn trilogy? Or sorry, read the Mistborn trilogy? Ren always tells his sister that I will betray you. and then one day Ren betrays, right? And so you gotta be on your tippy toes around here, right? Some things won't always be correct. You gotta be like, Leon, nah, that's not a UL, that's an OL, right? I will betray you. Call it out when you see it. Beautiful, we got the OL. Now we're gonna go ahead and click for our LIs. This one's gonna be a little bit weird because when I jump to the end, I won't actually be at the end for each of these lines. I'll worry about that for now.

We can clean that up, though. Boop. I'm going to clean this up. So the LIs are actually at the end of each thing. My screen is all magnified in, so it's a little different on here. All right. There we go. Beautiful. You betrayed us last time. He said dominoes was good. How to hear delicious. S tier. You can press N key on control like N key on Windows. Mac I do command and my arrows to move around. Cool.

So we got our Ordered lists. How about tip? What do you think the tip should be Yeah, I'm feeling like an h3 here yeah, like do you do you ever read the tips though who reads the tips Do you ever read the the drivel that comes before the recipe My my great-grandfather tripped on a penny and That penny we then wished in a fountain and we've got a genie and that genie is the one that delivered this recipe And so I hope you enjoy this recipe coming to your to your household right now You know why they do that You know why they put all that stuff in there When I was doing this for the last class I found out that the reason why they do all that extra text is Because it makes it so that it's harder to have like a copyright claim like recipes are completely not copyrightable but that like stuff they spill out it has like a slightly better chance of being copyrighted a bowl and then The other thing too is SEO, right? Cool The tip are you saying h3 h4? I could see it. I think I think for me I don't think I read but it seems like a lot of you do read them So I'll listen to y'all and I'll say h3 beautiful and then Big piece of text definitely a sentence or more. What should that be? You Paragraph beautiful And close my paragraph nice nutritional info you already know what that's gonna be Yep Mm-hmm. Come on now nice little span here All right, nobody really get out of here you ain't looking at the calories yeah, I'm a big boy I don't doubt that don't play around here. No nutritional info in this house. Get out of here H6 if there was a if there was an h8 I'll be using it but there isn't that's how that's how you know H6 is the is the lowest That's how you know h6 is the lowest because if there was something lower I would have used it right then in there That's how you know. All right. Let's finish this up. We got another string here. What do we got here, what are we doing?

Another paragraph, okay. Okay. Another paragraph. And then inside this paragraph, we have another what? Yeah, we've got another anchor tag. And the cool thing is that this anchor tag already has the what here. Yeah, I already have the href. Beautiful. Cool. Let's go ahead and close that up, close up that caret. And then make sure that we close up our anchor tag. Beautiful. and find this recipe. I guess we should move here into the href. There we go.

Beautiful. All right. We did it. Chat, we did it. Look at us. Now, do I care what this looks like in the browser? Nope. Right, because we're choosing HTML. We don't choose HTML based on how it looks All right, we don't choose HTML based on how it looks We'll get to that with CSS All right, we'll get that with CSS now There are some more things that we didn't get to tonight because we're going a little bit over time I want to stop here when we come back on Tuesday. We're gonna see some more tags. We're gonna see some some forms We're gonna see The actual structure of HTML. We're gonna see like the header and the footer. We're gonna see These other pieces that we might have heard a little bit of, but we're gonna put that all together on Tuesday. Between now and Tuesday, y'all got a lot of homework. Like a lot of homework.

You got two videos by Ali Abdaal to watch. You got a whole learning how to learn course on Coursera to get through. You have a whole learning about HTML through learn.sheyhow, right? So you have all this stuff that you gotta get through between now and next week. If you want this code, this code will be shared with you on discord after class So anytime I write code, I will always just upload it on discord in the follow along materials channel After class, so I think the reason why the slides aren't working right now It's because I think we have so many people using them. I have to like upgrade my payment tier on the slides So I'll figure that out as soon as we get we're done going live. I'll share all the code with you on discord We have a lot of reading to get through tonight. But before you leave, we're gonna do a raid. Remember, we like to hang around here. We like to go spread positivity to other folks. And so we're gonna go ahead and do that right now. We're gonna go ahead and set up a raid. And remember, when you raid, you get more channel points. Those channel points actually help you do a lot of stuff. And so we're gonna go ahead and start a lovely raid here.

And we're gonna go over to someone that we've raided in the past. They're learning too, and so that could be fun. So let's go ahead and go over to them. Remember, spread love, positivity, give them some follows if you're not already following. Cool. All right, starting the raid now. It'll take about 10 seconds, and I'll see you over there. I'll be hanging out over there. Please, if you got stuck tonight, if things didn't make sense, if it was hard, If you feel like you need some extra help, that's what Discord is for. Please come to Discord. We will help you. You will get unstuck. You'll figure out how to open things. You'll figure out how to type. But please, be consistent.

Set up a plan, right? How are you gonna study each day? How are you gonna do the things that you wanna do? Make sure this weekend, you don't go into the weekend like an accident. Go into the weekend with a study plan. And I will see you all on Sunday for office hours. I hope you had a wonderful second class. I will see you all on Sunday for office hours. Remember, they're optional. You don't have to be there, but I'll be answering tons of questions. If you had questions about the stuff we covered today, that's what office hours is for. And then on Tuesday, we're back at it. We're going to dive deeper into HTML. We're going to make it make sense. We're going to have more fun with it.

So good luck with your homework. Good luck with the raid. I'll see you all over there now. Peace, everyone.

End of Transcript