Introduction

You You We don't get guys. we go get it. What's going on everybody, good morning, good afternoon, good evening, no matter where you're coming from. Hope you all are doing well. Welcome back. Another week, another day, another dollar. What's going on everybody? Welcome, welcome, welcome. Hope everyone's doing well. Hope everyone had a wonderful weekend. What a what a what a what a good weekend, too I mean we kicked off with an alumni Twitter space 3,000 people have tuned into it already over 3,000 now it's pretty wild because of the recordings up right and then We had our office hours on Sunday. We got some reviewing. We got to answer some questions. Oh Good weekend. What's going on?

All right, you know how we do we like folks to get in here give them a second They're running home from work to get in here a couple things that we always like to do at the beginning One we got a question of the day folks Question of the day is would you rather? Would you rather? Paint a wall with your face Or with your knees whole wall normal. We're talking like a normal like A normal bedroom wall. I always love seeing how split it is. I always love to see how split it is. This one, this one's like 5050. I say like half of people are saying face, but the other half are saying knees. I don't know. I feel like I feel like there is any precision work involved. My face might be better. I don't know. I think I can. I feel like I can do this with my forehead all day, right? Whereas my knees, I don't know.

I feel like my knees might, after a while, you can't hit all the crevices, right? I don't know. I feel like my forehead can put in some work, right? Feel like I can use my core a little bit more. I don't know if I can keep bending my knees like that all day. I'm gonna go with, I'm gonna go with face. I would rather paint a wall with my face than my knees. Oh boy. Well, we're in for a good one today, folks. A topic that I love dearly, which is responsiveness, making our sites look great across devices. We hinted at it on Thursday's class, and tonight we're gonna go deeper into it. We're gonna talk about how things, how our sites can be made responsive, so they look great across devices, how they can look good on mobile, desktop, laptop, tablet, and everything in between. We're gonna talk about the big three when it comes to responsiveness, fluidity, elasticity, and content decisions. We're gonna get some practice in. And then this and next class is just all about responsiveness building responsive websites.

And then on Thursday, we got a lot of practice to get into a responsive site. So super excited. Tonight, we're also gonna do our first steps into talking about how to network. I love talking about this. It's the thing that's gonna help you get a job. And so we're gonna spend a big chunk of maybe the first hour tonight talking about how to network, how to find people to network, how to do it properly. And then on Thursday, on Thursday, I'm going to give you like actual scripts. Like I'm going to give you like the text you can send. I'm going to give you the paragraphs you can send. So we're going to talk about it in theory tonight. And then on Thursday, I'm going to give you like the actual things I would send to people. Cause a lot of folks sometimes get really nervously. I don't want to say, I don't know how to send it. I'm gonna give it to y'all folks don't have to worry about it. I got you Got you.

We don't get caught we go get All right, folks. Um Let me bring up the slides we always like to start off with questions, right all this stuff with questions It's ready to start our days off. Give folks a second to get in here. What questions you got for me folks? Bangers only exactly got my lovely got my lovely cold brew today that's what I'm drinking my lovely cold brew I'm doing good I'm doing real good did it get a chance to play a new Pokemon game yet they get a chance in there people are real set up there there was no motivation today I didn't put a motivational poem or video in there and people people were people had some words We'll bring them back on Thursday When we start the job search once we get through JavaScript and we're feeling comfortable We'll start laying the groundwork for the job search But we don't really take the job search seriously until we're full stack software engineers until we're full stack web developers, right? We want to have the front end and the back end to open us up to as much possibility But actually that's a great question to ask because the groundwork for you getting a job starts tonight Right the groundwork for you getting a job honestly starts tonight The things that we do to build our network are the things are gonna help you get a job right So it's a really interesting question. Like we won't take it seriously into much further, but actually it kind of starts tonight Are we actually assigned to watch Independence Day? Yes, that is your homework. Your homework is to watch Independence Day. It will have a lot of strong bearing, right? Strong bearing on our next couple of classes. And so you must watch Independence Day. You have to, it's the homework. Plenty of places to find Independence Day to watch online for free. The movie.

Yes, exactly. It'll make sense. Trust me. You just gotta watch it. I didn't see who said it, but that was the right question. The the the movie or the crap version. There is only one Independence Day. They did not make a sequel. They did not make another one. It does not exist. So of course, Will Smith Independence Day only Independence Day. There just doesn't exist another version. So, yeah What if we know it by heart already go back and watch it again the classic They made a sequel exactly exactly you feeling me I see you Do you have any trouble drinking or sleeping after cold brew No, I could drink coffee 20 minutes before I go to bed and it will have no bearing on my sleep because I take serious medication to help me fall asleep. I'm bipolar, so I take my bipolar medication and that zonks me. I could literally, I don't know, I could do anything and there's just no staying up.

I just get zonked. So yeah, it doesn't matter what I do throughout the day. And I've been keeping really good track of like my quality of sleep. I wear like that watch I showed the other day. So I can see like if I'm waking up or not and there's nothing that impacts it, that medication, boop, I'm out. Yeah, I actually like, I love, like I'm on Seroquel, I love Seroquel. It like literally changed my life. It stops me from having manic episodes, helps me sleep. I don't have it, my life is in shambles. So as much as it is a hard, hard drug to get used to, It really did change my life. But the first couple of times I took it, I remember the first time I took it, and then we're gonna get started with class, I promise. One story, then we'll get started with class. The very first time I took it, I was with my family. I was with my family to go see Thomas the Tank Engine. And there was like a real train that had a Thomas the Tank Engine on the front.

And my cousins were really into Thomas the Tank Engine. So the whole family went, and there was gonna be this big ass train with Thomas the tank on the front and it's like a whole thing to do. And I just remember I took it the night before and I'm just sitting there like this. I'm like sitting like on the I'm like sitting on the bench, just like tongue out, like I'll probably drooling on myself. I just was not there. I was just out. I was out and I was like, I didn't even know I was doing it. So, yeah, that was my first experience of circle. But your body gets used to it after a while and yeah, it changed my life I wouldn't be able to do anything that I honestly am able to do if I wasn't on like a regular bipolar medication so for all the folks out there that are at our bipolar and they're worried about like Taking new meds like with your doctor's approval Give them a chance I went through three or four different medications until I found what worked And then the one that did work felt like death for the first week, but after that, it's good. It's good. All right. Let's get into it, folks. Tonight, we got how to network part one, right? This is part one of like four classes we'll have where networking comes up, right? So the first part starts tonight.

We're gonna talk high level, right? What to do, how to do it, why it's important. None of it's really a requirement until we get into next week. So I don't want you to run out and think you have to start networking this week. That's okay, you don't have to. We're gonna start talking about tonight. And then on Thursday, I'm gonna give you every example that I have. What's the email I send? What's the LinkedIn message I send? What are the Twitter messages I send, right? I don't want you to have to like guess what that looks like. I'm gonna give it all to you, right? I'm gonna review some of our CS fundamentals, including specificity and the box model. We're gonna review some of the floating examples that we actually went over on Sunday as well. We're going to review those three simple layouts.

We did two of them on Sunday, but we're gonna do one tonight just as some space repetition. We're gonna talk about the basics of responsiveness, like fluidity, elasticity, content decisions, and how we can build sites that incorporate those ideas. And then the last thing at the very end, we're gonna cover a little bit of Flexbox. So I wanna show you, we've been dealing with floats, more tonight. Your homework even going into next week will be with floats. But I want to show you the magic that is Flexbox and how it can really just change your life once you kind of get past floats, right? And so we're going to talk about Flexbox tonight. I'm going to show you one example and why it's so powerful. And then as we get into like next week, we'll start using it more. All righty. Already got through some questions. Remember, folks, please check in. You can do exclamation point check in here in chat, but that's gonna get spammed out to Wazoo. It's always on the Discord follow along materials channel and the learn with Leon live. You always have that link before class, or if you just already follow me on Twitter, I'll tweet it always an hour before class starts.

So you can always go ahead and check in. I appreciate it helps folks find the community and not have to pay so much to learn how to code. The other thing is, today is the last day for the study community survey. We released a survey last week asking folks to fill in their preferences for study communities. After tonight, myself and the mods are going to work very, very hard to get all those communities live on Discord, to get all the voice channels set up, all the individual channels set up, And so tonight is the last night for you to fill out that form. If there's a community that you would like to belong to, please make sure you fill out that form so we can build out the community starting today. And then we're going to start adding folks to them as soon as possible. Yeah. Alrighty. I wanted to start off with a big congratulations. I've known about it for a little while, but they officially just put into the celebrations channel So I'm putting them on blast here a little bit huge congrats to OCC They go by old coder chick on twitch They are an illustrious member of the hundred dev stream team They are a mod extraordinaire and they just announced that they are now employed as a full-time software engineer And so they put the link into the celebrations channel highly recommend checking out the celebration channel there was a while there's all these folks getting jobs and Now it was Jennifer's a turn and so super happy for them. Congratulations This is huge and the message that they shared that's on the screen right now. I want you to read I'm not gonna read it through because it's here But I think there's a little bit something for everyone in this message a lot of folks that have concerns about things that they think might hold them back in the job search. Jennifer went through them a lot and all of them. And so to see them be so successful and to lock it down and to see their journey has been just absolutely amazing to watch.

And so definitely show them some love in the celebrations channel. I put the direct link to their message, but a shout out to you OCC, congratulations. All right, submitting homework. There's none due today, so you don't have to stress. Some people were panicking, where do I submit stuff? There's nothing that is due today, and so there's nothing to submit. You'll have stuff that starts getting submitted on Thursday, and next week we're gonna have a lot of homework. We're gonna have a lot of homework. All right, next thing. Um, we are, well, first let's start off with a huge thank you, uh, for all the, all the folks that are new, uh, all the things that get like all the subs and bits that gets put as a donation to the nonprofit I work at during the day called resilient coders. And last year we donated thousands of dollars. And I wanted to kind of be very transparent about this process because we're getting into some territory that's like very, very serious money. When I told y'all last class that if you have Amazon Prime, you actually get a free sub. You can spend all of Jeff Bezos' money. It's actually just completely free if you have Amazon Prime.

Well, y'all kind of went wild and we're over, we're at 2,200 subs, 2,200 subs. Now Twitch gets half of that, But that's, that's a lot of money going straight into our emergency fund at resilient coders to help with mental health support, to help with folks that run into emergencies throughout the cohort. And I like, I'm just besides myself, like, I just want to say thank you from the top of my heart and the bottom of my heart, any part in the heart in between. I really do appreciate everyone for doing it now I want to start releasing a transparency report every quarter that shows you like how much came in and that I actually make Those donations last year. We made the donations and once he got into real money, I was like wait, I got a pause I got to make sure that I'm doing it, right? So when my taxes get filed I'll release that first transparency report with kind of all the money that came in what we had to withhold for taxes, and then what went to RC. And then my goal is to do that quarterly, right? So every quarter, we'll go ahead and release that as well. And so I just wanna make sure that folks know that eventually we'll release all that stuff and I'll share it with y'all because it's getting real. But I gotta make sure I'm doing it right and I gotta make sure that I'm not double paying on taxes or weird stuff like that. And so once that all gets filed, I'll release the first big one And then their goal should be every quarter, uh, we'll release like a, a new updated one. So once again, huge, huge, thank you. Um, never, ever, ever, ever, please. I'm going to get big here for a second, ever, ever, ever feel like that you must sub or that you have to sub or something that I even want you to do. It's honestly not, I want this to be a completely free experience for everyone.

None of my content will ever be behind a paywall. Nothing I'll ever do will cost you something in any way, shape, or form in terms of money. And so don't ever feel like you have to do that. A lot of folks feel like that they want to support specifically when I start support RC. And so they do choose to sub and I appreciate you for doing that. Folks that use the Amazon Prime, which is completely free, like, thank you, I appreciate that. We're putting it to good use. And so I want to say a huge thank you. I wanted to say a huge thank you. It's kind of getting a little overwhelmed right now. Some people are throwing them in here. Thank you for the five gifted subs. I couldn't see who did it, but thank you so much, everyone. I really, really, really appreciate it. Cool.

Let's put out there. Alrighty. Now, we have grown from a humble 5,000 folks on discord to, I believe the last one looked 23,000, uh, 23,000 people are on that discord now. And, uh, I said it before, I'm going to say it again, please, before you write anything here on Twitch, before you write anything on Discord, ask yourself one very important thing. Is that the most helpful, the most supportive, the most pleasant thing you can type in that moment? And if the answer is no, do not type it. I have no patience for folks that can't be decent. I will not lose sleep over banning you. I just don't care. If you can't be a good human being, please leave. And if being kind, if being decent, giving people the benefit of the doubt, understanding that folks come in with things that they don't know, things that they're not gonna know perfectly well, or that they're gonna need help, and they might need help on the same topic 10 different times, leave. I don't want you here. I don't care that you're here, please just leave and I'm very serious about this, right? Like if you can't be decent Please leave if you're if you're if you're here to find a significant other you're in the wrong place If you're here to find someone to date you're in the wrong place If you're here to find love you're probably in the wrong place unless you love your friends a lot, right? So, please Cut it out Not necessary does not need to be here.

This is a place to learn. This is the place to get stuff done And if you can't be nice, you will be banned Drop you long. Thank you so much for the five gifted subs. I Appreciate you. All right, cool. So I send my piece and I'm gonna keep saying it again because some people don't get it and One thing you have to understand is that everyone might not have your expert taste in let's say memes, right? You might have the freshest taste in memes, but your memes might be hurtful to others. So please, make sure before you share anything, whether it's a meme, whether it's a GIF, whether it is a piece of text that you're holding yourself to, would this make a comfortable environment for everyone that sees it? If it's not a comfortable environment for every single person that will see what you're posting, please don't post it, right? And if you don't know the gray areas, then you should probably just stick to the help channels. Right? If you don't know how to regulate in that area, that's fine. Just don't post, just stop. This goal is for us to have a safe, comfortable learning environment for all. And if you can't commit to that type of environment, get the fuck out.

Please just leave. Please, please, please, please. Return of the Z, A. Thank you for the 10 gift subs, that's wild. All right, I've said my piece. Now, sometimes you're going to maybe not live up to the things I've just asked you to live up to and you will be banned. And if you are banned, we actually now have an unbanned process. In chat here, you can do exclamation point unbanned. That'll give you the link. but the link is always just the bit.ly slash 100 devs unban. Okay, you can submit an unban request and myself and the moderators will review them hopefully every week. Sometimes we might be busy and it might take us more than a week, but the idea is that it will happen and we will review why you were banned, we'll tell you more about why you were banned if you request it, and then we can make a final decision as to whether or not you're welcome back in the community. There are some things that folks get banned for that might be out of their control, right? Sometimes people like clicked on those Nitro links. Please do not click on free Nitro links.

They're just not real. No one's giving you free Nitro. Please stop clicking those links. And it's not even just on our server. You click on those links, right? You click on those links in another server, they have your account, right? And so then once they have your account, They will go ahead and start spamming in every server that you're on So some folks have gotten banned because of spam, right? We don't want them to not participate in the community We want them to be able to get unbanned. And so here's the unbanned request to do that. All right Don't get got exactly so if you were banned and you would like to appeal your ban this is the link to do it myself and the moderators will review them weekly and and hopefully weekly and get back to you. You will always get communicated via email. So we won't DM you, we won't message you here on Twitch. Moderators will never reach out to you on Discord or Twitch. It'll always come through email. It'll be bands at 100devs.org that you'll see the email come from.

And we're only gonna communicate with you through email. Please do not reach out to individual moderators to get unbanned. No individual moderator or even myself will unban you. It always goes to our committee of moderators who will review it and then unban you. If you reach out to individual moderators, you reach out to me, and you ask to be unbanned, you're going to get a very scripted message from all of us. And that scripted message will say, please fill out this form, right? Please fill out this form. If you continue to message individual moderators or myself, the ban will stand and then we're just gonna block you entirely, okay? So please, you can't be a decent human being, don't join the server, don't type anything. If you do get banned, here's the process to get unbanned, all right? And please understand that myself, individual moderators are not gonna unban you. It has to go through this form and we'll go to our committee, we'll review it and then we will unban you. This being said, we've only had to ban very, very few people. Like, we're talking like a handful, right? That's the beauty of this community, is that we have amazing people in this community that are doing amazing things, and it's only been a handful of bans so far.

So I really, really appreciate you all creating a space where folks feel comfortable, where folks can come to get work done, where they can learn and grow together. And that doesn't happen with me. It doesn't happen with the mods. It happens with y'all, right? You are creating that space. And so thank you, thank you, thank you. Oh boy. Now we got all that out the way. Let's talk about networking folks. Let's talk about some networking. Now, here's something that you will have heard from me that I will say time and time again. Just applying to jobs will not get you a job. I say it again. Applying to jobs will not get you a job. Wait a minute, what did he say?

Applying to jobs won't get me a job. Yes, that is correct. Just clicking apply, or even filling out a normal application will not get you a job. There are some folks online that you see, some folks that have talked to me. Leon, I've applied to 400 places. I haven't gotten a single interview, let alone a job. And my response to you is that you've messed up. Clicking apply does not get you a job. If you click apply, that is worse than printing out your resume, all right? If you're gonna click apply, might as well print out your resume, crumble it up, and throw it out the window, right? You might as well go ahead, crumble it up, and throw it out the window. And here's why. Here's why. When you throw your resume out the window, when you throw your resume out the window, there's a chance that an eagle flies by. right, there is a chance that an eagle flies by.

When that eagle flies by, right, they pick up the resume that you threw out the window and they're pissed. You're like, you're a littering person, right? They're pissed, that eagle's pissed. Eagle picks up that resume and flies to the local police station and the eagle drops the resume into that officer's lap, right? And the officer thanks the trained eagle, right? The officer thanks the trained eagle, right? For bringing this litter and they open it up and they see that it's your resume. And so they get in their police car, they come to your house, right? And they arrest you for littering. And while they're arresting you, they see that you have HTML up on the screen and they go, oh, you write code. My cousin works at such and such place and they write code. You know what, we're gonna spare you this time and we're not gonna arrest you anymore but you're gonna meet with my cousin that writes code and the police officer gives you the cousin's phone number because they've been trying to hire, right? And so you talk to that cousin and that cousin Says hey, we saw that you wrote good HTML. My cousin saw it when they were arresting you We would love to give you an interview right second chances, right? You got caught by the the litter carrying eagle We want to give you a second chance and come interview with us and then you interview and then you get the job That whole story is way more likely to happen than you getting a job by clicking apply It's a legit story, folks.

And it's way, way, way more believable. Way more believable than you clicking apply and getting a job. Okay? That's way, way more believable. Let that sink in for a second, I'm going to, I'm going to, I'm just going to let it, you know, let that linger for a second, way, way, way more believable. Okay. So with that being said, the thing that will get you a job is your network. and so what we're gonna ask you to start doing next week is to start your networking and I think there's a lot of I Don't know. There's a lot of anxiety around networking. There's a lot of things that people maybe people just haven't done it before they maybe They haven't built the professional network before we're gonna talk about all that stuff We're gonna make sure that you feel comfortable networking that you find the things that work for you and that you can do it at an appropriate pace no matter who you are or kind of barring some serious concerns, you can find something that works for you, right? Folks that have extreme anxiety or things that might work better for you, folks that aren't really extroverted, there might be things that work for you. And so we're gonna talk about a lot of them tonight and places that you need to start exploring. But the one thing I need you to do is to start exploring, right? Start figuring out what does and doesn't work for you so that you can do this networking, okay? Now, here is what happens with networking.

Starting next week, I need you to connect with three individuals that are already in tech, okay? Three new individuals that are already in tech. And I need you to have two coffee chats with individuals that are already in tech, okay? So the idea here is that you're gonna meet three people that are already in tech. They don't necessarily have to be software engineers, although that is the goal, but people that are already in tech project managers, designers, people that work at companies that would employ software engineers. Right. You need to find three and connect with three of them each week. Then you want to have two more, right? Two more, two more, right? Two more that you sit down and have a longer form conversation with. Now, why do I ask you to do this? So when we look at the bootcamp that I run during the day called Resilient Coders, it's actually more than this. We ask folks to find five people, right? Five people and then three coffee chats. Let that sink in.

The students that do my bootcamp during the day, they have five a week plus three coffee chats. Now, the reason why this is important and why we have them do five a week and three coffee chats. It's because by the time they're done the 20-week program, they have over a hundred people that have met them, that know them and could eventually be a referral for them. Right? You need to do the same thing. This is where every other bootcamp fucks up. This is where every other tutorial that has tried to teach you how to code fucks up. They like to pretend that the coding or the skills is the thing that gets you jobs. It is absolutely not. Every coding tutorial, every bootcamp, right, should be 20 weeks of how to build your network. And at the very end, they should say, go do free code camp for the Odin project. Every single tutorial, that's what it should be. networking for 20 weeks and then go do free code camp or the Odin project. That's what it should be, right? And so if, if, for some reason the gifted subs aren't coming through.

Sorry, I see folks are doing gifted subs, but I'm just not seeing them come up on my screen. I think they're behind a little bit. So I apologize if you gave gifted subs. I appreciate the gifted subs. I just can't see them coming at the second, right? That's it. Right, that's what it should be. And so what I hope for you is that after tonight, it's a little less scary, right? It's a little less scary, and it's a little bit more clear how you're actually going to do this. I see a lot of you. Some people are saying, I live in the middle of nowhere. All right, I got you. I'm introverted, I got you. I have anxiety. I got you.

We're going to talk about all of this stuff tonight so that you can start chipping away at those. I'm going to say it. I don't like to say it. We're such a big way at those excuses, right? Uh, some folks have some real real things that will get in the way of them networking, but I don't live somewhere. Uh, I'm introverted. Uh, I have like mild anxiety, not like really like, like, not how to say real, but like a lot of anxiety, right? If you have anxiety that you can still overcome because some people don't. right? But if you have the privilege of not having crippling, crippling anxiety, if you have the privilege of connecting to the internet, uh, you have the means to meet with folks around the world, right? You have the right now is the best time ever, right? The best time ever to network in the history of networking. There has never, ever, ever, ever been a better time than right now, right? I don't care where you're from, how you do it or what you do it, right? This is the best time there has ever been to network.

Everything is remote. Everything is remote. If you live in the middle of nowhere, guess what? You can network with the best of them, right? And so this right now is the best time in the history of time to network. And so we gotta use that to our advantage. We have to use that to our advantage, right? My students back in the day, and by back in the day, I mean like a year or two ago, when they wanted to network, they would go to a meetup. They would have to leave the classroom. They'd have to get on the subway. They would have to go all the way to a meetup. They would get to that meetup. There'd be two people there. They would go, fuck. and then they would get back, walk back to the subway, get back on the subway, go to a different meetup, get there.

There was five people at that one, but they already knew all of them. They go, fuck, and then they get back on the subway. They go to a different meetup, right? You don't have to do that anymore. Everything's remote right now. If you don't like where you're at, close your eyes. If you don't like the meetup that you're at, click X, get out, go to the next one. it will literally never, ever be better to network than it is right now. Now, I'm gonna say this again. Networking can be a very scary thing for a lot of folks. There are tips, strategies, tools, techniques we're gonna talk about over the next couple of classes that'll hopefully be helpful. When I'm giving this advice, I am not talking to the people that are going to need serious kind of outside help, right? There are some of us that don't have the privilege of being able to do this properly. Some folks really do have crippling anxiety that stops them from networking. Some folks really do have things, mental health things, that might stop them from doing this part of the process.

So all the advice I'm giving to you right now is not targeted directly at those individuals. If that's where you are, the thing I have to say to you and the thing that has helped most of my students is you have to get a game plan together with a therapist and a psychologist, right? This is coming from someone that has bipolar disorder that has impacted my life to the point where I couldn't do networking. The only thing that got me out of that hole was therapy and a great psychiatrist, right? And so I wanna put that on the table, right? I wanna put that on the table because I'm gonna say a lot of things that I just don't wanna have to exclude those individuals, But if that's what you're facing, you have to work through it. It really is that important right now. Will there ever be? Somebody that doesn't have to do this networking process Yes, there are ways if you click the ply there are things that can tip the odds in your favor, right? But what I'm talking about is a process that is going to tip the scales More in your favor than it is just clicking apply So if you know that you are working with a therapist, you're working with a psychiatrist to get over the things that would stop you from networking, that's fine. These next couple of things we're gonna talk about over the next couple of classes, they aren't for you. You're gonna have to find strategies working with those mental health professionals that will enable you to apply and get over that hurdle, okay? So I'm gonna put that preface. But if we do have the privilege of not struggling with those things, this is for you. Okay, I asked that if you do kind of struggle with these things, we have the mental health channel and I will do a session, I think just for folks that are in that camp that'll talk through the things that I had to do to hopefully help me get over my mental health hurdles to be able to start networking.

And I think we'll do like a smaller session that's not like public on Twitch to help kind addressed some of those concerns. But barring that issue, right? This is for you. Now, the other thing I'll say is that I would say probably the bulk of you think you can't do this, right? And barring the things that we just talked about, you can. You might not like it, right? You might not like it. You might kind of hate it at first, but you can do it. Right, you can do it. And the cool thing is we're gonna do it together. And when you go to a lot of these meetups in these places, there's gonna be a lot of 100 devs folks there. I have to be really careful the things that I share for you to do, because what's gonna wind up happening is there's gonna be thousands of us at those things. But I have had students that you would think had every barrier against them that found the strategies that worked for them to help them the network. And what I'm going to say, I'm going to say it from the mountaintops, the thing that gets you a job is the networking, right? It is not the learning to code.

It is not the getting the best at JavaScript. It's this right here. Individuals that do this better will get more jobs and the folks that can code twice as better, twice as good. All right. A lot of caveats I threw out there, but I'm excited to talk about this stuff. So starting next week, you owe me three connections and two coffee chats. At first, the coffee chats and the connections, they can be the same people. but as we get further in and we kind of ease into this, right, we ease into this, right, as we ease into it, you are going to eventually have three connections and two coffee chats that are separate. But we start next week. You're not starting this week, we start next week. You're gonna have all week to try this, and the first week's not gonna matter. I just want you to try. So next week you're gonna try, right? You're gonna try, you're gonna get used to it, and we're gonna build it up, right? You're gonna get better.

You're gonna get better. You're gonna get better. And it's something that is a muscle Just like learning the code is a muscle that we had to get This networking thing is something that we have to get better at and it's something you get better at over time Your first couple networking sessions are gonna be awkward as hell You're gonna be nervous. You're gonna be anxious. You're not gonna know what to say But you're gonna get better at Alright, let's talk a bit more about this People really stress out over the networking, but what the heck do I mean by networking? The goal of networking, right? The goal of networking is to turn a stranger into a coworker. But the first step in that is turning a stranger into a friend, right, right? The goal of networking is to turn a stranger into a friend. And so this is the steps that it should go through. You meet a stranger, they become an acquaintance, and then they become a friend. When someone is a friend, right, once someone is a friend, they will most likely give you a referral, and that referral can be used to get an interview or to get some perks during the interview process, and eventually that friend can become a coworker. Now, here's the thing. This process can take a short amount of time, can take a long amount of time, but that's the goal. The goal of networking is to make friends.

There's nothing more to it than making friends. Now, the reason why it's important for us to make friends and to get referrals is because most companies, If you get referred you get some magical things that happen when you get referred to a job Often you'll skip a first-round interview When you get referred to a job often you might go right to a technical, right? You might go right to whatever that first round is you might skip, right? Now the other thing that's really interesting right now is that a lot of companies pay referral bonuses So they'll pay engineers. I've seen anywhere from like a couple thousand dollars to 20 plus thousand dollars per referral. So if a company is paying their engineers $20,000 per referral and you can't get a referral, that kind of says a lot. And so this idea of referrals is really dominant right now in tech. These referrals mean a lot. Internally, it gets your resume to the top of the stack. It gets you an actual interview. And once you have a referral, there's like another step too, is that you can have a champion. If someone's your friend and they actually really wanna refer you, they're gonna make sure that you get the interview. A lot of these jobs will have hundreds of people that apply and they don't even ever get, they don't even get somebody to look, right? They don't even get someone to look at their resume, right? That company gets hundreds of applications And then the people that they wind up interviewing are the folks that just had referrals anyway, right?

So the idea here, Daddy Yankee says, my referral bonus is 5K, exactly, right? Daddy Yankee was Nick from our alumni chat on Friday, right? So if they're paying Nick 5K and you can't get a referral from Nick, then there's something going on there, right? And so we want to build our network to get a bunch of folks in our corner That will eventually give us a referral because that referral does so much for you It skips rounds of interviews and it gets your application actually seen right? So that's why the referrals are so powerful So when you're doing this networking the goal is to meet a stranger Turn that stranger into an acquaintance and then ultimately a friend and then when the time is right You can go back to that friend and say, hey, I see that you work at Chow now, can you give me a referral? Right? Now here's where people do it wrong. Right now, Nick just said that they have a referral bonus. They said on Friday to message them, and what people do is this, they go, brah, I'm gonna reach out to Nick, brah, yo, yo, yo, I need a referral, brah, brah, brah. Like they just they just in mass. They just vomit. Sorry. I don't think I said stop saying it They they got they they they they just they just blast nick with messages, right? They just blast it with messages. There's there's no there's no rhyme or reason to it.

It's all about them Right. It's all about them Right. It's all about them, right? They don't care about nick. They want the referral They want nick to to give them the referral. They just don't care They don't take the time to get to know them and make them a friend. So is Nick going to ever refer you the person that just randomly adds them on Twitter? The person that just randomly adds them on LinkedIn? Are they ever going to get the referral from them? No. Are they eventually going to have hundreds of people reaching out to them? Yes. So the other thing too I hate the most is LinkedIn. Some of you go on LinkedIn and they're like every single, every single person that you ever see on LinkedIn, you add, right? You just add, you add them to LinkedIn.

You're just doing this all day. Yes, yes, yes. Oh yes, yes, yes. LinkedIn, LinkedIn, LinkedIn, LinkedIn, LinkedIn, LinkedIn, LinkedIn, right? And then what you wind up with is, yeah, you have a thousand people that you're connected with on LinkedIn, but none of them know you. None of them care about you. And none of them would give you a referral. you're better off purging your entire LinkedIn and only having people that you've actually met and interact with. If you haven't met and interact with that person, LinkedIn is not the move. Like it's just, you're just, you're just clicking and it's never gonna get you the referral because people don't care about you, right? So you're doing it wrong. And so when people say, Leon, I've applied to 400 places, my question to them is always, who did you talk to at those 400 places? And the answer is always no one. So that means you never got a referral and your resume never made it to the person that could actually care about it. So stop spamming people, right?

Stop spamming them, adding them on LinkedIn when you've never interacted with them. They're never going to do anything for you Right. They're not going to do anything for you. And now you just have a what could be an amazing tool of the people You know and interact with is now wasted on connections that aren't real Right, and so just be careful with these tools, right? The whole goal of networking is to make friends if you're not making friends You're doing the networking piece wrong because the end of the day We want to have people that we can rely on that know you That can give you referrals or can connect you with the right people at certain companies Is that the same as twitter yes if you're using twitter for networking and you're just like Mass adding people that you've never even like liked one of their tweets I don't know that doesn't seem really helpful to me I think Twitter is definitely different because like you're you want to like it's not it's not just networking, right? It's like it's like connecting and like seeing other posts and stuff like that But LinkedIn is very much about like getting a job. So your LinkedIn should be manicured. It should be perfect All right, it should be like your real network Alright So now you're like Leon. You're telling me that I need to make friends right? Leon. Friends? Make friends? How? How do you make these friends? Right?

Well, we're going to talk about how to make friends. We're going to talk about how to make friends, and we're going to talk about how do you like talk to people. I know for some folks it can seems silly, but I guarantee you it's not for most folks. Most folks aren't comfortable making friends and most folks might not know how to start these conversations. That's okay. If that's the camp that you're in, I got you, right? And so the place I always recommend folks to start with this is how to win friends and influence people. If there is one book that has changed my life more than any other book, it is this book here, how to win friends and influence people. Okay, now how to win friends and influence people is a collection of ideas and stories that will lead you to be able to make friends and have meaningful interactions with others. You can find the book online for free very easily and there's also lots of summaries of all the key points. What I've linked to here is a summary of of all the key points. So I recommend reading the book because there's more to it that you don't get in the summaries that help the idea stick. But this is where you start. That's the foundation. If you say to yourself, Leon, I don't know how to talk to people.

I don't know how to make friends. Great, I was in the same place. This is how you do it. It's this book. So start there. And then once you start there, you have to practice it. This is where most folks, this is where most folks stop. Remember, we're talking about the trough of sorrow. This is where it comes in, right? De Jesus, so De Jesus is one of the best people I've ever seen on this topic. And they just said that that book helped me a lot. So De Jesus has a wonderful blog post that I've linked to you all before. Don't seek mentors, seek friends, right? Like they're well versed on this topic and they're telling you right now, this book helped them a lot. So start here.

You don't know how to make friends. You don't know how to carry conversations start with this book I'm going to start synthesizing some of the things from that book into our next couple lectures on um On how to how to win friends and influence people but how to network So you're going to simply start seeing me fuse some of this in there, but this is where you start Cool So now you're like, all right leon I have to turn strangers into friends, got it. I don't know how to make friends, but I'm gonna read this book, got it. How do I meet the people that are strangers so I can turn them into friends? Got you, all right, got you. One of the best ways to turn strangers into friends where you don't have to do anything at all. You don't do anything other than show up, right? You don't do anything other than show up is to go to meetups or events, and specifically events that reoccur, right? That happen once a month, right? And so here's what happens. If you were to go to a meetup once a month, By month three, you are seeing the same people, right? You've seen the same people over and over again, right? Over and over again. And just the idea of having seen that person three times in a row, that person is now an acquaintance. If all you ever did was say, hey, I'm Leon, nice to meet you, Bob.

And then the next two times you say, hey, Bob, hey, Bob, Guess what you're an acquaintance You did it. You did it. That's it. That's all there is to it. You did it. You made a stranger into an acquaintance. Right? Get you something. Right? You did it. That's all you have to do. Introduce yourself to someone. and then say hello to them two more times and their acquaintance, they will recognize you. Maybe not the first time, at least the second time they'll recognize you. And one of the things in the how to win friends and influence people is this term that you'll actually hear everywhere now.

It's that the word that sounds the sweetest in any language is that person's name, all right? So just by acknowledging them, saying hello with their name three times in a row, they now, now you're an acquaintance at least, right? You keep showing up, those acquaintances, it will naturally grow. If you just are intentional in saying hello with someone's name, you can move from kind of that stranger to acquaintance very quickly. Now, these events, most of them are virtual right now, And so you're saying, Leon, how do I get that rapport going if it's virtual? Well, a lot of these virtual meetups have breakout sessions, right? Where you will kind of like hear like a little bit of a talk and then they'll put you on a breakout session with other people, right? So you can still get that, you can still get that rapport building, you can still go from that stranger to acquaintance, even if you're going to all virtual events, it will still happen. Cool, the other thing too is that for most folks, being local is a competitive advantage. Now, if you live in the middle of nowhere, or you live in a country that does not have a tech scene, this advice is true, but you're gonna have to work a little bit differently at this part, right? So meetups are wonderful, local meetups are even better. Okay? Now, the beautiful thing right now, this being the best time ever to network ever, is that if it's remote, there's nothing stopping you from networking in that area. What is the closest city with the most jobs? Think about that.

What is the closest city with the most jobs? If you are in the middle of nowhere, how close are you to Chicago? How like what like where where are you close enough to that has tech jobs? Guess what? That's where you're gonna network That's it. That is where you're gonna network. A lot of these meetups are still remote so since the remote pick a city and Start networking even if you're four or five hours away Even if you're a whole country away Pick one city to focus on right pick one city to focus on and start going to all the virtual meetups there Like I said, this is the best time ever to start the networking and so you can find meetups that are remote. Local will always be a competitive advantage. If you can get in good with a local area and you can meet all the people in that area and you do this networking every week right by the end right at the at the end of a hundred at the end of a hundred devs you're gonna have like a hundred people that you've networked in that area the odds of those hundred people knowing the person that you are interviewing with is pretty high right right it's pretty high if you put in this work now when it comes time to start interviewing that that 100 that you spent time on it, 10 X's is really 1000 that you can be connected to and interact with, right? It's not just right. It's not just the people that you networked with. If you made, if you turn them from a stranger into an acquaintance or friend, you now have their friends that you can be connected to, right? And so it 10 X is at least the the more you put into it. So being local is a competitive advantage. Picking one place to networking can be a competitive advantage.

Even if you don't live in that area, pick somewhere first, right? Even if you know, Leon, I wanna be remote, pick a place to start practicing with, right? Pick a place. Even if you wanna be remote, pick a place, right? Won't this process be overwhelming? Yes. This is a very overwhelming process at first, but here's the thing. you get better at it. It gets easier. The first couple meetups you go to are going to probably not go really well if you're not like a naturally like talkative person, right? But it does get, I promise you, I've seen hundreds of my students go to their first networking events, kind of just stand in the corner and go home, but eventually you get better at it. You get a little bit more comfortable with it and you practice it. And the beautiful thing is if you're going remote, You could be middle of a conversation, right? You could be middle of a conversation. Hey, my name is Leon.

How are you doing? I, I, uh, uh. And they'll never see you again. They'll just never see you again, right? That's the beauty of being remote. If you could be mid-sentence, you can be mid-sentence. And if you feel uncomfortable, click X, get out of there. Who cares? This is the best time ever to try networking. Right. Best time ever to try networking. Cool. So I like to start off with meetups. I'm going to cover this topic, just one for a few more seconds. Then we're going to take a break.

I like to start with meetups, particularly local meetups. And meetup.com is an amazing site to find these meetups, but every city has their own, has their own job, like their own boards that where these events get posted, right? And so meetup.com is an amazing place to find meetups, but there are so many other places that you can find them. So in Boston, like here's something that we share with our folks in Boston. These are all the places that we could go in Boston to find events. We got the guide to Boston Boston tech and startup events the epicenter community different universities calendars, right like Tech ladies like she geeks out. There are all these places that we can go to to find events that are just not They're not just meetup.com and so one of your first things you have to do is when you pick your like locale you gotta find all the places that the events get posted to in that locale, right? And one of the things you might do at your first couple of meetups is saying, hey, like, I really like this meetup. What other meetups do you go to? Like what other ones are like your favorites? And then you find even more, right? So at first it might look like there's a handful, there's a couple, but then eventually you start to find like, oh, there are all these other ones that aren't just necessarily on meetup.com, the other ones that people can start inviting you to, And so it grows but even if you want to be remote pick a location Start local find local meetups, even if they're like, they're probably going to be remote right now Right and you start there. That's the first place I recommend you start finding people you can turn from strangers into friends the idea behind the local events or The recurring events is it's very easy to go from stranger to acquaintance when you know You're going to see the same person over and over again. All right Let's stop here with the top of the hour. We're going to take a break.

When we come back from the break, we're going to start talking about other things that aren't necessarily events, where you can find people to turn from strangers into friends. All right, folks. If you're new around here, we like to take breaks at the top of the hour. We're here to be healthy, to be in this for the long haul. Five minutes on the clock here. Alright folks, enjoy the 5 minutes, hydrate, kiss some babies and I'll see you all in 5. You Leon, we made friends while you were gone. Love it Well, there was just like spamming where they're from I love it Should we have business cards for in-person events? That's up to you, people still carry them. We just ask for people's emails. All right, folks, about 20 seconds left. Some people are asking about like a bunch of different places and apps and stuff like that. We're going to get there. We're going to talk about a lot of all the other places too. So we'll get there in a second.

All right, folks, come on back, come on back. Hope you had a good break. All righty, folks. Cool. Let's jump back into it. Welcome back, come on back, come on back. Is it okay if it's any tech event? For example, was that event talking about Python? Yeah, I go to all of them. I go to all a bunch of different events. It's whatever I'm interested in, right? I think like, I've like gave talks at like certain meetups, like the CSS meetup and stuff like that in Boston. So I have like the ones I like to go to regularly. But yeah, I think in the beginning more is better because you'll find like not every meetup is the same. Some really suck.

Like the people that show up to them just aren't the best or like they're too small or they're too big. Like you're gonna find your recurring ones, right? And your recurring meetups are different for every person. And you kind of just have to throw yourself into them in the beginning. You have a tip on how you cope when you feel overwhelmed. I think in the beginning it's just giving yourself like time, right? When I say these events, like some people wanna run out and do like 100 events, don't, be selective in the beginning, take some time, get into it, exactly, breathe, like find your footing. Like this is not something that you're gonna get perfect next week. This is something that you're gonna do for the entire cohort to get better at this, right? So don't think that people come out the gate hot and are really good at networking, they don't. It takes a while and it takes a while to be yourself. It takes a while to get comfortable, right? What if there are no meetups in your country? Pick a city, it doesn't have to be your country. The beautiful thing about being remote, pick a different city, a city that you might wanna work in remotely even, yeah.

Yeah, find your groove, exactly. You'll find your groove and it takes a little while, right? Give yourself, we always like to say, give yourself a little bit of grace, right? And you'll find your groove and it'll get easier with time, but you can't use that as an excuse not to start. It's the only way that you do get to the point where you're comfortable, where you do get to the point where you can make friends, where you get to the point to where it actually has a meaningful impact on your career is if you start. Yeah, cool. All right, so we talked about like events, particularly like local events, meetup groups, events that are recurring. These are often the best for my students just because it really does have that built-in mechanism to go from like stranger to acquaintance very quickly. So that's why I like the recurring events. Remember, meetup.com is a great place to start, but often the cities that you're targeting will have dozens of other boards or other places where they share events, and you got to seek them out. You got to give it a good old Google, you're the old 100 devs try and start finding these locations. All right, the next big thing is conferences. The reason why I really like conferences is because they bring together large amounts of people and the people that show up to conferences want to network. Like most of the time, people are showing up to conferences because they want to meet other people that are interested in the thing that they're interested in, right? And so the beautiful thing about going to a conference is I've made so many friends by going to conferences because we're all there because we care about one topic and we're all kind of more open to meeting new folks.

And so for me, conferences have hands down in the number one place that I've made friends in tech, right? Conferences are hands down the number one place I've made friends in tech. I go to a lot of conferences each year. That's kind of chilled a little bit during the pandemic, like, but conferences have always been the biggest for me. And the way that I find conferences are, you just put in your interest, right? And then the word conference after in Google, right? You can literally put JavaScript conference and you'll see some stuff that pops up. You could even tie it closer to like where you are, like JavaScript conference Boston and things will come up, right? And so you try to find like a bunch of these conferences. There are listings online of like all the biggest conferences as well. And so you could find all of them under DevCon soon, maybe. I don't know. Let's see. I think let's talk about it. Right.

But these conferences are great. And here's some things about conferences. A lot of them are free. A lot of them are not. But almost always, there is a way to get into a conference for free. I hate recommending things that are not free. And so when I say conferences even the most expensive conferences There's typically a way in where you don't have to pay any money and it might actually work out better for you And so what I'll often do is if there's a conference that costs a lot Send them an email. Hey, I would really like to attend this conference. I'm a newer I'm an entry-level software engineer and I'm broke as a joke, right? I'm broke as a joke is there any way that I could get into the conference at a discounted cost or potentially for free, right? 95% of the time, they're gonna give you a way in, right? Like 95% of the time, they're gonna give you a way in, right? I see some people saying like sneak in. I think sneaking in, like, I mean, do you, right? But there are often ways to like do it legitimately that'll get you to door like 95% of the time.

And so send them a message, hey, like, I have no money, like, is there a way for me to attend this conference? And they'll typically say yes, like 95% of the time, they'll say yes. The thing that has helped me the most, and I actually have my shirt on today, is volunteering. I volunteer every year at two or three conferences, like without skipping a beat, like every year, pandemic has stopped this, obviously, but two to three conferences every single year I volunteer at. But when you volunteer, you often like have to like do one thing and then you get to spend the rest of the time at the conference, right? Like I volunteer at the Free Software Foundation Conference every year. And typically like you can schedule like to be in charge of like one thing that you'll miss like one talk. But then the rest of the time you could do whatever the heck you want. You get a free t-shirt, right? Like and you get to meet all the other volunteers. So like, it's like, it's automatically like a little group of people, if you don't know anyone, right, if you don't know anyone that you immediately are now like, oh, here are like the other folks that are volunteering. And so you immediately have like this small group of friends already that are at the at the conference. So I volunteer at LibrePlanet every year. It's my one of my favorite conferences to go to. It's a free software conference and free meaning that like like open-source things like that not like free money and so the the place that I've made like I have like very like Like I would say one of my closest friends are from volunteering at conferences I used when I volunteer at Libra plan I love to do the the the gift shop Like where you can come in like buy t-shirts and hats and stuff like that and literally one of my best friends right now is someone that I volunteered with a bunch of times at that gift shop where we just sit there and shoot the shit for hours.

Just us because people were like in talks or something like that. And so volunteering is a great way to get into these conferences for free to meet a small group of folks and and to to to like get that ball rolling. But the beautiful thing about conferences is that it does bring a bunch of people together that are interested in one topic and often are really open to meeting new folks. One of the things I always tell folks, if you're going to go to a conference, never ever eat alone. Also another really great book, but don't ever eat alone, right? If you are going to go to lunch and you see a group of people, Hey, are you going to lunch? Do you mind if I tag along? Right? sometimes they'll have like discord channels or like an IRC channel beforehand and I'll be I'll just type in there hey I'm gonna go get lunch at one o'clock anybody want to join me for lunch and somebody will always say yes right will always say yes and so it takes a little bit more effort to like to reach out hey slumdog I wonder I hope I want some dog just donated 25 bucks thank you for the donation first of all, and if you're the slumdog that I think that's on Twitch, congratulations on your job. Yeah, congrats. Thank you for the donation. And congrats on the job if that's you. And Jen, thank you for the hydration. Cool. So don't ever eat alone.

It's just an easy way to connect with folks. And that you share a meal with someone that goes from stranger to acquaintance very quickly. So yes, it does take a little bit of a little bit of your, your extroverted juice to like tag onto a group or to put yourself out there in that way. Um, but there are a lot of ways that you can maybe meet up with those groups and good conferences actually have like channels specifically for like meeting up to eat with people. So conferences, great place to meet people volunteer, figure a way to get in for free, and never eat alone. It'll be super easy to meet a lot of folks if you do those things. And like I said, your first one kind of sucks. You kind of feel awkward. You don't really know what to do, right? But you can figure it out. And the cool thing is, if you're going to conferences now, I bet you there are some other 100 devs folks that are going to conferences. And so we have an events channel that will open up a little bit more as we to get further along in the course. Rock bottom A, thank you for the five gifted subs. We'll open up that adventure channel more as we get deeper into the course, but I guarantee if you're going to conferences, there will be other 100 devs folks there that you can say hello to, that forms your first little group, and then you can bring in other folks to your group, right? And so when there are big conferences coming up, we'll share them on Discord so that you can know to like meet up with folks that are already there.

So that way you'll always have like your first little bit of friends and then you meet others The biggest bit of advice I have ever given the folks that feel uncomfortable Networking at meetups or conferences is to don't don't do it alone. Always have a buddy Right have a buddy. And so when my students go to meetups or they go to conferences, they bring a buddy Don't bring lots of don't don't go in groups because if you're a big group people are gonna feel like they just won't approach you. But if it's just you and somebody else, you can walk up to any other person and you become a group of three and you both network with that person. And so as the big conferences come up, we'll open threads for like buddy groups and stuff like that. But yeah, cool. The other big thing is community groups. And this is where folks that might not like going to conferences or meetups can really shine. By community groups, I often mean like local meetups or text channels, so Discord, Slack, IRC. There's often groups that you can join that might only be completely like text-based. And so if you have a hard time meeting folks like face-to-face and talking, these text-based arenas might be for you. And so I think day Jesus was here earlier. They're like the best person I've ever seen at this, right? They they they just were on discord all the time and other discord communities Where they they labeled themselves. I forget exactly what it was.

It was like Still here. What was your name again? Nick? It was like I forget what you called it like impatient developer or something like that terrible developer Their, their name and discord communities was terrible developer and they just put that out there and people would like actually help them and they would giggle when they saw their name. Right. So they got, people start to recognize them just because of their name that they were always posting, right. And then after a year I got better in the community, promoted you to inconvenient developer. So yeah, the community kind of rallied around this idea that somebody labeled themselves tolerable developer, then they gave them inconvenience developer, right? And so these text communities can be just as equally beneficial as like face-to-face communities. You build a rapport of people, they get to know you, they see you consistently. And so find a community group that works for you, right? Our Discord is a great source of community because we're all going through it together. But if you're networking, you're going to need something else That's not just us, right? Uh, and so there are tons of like discords that you can meet in tons of Slack channels, tons of other text-based communities, and then even just like local communities that you can join. Uh, in Boston, we have a chapter of a civic hacking group.

Uh, it's called, what's the, the main, um, code code for America. Yeah. Code for America. and then Code for America has chapters in pretty much every single city, right? And so you can join a local chapter of Code for America, and that's a group of people that come together just to build and hack on stuff. They're technically kind of like volunteering, but it's like a group of people that come together to like build. So it's not even just like traditional like networking, but there are places where you can come and write code and get to see the same people week after week writing code together. And those are often the best because not only do they know you but they also know your coding ability, right? And so Look for community groups. There are also like interest or affinity groups, too One of the big ones is tech area for folks that are Latin X There are so many communities that if you identify a certain way Then you could join those communities too and you got to start seeking these out now You got to be seeking out your meetups. You gotta be seeking out your conferences is you gotta be seeking out your community groups so you can start kind of having multiple angles to attack. Meetups are gonna dry up, conferences are gonna drop, community groups are gonna dry up. You gotta do all of these things to kind of constantly build that way of reaching out and connecting with people. And you're gonna find one that you enjoy more than others. And that might become your group that you go back to where you really make those friends, those deeper connections.

And it's about putting yourself out there into all these different angles to find what works for you personally, like what, like what clicks in your brain and what gives you the best fruit. Right. Cool. Community groups. And then there are apps. I don't know where this image comes from, but when I search for apps, this is the photo that comes up. Right. There are apps and I got to be careful what apps we share, because we're gonna take them all down. So I put big ones here, but there are so many other apps that can help you network as well, but these two are like the bigger ones. And so I feel comfortable putting those, but maybe not the smaller ones, right? And so the apps like Lunch Club or Bumble Biz are ways that you can just like swipe through and meet people. I haven't had too much success with them, but some of my students really, this is like their main way of meeting people. And so if conferences aren't working out, local meetups aren't working out, community groups aren't working out, also try the apps, right? Maybe that's a little bit less pressure for you. Maybe it's a little bit easier to meet folks.

And the other thing I'll put is like, just be careful. Some people are on BumbleBiz not to make like colleagues, but other things. So my general disclaimer, don't be creepy and be careful of folks that are creepy on these platforms. But apps can also be another great way for you to meet people. And then the one of the last ones here, right, one of the last ones here is Is to talk to your friends and family and let them know that you're a software engineer Once you tell friends and family that you're a software engineer You'll be surprised of like who your friends and family connect you to right you'll be surprised You never know like like who they know and so once they know they might share it with others A lot of your freelancing stuff when we get there will come from friends and family And so the more you let folks know hey, this is what I do This is how I do it and I'm looking to meet other folks You'll you'll you'll probably start to hear other folks too that there's somebody's friend or brother cousin or something And then those connections can be really really strong, right? If there's somebody that connects you with somebody else, that can be really strong. And this counts for folks that you networked into, right? So once somebody goes from stranger to friend, you could say, hey, Bob, I've really enjoyed getting to know you. You seem really connected in the tech space. Is there anybody else I should talk to? And I had a student before that whenever they had a coffee chat, they ended every single coffee chat with who should I talk to, right? Who should I talk to? And every week they got their next coffee chat by asking the one but the week before Who's the next person I should talk to and can you connect me? right, and so you can do that too, right like once you kind of put in that work to get the Connection you keep moving Juggling biohazard says how do we get over the feeling of being disingenuous or manipulative? It's only manipulative if you're not actually trying to make friends If you actually go into this, honestly, like wanting to make friends and get to know people and there's nothing disingenuous about that.

Like, yeah, your goal is to like build a network so you can, you can like get more jobs, right? But like they said, like be genuine. Yeah, like actually care about the person you're talking to provide value, right? Like provide value. I think that's one of the things that people get wrong with networking so much and some of these we're going to talk about on Thursday There's too much to cover in just one class, right? And so on Thursday, we're gonna talk about like how do you like actually talk to these people like what are the Leon? Show me the messages that you're sending Show me the conversations that you're having because I I've never done this before I need to see what you're talking about We're gonna do that on Thursday, right? But be genuine, right? What do we do with our hands? Be genuine, care about other people, provide somebody value, right? If you talk to someone and your goal is to make friends, actually listen. Like if you were, if you had a coffee chat with me this week, right? There's like a 99% chance that it's going to come up that I did not play the new Pokemon game. You'd be like, hey, like, how are you doing? How was your week?

How was your weekend? Like typically when you start off a conversation with somebody, you say, hello, hey, how's your day been? How's your weekend been going? I would have said, hey, I was too busy. I didn't get to play the new Pokemon game that came out. I was really looking forward to it, right? If you wanted to provide me value after that call and show me that you were listening, show me that you were like engaged, I would expect an email saying, hey, Leon, I really appreciate you taking the time to talk to me today. I learned, like, I just had so fun like engaging with you. Have you seen this article about the new Pokemon game? That's it. You provided the smallest bit of value just by linking me an article and that in my brain, right, makes me think positively about you. So there are these things that you can do in these talks and there are things that we can do after the conversations that get people to go from stranger to friends, right? So, let's talk about that process. Talk about that process. Alrighty.

You meet someone, right? You meet them at an event, a conference, a local community group, right? You meet someone, the next day you should send them an email. In that email, right? In that email, you need to provide some sort of value. And that value should indicate to them that you were actually engaged in that conversation. Hey Bob, it was amazing to meet you. I really enjoyed our talk about Rubik's Cubes. Did you see that the competitive speed cube is now less than $10 on Amazon? It blew my mind, I had no idea, right? I had no idea that it could be that cheap to get into Rubik's Cubing. Thank you for letting me know. Like thank you for like, thank you for bringing up Rubik's Cubing again. I'm gonna order one and get into it, right? So that just provided a little bit of value.

I showed them that they can get a new Rubik's cube for under $10 and it shows that I now have an interest in a passion of theirs, right? It really is just that simple. Sam said, if I had two hours a day to commit to furthering my career, 30 minutes of those would be networking, 100% agree, right? So you meet them, next day you follow up with an email. Provide the smallest amount of value it can be linking an article could be linking something that that tied into a passion right Three days later add them on LinkedIn All right, three days later add them on LinkedIn Hey, we met at such-and-such meet up a week ago or three days ago a couple days ago. Don't say three days That sounds weird Hey, we met up. We met at the meetup a couple days ago. I really enjoyed talking to you I had a lot of fun. I would love just to stay in touch. So I'm adding you here on LinkedIn Hopefully I see you at the next meetup right Now notice I didn't just add them on linkedin, what did I do? I didn't just add them on linkedin. What did I do? I sent them a message for the love of all that is holy Everybody right now right hands up, please right hands up In the air, please yes you you're not putting your hand put your hand up if you're able please okay repeat after me I Promise You say you say I promise I promise To never add someone on LinkedIn ever again without also sending a message. I'll say it one more time for the folks in back. I promise to never add someone on LinkedIn again without also including a message.

All right, we all promised. If you ever add me on LinkedIn, let's just get real here for a second. If you, I don't accept people on LinkedIn until they graduate just by the way. But if you ever add me on LinkedIn and there's not a message, I'm blocking you and I'm banning you from everything. You're going to be banned on Twitch. You're going to be banned on Discord. Anything that I'm going to block you on Twitter, right? Any way that I can never see you again, I'm going to figure out a way to do it. All right? You're going to, you're going to submit your ban appeal and it's going to be a no. All right. My camera did not like the putting the hand up. There we go. All right. We're back.

Cool. We've all agreed. We've all signed the sacred oath to never send a LinkedIn message. Uh, send a LinkedIn ad without a message ever again. Cool. I'm going to ban you on vine. Exactly. What if we sent the request a month ago? You're all right, you're all right. All right, then six days, on the sixth day, right, on the sixth day, you add them on Twitter. All right, so you met someone. The next day, you sent them an email that provided some value. On the third day, you added them on LinkedIn with a message reminding them where you met them and thanking them again for their time. And then on the sixth day, you added them on Twitter. What are we doing right here, folks?

What are we doing to these people's brains right now? Yeah, we're stalking. No, not stalking, it's networking, okay? We're doing spaced repetition. We're doing spaced repetition on them remembering who you are, right? And we're doing it with enough space in between that it's not weird. It's networking, right? We provided value. We provided appreciation. It's not weird. It's networking, right? And we just spaced repetition the brains into remembering who you are. So the next time you go to that meetup, you're no longer a stranger. What are you? You're no longer a stranger.

What are you? You're at least an acquaintance. You're at least an acquaintance. How good are you are at this process? Maybe you're a friend right, but you're at least an acquaintance All right, you're at least an acquaintance So in in one meetup, you can turn quite a few folks from strangers to acquaintances Just by following this pattern Now if you're like Leon I I Don't know what email to send Leah I don't know what LinkedIn message to send. Ah, I don't know how to add them on Twitter. I got you Thursday I got you Thursday. I'm gonna share Exactly what I send in an email. I'm gonna share exactly what I send in a LinkedIn message I'm gonna send exactly what I send on Twitter. I got you, right? It's gonna be you could don't copy and paste because there's like a thousand of you copy and pasting it But it'll give you the good idea All right Memphis, thank you for the hydration. Cheers to you. Cool. Now, coffee chats. Let's say you've done this previous pattern.

You met them, you emailed them, you LinkedIned them, you Twittered them, right? You feel like you're at that acquaintance stage, right? Do coffee chats always have to be different people? They should, you should try, yeah. All right. Different people each week, at least, right? The idea is to have a coffee chat. Now, coffee chats used to be like in person, like you would go to a coffee shop. You would sit down and you would talk with the person. Uh, right now, not everyone can do that. A lot of people are still not meeting up in person. Right? So when I say coffee chat, I mean, just talking with someone one-on-one. Now, some people like to do pub chats, right? Like where you go to like a, you get beer, right?

Some people don't, some people like coffee, something like that. Right. Doesn't matter where you do it or how you do it. It's, it's, it's the idea of sitting down and having a deeper conversation with somebody one-on-one now to get that coffee chat, what you'd want to do is say, send them an email, Hey, I really appreciate getting to know you. I've thought a lot about the conversation we had a week ago. I, it seems like you're at in your career where I want to be in the next couple of years, like in 10 years from now, right? Would you be open to giving me 15, 20 minutes of your time just to have a deeper conversation about how you got to where you are right now, right? And you send them that email. If they don't respond two weeks later, you send a follow-up. Hey, I know times are busy. Just wanted to ping you again to see if you'd be open to meeting for a quick coffee chat. And then if they don't respond to that at the end of the month, you send You send them one more email if at the end of the month after three months, they don't respond to you Then you just drop it right? Don't keep badgering them. You tried you shot your shot. They don't want to meet up.

That's okay You're gonna have a lot of people that you shoot your shot. They just don't meet up. They don't have time They don't respond. That's okay. All right, but I guarantee you a lot of people in tech Had had coffee chats when they started out that helped them with their careers And so they want to have coffee chats with you because they were where you were right in Boston. I Have I've never turned down a coffee chat I've never turned down a coffee chat and I think I've only Gotten like knows like I don't even I don't even I know it had to have happened at least once But I can't remember somebody saying no to a coffee chat Right. That's just that's just how ingrained in tech this idea is, right? That people know that like engineers work together. They need code from each other that like they build their careers that way, right? And so this idea is that like most people will be happy to have a coffee chat with you. A lot of people would want to share their experience with you because that's how they got to where they are now. Now, the thing you have to realize is that you should be doing this locally, right? Um, because you're, you're going to be like, there'll be a lot of people that are going to be asking for coffee chats soon, and so make sure you're trying to do this like locally first and then other people out, um, a lot of people don't, a lot of people get confused about the coffee chat. Like, should I buy them coffee? Like if you're going to meet in person, here's my trick.

If you're going to meet in person, right. And you're going to actually go to like an actual coffee shop. Here's my trick. Go early. right, go early and buy the smallest coffee they have, right, if you have some money, buy the smallest coffee they have, right? It could be a shot of espresso, I don't care what it is, tall coffee, whatever it is, whatever the cheapest fricking thing on the menu is, you get there early, order that, and you sit down with it, right? Now, when the person you're meeting with comes, you can say, hey, I already got myself a coffee, well, if you wanna grab something, and feel free to grab something and then join me, right? So now there's no need to like buy them a coffee. They don't feel awkward having to buy you a coffee, right? And if you can't afford the small coffee, just ask for a cup of water, right? Most places will be like, yeah, sure, here's a cup of water. You'll sit down with the water, you wait for them to come in. They'll see that the other person goes to get coffee and then that's it, you're good, right? If you're really cheap, Like, like, if you really want to be like, like, like save money, just keep the cup. Just keep the cup.

Next time you show up, right? Next time you show up, you sit down and you already have your cup. You can reuse that cup, right? You can reuse that cup for like your next five coffee chats. That's it. You just bring the cup, put it on the table and you just wait, right? That's it. I should say frugal, not cheap. If you're very frugal, right? That's what you do. You just bring the same cup. You're good. All right. Alrighty. But like I said, most of your coffee chats right now, right?

Most of your coffee chats right now are probably gonna be remote. They're probably gonna be like Google call, like Google meets or Zoom calls. And that's okay. Most people aren't meeting like in person yet. All right. Now the last, well, I got two big more things and we're gonna move on, I promise. Two more big things that I wanna talk about that I think are really helpful when it comes to networking. One is using the sheet. So here is the sheet. You can do exclamation point sheet in chat, but the link's here in the slides. And the sheet, the sheet has just a place to keep your networking, okay? It's a place to keep your networking. And so, due to a large number of people currently viewing the spreadsheet, access may become limited or not possible. I've never seen that before. Or not possible.

What you're gonna do is you're gonna make a copy of this sheet, right? Don't worry about it right now, you're probably gonna have to come after class. You're gonna make a copy of this sheet, okay? You're gonna make a copy of this sheet, and in it, you're gonna keep track of each person that you network with, right? You're gonna keep track of each person you network with. You're gonna add the event that you met them at, the date, their name, where they work, what they do, and most importantly, the spark. The spark is like the thing that you remember about that person, right? Right? That's the thing that you remember about the person. That way you never forget, like, the thing that you talked about, right? Like, they really like Pokemon. They really like Rubik's Cubes. They hate poker. I don't know, right? You put the spark on there so you never forget.

You put their email on here, and then you have the, kind of, the three steps, right? Did you follow up with email? If yes, mark it off. Did you add them on LinkedIn? If yes, mark it, remember with a message, right? If so, mark it off, right? And did you add them on Twitter? So mark it off, right? And so over time, you're gonna have this amazing list of people that you've networked with that when it comes time, when it comes time to start kind of reaching out, right? To start reaching out to folks to get referrals, this is where you start. Hey Bob, we met at such and such event last year. I remember us talking deeply about Rubik's cubes. I really enjoyed our conversation. I'm currently looking for new roles. Are there, is there anything out there that you feel like might be a good fit for me?

Here's my, the stuff that I like, here's my resume, boom, right? So those people that you forge those relationships with over the entire bootcamp, you now have a nice clean list to go back to with everything that you remember about that person. And that's it, that's how you get the jobs, right? Cool. There's also this other part of it called the hit list. We're not there yet. Eventually when we go on the hunt to get our job, this other part of the sheet becomes really important. But for now, please keep track of the folks you network with. You'll never remember everything. You'll never remember the spark. You won't remember where or when you met them. So you put it all here so you don't ever forget it. Cool. Now, you're turning strangers into friends. You found the networking places that work well for you.

You're setting up your coffee chats. You're using the sheet. You're doing everything you need to do to be networking well. There's one more pro move. I am a pro gamer. This is my pro gamer move. You ready? Alerts Alerts folks so You can on google Right set up custom alerts. So it's just google.com slash alerts And when you go here, you can create an alert about anything You can add each person that you met and create a google alert about that person's name Now, whenever, whenever, I don't know what that is. Whenever, whenever you show, I guess that was my, all my alerts for my name popping up. Whenever you, let me go back there. Whenever you type in someone's name and something comes up about them, you will get an email and it will say, hey, Leon Noel just showed up in this article, right? If there is something that they talked about, right, they're really into, I don't know, Pokemon, you could create an alert for it. Now, the next time you talk to that person, you can bring something up. Oh, did you just see this new news about X, Y, or Z?

or if you want to reach back out to someone, right? You want to reach back out to someone, right? And like, you want to reach out to them to get it. Like you want to get a referral. Hey Bob, I just saw that your company raised a hundred million dollars. Huge congrats. I hope some of that money is going your way. I hope that like you're, you're hiring like wild. And if you are, I'm looking for a new opportunity. Let me know if you know of anything that's open that you think it might be a good fit for. Hope you're doing really well. Hope you're enjoying the new Pokemon game. Have a wonderful rest of your week. Right? It's gonna be your in if you ever need to follow up with somebody again, because you're gonna have all these alerts that you build up over time.

The other thing too is that you could like add their company's blog to like an RSS feed or their blog to an RSS feed. So the idea is just to like create alerts for anybody, anybody that you put on this networking sheet, you create an alert for, that's it. So many people get concerned about like genuine interest. Here's how you don't worry about that. Be a good human, provide more value than you take, right? And actually care about the relationship, that's it. If you do those things, you are fine, right? These are just ways that you can bring them back to the top of your mind, right? And this is how the world works, folks. And nobody's ever told you this. This is how you get jobs. This is how you get better jobs. This is how you get the big jobs, right? Has nothing to do with how good you are at writing code. Has to do with folks wanting you on their team.

That's it, all right, we can go home. All right, buddy, have a good rest of your day. All right, so on Thursday, we are going to do more review of these ideas of how to network, but we're also going to give examples, like I said, of everything, so we're gonna keep doing this. It's not something that you're gonna start tonight. It's not something you're gonna start this week. It's something you're gonna start next week after we've had more time to talk about it and we've seen more examples. But before we jump into it, I wanted to answer some questions. How do we follow up on coffee chats? The same way that you follow up on any other followup. Send them an email the day after saying, thanking them for their time and providing some sort of value in that email. Pick something that you talked about, right? Pick something you talk about and then put that into the email, providing some sort of value. What are some important questions to ask during coffee chats? There are no important questions. You're there to make a friend.

You're there to get to know someone, right? And if you read how to win friends and influence people, one of the things they talk about is people love to talk about themselves. So if you don't know, like, if you're not great at carrying conversations, just get the person talking about themselves. Oh, where do you work at? Do you like it? How long have you worked there? How did you get into tech? Did you go to school for computer science? Did you learn on your own? Oh, what languages do you use? Oh, did you use those languages beforehand? Did you have to teach yourself? What are you excited about with those languages? What are you excited about for your job? Is there something like you can just have those like basic questions asking them about themselves and how they got there, and that'll carry you for the entire coffee chat.

That's it. Can I use board game events or local events besides meetups? Yeah, you can. Just the more tech focused they are, the more likely that network is to be impactful for you. But you might find, I don't know, in New York, a lot of people in tech are into the settlers of Catan scene. You go to the Catan meetups, And like it's 95% people in tech. And so like there might be pockets of things that are like stuff you'd like to do that might also have like an overlap of people in tech. And so you can find those pockets if you want. How long should a coffee chat generally be 20 to 30 ish minutes, maybe 15 to 30 minutes, I would say. Okay, our game dev candidates for networking should we focus on web dev? I think the closer you can get the web dev with your coffee chats, the better this will be for you. Have you ever done coffee chats with your students of 100 devs? I have in the past. Eventually when we get further into the cohort, I open up my calendar for folks to book one-on-one times, but we don't do that until we get a little bit further on. And so once we get further in, open up my calendar, and whoever wants to grab a one-on-one coffee chat, happy to do it.

What happens when you have a hundred people in your network and hundreds of emails every day about all the topics they like? You're not sending these every day, just after you meet the person the first time, and you should only be really doing like five of these a week. Cool. Who's the author of the book? It's Dale Carnegie. Funny thing is that that's not their real name. They changed it because Carnegie sounded more business-like and so they knew they would sell more books if they changed their last name to Carnegie. What a hack. I love it. Five is a lot, yes it is, but you can do it. And my students that I teach during the day do more, right? You're gonna start off small, you're not gonna do all five in the first week or two, you're gonna ease into it and get more comfortable with it, find the thing that works for you and then up it. How, where do we get access to the spreadsheet? The link is in the slides. You can just click the link in the slides.

I think so many people ran to it that it might be like down the copy but come back after class and copy it There are three versions of the book which one do you want us to read whatever one you can find for free I don't think stuff has changed too much. There's like a digital version now. I haven't read that one But just the regular old one is fine Should they work at different places? Yeah, the more spread out your connections are the better you're gonna do Is this doable through Zoom? Yeah, of course. You can find the book for free. Is it okay to network with those that are in our current full giant job where he worked with in the past? Yeah. But you want to be adding more, like it's good to reconnect with them for sure. You want to be adding new people too. I have tried this type of networking, being friendly with coworkers in general has never worked in my favor. I'm just not people magnet. Is it different in tech? It's very different in tech because like one people typically are, I mean, let's just say it nerdy and they like to nerd out over stuff. And so if you can nerd out over stuff with them, it gives you like a common bond instantly.

Like if you're showing up to a JavaScript meetup, you're not going to be able to do that. nerd, right? And so you can both nerd out over JavaScript and that just immediately gives you like something to connect over. Um, and it makes it a little bit easier, but also you have to read that book. You have to read the book. Like it's just, if you don't have those skills in your arsenal, this is not going to work for you. Cool. And when I call people nerds, I'm also calling myself a big nerd too. What if the coffee chat went so great, they offer you a job in like a month, but you're not ready. What do you say? Thank you. I'll start. And then you learn on the job. It's not a coding bootcamp, folks. Y'all got got.

This is a getting a job bootcamp. So somebody gives you a job, you take it. You have succeeded. it. All righty. Let's do one more and then we're going to take our break and then we come back. We're going to get into responsiveness. We're going to have a lot of fun with responsiveness tonight. Would concentrating on companies that you want to work at be helpful? Yes, but you're going to do that more towards the end of program with the hunt. The hunt becomes like once we're better at networking, we get targeted with the folks that we want to network and we specifically seek out those individuals. So for right now, you want to kind of do general networking, get comfortable with it, figure out what works for you, what doesn't work for you. Like the whole part of this networking phase is to like figure out what works for you. So that when we get to the phase where we have to be targeted with our networking, we're good at it. What if I'm not nerdy enough?

That's okay. You're gonna find, you gotta find the group that works for you, you know? All right. What if the event overlaps with class? I mean, VODs are always available right after. Figure out what's the priority for you. How long should a typical coffee chat go for? I think I said like 15 to 30 minutes is good. Can you meet people at hackathons? Absolutely. Yeah, hackathons are a great place to meet folks because you're working together on a team. I mentioned the community groups and I think hackathons kind of get lumped into those community groups. There are, in a lot of cities, groups that come together to build stuff every week. And so I know Code for Boston came every week to build stuff together. They're typically like civic-minded stuff where they're building tools to help people.

And so like, you're kind of like doing one part, volunteering one part, hanging out and building stuff with people. That's really great. Um, also a lot of conferences nowadays have like quiet networking or like quiet sessions. So I like Libre planet, they always have, uh, two parties that happen at the same time. Uh, one party is like at a pub, it's like rancorous. There's lots of, like, there's like meeting lots of people. You're drinking, like doing all that. But they always at the same time Open up a space where people can come and just work together on like different free software projects Right, and so it's about finding what works for you, right? You'll often find like more quiet Spaces where you can like work with others And so like I said, there's there's such a range of places that you can meet people Don't think that you're only gonna be good at one thing Try them all try them all multiple times and then really make that decision You know what I find conferences are the best for me. I'm gonna load up on my conferences I find these meetups are the best thing I'm gonna load up on meetups I find that like hacking sessions where I get to meet up with other engineers and build stuff is what works best for me I'm gonna load up on those right? And so you got to You got to you got to figure out what works for you Are there beginner hackathons? Oh, yeah, there's tons of them. Yeah Uh, can 15 year olds get internships and network like adults? Absolutely. The younger you are, the easier this is.

Like the younger you are, the more likely people are to help you. And so if you're like, if you're like a young and right, people are going to be more likely to like, take, have coffee chats with you. And so if you're like, if you're like a teenager that's listening to this, yeah, you're going to, you're going to, you're going to probably have a little bit easier time with this because more people are going to be wanting to like mentor you, I guess you could say. Yeah. Yeah. I wouldn't worry about that too much. And I don't mean like, like adults, this is not for adults. I'm talking to people that are not adults. Your age doesn't matter when it comes to networking if you're already an adult. It just doesn't matter. Alrighty folks, let's go ahead and take our top of the hour break. If you're new here, let's go ahead and take our five-minute break. We like to be healthy. If you're able, please get up, move around, stretch, let your eyes focus on something that's not the screen, and we'll come back together in five minutes. When we come back, we're gonna do a quick review of CSS.

We're gonna jump into responsiveness. We're gonna see how to make our sites responsive. We're gonna talk about the three key things when it comes to building responsive websites, and then we'll break for the evening. All right, folks, five minutes on the clock. you You You just got a new foot rest. I'm trying it out. Sorry. Ooh, I like it. Ooh. Liana, are we not supposed to be using divs? If not, I messed up on the homework. Divs just don't have the same semantic meaning anymore. It's not that you can't use them, just that there's probably better ones out there, better tags out there. I need a new footrest. What did you get?

It's the human scale one. They're like their normal one that's not the triangular one. Okay. It makes me sit a little bit better, I think. Should we build rapport with recruiters? Absolutely. All right, folks, come on back, come on back. How much of the advanced Shayhal should we be retaining? Not all of it. I mean, it's something that you want to have a first pass on, right? Anything that's important, we're going to go over in class. All right, folks, come on in. No, human scale, not human skin footrests. I've been watching a lot of Rome. I would have put that past them recently.

But yeah, human scale. All right, folks, let's power through some of our review tonight. But I wanted to put a little note. We're gonna start adding more layers to the show here, folks. We have this networking thing It's gonna become something we start doing next week We're gonna start seeing a slightly harder material Right, and the idea here is we're gonna start turning it up, right? We're gonna go slow Right. One of the things I hate the most our tutorials that throw you in the deep end and then laugh at you while you're drowning That's not what we like to do here But we're gonna slowly start to raise the intensity Right, I said to make it come up a little bit folks that want to push there gonna be some push work that you can do right and push work that you can do right that won't be required but something if you want to start pushing you can and the overall amount of stuff we're doing the speed of which we do it I'm going to start slowly turning up not yet something to keep in mind we're going to start doing I'm going to start more push work if you want it on Thursday I'm going to give a lot of work that needs to get done and some of it will be optional but if you want to push you can do it and that push work will help you go deeper and deeper on topic okay I just wanted to put that out there, some folks kind of like, all right, pace this calc class, maybe a little too slow, right for them, we're gonna give you some push work if you need that, other folks might be just right, for other folks it might be a little too fast, but just so you know, we're gonna slowly bring up the temperature. All right, golden rule, separation concerns is important for what? Why is it important? Organization, exactly, for us and for others that we work with, wanna make sure that Our content is kept in our HTML. Our style is kept in our CSS and our JavaScript. Our behavior is kept in our JavaScript. Nice. CSS goes where? In a separate, in a separate file, exactly.

Unless you're doing HTML emails, which can have inline, or if you're working at Amazon, you have critical path CSS, then you can put a little bit of CSS in your head, but for the rest of us, we put it in a separate file and we link to it with a link tag in our head. This whole thing here is what? This right here is a what? Oh, don't I have a demo pro on? Oh no. Sorry, I didn't have my demo pro turned on. Whoop. This whole thing, yep, exactly, is a rule. A rule is broken down into a selector and a declaration block. Declaration block is broken down into declarations. Declarations are broken down into properties and values. Nice. This is a speed run, folks. If you're new here, we went over this for six classes. So this is just kind of us getting our space repetition in.

Don't feel like you have to keep up with this pace. Go back to our other videos. Beautiful. We know that CSS is read from top to bottom. Stuff that comes below can be overridden by stuff that comes above. We call that the what? The cascade, nice, beautiful. All right, we have ways of selecting elements based on their relationships. Here we're seeing a direct parent-child relationship where a child comes directly inside of a parent. We also have parent-child, meaning that the child can come any part inside of the parent, doesn't matter how many levels deep, it could be a great, great, great grandchild and still work. The difference between a direct child and a regular old parent child is that there's no caret in between. Nice. We also have siblings. This is the direct sibling, meaning that the only paragraph here that'll be read is this paragraph here, because it immediately has a sibling that comes before. Nice.

We learned about IDs and classes. IDs are unique identifiers, It enables us to target one element and only one element. Once an element has an ID, it cannot get another ID, and that ID cannot be reused across other elements. Beautiful. Kind of in the same idea are classes. Classes can be reused to target multiple elements. I can get multiple elements in my HTML in the same class, and I will target all those elements at the same time, and each element can have as many classes, theoretically, as they want. All right, chat, how many points of specificity does this rule have? How many points? All right, I see the guesses coming in. All right, let's take a look at it. We have two tags, one class, and one ID, so 112 points of specificity, nice. How many points of specificity does this rule have, chat? How many points of specificity? You know the guess?

All right, see some guesses in there, I'm seeing 131 a lot, let's take a look at it. We have one tag, we have three classes, and we have one ID. So 131 points of specificity, nice. And this one here, how many points of specificity does this rule have? The rule. My finger slipped. Uh-huh. Your finger slipped. Uh-huh. All right. Let's take a look. We have no tags. So zero tags. We have one, two, three classes. We have one ID and we have an other for bang important.

So 1130 points of specificity. Some folks are saying why the plus That's a sibling selector. If you haven't been here for our last classes, definitely catch up with those classes. We go through all the things that you see here in detail. Cool. Box model, folks. The box model is made up of what three things? Box model is made up of what three things? Ah, okay. I see a couple people a little a little meet up a little a little a little varied here The three things that make up the box model are the element itself The padding and the border, right? So you have the width of the element The width of its padding and the width of the border Same thing for the height you have the height of the element the height of its padding and the height of the border margin pushes the box model around. It's the bully that pushes it around, right? Margin pushes it around. Cool. Now remember, padding increases the distance between the element and its border, right?

So if you want to put space between the element and its border, you increase that with padding, and then margin pushes this whole thing around. Alrighty, we have some starter code for this evening. If you're new and you need the starter code, It's always shared on discord before class starts. Uh, you can join our discord in the follow along materials channel You'll find the code for today And in that code for today We have box model practice So i'm going to look at this box model practice Uh, there is some some things that you have to do. It's both in the html and the css I'm going to put four minutes on the clock and I want you to go as fast as you can in these four minutes to get as much done as possible, and then we're gonna go over it together. Four minutes on the timer. As fast as you can go. Don't worry if you can't finish in four minutes. I know that's a little bit of time, but we need to push. Alrighty, have at it. See you in four minutes. This is box model practice. Let's get out of here with these guns. I haven't even opened it yet. Uh, Izzy, we did the Pokemon card live.

We did the drawing live. Um, I just need to get your address. If you whisper me your address here on Twitch, we'll get it coming your way. Don't send it on Discord, I won't see it, but if you whisper it, hear me on Twitch, I'll see it. What happens when the market gets oversaturated with software engineers? Will salaries drop drastically? No, I mean, it's not going to get oversaturated. And if it did, every company is a tech company now. They all need engineers. They all need to build stuff. We're at like a 2 million shortage right now. I've been doing this for 10 years. This is the most jobs I've ever seen. It's really hard for people to gain the skills they need to get a job. There's a long trough of sorrow.

I Noticed you were in CS go over the weekend the server is almost ready if you check the slides wink wink I'll share more towards the end of class about it. But yeah We'll be doing the house selection soon, yeah, the houses are just gonna be other Study communities. So as the study communities roll roll out We'll have We'll have the other ones too Superman, hey, thank you for the five gifted subs. Superman, no home. Thank you for the gifted subs. CSGO, why not Valorant? Cause I'm really good at CSGO. No, CSGO is completely free and can run on a toaster. That's why I like CS go and it's really easy to set up servers, private servers. You got your first coffee chat next week. Congrats. It's huge. Now, push work won't be mandatory, just for those that want to have, want to go deeper around stuff. Ooh, a lot of folks getting done, that's dope. Man, my has been on 1.6, that's wonderful.

I love that. CSGO can run on a smart fridge. I'm pretty sure I could probably run on a smart fridge A lot of folks came in done. I love it Please go slow. No, this is this is review for us We're going to go through this pretty quickly But the cool thing is I share all my solution code on discard as soon as class is over and you can always rewatch the vod But this one we're going to go through a little bit fast so we can get to a response in this before we run out of time All right, folks, let's take a look at this together. All right, please give the H1 some padding on three sides. Easy to do. We learned that shortcut last class so we can do padding and we can just do, let's do, um, maybe we can do zero padding on the top, 20 pixels on the right, um, 10 pixels on the bottom, and I don't know, 15 pixels on the left. Remember, padding gets assigned clockwise. So zero on the top, 20 on the right, 10 on the bottom, 15 on the left. So that's giving padding on three sides and margin on just one side. So let's do margin. We could do margin left of, I would say 20, let's do, let's do something great, just like a hundred pixels. And then we could do zero, zero, zero. If we wanted to, and that would just give us, I'd be just margin on the top.

Let's do, let's keep it that way. So this would be margin on the top of 100 pixels. So it'd be 100 pixels on the top, zero on the right, zero on the bottom, zero on the left, right? And yeah, so margin on just one side, light purple background and light blue lettering. What did y'all do for light purple? What did y'all do for light purpling? Lavender, yeah, I think we did that last time, right? Lavender, and what did y'all do for the color of the lettering for light blue. Lum. Sky blue, light blue, sky blue. That's a that's a bomb color. All right, let's check it out. All right, so we inspect it real quick. We can see this is an H1 that has the margin on the top. There's no padding and we can, oh, sorry, no padding on the top.

But you can see if we look, that orangey color at the top when I hover, right? that's the margin, the green color is the padding, and then you can see the actual element. And if you ever want to see like the fully computed values, we can always scroll down, and then boom, there you go. You see all of our padding taking effect, all of our border, and all of our margin right in the inspector. Lovely. All right, let's keep doing the other ones here. Please give the H2 significant padding on the top and bottom. So we can use that repeating factor that we talked about last time where we can do let's say like 50 pixels 0 and so what that'll do is it'll put 50 on the top 0 on the right 50 on the bottom and 0 on the left when it's just 2 it'll repeat right over Pete dark Dark green border, border, three pixels, solid. What did y'all use for dark green? Dark green. Dark green. But interestingly enough, it says on the top and bottom. All right. Dark green border on top of bottom. So we can actually do border top if we wanted to, right?

And then we can also do border bottom if we want it. So we do have like control over where the borders go. Cool. And then orange background. Background, orange. Cool. Let's save this. Go back, let's refresh. Oh, didn't work, didn't work, why didn't it work? There you go, we gotta do border-bottom, cool. Second try, alrighty, I know we're going fast with this one, but this is just a review. Please give the section a thick blue border. Let's go ahead and do section. Thick blue border, let's do border. 10 pixels, solid blue.

Height, 300 pixels, nice. And more than 400 pixels of margin on the top. So we can just do margin top of one or two. I'm gonna do 401 pixels. There we go. Make sure we got it. Beautiful, look at all that margin we created. And then please make the spans of a thin yellow borders and equal padding and margin on all sides. So span, thin yellow borders, let's do border one pixels, solid yellow. Cool. And then equal padding and margin on all sides. So let's just do padding, 10 pixels, and then margin 10 pixels. And remember, when it's just one, right? When it's just one, it's gonna apply that 10 on all sides. It's gonna do 10 on the top, 10 on the right, 10 on the bottom, 10 on the left, right?

Same thing for margin, 10 on the top, 10 on the right, 10 on the bottom, 10 on the left, boom. Got it first try, hey, nice. Well done, everybody, well done. And like I said, we went through this fast, but you can always rewatch the VOD and I always share my solutions on Discord after class. Good stuff, everybody. Let's just check to make sure the spans came through. All right, the spans are looking good. Let's inspect one just to make sure. Beautiful. You can see that padding on all sides, border on all sides, and margin on all sides. Wonderful. All right, let's move on. All right, we reviewed all the layouts on Sunday, The the the additional layouts, but I want to do the third one together together again. We're using floats for right now the reason why we introduce floats as I kept I mentioned before is You're probably gonna see them on the job They're way harder to learn and so I want you to get practice with them here The homework that I give you this week and even next week will still require to use floats I want you to get practice with it here a lot of my students the first kind of tickets they get or jobs They get are like converting old code to new code and you gotta kind of know how floats work and they're kind of tricky They have some quirks. And so I want you to learn the quirks here, right so that you Can can can deal with them on the job Never floats are always trying to do one thing really well and that's get into the corner, right?

If you float something to the left It's trying to go up as much as it can To the right as much as it can can fighting to get in that corner You float something to the right, trying to go up as much as you can, to the right as much as you can, fighting to get in that corner. Beautiful. Now, we saw some simple layouts. We did layout one and two and three on stream. I wanna do three together again, because we're gonna use it when we get to responsiveness. And so, for this layout three, I'm just gonna use our template, okay? So if I look at this chat, what would this be? What would that be? Header, how about this one? Footer, nice. And how about these three? Oh, four, sorry, what four? Cool, yeah, they could all just be sections. We don't really have content to tell us what they really are We kind of take like an educated guess here And if I wanted to distinguish just this section aways from the other ones, what could I do? I want to just target that that section is compared to other ones.

What could I do? It could be a class exactly class or an ID I like to use classes over IDs just because IDs have too much specificity, but yeah, we could give it a class or an ID. All right, I'm gonna open up my template here. And in the template, we're gonna do that layout. So template, I always have a fresh template that I love to just open up and start writing in. We're gonna have our header. And then we have four sections. And so I'm gonna do my four sections. section and section, beautiful. And then the last one we're gonna do is just the footer. Beautiful. And if we look at the image, it was the second section that had the bigness there. So we're gonna call this one, This is the class of thick one. There we go. That thick one there and all the other ones seem good.

All right, I think the HTML looks good. Let's jump into the CSS. We could use pseudo selectors, we could use IDs, right? We could do all these different things. Our CSS already has the box model hack for us. We got all the good stuff. I'm gonna go straight to my layout here. I don't ever like the header and footer being separate. Our header and footer are exactly the same in this layout. And so I'm just gonna give them a height and a width. We're gonna do 100 pixels. They don't need a width there by default, 100%. And we're gonna give them a border. And we're gonna have a border of two pixels, solid black, just to see it. And then the other thing that we can do here is we want to just put our clear by default.

We know that we're gonna have trouble with the footer sliding up. Let's just do clear both. We took our time on this during office hours. So you can definitely go back through office hours and see a little bit slower, but that's the idea here. Got our header and our footer. Let's open this in the browser and see what we got. Good, our header and footer showing up. Let's go ahead and get our sections on the board here. Cool. Let's go ahead and give our section of, let's do height, let's give them height of 300 pixels. And then we want them to all be a width of what? If we look at the image, maybe this could be like 20, 20, 20, and then thick one could be 40, right? Like 20, 20, 20, and 40. I think that'd be close enough. So our sections are gonna all start off with a width of 20% full.

And we're gonna give them a border, not background origin, what's that? Give them a border. We'll do two pixels solid black as well. Why don't I have to worry about my borders when I'm calculating the width right now? Why don't I have to care about the borders when calculating my width right now? Yeah, we got the box sizing up top, right? We had the box sizing, so we don't really have to calculate the border size as well. All right. And that'll get all of our sections looking the same and sitting next to each other. Beautiful. They're not sitting next to each other yet cause we still need float. Let's go ahead and give them a float. Left, lovely. Now they should be sitting next to each other. Looks good.

but we still need thick one to be bigger. Let's go ahead and write a class for thick one. And let's go ahead and give it a width of 40%. Beautiful. And I think that'll be all we wrote. Cool. Now the heights can be a little bit different to match the actual image, but that's pretty close enough. That's the spirit of it. And so we'll stay here for now. All right. Let's take a look at the CSS header and footer section. Thick one looks good. And I say we achieved our layout. If you want this solution, it'll be in the materials after class. Cool.

Let's get to the main event tonight, folks. Tonight, we're here to talk about responsiveness or responsive websites. the idea of our layouts looking great across all different kinds of devices, right? Something really big happened to the internet that changed everything in how we do it, right? Something huge happened that revolutionized or changed how we approach web development entirely. Chat sees it, it was mobile phones, exactly. The mobile phone explosion changed everything. we could no longer get away with fixed screen sizes anymore. We had to make sure our website looked good across all the different devices that folks might actually be using. When we first started looking at sites back in the day, they were fixed. I remember, what is this? 14 years ago, I was building one of my first companies. I've talked about it a little bit on the street before. It was like a reverse Craigslist where folks that needed stuff could ask for it and people could respond saying hey I got that thing for you and I Remember everything being built in something called 960 grid the whole idea The whole concept was that there was like a Photoshop template that I could use where it was 960 pixels wide and It just was really cool to be able to like build your site with this 960 grid, uh, and so like your site looked really good. Like you have like a good template to use, um, but it meant that your site was fixed at 960 pixels, which was like, that was the jam back in the day, because that was like the size of like all the normal screens.

And so it just, it just worked. Um, when mobile came out, that no longer was a practice and it took a long time for a lot of companies to catch up and realize, Hey, maybe we should catch this train of being mobile friendly. Um, but for a lot of companies that took them a while, they had lots of like intermediary steps. Some of them will create like mobile sites specifically had like M dot sites and all these things. And there were companies that just didn't care. Uh, one of my favorites was UPS here in 2017. If you went to their, their website, this is what it looked like. Uh, you can use the way back machine to, to see it. Um, and this is what it looked like. And no matter what you did to it, it kind of just stayed that size. If you had a bigger screen, you just had all this white space there. And that was just kind of it. And they kind of kept this design all the way. This is in 2017. Like you can see it right here, it's really tiny.

April 29th of 2017, this was their website, right? It was not responsive in any way, shape or form. It was fixed. It didn't matter if you had a big screen, small screen, this is what you got, okay? Okay, now there's a lot of speculation as to like why they did this for so long. UPS is a big company that has a lot of resources. They had like intermediary steps that like helped fix this, but like their core site was still always this, right? And one of the things I always used to kind of think about was that they probably just didn't care about mobile. Like they just didn't care. It's probably not where they made their money. They make their monies from like businesses, sending a zillion packages a day. And Edith from shipping every day would come to the website, paste hundreds of tracking notifications in here. And they were just used to it. They had done it for 10 years. They didn't want to change it up.

And so when UPS finally did kind of like get their stuff together and build a site that worked, It will not work, but like wasn't fixed notice. Notice what happens here. Like look at this site Like look at look at look outside up like tracking's right here Chipping right like when they eventually did like modernize It kind of just like shifted it to the right a little bit, right? Like they didn't they didn't want it. They wanted to make sure That edith was able to come in every day and still do their thing Uh, and and they just had to like move their eyes just slightly to the right a little bit, right? It worked, and it probably worked for a really long time. They probably could hang on, and now they have something that works, it's responsive, but not a whole lot has changed with it, right? Cool. This is in direct contrast to sites that are really great and responsive. So boston.com is one of the sites I really like to show for responsiveness. As you kind of change the viewport or the size of the screen, things happen. Right now, things have gotten a little bit smaller. Columns start to disappear, right? As we get smaller and smaller, we go from kind of a three column layout to a singular column layout. And so what I love about Boston.com is that it really highlights kind of the three cornerstones of responsiveness.

What you're seeing right here are amazing content decisions, right? It's not just that the size is getting bigger, like things are taking up more space, It's going to a singular column. They've made really good decisions about what is important and what is not important, right? And so as we kind of bring the screen back up, they give us extra. As we get a little bit bigger, they bring us extra. Right. And the really funny thing is, uh, I used to, when I used to teach in a classroom, I always had like a projector behind me. And so we would bring this site up on a projector and I swear, I don't know if they're still there or not, but when we brought up a projector, which was like, I don't know, like a 60 plus inch screen, right? There were ads all the way on the outside. Like you can't see them, but they were all the way out there on the sides. And I was like, hmm, why would you do that? I was like, well, if you have a big old screen, right? You probably have some money. So let's throw them some ads, right? Let's throw them some ads, right?

But the funny thing here is that Boston.com had to change, right? They had to change. With the mobile explosion, when do people get their news? Right, when do people check the news? If you're in a metro area, when are people checking the news? Yeah, during their commute. You have so many people that are taking the T in Boston, it's what we call the subway, right? and they want to get just the raw essentials on their commute, right? And so you need a site that works well on mobile. If your goal is to sell ads, if your goal is to get eyeballs on content so you can sell ads, and you don't have a site that works well across mobile devices, you're not getting those eyeballs, you're not selling ads, you're not making money. So they had a really strong incentive to become mobile friendly and for their site to be really responsive. Cool. Now, when I talk about responsiveness, I'm talking about three really important ideas. Fluidity, elasticity, and content decisions. For a site to be considered responsive, I think it really needs to have these three things.

So what the heck are these three things? Fluidity is when everything is a percentage or can respond natively, you have a fluid site. So if we look at the layout we just did, this layout is really fluid. Like it can go from a full screen, right? From a full screen to like a mobile size screen and it kind of works, right? It kind of just works, right? And so we would call this fluid, right? As it's resizing, it's working. Eventually, we're gonna make content decisions, and those content decisions are gonna be at certain sizes. The way that our sites look good in between the sizes that we choose is that fluidity. The fluidity is what makes it so that it doesn't seem jarring when we make our content decisions. It kind of just works all the way up to that decision point, right? It's still fluid up to that decision point. and then we make the decision we're still good. So you need that fluidity, that fluid underpinning, so that as you make your decisions, it doesn't really matter so much, right?

That fluidity is really helpful. The elasticity is that next piece. And elasticity is at its core, setting our fonts and text to use a responsive unit of measure. And so the responsive unit of measure that we're gonna use is called an M or a REM, okay? Now this is somewhat tricky of a topic, but I like to think about some, like a very real scenario. Let's imagine you are building a website for your company or for a client and you build out all the CSS, right? Right, I forgot that was in here. You fill out all the CSS. It's 5,000 lines of CSS, right? And your boss, you take the site to your boss, you show it to them, and they're like Leon, I love this, it looks great. I just want all the fonts to be double the size. Right, they come to you and say, I want all the fonts to be double the size. Well, guess what you need to do now? You need to go line by line through your CSS. Well, hopefully you're doing like control find, right?

And you need to not only find all the pixel values that you made for your font size, but you also have to do the math to double them, right? You have to do the math to double them. So you're doing control find through this massive code base. You're finding all the pixel values and you're doubling them. If you had used ems you would have had to make one change on one line Let me show you what I mean. So here we have a section and When you use ems Ems get their font size from the parent element So here's a paragraph and its parent is the section so on my section I I put a font size of 10 pixels. Okay. On my section, I put a font size of 10 pixels. So if I made my paragraph one M, how many pixels is that paragraph now? 10 pixels, exactly. My paragraph is now 10 pixels Because the section has a font size of 10 pixels on it and the M is a responsive unit of measure It looks to that pixel value and that's where it gets its basis Okay now if I wanted to change all of my pixels and Every single bit of font that's inside that section. I wanted it to be double how could I make every single bit of text be double the size? What could I do? I have all these things inside of my section now, paragraphs, heading elements, all this type of text, and I want all those font sizes to be double exactly. I could come up here, I could change this from 10 to 20 pixels, and boom, all of my font sizes are now double the size.

One M is no longer 10 pixels. Now one M is 20 pixels. So I don't have to go through 5,000 lines of CSS. I made one change, right? One change and everything responded. That's the beauty of this elasticity. Now, the problem with Ms is that anyone can come along and put another containing element. and if that containing element has a font size, that's what your ems will be equal to. The ems only go to the closest parent with a font size. So if you're working on a big team and somebody else comes along and puts a parent with a different font size, your ems might not be the size that you expect them to be. So to not have to worry about like other team members or maybe yourself coming along and putting another parent element with a different font size, we have REMS. REMS stand for root Ms. And they only, only get their font size from the HTML element. Whatever size you put on the HTML element is where they get their styling from, right? So the cool thing now is whenever you use REMS, it'll always look to that HTML element and figure out what to do.

Now, you're saying, Leon, REMS sound great. If I ever wanted to double the size of my text, I could go and change the font size here and my one rem would now be worth more, right? Rems could be helpful there. But where rems get really, really helpful is that it helps us with individuals that may have some accessibility concerns. We right now are using the, I'm right now using, I'm gonna say, I'm using my browser right now with the default font size, right? The default font size for pretty much every browser is 16 pixels, right? So 16 pixels, that's too big brain for me. I can't do that math. I don't wanna be sitting there, one rem, 16 pixels, two rems, two times 16, too much for me. Too much for me, right? So what I do is the big brain move of setting my font size to 62.5%. Now, the quick ones among us would realize that 62.5% of 16 pixels gives us what? Gives us 10 pixels, right? If you do 62.5% of 16, it gives us 10. So this is just a fancy way of getting back to the 10 pixels so that I can do the math in my head.

One rem is 10 pixels, two rems is 20 pixels, three rems is 30 pixels. But there's one other major added benefit. And that's kind of the accessibility thing that I talked about. If somebody else sets their default font size to something bigger, well guess what? All of our fonts will respect that font size that they set. Right? If somebody has a visual impairment where they need all the text to be way bigger, well now instead of telling them, Screw you 10 pixels or screw you 25 pixels right in hard-coding the pixel value. Well now as their base font size Increases our font size knows how to respond because we're using REMS Right. So if they go in and change their base font size to be bigger our site will will grow with it Right, it'll grow with it. So so far we have fluidity and we have elasticity as the underpinnings of building a responsive website. But there's one more. And don't worry, this is a first pass. We're gonna do more, we're gonna talk about REMS and EMS again next class. I know it's a difficult topic. If this is your first time through it, but we're gonna go through it together again on Thursday as well.

There's one other thing, content decisions. All right, content decisions. To have a truly responsive website, We have to make some decisions about what content we show. On mobile, do we want to show this sidebar, right? On mobile, do we want them to see all of this navigational content, right? On mobile, we really don't need them to see any of that stuff. On mobile, there's three things that people in Boston care about. News, weather, and sports, that's it. If they're on their phone, you better get them their news quick, their weather quick, and their sports quick. Is it a blizzard outside? Did the Pats win? And tell me what's happening in my neighborhood. That's all they care about, right? And so on mobile, we're gonna make decisions that make it work best for our users, right? And so at different screen sizes, we're gonna make these content decisions.

What should they be seeing at this size? Should it be there or should it not be there, right? To make these content decisions, we use what? What do we use to get rid of the content that we don't want them to see or to remove things that we don't care about? What do we use? Exactly. We use media queries. Media queries are how we can make these content decisions. What gets removed? What gets changed? What gets stacked, right? All these things can be changed using media queries. What media queries enable us to do is to say at this viewport or at this screen size, do this thing in terms of CSS rules. Right now when it comes time to using media queries to make content decisions there's really kind of two schools of thought when it comes time to like make those content decisions. The first school of thought is to just take your design shrink it until it doesn't look good that's your media query.

Shrink it again until it doesn't look good that's your media query. Shrink it again doesn't look good, that's your media query, right? The other way that become really popular is mobile first. Mobile first is this idea of starting with the mobile layout first, and then adding stuff as you have more screen real estate. Right? The idea of mobile first is that you start with all the goods, like the stuff that people actually care about. And as you get larger, you can add other things that might be relevant, but aren't the core of what you need. Now, it's up to you which way you go. Mobile first, or from large to small. And it might depend on how you're like, who or what you're working on. If I'm working with a designer that gives me what mobile should look like, what tablet should look like, what desktop should look like, I actually start from the largest screen and then work my way to the smallest. And when it doesn't look good, that's where I write my media query. I find that a little bit easier for me. If I'm working by myself without a designer, I start mobile first, right? Just the stuff that cares and I can add stuff if I want as I get bigger.

It's kind of a personal decision. And what I want you to do is I want you to try both ways. So when you are working on the content, specifically the homework that's gonna get assigned on Thursday, I want you to try both. See what makes sense to you. Did mobile first make sense? Or did starting large and going small make sense? Like play with it and kind of figure out your rhyme or reason for doing this, okay? Now, we talked about the three big things, fluidity, which we kind of already got. Our stuff's already in percentages, or it looks good as we get smaller. Elasticity, we'll add rems and things like that. And then these content decisions, we'll start making by the power of media queries, okay? So, let's go back and look at our, our layout that we just did, okay? We're gonna go a little over today, maybe about five, 10 minutes over today. Let's go ahead and take a look at the layout that we just did, okay? Here's the layout.

What I wanna do is I want to write some media queries that can show this content decisions at play. So the first media query I'm gonna do is app media, screen, and a max width of 600 pixels. So whenever you see screen, what that really means is zero. Whenever you see screen, it's basically saying zero. And so between zero 0 pixels and 600 pixels, I wanna make my sections be background color green. Cool. Let's see if this works. Between 0 and 600 pixels, it should be green. Let's go back, let's refresh, and let's shrink our size here. Boom. Once we got below those 600 pixels, everything became green, right? Screen just means zero. So between zero and 600 pixels, right? We got this greenness to start taking effect. But the cool thing is we can actually come back and start adding other media queries on top of this.

So I can do another media query here and I'm gonna do at media. and don't worry, the way that we actually stack these in the future kind of changes, but this is kind of just for us to see it. We can say min width and we can do 601 pixels and a max width of let's say 900 pixels, beautiful. So what I'm saying now is between 601 pixels and 900 pixels, I want this to take effect. So let's go ahead and do section. Let's do background and let's make it, I don't know. Let's make it blue. Cool. All right. So the idea here is that between 600 pixels and zero, it'll be green, but between 601 and 900, it'll be blue. And let's go ahead and shrink our window. Boom, boom, boom, boom, boom, boom, boom, boom, boom, boom. 900 pixels blue. And then once we go below 600, green, right? Above 600, blue, above 900, nothing.

And the cool thing is if you bring up the inspector, if you bring up the inspector, and we don't make it as obnoxious, you can actually see the numbers. The numbers are gonna show up right here. It's gonna be really small to see on this screen, but it does show up right there, and it does show you as you're making it smaller where you're at. So I can see that I'm at 937, and I'm right below 900, right? And then if I keep going, I can see the pixel values going down, 600, boom. There you go. And the cool thing is you can actually, right here, see these little tablet and phone icons? We can actually click on these, and it'll give you the most common phone sizes, right, that you can click on like phones, iPads, and everything's built right into the inspector. So if you wanted to see if it looks good on an iPad or whatever, you could do that from right in here. All right, so we have a media query from zero to 600 pixels. We have one from 600 to 900. Not only can we change colors, but we can actually like get rid of stuff, right? We can get rid of stuff. So if we looked, we had this idea of thick one, sorry, this class of thick one. Let's target that class, thick one, and let's get rid of it.

Display none. There we go. Display none. So what's gonna happen is between 600 and 900 pixels, this one's literally going to disappear. Let's try it. All right, we refresh. Boom, boom, boom, boom, boom, boom, boom. Under 900, look. It disappeared, right? it disappeared, and they're all blue. So what we could do is we can say, all right, at this screen size, I want them to disappear, but I want them to take up the full width. We still got that empty space. Let's go back and make these width 33.33%, repeating, of course. Let's make that happen. and then when we come back and we refresh, now they take up all the space, right?

We go above 900, thick boy comes back, thick one comes back, below 900, it's gone and everything takes up the full window, and then below 600, all those rules go out of the way, thick one comes back but it's a different color. So we have the ability to have really, really tight control over all of the content decisions that we make just using media queries. And the way that we write our media queries and the way that we stack them and the decisions that we make, we'll get better at over time, right? This is kind of just like an exercise to show you that you have the power, that you have the control, that you can do all this stuff. It is at the mercy of the cascade still too, like you have to make sure you still have the right specificity and things like that. But this is just to start showing you that you can play around these media queries and do things. And so part of your homework that I asked you to do was to make the 15 minutes of pain responsive. What I want you to do is I want you to make this responsive with at least three media queries, right? Would you make it at least three media queries and maybe trying to find media queries is that would make it look good on laptop, maybe tablet, and then maybe mobile, right? Laptop, tablet, mobile, at least three different media queries to make it look good across those screen sizes. And think about what you might do on mobile. I think something you might do on mobile is instead of having these sit next to each other, what could you do? Instead of having them sit next to each other, what could you do? You could stack them, right? Just like we saw with boston.com.

We look at boston.com. When they got smaller, like you can see this is like side by side, right? But as soon as we got to the mobile site, they stacked everything, right? They stacked everything. We have as much scrolling real estate as we want. You can always scroll until kingdom come, right? Like you can scroll as much as you want. So stacking probably makes a lot of sense on mobile if people are used to scrolling. Cool, so homework, if you started on it, that's great. I want you to have at least three media queries and I want you to make some decisions, right? Remember, it's not only just fluidity and elasticity, it's the decisions that you make. So make some decisions as you're making your media queries. One really important thing that we haven't done yet is that we have to add something to our template for all of this to work, right? For all of this to work, we need to add something to our template. Please make sure you take this meta viewport and you add it to the head of your template.

So I'm gonna go to my template. I'm gonna go to my head and right with the other meta keywords, I'm gonna add this. Boom, there you go. I might have actually already put it in there for you. You want to make sure that this is inside of your template. This viewport with device width, right? Device width. What this is going to do is there's something cheeky, right? There's something cheeky. These media queries, these media queries actually don't work on mobile. These media queries really just handle like you making the browser window bigger or smaller, right? Bigger or smaller, like in the main window. What you need to tell the browser is that, hey, figure out the width of this screen, no matter what device you're on. Like figure out, right? Figure out the width, no matter what device you're on.

And by having this width equals device width, your media queries will work not only on like desktop, it'll also work on mobile phones and tablets. So if you're ever like making all your media queries and then like you check it on your phone and it's not working, make sure you have this viewport, okay? Now there's one other really important thing here. You notice my initial scale is set to one. That's the zoom level that you start off with. You always pretty much want to have that at one, but there is this one other thing that you can add here. And it's it's another value called user Sorry called user scalable and you can set it to no Don't ever do this What user scalable no does is it stops people from pinching and zooming and making your site bigger? It stops them from being able to zoom in on their content All right. Some people build these really rich It looks great on the size that they want it to look good on. And they set it to know so that people can't like mess with that experience. You're screwing over folks that have some accessibility concerns when viewing the web, about like 10% of users need to use a very common accessibility feature, which is pinch to zoom. Um, I always ask my students just to pay attention on the subway. If you pay attention to the subway, you're guaranteed after like a day or two of paying attention to see someone like holding their phone in their hand and phone close and then pinching and zooming is the most common accessibility feature that we need. And if you turn that off, you're screwing over at least 10% of your users, right? So make sure that you never set user scalable to no and add this meta viewport to your head of any of your templates.

So you don't have to worry about figuring out different types of devices and your media queries will just work. All right. One last thing before we break. It'll take me a minute or two to get through it. I wanted to show you the magic of Flexbox, right? I wanted to show you the magic of Flexbox. We've been using floats. Your homework will be asking you to use floats. I need you to practice your floats, but we will move on to Flexbox and we'll see a little bit of grid too. I just wanted to show it to you, just so you could see it, right? Just so you could see it and see what it does. Now, the cool thing about Flexbox is that it helps us to figure out layout in one dimension, right, rows or columns. And there's a lot of like little bits of vocabulary that you need to learn. But once you learn that little bit of vocabulary, you can throw out kind of needing to know percentages or figuring out the quick maths. you can kind of just use these words and it'll do it for you.

So if you wanted all your stuff to be at the left-hand side, you can use flex start. If you want it stuff to be centered, instead of putting margin on the left and right or using some sort of auto, you just say center and it centers it for you. If you want it to have stuff with space in between, instead of doing like 20, 20, 20, and then figuring out like, all right, 20 here, 20 here for the gap, Instead of having to figure out the widths and the gaps for those widths, right? You would just say space between and it would automatically give you the space between. If you want it spaced evenly around, you could say space around. And so this wonderful graphic comes from CSS tricks, complete guide to Flexbox. It is my favorite like article on how to use Flexbox. And it's now part of your homework. You must read this article. It's a really great introduction to Flexbox, but I want to show you the power real quick. There's all these cool things that help us, but let me show you something that's really fun. So let's look at an example here. I have this lovely Flexbox example that's ready to go. Let me go ahead and close the template. I'm going to open up the Flexbox example.

All right. So here's my Flexbox example. I have the HTML and the CSS here ready to go. And you'll notice that in my HTML, I have three sections inside of my main, and I have two sections inside of something that, a section that has the class of bottom. I want all of these sections to have equal sizing and sit next to each other. If we were gonna do this with floats, I would need to do the quick maths of figuring out the widths of all of these, the percentages, floating them. If I wanted to figure out these ones, I would have to go figure out different percentages and figure out floating them next to each other, right? But with Flex, you don't need to do any quick maths, right? So let me show you. Let's go in and do our normal setup, like our normal layout here. I'm gonna do my header and my footer, and give them a height of 100 pixels, right? Give it a border, one pixel, solid black, right? And then let's go ahead and do our sections. So section, let's give them a, I don't know, height like 200 pixels, and we're gonna give them a border. Let's do one pixel, solid black, right?

And yeah, so that's all of our sections, right? So we have all of our sections. Let's go ahead and save this. Let's open this in the browser. All right, we're looking like normal, right? We're looking normal here. We have our header, we have our footer. We have all of our sections of equal widths, but they're stacking. They're not sitting next to each other, right? It's not the layout that we expect or want to see. If we were doing it the old way with floats, we'd have to do all the percentages, we'd have to float them, we'd have to do clearing, we'd have to do all this stuff, right? So the way flex works, as long as the containers are set to flex and you tell them how much room you want each thing to take up, it kind of just works. So the two containers we have here are main and bottom. So I'm gonna go ahead and write a rule here for main and bottom, main and bottom. I'm just going to give it display flex.

And I'm going to tell each section to kind of just take up one spot, like one spot, flex one. There we go. So I said, all right, main and bottom were flex containers, that's it. And take up one spot each. Let's save it. Let's come back. Let's refresh. Magic. Look at that beautiful magic. Look at it. We got our three sections in main just sitting nice and neat next to each other. We got our two sections in the one that was in the class of bottom just sitting next to each other. No percentages, no worrying about clearing or floating. We set the containers to flex. We told them to take up one each and it just works.

So we're working towards this folks. We're working towards this idea that we're using floats now so that when we're on the job, we don't get into a pickle, but we'll move to flex. We'll unleash the magic of flex and grid. Hopefully that kind of blew your mind a little bit if you haven't seen flex yet, right? And we have some homework to work on. You're gonna read about flex even though you're not using it until next week's, right? We're gonna have a lot of stuff that's assigned this week. I don't want you to use flex on this stuff yet. I still want you to use floats. We have to start reading about flex so we can use it next week. So I want you to read the complete guide to Flexbox, and I want you to do Flexbox Froggy. Flexbox Froggy is a video game that just helps you learn Flexbox. It's really fun. It doesn't really take too, too long to get through, but it can be a lot of fun just to work through it. Cool.

And then, of course, the most important thing is to watch Independence Day for homework. Cool. That's the homework that's coming up. We have more stuff that we're gonna get assigned on Thursday. On Thursday, we're getting assigned a lot of building, like building actual sites, because now you know HTML. Now you know CSS. Now you know how to make things responsive. So now we gotta start practicing, right? We got to start building real sites, real websites that look like stuff you'd build for a client, that look like stuff you would build on the job. That's where we're moving to, starting on Thursday. Also, I mentioned this idea of starting a CSGO server. Well, I made one, and I worked with somebody over the weekend to get it all set up and do all the fancy things that I want it to be set up as. It is a 24 seven office server. You've never played csgo. There is a map called the office This server for 100 devs is only the office So if anybody ever asked you do you go into the office?

You can say yes I spent a lot of time in the hundred devs office. I put a lot of time into the hundred devs office I'm always hanging out there. So this will be our office now. I Gotta test the server. I'm not gonna make an announcement just like after class, like an hour or two later from now, I'm going to share a server link. If you want to come in and test the server with me, it's 64 slots. CSGO is completely free to play. It can run on pretty much any device. So yeah, I just wanted to have some fun place for people that want to game together. We'll have the server. I'm going to be testing it out and then I'm going to turn off the server and then we'll do like a bigger release for it. So if you're interested, probably like an hour or two from now, I'll share the link. We'll play it, but for now, we have to raid. And so I'm gonna go ahead and set up the raid. We have someone that's working on React Native.

And so let's go ahead, spread some love, some positivity. Give them a follow if you haven't given them a follow before. Remember, if you do the raid, you get lovely channel points, which are coming in handy, folks. So I hope you had some fun tonight. I hope you learned a lot. I know the end went a little fast, but always come back, watch the VOD. I'll always share my materials on Discord after. It was really fun starting the idea of networking together. Don't worry, Thursday we're doing more. Thursday we're gonna see networking again. We're gonna see all this responsiveness again. This is not the first, this is not the last. This is just the beginning. All right, folks, have a wonderful rest of the night. Hope you all have a good Wednesday as well.

I'll see you at class again on Thursday. Let's read

End of Transcript