Class 8, 100 Devs Transcripts<title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <link rel="stylesheet" href="assets/css/main.css" /> </head> <body class="is-preload"> <div id="wrapper"> <div id="main"> <div class="inner"> <header id="header"> <a href="../index.html" class="logo"><strong>100 Devs Transcripts</strong> by Blind Wolf</a> <ul class="icons"> <li><a href="https://leonnoel.com/100devs/"><span class="label">Visit 100 Devs Homepage</span></a></li> <li><a href="https://github.com/tre-scinta"><span class="label">Visit Blind Wolf's 'GitHub</span></a></li> </header>  <section> <header class="major"> <h2>Class 8: Write Bad CSS </h2> </header> <div class="posts"> <article> <h3>Introduction</h3> <p>You you You Boom. Good morning. Good afternoon. Good evening. No matter where you're coming from. Hope you all are doing well. Welcome everybody. What's going on? What's going on? Hey, what's going What's going on? Welcome back. We got a good night tonight. I like this one. We're doing something special tonight. We're writing some really bad code.</p> <p>I mean bad. Like I'm gonna get Twitter DMs bad, you know? That's what we're talking about. So I'm glad you're here. Welcome, get in here. We got a lot of fun stuff to do. We're gonna be doing a lot of review. We're gonna be talking a little bit more about networking. We're gonna give you some real examples that you can start using. We're gonna talk a little bit more about the concerns folks have around networking. And then we're gonna move into writing some actual layouts, like coding some actual layouts. We're gonna go back and look at TechCrunch, Khan Academy, BBC. We're actually gonna do them this time. We now have the power, right? We have the power to build not only HTML, But the CSS and get the layouts going make it look like the actual photos are close So excited you're here You do have the power exactly The question for today Hey, hey vegan days.</p> <p>Thank you for the 10 gifted subs. I appreciate that. Thank you for being here That's wild. Thank you so much That's really nice of you. I appreciate it. Yeah, y'all been popping off. Hold on. Let me see where we're at right now. The primers, the primers, the folks throwing around Jeff Bezos's bucks have been popping off. We're at 2,377 subs right now. That's wild. I never my wildest dreams. So appreciate every single one of y'all. I can't wait until we can get that going right to RC. It's going to go right into our emergency fund for our next cohort.</p> <p>I know it's going to help so many folks that struggle, that need to be able to see psychiatrists, doctors, but they can't afford it. That's what that's going towards. I appreciate y'all. Thank Thank you. Indifferent, hey, thank you for the good subs. Alrighty, folks. We have a question of the day. We have a question of the day. And so I would love to see your answer to the question of the day. Today's question of the day is, would you rather have to say all of your sentences backwards or have to communicate only through charades for a week? I've seen a lot of charades, way more charades than I would have thought. Charades, all right. You all went all in on charades, that's wild. I would be trying, I don't know. So I think last time I would have said sentences backwards because I find that to be like a fun exercise, but me and my family, we, we got pretty good at charades.</p> <p>So here's, here's the secret to charades is somebody that nobody's ever told you about the secret to charades is you got to play it with the folks you're going to play with, like by yourselves, you got to come up with all your secret words, your, your book, that's a book three where you got it, you got to come up with those things ahead of time. And then you, then you just beast it. Cause when you go up against other people that don't have like all the things worked out it's over it's a wrap um it's not cheating it's preparation it's preparation i'm going to the i'm going straight to the top uh wherever wherever the charades world championship is that's where i'm going and they all do it they all do it all right so it's pretty is that legal hey hey i'm not saying anything here Note to self, never play charades with Leon. Alrighty folks, you know how we like to do it. I always like to start our evening with questions. And so let's bring up the questions slide. What questions you got for me? Just to give folks in here. Give folks a chance. Win Clark, hey, thank you for the donation, I appreciate that. Is the CSGO server ready? It is, we were playing on it, we got a good test round in. We had like 20 people on the server, it was pretty cool. So the test server worked. I'm probably gonna test it again tonight.</p> <p>I'm gonna probably like a half an hour after class is done and I've sent out all the stuff, I'm gonna open the server again And if folks want to come and do another test run with me, I'd be, I appreciate it. Um, I think we dialed in a lot of stuff. There's a couple of modes that we're still trying to figure out. Uh, the person that's helping me build out the server, we got, we just got a few last things to tweak. Uh, and then you're all welcome to come hang out in the office. So the, the book, it's a CSGO server. Uh, that's 24 seven office. There's a, there's a map on CSGO called the office. And, um, that's all it is. So if you ever want to come hang out in the office, you're more than welcome to. and we're gonna get that going. So I think tonight will be the last test run and then we'll kind of just leave it open 24-7. CSGO is a completely free game, you can download it, it runs on like anything, a toaster, I had it running on a Chromebook before, like yeah, it'll work. Other questions. What's the logic behind us watching Independence Day?</p> <p>It's a trust exercise. It's how I weed out the folks that trust me at this point or not. You almost gave me a month. This week will be a month, right? And so now I'm asking you to do something and it sounds weird, it sounds wild. And so this is my trust fall. You either do it, you don't trust me and like either you do it and you trust me or you don't and you leave, right? So like, if you're not gonna watch Independence Day, just leave the cohort, it's all good. You can find it completely free to watch online. Remember streaming is completely legal, downloading is not, right? And so it's a trust thing, that's all it is. Now, it really does, I really does think, it really does help bring home a very important point when we get to JavaScript, right? When we get to JavaScript, it really does help hammer home a really important point, and so I need you to have watched the movie before we get to JavaScript. Where's the merch? We don't have merch yet for this cohort.</p> <p>We're working on getting like better, higher quality stuff. And then we'll do merch. A lot of people keep asking for it, so we'll do it. And last cohort, we just did everything was at cost. Like there was no way for like, like whatever the cheapest price I could set it is what it got set as. There was no like margin or anything like that on there. So as cheap as we can find it at a good quality is what y'all get. We're gonna talk more about groups in a few seconds. Can we get 100 devs decal? Yeah, we did have stickers last drop and so we'll do it. I am sipping some tea as always. Tazzo, get me the deal. All right, I think we got everyone in here. I trust your curls. Oh, that's one.</p> <p>That's one important thing before before we move on. I know Really Leon get to class. I have an important announcement to make I will no longer be using OGX products I'm ending my relationship with OGX and I'm looking for looking for new opportunities And so any any good hair care products out there? You let me know. They got to be vegan they got to be all the the the Sulfate free all the good stuff. They have to be good for curly hair. If you know something that's out there you let me know okay, and I'll take any deals that come my way, but I'm officially off team ogx I got like a and this is this is totally probably has nothing to do with ogx And so I'm not even I'm not gonna throw that out there I got like a little bit of like a really bad like scalp irritation on the side of my head and it's like really painful, like really painful. And I was like, crap, well what's the only thing that could be? And I started like looking up my shampoo and conditioner and there's some like bad stuff going down. Like people are like currently suing them right now. So I'm like, all right, I'm done. Y'all cut, it's over. I'm a free agent looking for new hair care products. So let me know. All righty, folks.</p> <p>Let's get into tonight. Tonight, we're going deeper in how to network. We're reviewing, as always, right? As always, our basics of CSS, of CS layout. We're gonna recover our responsive basics. We're gonna build some responsive sites. But really, the thing we're focused on is layouts. We're gonna take a look at some of the layouts that we've seen, but actually start to build them, right? I actually start to build them, right? And so that's the goal for this evening, is to get our hands on the keyboard to write bad code and be okay with it. All right. For those that haven't checked in yet, you can go ahead and check in. As always, the check-in link is in the follow-along materials, then it's in the Learn With Leon Live, and then they also have the exclamation check-in as well. But if you're already following me on Twitter, You can just see the tweet come up and go ahead and give that a like and a retweet Helps folks find us and hopefully not spend so much money to learn how to code Alrighty Study communities Before we jump into study communities. I just want to say a huge huge Thank you to blah our fearless moderator for doing all the heavy lifting on this They really made my life a dream to kind of get this going.</p> <p>These study communities are gonna be a lot of work, a lot of work, and they took the brunt of that labor to help these things get off the ground and get started. And so, huge thank you to Blah. I really appreciate all your help kind of getting this stuff rolling. So, study communities. Let's talk about what they are, right? These study communities are exactly that, a group to study with. They are not the only place you're gonna interact with people, they are not the only channels that will have some of these affinities or identities made, right? We have those kind of like already channels in our main section for women in tech, individuals of color in tech, right? Like we have those channels, we're gonna be adding to them, right? So there will be other channels that will be added there that'll kind of be free talk, chat groups, right? Like you can just go out, hang out there and chat. These study communities are like, who do you want to study with? Right. And so I know a lot of people are going to see and feel a certain type of way that you can only choose two. You can choose one group and one location group.</p> <p>Right. And so you're not, I hope that you don't take it as like, this is the only thing that I can identify with. I am a gamer and now I'm only a gamer. No, that's not the intention here. It's who do you wanna have a smaller group just to work with, just to study with, even though we're gonna have all these other channels where you can chat and interact with those individuals, right, so you get one group, one location, right? And so please go ahead and fill out that form if you would like to be put into a smaller group. Each of these groups will have their own chat channel, but they will also have their own voice channels, right? And so a lot of these groups may have specialized voice channels too like the ADHD group will have just like a quiet cam only channel and so it's just things that get like if you're thinking through like who do I want to go through the next 20-30 weeks with who do I think I would study best with that's the group you pick it's not the end all be all they're going to have plenty of other channels and the other thing is that this is a big experiment we've never done this before we might get two weeks into it and It might be the worst thing that's ever happened. We cut it all off and we go back to where we were, right? But we wanna try it, right? No one's ever done study communities at this scale. So we have no idea if it's gonna work or not work, but we're experimenting. And I think if we can figure it out, this will make it so that we have the ability to support people far and into the future. So know that this is an experiment. We're going to have to probably add stuff.</p> <p>We might give the ability to join more than one in the future, right? But this is our first step and we got to take a smaller step in the beginning so we don't fall completely on our face. There's a lot of weird stuff that's going to happen with these groups when we're first trying to get them going, trying to give everyone the roles. Like it's a big, big undertaking. And so please give myself and the mods some grace as we go through this process because it might just all break, but maybe something wonderful happens instead. Right, and so we're going to try and I hope that you join a study community and hopefully find a smaller group to Work with to study with and just give yourself a little bit quieter of a space to hang out and mingle All right But I really just want to reiterate that I know when you see the groups and you can only pick one, you're gonna feel like, well, wait, I wanna be in like four or five of these. That's okay. We're gonna have those chat channels for all of those groups. It's just, who do you wanna study with? Cool. And please don't like fill out the form more than once. We're just gonna look at your first application. So don't like refill it out or try to switch or anything. Take it a little bit seriously. Pick where you wanna be.</p> <p>And we're gonna throw it in and so we're gonna have the the survey open today And then this weekend we're gonna start adding folks to the to the channels You definitely want to fill out the form today We're gonna leave it up over the weekend But definitely want you to fill it out today if you're here now fill it out Please catch up crew fill it out as you join us and we're gonna try to start actually doing it like tomorrow and Saturday All right, here's the form if you need it, but it's also in the following materials channel. All right, submitting work. We have some work to submit today. I want your 15 minutes of pain, please. That is the responsive version where you tried with the three different media queries. Put it in a code pen, please, and submit the form with your code pen link. As always, the homework submissions always up an hour before class starts. So feel free to grab the link from there or from the slides. Can we use Glitch instead? Yeah, you can use Glitch, Repl.it, CodePen. Just pick one. We just don't wanna bring the sites down as everyone submits their homework. So pick one. I think CodePen has been the most stable, but whatever one you feel is fine. Yeah, it doesn't matter which one it is.</p> <p>Can we go over the homework? Of course, during office hours. Come to office hours on Sunday or feel free to watch the VOD as you have time, but we'll definitely go over this homework during office hours for sure. Remember, office hours are every Sunday at 1pm Eastern Time. The VOD is always immediately available on Twitch afterwards. And the cool thing about office hours, if you just want to see the homework solutions, you can just jump to the homework solutions because we know that you're just, we're just answering questions at office hours, but jump to the bits that you care about. 15 minutes pain is so worth it. We're down the road, folks, big payoff here during great day. the office with DevOps failing, our pipeline jammed. Oh no, Dev, are we doing okay? When are we starting GitHub? Once we get through JavaScript, then we feel a little bit more comfortable with the terminal. Cool. All right, folks. Are we still gonna add more houses?</p> <p>We're definitely gonna do the houses. The houses will just be study communities. So we're rolling out the study communities, making sure they work, and then we're adding two more study communities, which will be Turing and Hopper. Yeah. Cool. Networking. Alrighty, folks. We started off last class by diving into the wonderful world of networking. And what I need you to take in, and the thing I need you to hear right from the beginning, is that most people are not good at networking. Most people start off feeling very scared, anxious, unsure, and not really certain about how they're going to go about networking. I just wanna make sure that you understand that that is completely 100% okay. We all start there. Some of us might have a little bit of the more extroverted genes, But most folks start not really undershore not really sure how to do it And the only way to get that feeling to go away and to get to the other side is to do it We're all gonna have some pretty Uncomfortable moments when we first start networking, we're all gonna have some pretty awkward moments We're gonna have we're gonna shake someone's hand forget our name like it's just gonna happen It's just going to happen, but I promise you the more you do it and the more you find what works for you, the easier it becomes. Not all of us are going to wind up going to conferences or meetup groups. Some of us might spend more of our time in discords and slack channels and IRC channels, right?</p> <p>It's about finding what works for you so that you can unlock the thing that is going to to be the most helpful when you get a job. Now, there is this weird thing. There is this weird thing. We don't get got. We don't get got, we go get exactly. There's this weird thing that comes up when you start talking about tech. People really like to think that it's the skills that open the door for you to get a job. A lot of people like to say tech is a meritocracy get in here real quick hold on get in close get in close that's bullshit it's not it's about who you know and who is willing to open the door for you more so than the skills that you have in your head and in your portfolio it just doesn't get you through that first sniff test. The networking is all about getting you to the point where you can get past that person that's gatekeeping you getting the interview and talking to the nerds where your skills can shine and be the thing that helps you get the job. But I need you to understand that you need folks in your network that are going to help refer you to jobs. They're going to help you skip that first round of the interviews. They're going to help your resume get to the top of the pile. If you do not start putting in the work to network, you're going to run into a brick wall of an uphill battle to get a job. Now, is it doable? Could you skip all the networking and still get a job?</p> <p>Absolutely. But we're talking about increasing the odds ever in your favor. Okay? Something that I've seen time and time again over my past five years. Thank you, OCC. Listen to Leon. The thing I've seen, at least in the past five years, is my students that put in the work to network, here's how it really shakes down. All right, here's how it really shakes down. They will get referred or networked in to 60 applications. What does that mean? That somebody has literally gotten their resume into the right person, they've talked to a real living, breathing human being, and made sure their application was seen. 60 of those, right? 60 of those. 60 is the number that I push all my students toward. out of those 60, right?</p> <p>Out of those 60, 30 are gonna ghost you, just straight up, rip, gone. Just not gonna, you got referred, you got networked in. Somebody you talked to, a real human being, and something's gonna happen in the process where half of them just disappear on you. So you want from 60 networked, referred applications down to 30. Out of those 30, you might get a first round, something might happen, and it'll turn into like 15 like real interviews where you're talking to the nerds. You're talking to a real coder, right? That's gonna evaluate your skillset, right? And out of those 15, you're gonna get 1.7 offers. That's what the numbers I've calculated with the nonprofit I work at during the day. our students get about 1.7 offers out of the 60 well-networked applications, right? So when you have someone that's just clicking apply on 100 applications, that's gonna go nowhere if 60 referred well-networked applications result in less than two offers, right? And so that's the thing I need to stress. And I don't want you to feel like that it's an unsurmountable goal. I have seen folks from all walks of life get good at networking, but they commit it to a process that works well for them. And then they put in work to get better at it.</p> <p>Right? And so we've talked about a lot of different things you can do. We talked about meetups. We talked about conferences. is we talked about apps, we talked about online communities, right? It's about starting that process for the first five years of my career. Like my first five years of like a serious, like I was in Boston hustling, right? The first five years of my career, I had two coffee chats every week. There was literally not a single week in five years that I did not have two coffee chats. Five years, every single client I've ever gotten, every single dollar I've raised has come from those coffee chats or networking. Right, now you're like, Leon, what about Christmas? Yeah, there were some weeks where I didn't, but by and far, two a week, and I pushed. I knew every single person I needed to know and it helped me so much Every single job I've gotten Every single I've raised millions of dollars for my startups every dollar I've raised has come because I put in the work to network and that has always always Beared fruit The job I have right now The day job I have where I'm managing director of engineering at Resilient Coders, that came because I decided to volunteer, right? And I met people and they liked me and then that's how it got me the job, right? So like there are things that you can do that are networking that aren't just the things we talked about, right?</p> <p>I talked about volunteering being one of my favorite ways to meet people, right? To network, volunteering for conferences, even volunteering for local nonprofits. Like there are so many facets of things you can do to build this network you have to find what works for you and go all in on it right but it's a process i said it last class every single coding boot camp that's trying to get people to jobs to get jobs should be 20 weeks of networking and at the very very end right when you're about to graduate they tell you to go do the odin project right this is what will unlock the doors is what will get you the job and you can do it. You can do it. We're going to get practice together. If you're like Leon, I have no idea how to do this. Guess what? We're going to have a night where we all practice together. Right. I'm going to show you the actual messages I send the people. Right. And so this doesn't have to be a thing that you're good at today. This is not something you have to be good at next week. This is not something you have to be good at this month. It's something that you have to keep in your brain and build up and get better at over time But if you're doing this bootcamp If you're doing this bootcamp, you're committing to networking There's just so many other things you could be doing that if you want to be in this this this cohort You want to be in this bootcamp?</p> <p>It's a networking bootcamp prize. You got got that's what we do All right, it's how we get jobs. You can ask pretty much every single person that's got a job. There's so many of them in this chat right now that have been highlighting their messages, right? Right? They've been writing their messages, saying like, listen, this is what got me the job. This is how I got my interviews, right? It's just not something that I, like, don't take my word for it. Listen to the alumni, go into the celebrations channel, like read what they said. Half our students got jobs without technical interviews. Let me say it again. Half our students got jobs with no technical interviews. I just literally, literally had a student this morning tell me they got a job and that they said, here's the offer letter, they negotiated, I'm accepting it. And then their last message to me, the last message they said to me was no technical interview. It was an $85,000 job, right?</p> <p>They had never coded before. And their last thing they said to me, right? The last thing they said to me, no coding interview. That's what we're talking about. If you put in the work for this networking stuff, you get so much out of it. I missed your message there, Sam. I Networked my way into every contract and job opportunity. I've ever had never clicked apply exactly Exactly Sam and if y'all y'all don't know Sam exclamation point Sam in chat They're the best at this stuff. Maybe like I think I'm okay at networking Sam's the best definitely give Sam a follow They got a lot of really cool posts and articles on like how to build your network, especially on Twitter and online Definitely give them a follow Slapper a thank you for the for the five gifts of subs. I appreciate you All right I've said my piece It's up to you whether you believe me and want to go down that adventure or not But I'll say it one last time your skills don't open doors. They close them Your skills do not open doors, they close them. Your networking is what will open the doors and then your skills, your portfolio, your projects, the things that are in your brain are what will help you close that door and get the job. But they don't open doors. All right. So for those that are still stressing over it, The core thing we're trying to do here, right?</p> <p>The core thing we're trying to do here is turn strangers into friends. That's it. That's all networking is. This is my TED talk. We're done, right? You're trying to turn strangers into friends, right? Trying to turn strangers into friends. And you have to find a process that works for you to be able to do that. I love local meetups. We talked about this last class, Cause the reason I like local meetups is you just show up and the act of showing up regularly, you get to see the same people. I love volunteering. The act of showing up, I get to see the same people. I love working on open source projects because I get to see the same people. These are things that you can do that immediately take you from stranger to acquaintance, just because you're doing it regularly, right? And so there's a lot of those types of things you can be doing that will get you from stranger to acquaintance pretty quick, and then you can lean over into friend territory as well.</p> <p>All right, we talked about the follow-up pattern, and we all made a very important promise, right? We meet someone, the next day we send them an email, thanking them for their time, right? In our emails, there needs to be three things, right? In our emails, we need three things. You need to tell me how we met, you need to provide some value, right? Provide some value, right? Tell me how we met, provide some value, and typically thank me for my time. If somebody sends me an email with those three things, your top of the pack, right? So here's the normal followup pattern. You meet someone at a meetup, a conference, an event, doesn't matter. The next day you send them an email, which we're about to see my template for an email. Three days later you add them on LinkedIn. And what do we never do, chat, what do we never do when we add folks on LinkedIn? We never, ever add anyone on LinkedIn without a message. Some folks are a little confused on that.</p> <p>You're not sending messages when you add someone. There's always like a little box to put a message. So when you actually add someone, it gives you a little place to put a message. That's the message we're talking about. And then six days later, I add them on Twitter. Now people are saying, Leon, how do you get their email? Well, I ask. I'll simply say, hey, I really enjoyed meeting you tonight. Do you have any contact information? Do you have a business card or do you have an email right or some way to reach out to you? And normally they'll say yeah, here's my email, right? Um people that are going to these events, right? They know that they're there to network too. And so it's pretty common for somebody to give me their email or their twitter handle Right. Um, but if I just know their name There we go, Hunter.io, right?</p> <p>Hunter.io, Hunter.io, you can throw somebody's name in the company they work into and it'll give you their email address. So let's see, somebody works at, I don't know, let's say LinkedIn, all right, They work at LinkedIn, you find email addresses. There you go, linkedin.com. And what this will show you is it'll show you the most common pattern at LinkedIn. So you can see that it's first letter, last name at linkedin.com. Boom, now you have a pretty good shot at what their email address is, even if they didn't give it to you. That's it, boom, done. It's not creepy, it's networking, folks. Now, here's the thing. A lot of folks start to get in their head a little bit here. They're like, Leon, how does this not come across creepy? How does this not people network? I think a lot of folks, especially if you don't come from a more professional background, I wanna say, like a more in the office type profession, right? Don't realize how much networking goes down, right? It's a big thing, right?</p> <p>It's a big thing, right? And interacting with folks, right? Interacting with folks, adding them to your network, forming connections, forming business relationships is a big deal, right? is a big deal and everyone does it. Everyone does it. And so if you're going to meetups, right? If you're going to meetups, right? If you're going to meetups, people are kind of expecting that you might ask them to follow up, right? They're kind of expecting it. Pretty much every meetup I've ever gone to, people were really open to the idea of like, hey, I really appreciated you. Do you mind if I follow up with some questions? Do you have an email? I've I've almost never ever been turned down for that most time people say oh actually it's easy to add me on Twitter or something Like that you move on right now The cool thing is specifically in tech Everyone has to learn Right. Everyone has to learn like I could take the best engineer in the world right and put them on a new technology They're starting from the same place as you are. They're reading the documentation.</p> <p>They're asking a metric crap ton of questions So in tech people have to help each other if I wrote a language I have to convey how it works to you like that idea of like connecting and sharing information is like how Tech started like back in the day Back in the day you bought your Apple 2 you spent $3,000 on your computer You took it home and it was a blinking cursor and that's it a blinking repel right and that was it There were no games, right? Right, there were no games. There were no calculators nothing on that computer So what you would do is you would code a calculator app and then you would go to a meetup and say hey Yeah, look at my floppies folks. All of these have calculators. Does anybody have a word processor? I have a calculator I would love a word processor and you would literally swap the your programs with each other, right? right? That's how tech started. It's always been on sharing. It's always been built on like interacting with each other, building each other up right from the very beginning. So most people that are in tech have had an experience where somebody more senior gave them the time of day, went out of their way to have coffee with them, have taken them underneath their wing in some way, shape or form. And so you have to realize that's the type of environment or type of community you're entering into. Right? So reaching out, building connections, building engineering contacts is something that we all do. And it's like the cornerstone of our profession.</p> <p>So that's why networking is so important. Right? And then people want to work with other engineers that they know. It's just natural, right? It's just natural to want to work with people that you know. And so that's why this, this networking is so important. All right, here's an example of the email I would like to receive, right? If someone met me, hey, thank you for the posture check. And we had some hydrates come in yesterday that I don't think I saw. So Janks and DScloud, thank you for the hydration. All right, here's the email that I would like to receive. So we met at a meetup or something like that. Here's the email. Hi Leon, it was a pleasure meeting you last night. The event was so well done and was exciting me such an amazing group of people I hope you are doing a well-deserved break after pulling it all together.</p> <p>So I ran an event They met me at that event. They said it was great to meet me and they Kind of Made it sound like they had a good time at the event, right? So that's kind of the first thing. Let me know where I met you Thank me for my time, right? That's a really good way to start. And then the less, the second part here is the important bit. Also, I don't know if you saw this yet, but someone just bought a $375,000 first edition Pokemon booster box and it wound up being fake. The Guardian covered it and I remembered you being, mentioned being a big fan. Hope you have a great rest of the week. That right there is doing what? What did they just do in that second paragraph? What did they do in that second paragraph, folks? Exactly, they provided value. I'm gonna remember this person. Value doesn't have to be like a big overwhelming gesture.</p> <p>This shows me that they read something, they thought about me and they provided some value, right? So for me, this is an amazing follow-up email. I remember where you met, you boosted my ego a little bit and you provided value. I'm responding to this email. Right, I'm responding to this email. Cool. So we have that process of going from meeting to email to LinkedIn to Twitter. Now, can I tell you something that stays between us? Stays between us, okay? Don't tell anybody. Remember how I told you I was meeting two people a week for years, it was true. I used the sheet which you all have but I did something else I Had a Google Doc on every single person I met every single one Every single person there's a Google Doc with every single thing. I can remember from our conversation With everything that I learned about you. I Put that into the Google Doc. I set up my Google Alerts for that person and And you bet your dollar when I ran into them or if I saw them at the meetup Hey kids it just played in the lacrosse finals Hey, Bob, how you doing?</p> <p>Nice to see you again. Hope all things well How did I know you said John's lacrosse finals was like a big deal that how did that shake out? Did they win? I Did it I did it over and over again is one of the best things I've ever done in my life So for me, I take this process very seriously. I've relaxed on it now these days, but when I was in my hustle mode, I was in grind mode. I was trying to build up my Rolodex. I stuck to this follow-up process. I made sure I kept notes on who I met. I've thought of ways to provide value. And I always tried to provide more value than came in. And that's something that really helped me throughout the early stages of my career. All right, eventually you've built up a rapport with these individuals, right? You've met them, you have kind of followed up, maybe email, maybe you had a little bit of back and forth and you want to ask for a coffee chat or you met somebody really cool the night before and you just want to jump straight to a coffee chat. Here is, I want to talk about, That's a really good thing for someone with ADHD. You're super organized.</p> <p>I'm a mess because I have to, because I have to. If you, if you ask my wife, what my biggest complaint in life is, is when somebody moves something, it's my biggest complaint in life. But when, when, when, when I expect it to be in a spot and it's not in that spot, My life is over, I don't know what to do. I can't, I won't remember to do it. I won't remember to fix it. If it's not in that spot, it's all over, right? I'm the same thing when it comes to my digital life. I have to have what I call my second brain, which is a place where it's just stream of consciousness, right, stream of consciousness. Everything that's like floating in my brain It has to go into this document, right? And then I take time to take that stream of consciousness stuff and put it into like more respectable buckets. And I do this every single week. I schedule the time for it. When I say I live my life one Google Calendar invite at a time, I mean it. If it's not on the Google Calendar invite, it's not happening. No ifs, ands, or buts, these kids got guts.</p> <p>It's just not going to happen. So all of these systems, these processes are things that I do every single time because the one time I don't, I forget it and it just goes all out the window. So for me, my attention issues have led to like very severe. Systems, and if I don't have those systems, it's all over. I think once the ADHD channel opens up, I'm definitely going to put some of my tips in there. I've been working on a larger set of resources for specifically ADHD and attention issues and then folks with dyslexia. I'm really hoping to get those out in like another week or so, but yeah. So that's why I, I, I, I am, I am not an organized person by default. I am a hot mess. And if I don't build systems, it doesn't happen. So I said, what happens when you can't locate someone in your own country? You expand your radius and maybe you focus on remote. Do I schedule fun? Hell yes. I schedule fun.</p> <p>It literally like has I literally have like like I have a game night normally most Thursdays It literally says game night on my calendar It literally I literally put like sleep Right, so everything's on there I have to I just have to else it's just it's just not gonna happen Yeah cool All righty. So we talked, sorry, a little bit of a side there. We wanna get a coffee chat, right? We wanna sit down and spend some time getting to know someone. And remember, like I said, people in tech wanna give you their time. I, and don't do, I'm not gonna do a coffee chat with you. There's thousands of you here right now. But when I was in Boston, I never turned down a coffee chat. In the history of people asking me, I've never said no. Now scheduling or stuff may have fallen away or emails when it got lost, but I never said no to a coffee chat. And I would say out of the coffee chats that I asked for, above 90% were yes, like just straight away had coffee chats, right? And so for me, it's just such a core piece of being in tech and getting to know others and interacting with others that like, it's just a normal thing. And so how much of the conversation should we be talking versus listening? I think most like if you're asking someone to a coffee chat and you've read how to win friends and influence people or you listen to it because it's free on YouTube list that you can listen to it, you will have come across this idea of people like to talk about themselves. So I would say most of the coffee chat is me being really interested in them.</p> <p>I want to hear about your background your experience and I'm genuine like I really do care about your background, how you got there, your experience, what it's like to be an engineer at your company, right? Like all those things I'm just generally want to be interested in. And then that makes them feel that they like me. It's just part of the how to win friends and influence strategy. Right. And so most of it, I would say, is like they're talking the most. I'm energetic, interjecting, adding a little bit. And sometimes they'll have a back and forth and they'll ask me about myself. But it's more like letting them talk. So I asked for coffee chats I said I said a email out a week two weeks and then a month and then I stop I don't I don't ever send more than three right? I'm somewhere in three. I don't really do cold intro. So I said what about cold intros? I don't really do cold intros I really my coffee chest be people that I've met through the other channels that we're talking about I feel like when you do a cold outreach and you haven't provided any value That's just too much friction to get started Maybe if you can provide a lot of value in that initial outreach then it works But I think coffee chats are more folks that you've already interacted with A lot of people love to do this This is this is this is how most this is it will not most it's how some people start off their networking journey They just blast out a bazillion things to a bazillion different people and then they get no they get nothing out of it Right networking should be thoughtful. You should take your time.</p> <p>It's it's about quality not quantity Always remember that networking is always quality over quantity, right? I rather have ten people that know me really well in tech and and dig me and are into my vibe and like are on my side, then like 100 people that I've blasted on LinkedIn. Right. And so. In the beginning, go slow. This this is a slow process in the beginning. Please, please go slow in the beginning. Don't like some people like jump into Twitter threads and they're like, Oh, I'm adding everyone on Twitter. I'm adding on everyone on Twitter. You like this to go and they just add a bazillion people. They add a bazillion people on LinkedIn. and they never fall within these people. They don't ever get to know these people. And it's just a waste. Start slow.</p> <p>Go slow, build it up, and you'll get there. All right. Here's a message that I would like to receive if somebody was asking for a coffee chat. And don't be cheeky and send me an email. I'm not gonna respond to you. Hi Leon, it was a pleasure meeting you last night. The event was so well done. It was exciting meeting such a group of people. I hope you're enjoying a well-deserved break after pulling it all together So kind of that same line that we saw in our normal follow-up email just thanking them for their time kind of boosting the ego a little bit on like how the event went and then the the ask as I mentioned last night. I'm just starting my engineering career. I would love to learn from successful people such as yourself Please let me know if there might be a time you're free to grab a virtual coffee over the next week or two Before 9 a.m. or after 5 p.m. tends to work best for me, but happy to accommodate works for you, thanks. There's a couple things that are at play here. One, I am kind of boosting a little bit here, like successful people like yourself.</p> <p>Okay, I'm feeling good about myself. That's a good email, all right. I gave them kind of a range, like in the next week or two, right? So I'm talking about this being somewhat sooner rather than later. I gave them a suggested time range like before 9 or after 5 works, but I'm saying I'll accommodate what works for you Right, so it's you kind of butter exactly butter them up a little bit, right? Butter them up a little bit. We gave a good range. We made her ask right and then right and then you do your Your your your value, right? You do your value, right? I don't know if you saw this is in the guardian is fake, right? So this is, this is the coffee chat. Ask sandwich. You thank them. You made your ask. You provided value, bank, ask value, bank, ask value, right?</p> <p>You don't have to use this exact like wordage, right? I don't think you should copy and paste what I have here, right? Like we don't want a thousand people sending coffee chat requests with the same text, right? But it should give you a pretty common place to start Thanking them making your ask and then providing value, right? And so if you can get that through in your coffee chat requests, I know they're going to go well for you Is it weird to take notes during coffee chats I think it is I I think some people do it But I'm not there to take notes or be like, I don't know. I'm there to make a friend, right? I don't ever pull out my notebook with my friends, right? Like if we're chilling, I'm not like, oh, really, eh? And I'm like, no, that's weird, right? So don't bring a notebook, don't be overly eager. Remember, you're trying to make a friend. Like even if they're a more senior engineer, you're still trying to make friends, right? And so really treat it that way. Use the sheet, right? You have the sheet, exclamation point, sheet and chat works as well.</p> <p>Remember, it's a place where you're gonna put the event, the date, the name, the company position, the spark, like the thing you remember about them, their email, and then you follow up on all of the patterns, right? You might have to come back and make a copy later because there's a lot of you on here. But yeah, use the sheet. You're gonna forget people, you're gonna forget people, and then you're gonna come, you're gonna be 20 weeks later, right? You'll be 20 weeks later wanting to apply to that company, and you're gonna see, oh, I talked to Bob that works at that company a couple months ago. You're gonna wanna remember that spark so you can use that as part of your follow-up email. Hey, Bob, I really enjoyed our conversation about Rubik's Cubes a couple months ago. I actually bought one, I've been trying to learn it myself. I saw that such-and-such company has an opening out. Would you feel comfortable referring me? Right, you got to have it Don't record conversations though, please don't How does the Google Alert work you just go to Google alerts You just go to google.com slash alerts and you put in any name or company or anything like that And then it just sends you an email when it finds something All right. Yeah, the sheet's not gonna work because so many people jump on it. You gotta come back after class. All right. Questions before we take our top of the hour break?</p> <p>When we come back, we're getting into writing actual code, building real layouts. I'm super excited. Questions before we take our break? About networking, please. How do I not give off the impression of trying to ask someone out when asking for coffee? One first remove any idea of dating or anything out of your brain when you're doing networking. It has no place Don't be creepy. Don't do that, right? You keep it professional right you keep it professional, um you Make sure that it's very clear that you're interested in career and their career growth You're interested in learning about how they got started as an engineer, and that's it. Please, don't ever ask someone out after you have a coffee chat. Please don't ask someone out when you're going to these networking events. These are two completely separate ideas. Don't be that person. I really prefer to keep it professional. I'm a little old school.</p> <p>I'm never gonna give you my phone number. We're gonna communicate via email, right? I'm going to make it very clear, right, very clear that this is not, this is, this is, this is, this is nothing in that realm. This is a business relationship. And so I know I'm, I'm a little odd, but I think that I have seen a lot of folks benefit from keeping professional communication, LinkedIn messages and emails, opposed to phone numbers and texting and stuff like that. How do we get open source projects to work on? We're gonna cover that as we get further along. Tips to make a coffee chat feel less like an interview. Just be generally interested in the person. It's not an interview. It's, hey, how'd you get started? Right? Right? All right, how'd you get started? What made you interested in tech?</p> <p>All right, these are like very open-ended questions that you're really, and in my emails, I'm always saying like, hey, I'm really interested in how you got to where you are, right? It's very clear that I'm trying to learn about your experience as an engineer, and so that's how I start most of my questions. How does this work in places that are not the US? Same thing. You find a city that has meetups closer to you or you find communities that are closer to you or if you know you're in a place that just doesn't have anything, then you have to do the harder journey which is networking with remote companies. Find a list of 80 companies. You can find it very easily online. 80 companies that hire remotely. Figure out the people that work there. Start figuring out what events they go to, what meetups they go to and meet with them digitally. If you're thinking about being purely remote and in a place that does not have a locality that has engineers, then you're gonna be doing the same process, but you're targeting people remotely and remote events. It's a lot more difficult for sure. Most events are remote right now. Some are slowly starting to go back in person, but most are still remote. They'll mostly be like over Zoom or some other platform like that.</p> <p>How do we start conversations in virtual meetups or coffee chats? Hello, how are you? My name is Leon. What are you excited about today? Like what brought you here? If it's a JavaScript meetup, oh, like are you excited about the talk, right? Are you interested in the topic? Here for the pizza, right? Any of those things are starters, but we're going to specifically have a night to practice our opening. Right. We're going to, we're going to, we're going to have a night where we all kind of are talking live to each other where we practice our kind of like how to start conversations. Right. I know that's a, that's a pretty big barrier for a lot of folks. And so we're going to do an icebreaker night exactly where we practice our, our openings, how we reach out to people, right? And so we're gonna practice all those things.</p> <p>I have some of my students that literally have Like index cards they carry that have like all their basic questions that they've practiced they go into the mirror They look at themselves and they say hey, I'm Leon. Nice to meet you, right? And so we're gonna practice these openings. We're gonna practice these kind of conversations. And so that's why I say This is the beginning. We're gonna go slow, right? We're gonna go slow go to the bathroom. Don't wait for me to break Why are you sitting there when you have to go to the bathroom? Just go to the bathroom. It's so weird We're gonna go slow. You're gonna take your time, right? You're gonna take your time. We're gonna build up to this. Don't have something, right? Don't have something that makes this a blocker to you.</p> <p>We're gonna go slow, we're gonna mess up a lot. We're gonna find what works and we're gonna keep pushing. Is there a dress code for coffee chats? No, keep it casual. All righty folks, we're at the top of the hour. Let's go ahead and take our five minute break. For new around here, we like to be healthy. We like to make sure that we get our stretches in. We like to move around. We like to make sure if we're able to get up, Look outside the window let our eyes focus on something that is not the screen and we'll be back in five We have some extra stuff that came in that I didn't see on my dashboard, so I'm going Let's see if I can find it real quick. Are we talking about networking in the context of coding or that weird thing, social? Yeah, we're talking about making connections so that we can get jobs. Well, pick that up there, all righty, about a minute left folks. Where did you learn all your networking hacks? In the streets, folks.</p> <p>Most of the stuff I teach is because I've probably already fucked it up. And I've learned from that fuck up, and then I distill it so that you do not have to fuck up in the ways that I have fucked up. And then the beautiful thing about having hundreds of students that I've helped get jobs is that I've seen them fuck up And so I learned the things that have stopped them from fucking up and then I teach it to you Jordan's or Yeezy's I've never been into shoes. I Only wear vegan shoes now. I So I had my airwalks from Payless and I thought they were the jam and yeah, that was it All right folks come on back come on back Chris Lance Lance. Thank you Chris. Alright folks. Come on back. Come on back. Let's get into this. Boom. Thank you for the update on your bathroom endeavors. Glad it went well. Are you into zero drop shoes? I am.</p> <p>And the more comfortable. All right, and the last thing we talked about networking was the apps and we talked about this image. I just wanted to throw this image back up just because. All righty, folks, let's move on. Golden rule. Golden rule. Separation of concerns is important, why? Yes, organization. For ourselves, our teammates, it helps our code stay organized, keeping our content in our HTML, our style in our CSS, and our behavior and interaction in our JavaScript. Nice. Talked about this idea of progressive enhancement, this idea that the core of our content should be good HTML. And if we do that, we're doing enough. On top of that core of content, we just add a little bit of a chocolatey coating that is our presentation or our style. And it might be a very, very thin, thin candy coating of our JavaScript. So the core should be HTML, and then everything else is really extra.</p> <p>And the reason for that is because we are still in a time where most folks lack access to high broadband internet. In the U.S. in 2017, the statistic came out that 35 % of our rural residents did not have access to broadband. That was 22 million Americans. When you look outside the U.S., it gets even more real in terms of folks still not having access to high-speed broadband. And guess what? Your sites do not need to be that heavy. There's this really wonderful Thing I found on hacker news last time I was teaching this class called the one megabyte club So it's all sites whose total size, right? Their total size is less than a megabyte and they just keep a really cool list of it And there are some big ones on here. We saw the light that CNN comm But there's also like NPR now has a very simple one And so text.npr.org, right, has all of their content, all their main articles, right, in just text format. The site is way less heavy. It loads faster. It does all the things that you need it to do without having to sacrifice folks that do not have high-speed broadband. Cool. The only thing that's coming out recently is Starlink.</p> <p>I've been watching a lot of videos on YouTube of folks that finally have Starlink. So Starlink is Elon Musk's company where they put satellites and they figured out a way to make the connection to those satellites since they're in low Earth orbit and not like all the way up in the outside of the lower Earth orbit. They can actually connect to them and have really fast speeds. And so people have like really low ping and over a hundred megabytes per second. So like traditional faster than traditional Broadband that's like wired, which is pretty dope and for $99 a month and their goal is like bring that cost down We're talking about folks that are like in the middle of nowhere in terms of like access to broadband Now being able to get access to it and there's a bunch of other companies that are competing as well And so hopefully we'll see over the next 10 years or so the proliferation of broadband and in places that wouldn't actually run cable to. A buddy in Minnesota has it and loves it. Yeah, I've seen a lot of people that are really, really happy with it. Yeah, I've watched quite a few videos and people setting it up and it seems to work really well for them. So maybe this problem will slowly dwindle and hopefully the cost gets reduced significantly. All right, where does CSS go, folks? Separate file, exactly. If we are writing for HTML emails, we can put a little bit in inline. If we're writing code at Amazon, we need critical path CSS, maybe put a little in the head, but for most of our projects and the things we work on, separate file, to make sure we adhere to separation of concerns. All right, our favorite game, chat. What is this?</p> <p>Oh, no What is this At you The value nice about this Collector nice nice and And how about this? Beautiful declaration. So whole thing is a rule. A rule is broken down into selectors, declaration block, declaration blocks are broken down into declarations, declarations broken down into properties and values. Wonderful. All right, we know that stuff that comes above can be overwritten, that stuff that comes below due to the cascade, right? Due to the cascade. But the cascade only comes into effect if the stuff below has what? Specificity, exactly. They have to have the same or greater specificity. Nice. All righty. We have a bunch of different relationships we can use to target specific elements in our CSS. So we have parent-child relationships, and this right here is a direct parent-child, right? Meaning that the child comes directly within the parent.</p> <p>There's no other steps in between, which is a little bit different than a parent-child that is not direct. Here we have a child of a paragraph that is directly inside of an article but is still inside of a section. So No direct child if we were to go ahead and put the carrot here Uh, this just wouldn't work. It would not style. Hello twitch to be read beautiful and the other one we saw is a direct sibling right where We're trying to find a paragraph that immediately comes after another paragraph. So in this case Hello, YouTube would be the thing that comes red because it comes immediately after another paragraph. All right. Boom, boom, boom. All right, IDs and classes, right? IDs and classes. So, here we go. IDs can be used once, right? Once and only once. Right, IDs can be used once and only once. Once you give something an ID, right?</p> <p>Once you give something an ID, that ID cannot be reused, right? It cannot be reused on any other element. And once you give an ID, All right, one second. Cool, all righty. Once you give an ID, right, once you give an ID, that ID cannot be given to any other element. So I could not put zebra on another paragraph. I could not put it on another section. It is now no longer allowed to be used. And, right, this other element, like this element paragraph cannot get another ID. Classes are a little bit different, right? Classes are a little bit different, right? Classes are a little bit different. Each element can have multiple classes, right? Each element can have multiple classes. So I could give it a class of Bob, a class of Rainbow, a class of Robot, and classes can be reused, right?</p> <p>So not only can one element have it, but every element could eventually have that class. and then our classes can be given as many as we want per element. And so you can wind up with an element that has an ID of zebra, and it has a class of Bob and a class of robot and a class of et cetera, because IDs are unique, classes are not, so we target multiple elements at the same time. Nice. All right, chat, how many points of specificity? Well for the rule, I should say how many points specificity for the rule? Are y'all referencing the amazing, uh music duo 112 That we're all shouting in chat. Oh the points of specificity I see so we have One two tags We have one class and we have One ID, so 112 points of specificity. How many points of specificity do we have on this one? We've seen these already, should be a quick, quick, quick, quick done. Nice, we got one tag, we got three classes, and one ID, 131 points of specificity, nice. This one, what do we got for the rule? Oh, some of you got got, it's okay. Some of you got got, let's see. We have zero tags, we have three classes, we have one ID, and an important for 1,000.</p> <p>So 1,130 points of specificity, nice. Alrighty, chat, what is every single thing in web development? Everything, every single thing we see here is a what? A box, exactly. Every single thing we see is a box, right? It's a box. Remember, we have, when we're figuring out the box model, we calculate the box by including its height, its padding, and its border, or its width, its padding, and its border. And then the margin can push that box around. It's the bully, it can push it around, right? So if we're calculating the width, we would use the width of the element, plus it's padding, plus it's border. And if we were trying to do the height, we would take the height of the element, it's padding, and it's border. Padding increases the distance between what? Padding increases the distance in what? Content and border, exactly. It'll increase the distance between the content itself and its border.</p> <p>Wonderful. Look at us go. All right. So, we actually saw all this exact code in the last class. I want you to do it again. I want you to see if you can do your active recall here. I want to see if you can do it again. We have the box model code. If you're new around And you want all the starter code that we're using in you join our discord Exclamation point discord or leon the world.com slash discord once you agree to the rules We have a follow-along materials channel go ahead and download the materials from that day's class from the following materials channel And you'll have everything that we need here you unzip it and we go to work So we have this box model practice That has the same stuff that we did last class So I'm putting four minutes on the clock and I want you to go as fast you can through solving this See if you can recall everything make sure you figure out how to get it done. And if you get done Right done in chat for me before it We don't get got we go Don't get got we go get Welcome Chalupa, glad you found us. I have three monitors and an iPad and my laptop screen. So five? Shae's lessons are thorough. They are. A lot of great details in there.</p> <p>Thank you, Trader Joe. Would you recommend one widescreen or multiple monitors? I love one widescreen because I can have everything next to it. It's just that with streaming, I like to have separate monitors. Hey, Milky Dough. Thank you for the raid. Hope you're doing well. Thanks for stopping by. I got to get a rate coming your way soon. Thank you for stopping by. I hope you're doing well Got a coordinate get you later one of these days we can swing through with the whole crew Hope your stream went well For folks that are that are stopping by we're working on some code here We're working on the box model. And so that's what we see the timer for folks are working through the box model work How was your stream? What were you all up to? Hey, I appreciate that, Melky. Yeah, the shout command is not working.</p> <p>We got to figure that out. OCC, thank you for trying to, but we'll do it. We got to figure it out. Hold on, let me see if I can just copy. There we go. I can just paste it into the chat. Definitely give them a follow please if you haven't already and we'll definitely get a raid going over there soon. Oh look at all these folks coming in done nice. Hey different, thank you very good for being in the sub Well, I'm gonna in hot with the dunzo's I see y'all And doing good we're doing good I appreciate that busy The one job, please All right, let's go over this together folks come on back come on back I don't care how far you got you're doing. Okay. Let's go over it together And we've already seen this one. So we should be able to get through it quick Let me chill the music here. Done finally on time. I love it. Congrats.</p> <p>Well done, everybody. So many dones. Good on y'all. All right, let's take a look at this together. Got a confession, I used a purple background. All right, please give the H1 some padding on three sides. So we know we can use the shortcut, right? where we can have the four individual sides for padding. So we can just go ahead and do padding. And we could just say, if we want it like, let's say zero on the top, we could do zero and then 20 pixels, do 10 pixels and then 20 pixels. There we go. So what that would do is we would put zero pixels on the top, 20 pixels on the right, whoop, 20 pixels on the right, 10 pixels on the bottom and 20 pixels on the left. So now we have, we have padding on all three sides, right? Except for the top. Cool.</p> <p>Margin on just one side. So let's go ahead and put margin on the top then. Remember, we could do the same thing. We could do like margin and then do a value for just giving one size. We can also do margin hyphen. Let's just put it on the top. And we can do, let's do 100 pixels on the top. Great. Now we have padding on one side on three sides, except for one. And we have margin only on one side. Love it. A light purple background with light blue lettering. What did y'all do for the background? Lavender. Lavender for light purple.</p> <p>And then what did y'all do for light blue? Plum. Good one. Did sky blue last time. Let's stick to that. That was fun. Cool. All right, let's move on. We're going through this one a little bit fast because we've seen it before. If you're new, don't worry. Typically go much slower the first round. You can always catch up with the VOD in the past classes on YouTube. All right, please give the H2 significant padding on the top and bottom. Cool, so let's go ahead and do our H2. And then we're gonna do padding, but we're gonna use the two values so that it repeats.</p> <p>So we'll do 50 PX and then zero. And so what this will do is it'll do 50 on the top, zero on the right, 50 on the bottom, and zero on the left. A dark green border on the top and bottom. We can do border, top. We can do like three pixels, solid, dark green. And we can kind of do the same thing for border bottom. Or you just do three pixels, solid, and then dark green again, beautiful. And we'll figure out a shortcut for that. And then the last thing is an orange background. So let's just do background, orange. I feel like the eagle's green. Alrighty. Please give the section a thick blue border. All right, section, thick blue border, let's do 10 pixels, oop, border. Let's do 10 pixels, solid blue.</p> <p>Let's give it a height of 300 pixels and a margin of 400 pixels or more on the top. So let's do margin top and let's do 401 pixels. Cool. So we gave it a thick blue border. We gave it a height of 300 pixels and a margin top of 400. Nice. Last one. Let's go ahead and have all the spans. Go ahead and do thin yellow borders. So we'll go ahead and do border and we'll do one pixel solid yellow just to keep it thin. And then equal padding and margin on all sides. So we can just use the shortcut where we write it once, right, once, right. And so we're just gonna say padding. And we'll say, I don't know, 10 pixels on all sides, right? And then margin, we'll do the same.</p> <p>Let's just do margin, 10 pixels on all sides. And we just have one, it repeats on all sides, top, right, bottom, and left, yeah. Let's see how it looks. Let's see how it looks. Mama didn't raise no designer, but it satisfied the requirements, folks. Beautiful. I got a tear in my eye. Only a layout a mother would love, exactly. There you go. So cool, let's move on. Time for some layouts, folks. Time for some layouts. We have seen some layouts in the past. We've never done a full one with all the things that we've learned. And so we're gonna do that tonight.</p> <p>We're gonna see some real good layouts. For our layouts this week, we are using floats. Yes, that is right. The floats, the demons are back. Leon, why did you show us the magic last class? Why did you ruin it? Right? Why'd you ruin it for us? Right? We saw, we saw the magic. Two lines, no percentages, no weird hacks. It just worked. Why do you want me to go back? Yeah, the no flex zone. Exactly, no flex zone.</p> <p>Right now, we're all about floats. Can't tell you the number of one of my students that join a company and the first thing they get thrown into is floats. Floats are way harder to figure out. What's are way harder to do layout with so your first layouts the layouts that I'm asking you to do tonight and the layouts? I'm asking you to do for homework this weekend are all floats. No flex box. No grid Roger a thank you for your sub All right No floats. Sorry all floats. No flex. This is a no flex zone. No flex No, I gotta play the song. I will get the MCA Yeah, so all floats All floats, no breaks. Exactly. Remember floats. Remember floats are fighting to get into a corner.</p> <p>If you float something to the left, it's trying to go up. My Apple pencil keeps dying. If you try to float something to the left, it's gonna go up as much as it can, and to the right as much as it can, fighting to get in that corner. If you float it to the right, it's gonna go up as much as you can, and to the right as much as you can, and trying to fight to get in that corner. And the beautiful thing, when you float a lot of elements, they wind up sitting next to each other. And so that's the hack of using floats for layout. All right, a warning. A warning. Tonight, tonight, I need you to dig deep. There's something that you might not know about yourself. We all possess. Something deep inside of us sometimes it comes out. Sometimes it doesn't we all have something inside of us We all have a baddie inside of us. We all have the capability To be a baddie Sometimes we turn it on sometimes we don't So what I need you all to do Is to dig deep And find your inner baddie All right, because tonight I'm gonna write some bad code folks I'm gonna write some some some terrible code We're getting rid of the old saying and we're embracing our inner baddie and we're gonna write some bad code, all right? So be a baddie, write bad code.</p> <p>Now, why do I ask my students to write bad code? Let me tell you. The biggest thing, the biggest barrier, like you talk about any barrier, the biggest barrier my students have faced in the 10 years of me doing this, right? is the idea of things needing to be perfect, the idea of things needing to be best practice, the idea of things needing to look coherent. No. Not tonight. Not this week. Maybe not even this month. This night, this month, we're embracing our inner baddie and we're writing bad code. Perfection is for closers. We want to get wins on the board. We want to get layouts on the page. We don't want to be that student that spends three hours on a header. Don't be that student. Be a baddie, write bad code, right?</p> <p>Dig deep. Every single cohort I've ever run, the biggest mistake folks make, right, is trying to get things pixel perfect right out the gate. They're spending an hour just trying to get something a little bit more to the right instead of to the left, instead of getting the whole layout done, right? No client, no manager wants to see your amazing header. You can't go to a client and say, hey, I got a header, but nothing else. You can go to a client. Oh, here's the whole layout. We got to clean some stuff up. We got to make the header a little bit better, but you can see the whole page is here, right? I just need the weekend. So be a baddie, write bad code. Right? And so just as a reminder and just to, so I don't get as many Twitter messages as I know I'm about to get some Twitter messages. Guess what? Come here.</p> <p>I'm gonna write bad code. I'm telling all my students to write bad code. And if you send me a Twitter message, here's your reply. Get in. Fuck you. That's all I got to say. That's it. I don't care. Get the fuck out. All right, get out. Bye Get out Got him exactly This is tonight's not about perfection tonight. We embrace our inner baddie. We write bad code I'm gonna bring up just a reminder so that none of y'all forget Right in bad code. Here we go. It's a disclaimer The disclaimer and we're gonna leave Tina up there too.</p> <p>There we go Just so you know, I'm a baddie, I write bad code. That's it, that's my Twitter bio, I'm changing it. We're gonna do it live, I'm a baddie and I write bad code. Watch me. All right, so let's write some bad code. And we're gonna embrace that this evening. All right, we're gonna embrace it this evening. All right, first layout we're gonna do is TechCrunch. When I look at Tech crunch I see three quick things and that's what I'm gonna go with tonight. It's about being quick It's about being fearless about being a baddie and not caring about the haters on Twitter We just don't care I'm gonna leave you unread you a hater. I ain't got time for you. I'm gonna keep it moving Keep sending me those DMS keep giving me the engagement. Thank you He ain't getting a response. I'm a baddy, I write bad code. Hold on.</p> <p>All right, I just needed it. I needed it in my head. Needed it in my head. All right, here we go. I'm looking at this. This could be a lot of stuff, right? This could be, this could be, let's see. This could be, it could be a header. It could be a nav. I'm just gonna say a nav for now, screw it. I'm a baddie, I write bad code, right? All right, got a nav, I'm gonna call this a main. A main, and then I'm gonna throw this into an aside. And maybe the aside will have like a list, right? Maybe the aside will have like a list, but that's where I'm gonna start.</p> <p>Bad Coders Club. I'm gonna start with a nav, a main, and an aside. That's it. I'm writing bad code, I don't care. So in our starter code for today, we have these three spots for layouts. So I'm gonna start with the layout one, which is just the template. It has the viewport in it that we talked about last class. And I'm gonna go ahead and use a nav. And then I'm gonna have my main. and then I'm gonna have my aside. A lot of y'all asking, Leon, what about this? What about that? I don't care. I'm writing bad code. I'm trying to get a layout on the board.</p> <p>I'm trying to get some wins. I'm trying to get some Ws. It just doesn't matter. It never matters. It just doesn't matter. Get some wins and then come back and nitpick. Is it main or section? It's a main. For now, I'm a baddie. I'm writing bad code. Look in the corner. I'm embracing my inner Tina. Come on now. All right, let's look inside of here. All right, we got like an image.</p> <p>We got like an anchor tag for the login. And we got like, we got maybe like a UL with a bunch of stuff in here. So I'm gonna go ahead and do that. Inside my nav, I'm gonna have an image and I was gonna give it a placeholder for now. and I'm just gonna say a TechCrunch logo. And then in the main, we had like an anchor tag that was that login, right? Let's put it at placeholder for now. I'm just gonna say login. And then after that, it kind of seemed like a list to me, like a list of a bunch of like anchor tags probably. And so we'll put a placeholder in. And then what was the first one? Okay, search, that might actually be a form, but we'll just say search for now. Startups, search startups videos. Search, I'm just gonna copy this. I'm gonna put startups in here.</p> <p>And then I'm gonna put videos in here. Cool, and it doesn't have to be perfect. We'll come back to it later, right? Cool. Main is a thing. Yes, it is a tag, yes. You can look up on the MDN if you don't know what main is. One, two, three, four, five, six, seven, eight, nine. So there's like nine of them. I'm just gonna copy this three times. Well, copy it and paste it two more times. Boom, boom, whoop, so far. Boom, all right, so we got like nine of them there. That's good enough for me. You're not coding along, you're watching, we're talking, we're discussing, please don't frantically feel like you have to code along with this.</p> <p>No, this is too much, this is too much. Pay attention, ask good questions, and listen to the decisions I'm making here. Don't be frantically trying to get down too much. I mean, hey, if you're a baddie, go ahead and do you. That's all I gotta say, you know? but let me get in your way. All right, so we got our nav. Let's look at our main here. What China's fintech market can teach the world. All right, I'm gonna go here, main. That seems like, I don't know, we'll call that an H1. And so what China's fintech market can teach the world. The world, beautiful. And then underneath that, there's like a paragraph. And I am not gonna type out a full paragraph.</p> <p>So I'm gonna use lorem ipsum, right? I'm gonna use lorem ipsum. And so I'm just gonna keep the first sentence from that lorem ipsum. So if you're in VS Code, all you gotta do is type in lorem and hit tab and it'll give you like this filler code, right? So lorem ipsum is just filler code that devs use when they don't wanna type all this stuff out. So when I'm doing my bad code, I like to keep some of the text there just so I don't have a lot of work when I go back, right? But that's what I'm using there. So I didn't type all that really fast. I just used lorem and hit tab and it gave me all the filler text. Cool, and then there's like a span with somebody's name. I'm gonna say span and somebody's name. There you go, beautiful. So that's our, we got our nav on the left, our main with all this stuff inside of it, and then our aside. And if we look at our aside, I'm gonna actually say this is like a list, right? I'm gonna say this is like a list.</p> <p>I'm gonna say it's like a list of maybe just like H2s or 3s and a span. That's what I'm gonna do. In my aside, UL, and then each of those blocks It's gonna be LIs, and what's the first one? Who cares, I'm just gonna put a sentence of lorem. There we go, and copy that lorem there. So inside each of those LIs, I'll probably put like an H2. It'll have that stuff in it, and then I think there's like a span after, and that span had somebody's name. Cool, and so then I'm just gonna go ahead and take, there's four of them, so I'm just gonna have four of the LIs. Beautiful. FinTech is financial technology. Cool, so we have our nav, that had all the stuff there. Our main, which had all the stuff that was in the main area, and the aside, which was kind of like that sidebar with the four LIs inside of it. Cool. Let's pull up our CSS and let's open this in the browser to see where we're at. All right, so right now it's not too bad.</p> <p>Not too bad, right? Like the core is there. If we're following what chat, this is not too bad. We're following what, this isn't too wild. Progressive enhancement, right? We're following progressive enhancement, like our HTML is the core thing here. People could come. They could come to this site. They could see the, they could get to the links they need to go to. They could find the main content. They could see our content that's in the aside. Like it kind of works, but we're going to take a little bit further. We want to get that layout done. We want to get that layout done, right? So if we go back and look, this layout is really three columns, right?</p> <p>So I'm going to say the nav is what? 10% and maybe like 50 for the main and I don't know 40 for the aside so we can do like 10 50 40 remember this is a no flex zone this is uh floats for tonight and this weekend all right let's go in here. Let's get into our layout area and let's go ahead and say nav, nav, main and aside. And let's float them all to the left. And we're just going to start off the main, I'm sorry, the nav being, I don't know, the 10%, right? So we'll just, Let's redo the main and the aside, but we'll keep the width of 10% on the main, on the nav, I mean. And we'll come down here to main, and we'll go ahead and give that a width of 50%, and then we'll come down to the aside, and we'll give that a width of 40%. Cool. I feel pretty comfortable with this to start. And let's go ahead and go back to our site. And refresh. I mean, I mean, come on now. Come on now. Come on now. I'm a baddy and I write bad code, that's all I gotta say.</p> <p>I got my Twitter profile. First try. And so this is what I'm talking about, right? That took us what? A couple minutes to get a decent layout, to get the core stuff here, right? To get the core stuff here, right? Like we could have spent an hour agonizing, an hour agonizing over just this nav here, right? But now at least you have the core layout. And do we have to go back and make lots of changes, do lots of things? Yes, but the core is here. We got through the block of getting just something on the board, right? We got a win, we got a W. We can go back and refactor, right? We can go back and refactor. But for starting out, this is what you want.</p> <p>Get rid of the fear. right? Get rid of the fear. Get rid of all the nagging things that are in back your head saying you have to write good code. No, we're baddies and we write bad code, right? The sooner you embrace that, the sooner you give up on perfection and you just try and write code of any shape or form, your world changes. Free yourself. Write bad code. And in the process of writing bad code, you'll find things that work. You'll find things that don't work. You'll find things that you wanna change, that you might wanna update, and you'll get better at it. But you have to start. Don't let perfection stop you from getting a dub on the board. This is a dub, this is what I'm talking about. This is a layout.</p> <p>The core bits are here. Yes, we have to play with sizes, heights, widths. We have to move stuff around, but the core is here. Get here first, right? Be Tina. All right, next one. Khan Academy. All right, let's look at this. When I look at Khan Academy, chat, what do you say this is? What do we think that is, chat? It's a header, yeah, it's a header and probably like a nav, like you're saying, yeah, like a nav inside the header. And then that nav is probably like, I'm just gonna say an anchor tag for now. Yes, I know it's a dropdown, but I'm writing bad code. I'll probably say like an anchor tag there. Then definitely like a form, Maybe an H2, because that could be a logo, but it could also just be text.</p> <p>I'm not sure if they have like their own font or something. So I'm just going to say an H2 for now. And then a UL allies anchor tags that we kind of just saw in TechCrunch, right? And then when we look down here, this is probably like main and then main five split up into two sections, right? And this section probably has like an image. And then this section has like an H1, a paragraph. And then I don't like writing buttons. I use anchor tags. So maybe like four anchor tags that are pretending to be buttons. I think that would get us pretty much all the way to our simple Khan Academy site here. So that's what I'm gonna try. Let's try that. I'm gonna go to layout two that I have here and close this one out. And of course, you'll always get my solutions and things. Why do I hate buttons?</p> <p>Cause they're weird and I'm a baddie. I write bad code. I don't like buttons. We had some words. I don't like them. So I ain't gonna use them. Alrighty. Let's do our header. Inside our header we said that we had a nav, and then inside that nav we said we had an anchor tag right off the rip here, and that was courses. I'm gonna put the Octothorp as a placeholder, just means that we don't have the link yet, and it's just gonna be courses. Cool, after that we had a form, and whoop, and that form will have an input in it, And that input will be typed text. Yeah, I'm fine with that for now. After the form, what do we have here? We have like our H2. H2, and I'm gonna put Khan Academy.</p> <p>There we go, I spelled it right this time. Let's go win. Thank you, Leon, you're on fire tonight. Keep doing you. All right, so we got Khan Academy. And then we have like our list of links on the end. So, UL, ally, anchor tag, put our placeholder of the Octothorp, and then it was donate. And then what were the other two? Login, sign up. So let's just copy this. Login, sign up. Cool. Alrighty. Andy Art, thank you for the hydration, cheers to you. All right, so that's our header.</p> <p>Let's see our header off the rip here, let's see. It's not bad, it's just not sitting across, right? Like it's readable. We just want everything sitting next to each other, right? We just want everything sitting next to each other. So let's go and write some CSS here. And we got our box sizing, that looks all good. Let's come up here, we already got our header. And so I want every single thing inside the header to sit next to each other. So I could just float everything that's inside the header. If we look, all of our stuff is technically inside the nav. So let's go do header, nav, and how could I select everything? I can just do asterisk, all right? I can just do an asterisk. And people are saying display inline, inline block.</p> <p>We haven't talked that we said floats only. It's a no flex zone. I'm gonna I'm just gonna do what I know how to do Right, even if that maybe I didn't know about that stuff yet, right? Who cares? I'm writing bad code folks. It's bad But I do it how I know it. It's gonna look good Alright, let's go ahead and refresh Not bad, right? Not bad It's just not like there's no like space in between stuff. All right, like it's just in a So let's give it some, give everything some widths and maybe some margins so they're not sitting next to each other, right? Let's give everything a width. Maybe I could do like width 10% and then let's do some margin. Let's do like 1% to bring it off the top. Let's do zero for now and then 5% in between. And this is just me spitballing, right? I have no idea if any of this will work.</p> <p>Not bad, not bad, not bad. I miss Flexbox so much right now. Exactly, that's why we're doing what we do. That's why we're doing what we do. Guys, this is not completely wild. Like, it seems like our form is not taking up all the space. The form is all the space, but if we look, the input's only taking up, oh, because the input's at 10%, right? We said everything was 10%, and so the form's not taking up everything. Maybe if we did something funky. Give me if we did this real quick. Right, if we do that, right, if we do that, then it's just the top level stuff, right? It would be just the top level stuff. It would be like just the anchor tag, the form, the H2 and the UL would be that percent, right? It wouldn't go any deeper to apply that percent and stuff like that to the sub elements. So now we can see like the anchor tags are no longer sitting next to each other, right?</p> <p>But the form is like the full size now, right? Okay. Okay. So let's think about those forms, those LIs. Maybe we can target those LIs. Let's do nav. I'm gonna do direct, so I don't have to worry about anything further down. Let's, can we float them to the left? And can we get them a certain size? Let's just float them first. Let's see if that does anything. Did nothing. All right, if we inspect. Not sitting next to each other. Maybe they don't have enough room, though.</p> <p>Maybe they don't have enough room. See how it's taking up that full width? Maybe because they don't have a width, they can't sit next to each other, right? Or right now, we don't have enough specificity either, right? We're saying header, nav, of asterisk, we don't have enough specificity either. So if we did like header nav li, we came back. Cool, now we know we at least have enough specificity. Let's try giving them a width, I'm curious. Let's do 33% because there's three of them. Oh no, bugged out, I don't know what that is. Cool. Why didn't it work? Why didn't it work? Tell me. Why is it not working?</p> <p>Can, what would nav write caret li mean? Is that doable? Look, look at the, look at the index.html. UL, L-I, right? So if it's a direct child, there exists no nav direct child L-I. They're all inside of the UL. That direct child just wouldn't work, right? That's actually working against us. So we gotta get rid of that direct child. There we go. There we go. Okay, got him. Okay sitting next to each other looking good. Uh, I don't like The dots though How can I get rid of the dots? This style none, let's try that Cool Boom, dots are gone.</p> <p>I see the Anki cards are working for a lot of y'all. Exactly, boy, I see it too. All right, so why did I put list style none up here and not on the LIs? Where does that list style have to go? What does it have to go on? Yeah, it has to go on the UL, has to go on the UL. All right, we got the header almost there. Like, I feel pretty good with this header so far. I think most of our stuff is here. Let's go ahead and take a look. Like, that's there. Come on now, that's there. Yeah, we gotta add some height, maybe a little bit thickness, but it's the layout. Like, it's almost like, come on now. You can't even tell the difference, folks.</p> <p>Look at that, night and day, same thing. All right, let's go ahead and let's finish up this layout and then we'll take our break. Finish up with this layout and we'll take our break. We have our main with two sections inside of it. And so if we have two sections, we want to sit next to each other. What should we do? We want the two sections to sit next to each other. What will we do? Float left and give them a width, right? 50%. 50%. Float left. Beautiful. That'll get them sitting next to each other. And I'm just gonna give them some height.</p> <p>I know right now, I wouldn't necessarily always do this, but I'm just, I'm being a baddie. I'm gonna give them some height. I don't know, 600 pixels. Just so that the container opens up a little bit. I might put some borders on them, I'm not sure. All right, so we got that. If we look at our, let's just save that and open it real quick. Let's just see. Cool. Oh, we didn't even do the, did we even do the main yet? Let's see. Oh, we didn't do the main yet. So let's do the main. And then we're gonna have like a section and another section. And in this first section, we just have our image.</p> <p>What is it? What is the image? Kids playing on computers. All right, kids playing in computers. And all I'm gonna do is I'm gonna just screenshot it. Don't, I don't have the image, so I'm just gonna screenshot it. Screenshotting is different on each computer that you're on. On Macs, it's just Command-Shift-4. Yoink. All right, so I got that, I got that screenshot. I am going to take it from my desktop. So I'm gonna, it's on my desktop, enable it con. And I'm gonna bring that con image. I'm just gonna copy it. And I'm gonna go to my class folder from today.</p> <p>I know you're not seeing this. But I promise you that's what I'm doing. I'm gonna go to layout two. I'm just gonna drop the photo in there. All right, so here's my layout two folder. What I'm going to do, and I'll show it to you. You find it, I know it's a little tiny to see, but I have a con photo that I just screenshot it. I'm just gonna drag it into my layout two folder, right? We're hacking NFTs exactly. This is how you hack NFTs, right? So we dragged our con folder in here. So that means for our image, we can now use it. You can actually see the image right here now in my little tree view. I'm gonna call it con and it's a PNG. So PNG, cause it was a screenshot and it's kids learning was be the alt.</p> <p>Cool. We got our image. And then this other section had some text in it. What's the text say? For every student, every classroom, real results. So that's an H1. for every student, every classroom, real results. Boom, okay, and underneath that was a paragraph and then some buttons. Let's go and do our paragraph. Let's do another lorem, too much. I wish they could just like give us, like I want lorem half. There you go, we got our lorem. and then we have the anchor tags underneath of it. So I'm just gonna go ahead and put just, I'm not even gonna put them in a list, I'm just gonna be a real baddie right now and just put anchor tags. And I think it was like, what was it, learn?</p> <p>Learners, okay. And I'm just gonna put four of them. That's it, that's it folks, dust it, we have our main 50% height floating left so they should be sitting next to each other, let's take a look, refresh, not bad, not bad folks, That's not bad, Tina would be proud indeed. Let's go ahead and let's clean this up just a little, just tiny bit, tiny bit, tiny bit, and we'll take our break. Give it a, I don't know, width of 50%, let's see. There we go, and I just wanna bring it down just a little bit. I want to bring it down just a tad bit. And so let's go ahead. Let's Let's go ahead and just give them a margin top of 200 pixels just to push them down a it. First try. I Whenever I do this, I always think of it. I even queued it up one of my favorite memes Spicy meme. Oh, Jimmy, if you know this meme we could be friends Whenever I do this, I always remind reminds me of the anybody ever see leprechaun say yeah You may remember that meme. Yeah, I pulled it up already. Here we go Everybody see leprechaun say yeah That's what that reminds me of.</p> <p>This is a classic OG meme. Everybody see the leprechaun say, yeah. Yeah, that's what I feel like. All right, folks. Come on, look at us go. Look where we were. This is three weeks in, folks. We're dipping our toes into the fourth week. Look at us go, building layouts. Look at us, being baddies, writing bad code. Let's go. Oh, oh, that's what I'm talking about. TechCrunch, where you at? Ah, all right, all right folks. When we come back, we're gonna take a look at the BBC.</p> <p>All right, so come on back. Five minutes on the clock. If you're new around here, I'd like to be healthy. If you're able, please get up. If you're able, let your eyes focus on something else that's not your screen. I'll be getting my Tina twerk on off-screen y'all want to see that you know what you got to do million channel points only fans could be yours alright folks take a break well deserved well deserved and I will see you all here in five minutes we're gonna move into the BBC I took a peep at the CSS while we're moving on I Was gonna be late, huh? got got All right, folks, come on back, come on back. All right, now, I'm moving through this at a pretty good clip. But what I hope you're realizing is that this is how I start all my projects. You'll think I'm joking, but this is how I start. It's how I start. I make sure that I worry about getting most of it there. I can always come back and make it better. Do not let perfection get in the way of you getting something started. No one will care.</p> <p>No one will ever see this. It just doesn't matter, specifically when you're starting out. You wanna just try and get into a lot of these layouts early on, make mistakes, and you carry stuff through each one. I switch between my layouts too. So like your homework is going to be in doing these, right? Your homework is going to be to like do these on your own. Right? And for me, sometimes I get hung up and I'm like I have no idea how I'm going to tackle this nav. So what I'll do is I'll move to something else. Right? And then I'll come back. Right? Hey, thank you for the posture check. I think I'm doing good today. Thank you.</p> <p>Get me in the right mindset, right? But I'll jump around too. Like if I'm starting to bang my head against the keyboard, it's probably time to take a break. It's probably time to get up and diffuse. And maybe even might be time to move on to a different project and then come back at the other one with fresh eyes. Pomodoro is a lifesaver as you're working through this. Don't just use Pomodoro for like studying, use Pomodoro for your work as well, right? I say the rule is 20 minutes. If you're spending more than 20 minutes on something and you haven't gotten anywhere, it's time to move on. It's time to diffuse, time to take a break, it's a time to move on to something else and then come back, right? But with these layouts, I need you to be a baddie, write bad code, it doesn't matter. Get rid of this idea of pixel perfect, get rid of this idea of perfection. That's gonna come way later down the line because as you stumble through these layouts, right as you stumble through these layouts You're gonna pick up little things each time. Wait, I didn't really understand how to like get space between stuff Right, right. I didn't really know how to push stuff down But you push yourself you use the MDN you ask for help you ask You ask for help.</p> <p>I I loved when we rated Splashly, I think it was on Tuesday, and the thing they said, the biggest thing that they wish they had done differently, right, is ask for help. Now, don't be the person that says, look at my code. Nobody wants to look at your code. Be the person that says, I have this very specific issue. How do I fix it? How do I do it? This is the thing. Here's the screenshot, here's the code. How do I do that thing, right? Don't post can anybody look at my code? Nobody wants to look at your code, but people want to help you, right? So there's something that you don't understand that you don't know ask the question give the screenshot give the code How do I break it down? How do I do it people want to help with that and the biggest thing the biggest thing? Early career engineers get wrong is they don't ask questions They they they give up in the silence That's the worst thing that could ever happen is you give up in silence. You say, this is too tough.</p> <p>It's too mentally draining. I don't want to do it. And you just click out of everything. We never hear from you again. Go out with a bang. Go out with a, none of this makes sense. Can anybody help me? I don't get what's going on. Don't give up. Be a baddie. Write bad code. Ask for help, right? And the thing too is that I really need it to sink in, is that you take the best engineer in the world and they've never, right? They've never written HTML and CSS, they're gonna do exactly what we're doing tonight. They're gonna learn, they're gonna make mistakes, they're gonna break stuff, they're gonna write bad code.</p> <p>And in that process, find stuff that works and carry that to the next one and carry that to the next one. And then they come back and redo them over again. And then they delete everything. The best thing you can do, the best thing you could do, I'm not gonna do it because I need to share this with you after class. The best thing you do is Control A, boom. That's the best thing you could do. And then do it again. I was on, that was a big lead, I'm sorry. Best thing you can do, Control A, boom. Delete it, do it again, right? And then you finally put it in again, and then boop, gone, do it again, right? Get that repetition in, right? Right, get that repetition in and don't put it on your brain that it has to make sense. You could have sat here this entire time and not understand one blessed thing that I just did across these two layouts. It just doesn't matter.</p> <p>We're writing bad code, right? Come back, watch the VOD, slow it down, speed it up, do what you gotta do. Look through the things that I talked about that I made my decisions on, right? As soon as this class is over, the VOD comes up. Pull it down. Look at the decisions I made. Think about your decisions, right? What would you have done differently? How would you have done it? How would you have written even worse code than me? Cool. Woops. All right, next one we're gonna do the BBC folks. So we got an open up layout three here. Can we use classes on this one?</p> <p>Yeah, you can use classes if you want. I'm just doing it without them because I think it's fun to try it without them. But yeah, classes definitely would have helped. and we wouldn't have ran into that weird specificity thing. You know? You know? Cool. Let's take a look at this layout here. We have the BBC image, and what I'm gonna try and break this down into is kinda like the big pieces that we see here. And I'm gonna try and carry some of the stuff that we've seen in the other layouts into this one and see if it'll help us. So I'm kind of seeing like three big areas. Yeah, I'm seeing three big areas here. So I'm seeing a header. I'm seeing a section. and I'm seeing another section.</p> <p>And so there's like the three big areas I'm seeing as I'm writing my bad code. And I think the header is kind of similar to what we've seen already. But this section down here, it has like two sections inside of it. This one's pretty straightforward, like H1 paragraph span. This one's a little tricky. This section has four sections inside of it. And each one of those sections has like an H2 and a span. And then this one down here is like three sections inside of it. And each one of those sections has like an image, maybe like an H3, a paragraph and a span. And so then that'll just be copied three times to be three. Yeah. And so that's kind of how I'm visualizing this layout. And when I'm looking inside the header, I see an image, I'm just gonna say an anchor tag for now. And then, well, this is all in the nav too. Then like a UL with a bunch of LIs and then maybe like a form at the end, right?</p> <p>So nothing too wild. A lot of the stuff we've kind of already seen. And so let's get into it. Let's write some bad code and see what we come up with. Start with the HTML. I just like to start off with my HTML. All right, so let's go ahead and do our header. And then inside of our header, I think it was pretty clear that we have a nav, like all that stuff at the top was navigational content. It was, it was stuff that's gonna be at the top of every single page. I'm gonna say nav. And then inside of my nav, let's see what we started off with, an image and then like an anchor tag. So let's just do an image. And I'm just going to put a placeholder for now. And so we say this would be a BBC logo and then an anchor tag. And that anchor tag just said, sign in.</p> <p>I'm British of them. Sign in. And then after that we have a UL with one, two, three, four, five, six, seven, eight, nine, nine allies again. What's up with these navs having nine? So ul, li, anchor tag, let's just put a placeholder, and then news. And we're gonna need eight more of these johns. One, two, three, one, two, three. Let's do one more. There we go, cool. And then the last thing we saw in this header was like the form. There's also like this like weird dropdown, but who cares, form. And we'll put an input in here. And I think that'll be good for now. And let's just start trying to get, let's just trying to get the, Let's just try to get the nav here. Yeah, I think let's just get this header going.</p> <p>If we look at this header, this header has some height to it. It's all black. I think we can, and the text is all white. So maybe we start there with our CSS, and then we'll come and do the main and everything else. Now, I kinda like to go by big section by big section. So you kind of saw me say that there was like three areas I saw, the header, the other section, and then the other section. So I would kind of work through them in those three areas. I would probably do the header, right? And I would do the section, then I would do the section. And that's how I would go. I'd do one and then the CSS, the other and then the CSS. Beautiful. All right, so header. Let's give it a height of like 100 pixels. And let's go ahead and give it a background of black.</p> <p>and I'm gonna give it a color of white. Now, the reason I'm giving it a color of white is because I want the, so there's something called inheritance where some elements can inherit their color from the parent. And so in case there's any inheritance, I just want it to grab the white from there. I might have to use white somewhere else, but that's why I'm doing it. Cool. Let's do the same trick that we did before. If we want all the nav elements to sit next to each other, right? Right. You want all the net, all the elements in the nav sit next to each other. What can we do? I've already seen it. Yeah. So let's go ahead and do nav, everything, nav, everything. Let's make it float left. is that it'll get everything in the nav floating to the left.</p> <p>Let's make sure that it's a width. Maybe we'll just start off. I always pretty much always start off with 10% when I'm being a baddie, you know, just to start off. Let's also just do color while we're here, just in case there's some inheritance. And then you might've ran into the reading of like this idea of some things like wanting to sit next to each other or not sit next to each other. And sometimes it comes down to like this display property. We're gonna talk more about display properties But for now, I'm just gonna do display block just so that everything is treated as a block like new We have to worry about like inline or anything like that. Everything's just a block. Yeah Well All right, so we got our nav everything's floated percentage should be colored let's see where we're at What about making them this or making them that I don't care I'm right in bad code There's not there's no there's no right or wrong here. It's just whatever comes in the brain and goes out the other side There are so many things that you could worry about that you could do that's better That's more appropriate that would make your life easier, but I'm a baddie right and bad code. I don't care I just want to get a win on the board. I'll come back and make everything in line I'll come back and get you make everything flexbox. I just don't care. I'm a baddie right and bad code. Let me do me It's not bad, not bad.</p> <p>We got stuff kind of sitting next to each other, kind of running into that same issue that we saw before, where they're kind of like, they all inside are not getting enough width and that the actual element itself is not getting width. And so let's make sure things have the appropriate width width. We don't want the UL. Like right now, right now this UL is 10%. So there's no way, right? There's no way that we're going to get all those LIs sitting next to each other if they only have 10%. So I think that's one of the things we have to fix in our cascade. I think we have to fix that UL to be like bigger, maybe like 50, 60%. So I'm going to do nav UL, and I'm going to give it a width of 50%. Let's save that. Let's come back and see where we're at. Woo! Aha! Let's go. Okay.</p> <p>Look at me now. Let's do the same thing then for the form while we're here, right? That form is just, if we highlight it, if we click inspect, we can see that the form is taking its 10%, but the input is not. The input's like not doing its full width. So let's make the input full width. Nav form input. And let's just make it a width 100%. Let's see. Oh! Look at me now. Shazam, exactly. All right, I'm feeling pretty good about this. I don't think there's anything else I really want to change here, except maybe like making this a little bit smaller. So maybe like instead of 100, actually let's use the inspector here. Let's right click inspect.</p> <p>And then on the header, I'm just going to come down to the header where it says a height of 100 pixels. And once you click on that 100 pixels, you can use your arrow keys. And so I'm just gonna hold down the arrow key until I think it looks good. 55 looks good to me. 55 is where I probably want it to stay. So I just used the inspector, right click inspect header, and then went to the height and then held down the arrow key until it looked good. 55 pixels, let's come back and make this 55 pixels. Cool. I'm feeling pretty happy with that. Let's compare it to the image, BBC image. Yeah, we don't have the logo in there yet, but the actual kind of like layout of it, that's pretty clean. All right, I'm happy with that. All right, so we talked about having that header that we did and then we talked about having two sections. Let's get both of those sections on the board here. Section, section.</p> <p>Cool. And then in this section, let's do the bottom section first. The bottom section I think is a little bit easier because it's just sections. And then inside of each of those sections was, let's look at the image. An image, an H3, a paragraph and a span. an image, H3, paragraph span. Do placeholder for now. And we'll just put, Joe Byron. There we go, Joe Byron. And after the image was an H3, Okay, Biden and I'm just gonna use Ipsum, it's too much. There we go, boom. And then after that was a paragraph, right? That was a paragraph and let's get a little bit more text than the H3 was. And then after the paragraph was a span and it was U.S. election, U.S.</p> <p>election, 2020. Cool. And then the cool thing is that this was just like three of these were exactly the same. I think there was like an H2 here too. I think that was like H2 that said news, right? So what I'm going to do is I'm going to take this section. We outside, we outside baby, we outside. We ain't outside, I'm inside. I wish I was outside. Cool. Leon doesn't listen to us plebs. Not right now, I'm a baddy, I'm writing bad code. I'm in my zone. All right. So that looks decent, right?</p> <p>So if we have these sections, what do we wanna do? We wanna make these, how are we gonna get these next to each other? What are we gonna do, chat? How could I get those next to each other? Load them left, load them up, load them up, with 33%, repeating of course. All right, and this section is, we could give it like an ID or a class, but we could also do like header, plus section plus section. I'm actually gonna make this a main just to see some other tags. Actually, this is a main. I like this being a main, not a section. Like that's the main area of the site, right? Like if we look at this image, I'm gonna call this a main and not of a section. And so what we could do is we could do main plus section, and it would give us only this section. and then we could do the sections inside of it. Yeah, that's the move, that's the move. All right, let's go back to our CSS.</p> <p>We can do main plus section, and then the sections that are immediately inside of that section. And we're gonna give them a width of 33.33% repeating, of course, and then we're gonna give them the floats of the lefts. Cool. Yeah, because if we look at our HTML, main plus section, we're gonna grab that containing section, then we're targeting all the sections inside of it. Let's see what we got. Let's see what we got. Oh! Woo! You Looking real good looking real good. So I gotta say looking real real good All right, I think we saved the more difficult for the end. All right, we didn't do the main yet, so let's go back and fill in our main. Look at the image real quick. The main, I'm really seeing as two, I see two sections inside the main. One, two, and then this section has four sections inside of it. So let's try that.</p> <p>Now let's go back to our main. What does the A stand for on your cup? It's the beginning of my wife's name. Yeah, for for one of our wedding gifts, they gave us matching mugs with the first letter of each of our our names. So yeah, I stole her cup. He caught me. I got got. It was clean. What can I say? All right. So in the main, we had that I'm going to say like an H2 for now that was like, welcome Boom, to the BBC, news hour. All right, then we had our section, and then we had our section. Roll up like section. If you could tell me where roll up like section comes from, like that's like next level you being in my head. I'll take a I'll take a quick gander at chat real quick I'm just making sure Close wolf and you're close.</p> <p>It is grime is a grime lyric from Harlem Spartans Hey briefcase, there we go. I love it I hope you watched past classes and got it from there. Not like we're on the same level. Good job briefcase It's kind of one of the most iconic songs in grime music. When the gang pull up, are you gonna back your brethren? Top bars. All right, so we got this section. We know there's an image in it And I don't know what the image was, what's our placeholder? Two people, there we go. And then there was a, like a, I think like a, I think we might call that our H1, peace deal. H1, historic peace deal. Then after it was a paragraph, we'll just use some lorem for. And then there was like a span to yeah, Middle East. Cool. So that, I think that handles our first section that's on the left.</p> <p>And then the section on the right was a little bit more tricky because there's four sections that have Americans go home. Canada, so we're just gonna say that's like an H H 2 h 3 Let's just say h 2 for now h 3 h 3 and then the span And then span and I think it was just like what was that saying us Canada Canada About Drake, that's Aubrey to me. Lamborghini whip. Green, green doors. Or is it, Lamborghini doors on my green, green whip. I'll keep throwing them out there. I'll see if you're in my head or not. Where's that come from? All gas baby, exactly channel five. All right. So there's four of them. So I'm just going to copy this and paste it more times. Well, we have our section one, two, three, four. We got our main one up here. So I think where we'll start is I want these two sections, these two big ones to sit next to each other.</p> <p>So if I want those two sections to sit next to each other, I'm just gonna do 50% width and float them exactly. I see some people in chat saying that already. So we'll just go here. We'll say main and we'll be careful because there are subsections. So we'll use the direct child, right? All right, and we'll go ahead and do width 50%, and then I think we're gonna have to give them a height because there's stuff inside, and we could figure it out, but I'm a baddie writing bad code. Let's give them a width of 500 pixels. Just keep it channel five, you know, 55th, and then put them left. There we go, I'm a baddie writing bad code. All right, so that should get them sitting next to each other. Let's see where we're at with that. Cool, cool, we're almost there, we're almost there. We're almost there. All right, the last big piece is this four over here. So let's do that, let's just finish that up.</p> <p>That's just going to be main section and then sections that are inside of it. Yeah, that should work. Let's see, main, I just want this section though. So I'm gonna do main, section, plus section, section. Right, because I just want the ones that are inside of here. So I'll do main, section, plus section, section. That should work, yeah. And of course we could do classes, we could use ID, but where's the fun in that when you're writing bad code? So main, section, plus section, oop, not asterisk, plus section, section. So give me the section that's inside the sibling section that's inside of main. So if we go and look at that one more time, just gonna know that's kind of confusing. We're in main, we're gonna look for not this section, but this section that is the sibling and then target all the sections that are inside, right? And we want them to sit next to each other. So they should be 50% width. And if the height's 500 pixels, we'll make them 250 pixels tall, right?</p> <p>So let's do that. We'll give them a width, 50%. And then height, I think we said 250. 50 and then we need them to sit next to each other. So we got to float them. And let's actually make sure we can see them and do a border on pixels, solid black. It wouldn't be 25% width cause there's two of them sitting next to each other. Right? There's two of them sitting next to each other. So it's 50, 50. Let's go first try you Let's look at it. Let's look here's the image header, two of the big sections sitting next to each other, three at the bottom, and then ours. Come on now. Now of course, there's like spacing we gotta get right, there's text we gotta get right. I probably bring things a little bit, stress things out a little bit, but in terms of a few minutes to get a core layout done, that's it.</p> <p>I didn't spend time needling little things, I just got into it. I didn't know what to do in certain parts, right? Like I kind of was like, let me try this. Let me, let me, let me see if this works. Let me, let me touch this. Let me move that, right? And that's the process I go through. I just, I get playful with my code, right? I get playful with my code. And the sooner you can let the inhibitions go and have fun with it and knowing that you're gonna probably code yourself into a corner, or you're gonna get lost, things aren't gonna work. The more you play with it, the more you tap into your inner body and just write bad code, the better this is all gonna go for you. And I know that's a lot to ask for some folks. Some folks really hold on to perfection. You gotta let it go. Gotta write some bad code, right?</p> <p>Cool. So I will of course share all of these quick layouts that we did together. I will make sure you have all the code, right? I'm gonna ask that over this weekend, you try these on your own, right? You look up the things that you get stuck on. You look at my code. Don't be afraid to look at my code if you get stuck. Oh, maybe, why did Leon do that? Would I have done something differently? Would I have not used a main or could I have used display inline? Like think about it, play with it, have fun with it. The sooner you start to have more fun with your code, the better this is all going to be. Get rid of that saying or something that's inside your head that tells you it has to be great, it has to be perfect. Everyone starts here writing bad code. Write bad code, get some wins on the board.</p> <p>Refactoring is for closers. Cool. Let's keep pushing. We got a few minutes until class is over. We did our layouts. A lot of y'all were kind of giving great suggestions as we were going along, so good stuff, everybody. All right, we talked about responsive websites, making sure our sites look good across all devices. I just want to get some repetition in and then we'll do our raid as always and spread some love and positivity around. So let's get some reviewing real quick with our last 10 minutes. And then I'll talk about the homework and the expectations over the weekend. And then we'll do a raid like we always do. Cool. So we used to have fixed websites that were stuck to one pixel size of width, and no matter what you did, they didn't respond to the size of the browser. Now that's in direct contrast to a site that's responsive, where the site will look good across all different devices, right? It'll look good on mobile desktop laptop tablet.</p> <p>It doesn't matter. I'm gonna say bye to Tina. All right, Tina There we go Good Tina breaks gonna throw back out exactly. All right So we talked about the core things that make a site responsive Right has to be fluid right all the stuff we did today all the things that we just did today like they're fluid, right? I did everything in percentages. That's not bad, folks. That's not bad. It's fluid. We got that fluid underpinning, right? And so since we have a fluid underpinning, it looks good in between screen sizes, right? One thing that we didn't do too well, though, as we were doing this was making our fonts and things elastic, right? Maybe that's something we would go back and change first is making stuff elastic sizing using ems and rems. And then we would have to start making content decisions, right? Let's start making content decisions. We have to start using media queries to make those content decisions.</p> <p>But remember, fluidity comes from everything being in percentages. Elasticity comes from using ems and rems. And next week we're going to spend more time with ems and rems. I know it's a tricky topic. The idea is that it's just a responsive unit of measure, meaning that we can set a base font size and then one M is representing of that base font size. And so the beautiful thing is we could do our whole site in rems. And if we want it to double the size, right? If we want it to double the size, we could just go ahead and double our HTML here. Yeah. But the last really important thing, right? The last important thing when it comes to responsiveness is content decisions. What should remain on the screen? What shouldn't be there? Should we get rid of this list? Should we get rid of our sides?</p> <p>What happens when we get to that screen size? And so we need fluid underpinnings, elastic underpinnings, and we need good content decisions. Cool. How do we make content decisions? Like what helps us make those content decisions, Chet? Our media queries, exactly. Our media queries are what help us to make sure that we are able to make those content decisions at different sizes. Here's an example of a media query, right? Where anything less than 600 pixels would be colored blue. And we coded a media query last class. I'm going to save it because we're getting a little long here. Remember, we want to have this meta viewport at the top of any of our templates to make sure that our media queries will work across devices, not just on desktop, but they'll work on mobile, tablet. Remember, we signed a lifelong pact to make sure we never set user scalable to no, which would stop people from pinching and zooming, which is one of the biggest accessibility devices that we have available. Your homework was to make this responsive. You should have already turned it in.</p> <p>If you don't, you can turn it in after class if you need to. But this was the homework to make it responsive. We're going to go over it together on Sunday. So on Sunday, come back. We'll have office hours. We'll review some of the layouts. We will review this layout specifically. We'll have time for questions. and if you're kind of stuck on any things that we did today or that we've done over the past couple days, come to the office hours. We're gonna get more repetition in, we're gonna get more practice in, and we're gonna have some fun with it, okay? Homework. There are, in our folders for today, there's a lot of stuff. A lot of stuff to be had for homework this week. And so I just wanna make sure everybody's on the same page and that we go over it together. in the materials folder for today, we had the layouts that we did together.</p> <p>So we have these class layout photos, the BBC, the Khan Academy, the TechCrunch. Part of your homework this weekend, right? Part of your homework this weekend is to go through and do these again, right? Go through and do the BBC, do the Khan Academy, do the TechCrunch in the same vigor that I did it. Be a baddie, write bad code, floats only, right? No flex, this is a no flex zone until we get out of next week, right? Play with your percentages. The reason why I really also like it too is because it forces you to really understand the box model, understand how stuff are sitting next to each other, and so no flex zone, floats. Go back and do the BBC, do the Khan Academy, do the TechCrunch, make sure you feel good with those. And then there's two other layouts that I want you to work through. There's this homework layouts folder that I have for you. I want you to work through those as well. So the first one is level ground. Level ground is a client that we had at Resilient Coders. Way back in the day, Resilient Coders had an agency and we used to do projects for other nonprofits.</p> <p>And so this is one of the clients we had and what we did. And here's kind of like what a wireframe would look like that comes from a designer, it's kind of all boxes and it's a pretty clean layout to try for one of your first real layouts, right? You got kind of just plain text and boxes. And so if you can get through the BBC, you can definitely do this layout. And so be a baddie, write bad code, try and get it as close as possible, right? Footer goes wild, yeah. Don't don't folk don't don't spend four hours on the footer be a baddie write bad code get as close as you can right, and then there is one other one that is Another want you to dip your toe into it won't be due until next Thursday. I want you to try this layout I know these look scary at first, but they're not it's just some text some sections And that's it. It's exactly what we just did right. It's this is BBC just in a slightly different way And that's the beauty of it right at first. You're gonna be shooketh right at first You are shooketh, but once you do BBC you see the patterns your ear everything opens up You start seeing things floating around you right and you start to realize holy crap This is the bottom of BBC with one more. So instead of 33, it's 25. This is exactly Khan Academy, but we flipped it. We flipped it. This is exactly Khan Academy, but we just put the text on the side and the image on the right, right?</p> <p>This header is easier than the headers we did together today. So don't look at this and get scared. Every single pattern that's here, you have already done. You've already done everything on this page. Then, take it another level. Give me a media query, make it look good on mobile, right? Don't let that doubt creep into you. Get in, play, build, start to see the patterns, build up. There's a reason we went from TechCrunch to Khan Academy to BBC to this. Those patterns build, right? Don't worry about getting it pixel perfect. Just get your win on the board. Be a baddie, write bad code. Then folks always want to, folks always say, Leon, can I push? Is there some push work I can do?</p> <p>I got through this. I want to push. Boom, here you go. That's your push work. Have fun. It's your push work. Have fun. You want to push? There you go. Push. This is it. Build a real site. Get this layout done, right? That's your push work. So you ask for it.</p> <p>That's your push now. I got this and This from dribble dribble is a place where folks can share their designs. So these are not my designs You can see max made this one and you can actually I'll actually have the link in the files and then Surgy made this one as well. So these are like not my designs. These are just coming from dribble So definitely I'll link to the creators as well. But yeah, this is your work We got some things to get done this weekend, folks. We saw some layouts, we've unlocked their inner baddie, we're gonna write bad code, and we're gonna start to get some of this stuff done. So please, I know it's a lot, I know it's hard, but I know that you can do this. I know you can do it. And so let's go ahead, let's get a raid going, let's spread some love and positivity. I really enjoy this person. They do a lot of data science-y stuff, specifically in sports, which is really cool. So we're gonna go over to Nick Nguyen, and we're going to give them some love, positivity follows, they're an amazing streamer. And if you wanna play some CSGO, we're playing some CSGO later tonight. I'll share it in our channels when the server goes live.</p> <p>Feel free to come play, hang out, test the server with me, and we're gonna do this raid. So let me go ahead and queue up the raid real quick. You always wanna do the raid, because you get the sweet, sweet channel points. And I'll see you all over there. All right, folks. Peace, have a wonderful evening. Hope you had some fun this class, writing some bad code. I'll see you over there. Let's raid. you</p> <p> End of Transcript</p> </article> </div> </section> </div> </div>  <div id="sidebar"> <div class="inner">  <nav id="menu"> <header class="major"> <h2>Sidebar Menu</h2> </header> <ul> <li> <a href="#" class="opener">Transcripts</a> <ul> <li><a href="01.html">Class 1</a></li> <li><a href="02.html">Class 2</a></li> <li><a href="03.html">Class 3</a></li> <li><a href="04.html">Class 4</a></li> <li><a href=”05.html”>Class 5</a></li> <li><a href="06.html">Class 6</a></li> <li><a href="07.html">Class 7</a></li> <li><a href="#">Class 8</a></li> <li><a href="09.html">Class 09</a></li> <li><a href="10.html">Class 10</a></li> <li><a href="11.html">Class 11</a></li> <li><a href="12.html">Class 12</a></li> <li><a href="13.html">Class 13</a></li> <li><a href="14.html">Class 14</a></li> <li><a href="15.html">Class 15</a></li> <li><a href="16.html">Class 16</a></li> <li><a href="19.html">Class 19</a></li> <li><a href="20.html">Class 20</a></li> <li><a href="21.html">Class 21</a></li> <li><a href="22.html">Class 22</a></li> <li><a href="23.html">Class 23</a></li> <li><a href="24.html">Class 24</a></li> <li><a href="25.html">Class 25</a></li> <li><a href="26.html">Class 26</a></li> <li><a href="27.html">Class 27</a></li> <li><a href="28.html">Class 28</a></li> <li><a href="29.html">Class 29</a></li> <li><a href="30.html">Class 30</a></li> <li><a href="31.html">Class 31</a></li> <li><a href="32.html">Class 32</a></li> <li><a href="33.html">Class 33</a></li> <li><a href="34.html">Class 34</a></li> <li><a href="35.html">Class 35</a></li> <li><a href="36.html">Class 36</a></li> <li><a href="37.html">Class 37</a></li> <li><a href="38.html">Class 38</a></li> <li><a href="39.html">Class 39</a></li> <li><a href="40.html">Class 40</a></li> <li><a href="41.html">Class 41</a></li> <li><a href="4445.html">Classes 44 and 45</a></li> <li><a href="4647.html">Classes 46 and 47</a></li> <li><a href="48.html">Class 48</a></li> <li><a href="4952.html">Classes 49 through 52</a></li> <li><a href="5355.html">Classes 53 through 55</a></li> </ul> <li> <a href="../pages/resourcelinks.html">Resource Links</a></li> </li> </ul> </nav>  <section> <header class="major"> <h2>Get in touch</h2> </header> <p>Feel free to contact me with any questions or feedback</p> <ul class="contact"> <li class="icon solid fa-envelope"><a href="#">Email: Tre_Scinta@outlook.com</a></li> <li class="icon solid fa-envelope"><a href="#">Discord: @Blind.Wolf</a></li> </ul> </section>  <footer id="footer"> <p class="copyright">© Blind Wolf Web Development. All rights reserved. Produced By: <a href="https://github.com/tre-scinta">Tre Scinta</a>.</p> </footer> </div> </div> </div>  <script src="assets/js/jquery.min.js"></script> <script src="assets/js/browser.min.js"></script> <script src="assets/js/breakpoints.min.js"></script> <script src="assets/js/util.js"></script> <script src="assets/js/main.js"></script> </body> </html>