Lecture 3 Notes | Coconote

we&#39;re back did it again did it again let&#39;s go hey bangers only hey good morning good afternoon good evening we&#39;re coming from hope you all are doing well welcome back everybody welcome back class three let&#39;s go turn up [Laughter] so today&#39;s today&#39;s the first day with the hair down so we gotta you know make sure we&#39;re focused on it prime with the raid let&#39;s go what up ron how you doing hope you&#39;re doing well hope your stream was well uh we got to make sure that we get folks coming your way uh hopefully maybe like a i don&#39;t know if you&#39;re live on a sunday but one of these nights we got to get make sure everyone here gets to come back and see y&#39;all now folks hands down the best streamer in our category prime with the raid i appreciate it thank you so much uh hands down the best tech streamer best coding streamer if you have not checked them out i&#39;ll make sure i&#39;ll drop a link to their channel we&#39;ll shout them out as we get going but you definitely need to swing by their stream hands down the best so one of these days hopefully soon we got to get the raid coming back to you i appreciate y&#39;all swinging by welcome everybody hey let&#39;s go so for folks that are new we&#39;re doing a 30-week software engineering bootcamp uh we&#39;re starting from the beginnings we&#39;re just in html land right now we&#39;re going to go full 30 weeks give you the skills that you need to be a full stack software engineer last cohort we saw 75 folks get jobs it&#39;s probably a little bit higher now we had a few come in a couple days ago so yeah welcome hey yeah yeah first day with the hair down you know you got to do it right you got to make sure that it&#39;s just just just the focus right just the focus alrighty folks tonight we got a really good class uh we&#39;re probably gonna end a little early tonight we&#39;re gonna get some lots of hands on keyboard practice tonight uh we got some more html to get to uh on class two we didn&#39;t get to the end of everything we need to cover so tonight we&#39;re getting our space repetition in we&#39;re getting our review in we&#39;re making sure that we feel comfortable with the topics that have been taught so far and then we&#39;re pushing i&#39;ll push a little bit further right we&#39;re gonna push a little bit further right and then we&#39;re gonna get down to actually typing some stuff tonight we&#39;re going to be building three different websites something we&#39;ve already seen before we&#39;re going to make sure we go over the bbc together we&#39;re going to look at khan academy together and we&#39;re going to look at tech crunch together and we&#39;re going to code it all out so if you&#39;re here to get some practice in tonight you&#39;re in the right spot if you&#39;re here to just look at some beautiful hair you&#39;re in the right spot but uh if you&#39;re down to learn let&#39;s get into it we always like to start with a little bit of questions the question of the evening the question of the evening is as such would you rather like snap your fingers and they produce a new season of your favorite television so or you snap your fingers and they produce a sequel to your favorite movie so do show or movie and chat for me please show our movie thanks again for uh for the raid i really appreciate it oh folks are going show seeing that show go wild okay man i thought it&#39;d be a little bit more balanced but now you all are definitely feeling the the show over the movie here so i just watched over the weekend two seasons of snow piercer two whole seasons while y&#39;all were doing your shay how reading i i just i tore through snow piercer it was it was pretty it&#39;s pretty wild love the movie love the tv show and so i as soon as i was done the second season i was like come on they gotta give me a third and so if i could have snapped my fingers in that moment i would have picked another season still piercer but third season comes out in a couple days and then they&#39;ve already planned the fourth season i&#39;m still going to snap it give me give me a fifth season all right everybody always discover questions what questions you got for me tonight will we use emmett for abbreviation at some point not really it&#39;s not something that i like my folks to start off especially in the beginning but like i said once we get through the basics together it&#39;s up to you you can do whatever you want i just like to show the basics first i like to get folks comfortable using tools that they might not have access to during interviews and then if you decide that there&#39;s something that&#39;s going to improve your workflow by all means go for it what if we get the homework done i&#39;ll talk about the homework in a little bit we got we got a whole slide for it um but yeah what the goal is that you get the homework done on time if you&#39;re shooting for touring or hopper you actually got to get stuff in on time if you&#39;re in hamilton you can take your own pace uh and life happens right life happens uh one of my dear friends and somebody i consider a mentor always told me god family academics right so god family academics something i live up to family&#39;s gonna come first right your your your your responsibilities have to come first learning will take a back seat to that but you can always catch up in fact we have ketchup crew which we&#39;ll talk about in a few seconds roy said why are you a floating head right now because i want you to focus on the hair tonight this is gonna be a little bit shorter of a class because we&#39;re just getting a lot of review in and so if we&#39;re going to get a little bit short of a class a little bit more time to focus uh i might as well focus on the hair let&#39;s get a few more questions in while folks get in here folks are always trying to run to their computer right as the the stream is starting where do we submit the homework uh we&#39;re gonna get into all that in a bit but if you noticed whenever there&#39;s homework due in the message for today in the following materials channel there will always be a place to submit it my hair routine uh my hair routine is not that wild i use ogx products i don&#39;t shampoo every day uh i don&#39;t even wash my hair every day which is pretty normal so a lot of times i&#39;ll just have my hair up i feel special for y&#39;all so i get in there and then uh shea moisture every other every every couple of days as well and then just lots of water you gotta drink your water folks how far advanced will we learn css uh so on thursday we start css so today is like our last day of just html thursday we get into the thick of it with css and so by the end of our time with html and css i should be able to give you a photo and you should be able to build that photo in html and css like if i give you a website you should be able to build that website in html and css now you could spend your whole career building stuff right building stuff with just html and css we don&#39;t care about perfection we write zombie code around here we just want it to work we wanted to look at it and be like yep that was the design that was the site and so you&#39;ll have your whole career to like get really into it to like really understand all the nitty-gritty details why things work to go super deep into to all the different types of layout systems but for us and our purposes our goal is the job right and so we&#39;re going to learn enough so that we can get our sites up and live looking good and move on we don&#39;t have to be pixel perfect exactly no pixel perfect around here what is my preference front end back end i love back end stick me in the back ends i want to worry about stuff let me build my apis in peace and and call it a day yeah if running running gives me too many nightmares we cover uh sequel no we&#39;re going to be focusing mainly on mongodb we&#39;ll touch a little bit of postgres um but mainly mongodb what kind of team i drink it&#39;s always the same it&#39;s always that that tazzo vanilla try i need to i need to get a t sponsor is what we need oh bootstrap material or tailwind well our og sam you can do bang exclamation point sam here in chat uh they uh they&#39;re they&#39;re they&#39;re going with material ui so i&#39;m gonna go with them as well it&#39;s got a new gig cool alrighty folks looks like we got the whole crew in here i&#39;m glad you stuck by let&#39;s uh let&#39;s let&#39;s move on from the questions and let&#39;s see what we&#39;re going to talk about tonight so tonight we&#39;re getting our review in i like to go slow in the beginning i really do for folks this is if this is your first time a lot of this stuff can be overwhelming a lot of this stuff it can just be a real real torture in the beginning if you&#39;ve never touched code so we have folks from all ranges here we&#39;ve had folks that have like built full stack apps already and they&#39;re here to learn stuff that&#39;s going to help them get a job we have folks that have literally never opened a text editor before so this first week two weeks is really going to go a little bit slower than you would see in other programs see in other places i really do want to get that review in i really do want to make sure that folks kind of get a clue as to what&#39;s going on then we pick it up we get a little bit faster we get a little bit faster we get a little bit faster right so if you&#39;re if you&#39;re brand new this is gonna be great review for you today if you already kind of know what you&#39;re doing with html and css great go fast like when we get to our coding challenges today see how fast you can go see how far you can go push yourself in that moment but for folks that are brand new let&#39;s take our time let&#39;s ease into it and we&#39;ll move on to css uh on thursday cool so we&#39;re going to review of course the client server model we&#39;re going to see some html tags we&#39;re going to take a peek at that brownie recipe just to just to talk through some of those semantic decisions we&#39;re going to see some new html tags that we didn&#39;t get to on thursday we&#39;re going to talk about the second most important thing of the evening first is always separation of concerns but the second most important thing is even will be progressive enhancement and talking through why that&#39;s an important concept and why as newly knighted developers of the web we need to incorporate that into our building of our front ends we&#39;re going to build uh the bbc together so if you&#39;ve been sweating that homework that&#39;s going to be due on thursday we&#39;re going to actually do some of it together not all of it but some of it we&#39;re going to do khan academy together and we&#39;re going to look at another newspaper or news website called techcrunch and build it so there will be kind of like us walking through it together we&#39;re going to we&#39;re going to highlight circle stuff we&#39;re going to not like highlight in terms of notes we&#39;re going to like circle different pieces of it we&#39;re going to talk through the design and then you&#39;re going to get a few minutes to code it and then we&#39;re going to go over it together and we&#39;re going to do that at least three times today so if you kind of been sweating the writing the html boom we&#39;re going to get into it three four times tonight any way to get rid of the ads while watching the vods well uh our past two classes are up on youtube and i do not monetize my youtube uh so you can go on youtube and watch the past two classes without any ads yeah so that&#39;s why it&#39;s why i keep the the youtube not monetized so that you can just watch them ad free yeah yeah now there are some rumors that youtube will be um that youtube will be kind of turning on ads even for um non-monetized channels if that happens then we&#39;ll have to figure out some other way but for now i&#39;m monetized bugaboo got two interviews back to back tomorrow let&#39;s go wish you luck hey wish you all the luck in the world good luck you don&#39;t need it you got it you&#39;re built for this alrighty so that&#39;s what we&#39;re up to today and uh at the start we got to talk about a few things we got to talk about some discord stuff uh discord has been popping off we got 20 000 people in there now uh so we&#39;re going to talk through some changes that we made some more changes that are coming and so that&#39;s where we spend a little bit of time in the beginning just to make sure everybody&#39;s on the same page in terms of how we&#39;re going to use discord going forward to make sure folks get the help that they need and to reduce the burden on some of our mods right so let&#39;s get into that and then we&#39;ll get into the actual code all right if you haven&#39;t checked in yet uh please go ahead and check in you can always do exclamation point check in uh remember the link to check in is always in the follow along materials channel and it&#39;s always in the go live uh message right so uh you don&#39;t have to to wait until you get here to check in you can always just go ahead and look at those two messages and and grab the link cool you might have to scroll over chat and slow it as nightbot post it if you need the link uh as always please go ahead and give it a like and a retweet that&#39;s your attendance if you&#39;re shooting for touring or hopper attendance is mandatory uh if you&#39;re in hamilton and just want to support the stream go ahead and do the like and the retweeting uh if you&#39;re following on youtube go ahead and give us a like a thumbs up go ahead and click the notification bell right that helps a lot and the folks finding a free software engineering bootcamp instead of paying lots of money to go to one cool submitting your homework finally if there&#39;s one question that has been asked to me of the past week is how do you submit the homework let somebody come through on the raid who that was thank you for the raid not showing up in my notifications appreciate the raid thank you if anybody saw who that was can you paste it into the chat for me please here all righty cool so here&#39;s how you submit the homework stock for machines a thank you so much for the for the host i appreciate it alrighty here is how you submit the homework or homework that was due today you had to watch two ollie abdominal videos which are amazing videos and then you had to go through the coursera learning how to learn what i want is for you to submit that completion of coursera right so on coursera you will have like a section that shows you all the stuff that you completed i want you to take a screenshot of that you&#39;re gonna have to figure out how to do a screenshot on your operating system each operating system is slightly different how you do a screenshot right but you&#39;re going to do a screenshot of that page where you&#39;ve completed everything right and so you&#39;re going to do that screenshot where you&#39;ve completed everything and you&#39;re gonna upload that screenshot to that google form in the link right there on the slides or if you looked in the follow along materials channel i give you the link there as well now the wonderful thing about coursera is it covers so many topics that we don&#39;t have a chance to cover in class that was a four-week course that i asked you to get done in one week there&#39;s no way we could spend all that time live going through everything and what you&#39;ll notice is that a lot of the things were covered in that coursera course that are going to help you day-to-day learning how to code but they also supplement the things that we do cover in class right this idea of chunking is so important when you tie that in with your space repetition and your active recall they&#39;re like things that if you did not go through that course you are at a severe disadvantage going forward so please if you have it you must get through that course you must finish it don&#39;t do the rest of this program without having gone through that course you will be at a severe disadvantage for everything that we cover going forward cool now uh take your screenshot proving that you completed everything uh upload it to some sort of image sharing i gave you image bb and then uh go ahead and submit it in that google form okay if you&#39;re trying to keep up with touring and hopper guess what homework&#39;s do when it&#39;s due you gotta get it in okay once the houses are formed we&#39;ll have a special channel where you can let us know that like hey like i&#39;m gonna be late because family or something else popped up that&#39;s okay like life life gets in the way that&#39;s okay we understand that you&#39;re giving up your nights and your weekends to be here and so stuff&#39;s gonna happen try and get it in on time alrighty before we get into some of the discord stuff and the things that i want to cover tonight i gotta give a a psa and that&#39;s to be uh to be careful out in these streets folks uh to be careful uh interacting with folks out there in this world because 100 devs we&#39;ve been we&#39;ve gone trending folks we&#39;ve gone trending the 100 devs has hit the trending on twitter a couple of times in the technology section and so now everyone knows who we are we out there right we outside we we&#39;re inside but we outside you know i&#39;m saying and so be careful now that 100 devs has become bigger and we&#39;re 20 000 deep on discord there&#39;s gonna be scammers there&#39;s gonna be folks that are trying to get you twisted and do things that you shouldn&#39;t do but around here we don&#39;t get got we go get so don&#39;t get got out in these streets make sure you&#39;re taking care of yourself and look out for others in the community if you&#39;re using the hundred devs hashtag on twitter i&#39;ve seen it all i&#39;ve seen people like trying to make you buy courses i&#39;ve seen people that are like sending you to like weird discords i&#39;ve seen folks that are like using 100 devs and pretending that they&#39;re like me like be careful i&#39;m never ever ever ever ever i gotta go big for this ever ever ever ever ever gonna ask you for money just i&#39;m just not there&#39;s never gonna come a time where i ask you for money there&#39;s never gonna be a time where i ask you for a gofundme uh there&#39;s never going to be a time where i asked you for some cryptocurrency uh there&#39;s never going to be a time where i asked for monetary things of any nature so if someone is pretending to me to be me and asking you for those things please know that i have told you that i will never ask for those things okay so be careful uh we only have one discord that&#39;s the learn with leon and friends discord uh there&#39;s 20 000 of us on there there are a lot of people pretending that we have other discords we don&#39;t we have one amazing discord that is uh overseen by an amazing crew of moderators that want to keep you safe and healthy even in this amazing moderated space we still have scammers you got to be careful do not click those free nitro links right we stepped up the security on discord but nobody&#39;s sharing free nitro links please don&#39;t click that stuff like be careful out here we&#39;re a bigger community unfortunately there are some shitty people in this world and they&#39;re going to want to take advantage of a bigger group of people that are all new to learning how to code right and that might be willing to click on a few things okay so please be careful as we get larger be careful i feel like a boomer what&#39;s nitro nitros like um discords like boost like you get like extra features when you&#39;re nitro on discord and so a lot of people try to scam others by like giving them free nitro links whether they input their credit card and stuff like that just don&#39;t don&#39;t ever worry about that stuff don&#39;t do it um thank you to everyone that nitro boosts our server on discord but it&#39;s never needed i&#39;m never gonna share a way for you to do it uh there&#39;s no links to do it please please don&#39;t be careful okay uh if you see somebody scamming or spamming on discord please just at the mods you can just do at friends mods so that we can see it and we&#39;re pretty clicked to delete delete everything and ban those people right now you need to have a verified email to join discord and in like a week or two we&#39;re going to make it so that you have to have a verified phone number if you want to join discord like again right so if you&#39;re in you&#39;re good you&#39;re in you&#39;re good but going forward we&#39;re gonna crank the protection all the way up to stop folks from coming in um when we don&#39;t want them to so just note be careful out in these streets it&#39;s getting wild i&#39;ve seen it all be careful all right the other thing that i&#39;ve been seeing a lot and that i really want to take some time to emphasize is that going through this program is going to take a little bit of trust in myself a little bit of trust in our moderators a little bit of trust in our alumni have gone through the program and like i told you i&#39;m going to work on earning it but you got to give me a little time to earn it right and the very first rule whenever somebody asks you to trust them is just as this gift mentions trust nobody not even me that&#39;s right you heard it folks first heard it you heard it first here don&#39;t trust me right here&#39;s why what we are going through together is a process that i&#39;ve been working on for 10 plus years i&#39;ve been teaching people to code for 10 years i have seen it all i have assigned things that sucked i have assigned things that were great i have assigned things that nobody needed to use on the job and i have assigned things that everyone needed on the job i used to be in the classroom i had eight plus years like in the classroom with multiple cohorts of students like two to three nights a week for like eight years like literally in the classroom with real living breathing people like meat space like i could i could poke them right i could poke them right i stay in contact with a lot of my students i i know what&#39;s been helpful to them and i know what&#39;s not been helpful to them i know what comes up and i know what doesn&#39;t come up i&#39;m trying to distill all of that into a course right so that means sometimes i&#39;m gonna do stuff that seems a little weird i&#39;m gonna do stuff that maybe other tutorials aren&#39;t doing right one of the questions i get asked all that once we get to css this is gonna be the i just know i&#39;m gonna see to see discord a bazillion times leon why do you teach floats well i teach floats because i&#39;ve had dozens of students that have come back to me and said leon thank you so much for teaching me floats because the very first project i got was converting an old code base from floats to flexbox i would have been if i did not know what floats were right and so that&#39;s why we start with floats now do i love flexbox so i love css grid yes do i want you to use that going forward yes but i understand working with that stuff is an overwhelming privilege that not all of you will get so i need you to show up on the job and be ready and i can&#39;t have you showing up to the job and not knowing the simple stuff so i spend a lot of time on simple stuff that other kind of programs might skip or go through faster because i don&#39;t want you to show up and week one bumble the easy project i don&#39;t want you to show up in that first month fumbling the stuff that you should probably have already done the reason why i don&#39;t tell you to use prettier out the gate is because i want you to be able to do it because when you&#39;re on a system for some reason on a on a vm that you have to log into you have to use their editor and their editor doesn&#39;t have prettier i want you to know how to do it right i&#39;ve seen it all i&#39;ve seen people get twisted and do weird stuff so we&#39;re gonna do it in a way that i know has helped a lot of people that has worked for a lot of people now my way might not be the way that works for you okay the way i teach you might not like might not like my hair down today that&#39;s okay this is my attempt at helping as many folks as i can but if this isn&#39;t for you after you give me a couple classes you give me that month you say leon you know what seem like a cool person it&#39;s going too slow it&#39;s going too fast it might not be for me that&#39;s okay that&#39;s okay there are so many phenomenal courses out there that you can do for folks that need a little bit more kind of hand holding more fingers on keyboard time free code camp is amazing at that for folks that want to go a little bit faster and want to learn ruby instead of javascript the odin project is phenomenal for folks that have already coded before right and want to know the modern modern stack full stack open is incredible i tell all of my alumni to go do full stack open because it&#39;s just it&#39;s just that good so there are some phenomenal resources out there right that are not this so when you come here you&#39;re you&#39;re buying into right you&#39;re buying into the path that i&#39;ve seen work for a lot of folks and we&#39;re going to do things a little bit differently and so i&#39;m going to ask you to trust me a little bit i&#39;m going to work on earning that trust hopefully you see me popping off in discord answering all those questions putting in hours every day to help you all right but you don&#39;t have to take my word for it you don&#39;t have to trust me right and i don&#39;t want you to because there are lots of folks out there that are scamming that are scheming so go into it with a skeptical heart right go into it with a skeptical eye don&#39;t trust me let me earn it right let me earn it right let me earn it right go check the celebrations channel let me bring alumni to talk to you let me show you the way right but you don&#39;t have to you don&#39;t have to do this like there are so many other phenomenal programs that might be more your speed and i don&#39;t want you to feel upset i want you to feel guilt i don&#39;t want you to feel like you&#39;re doing something wrong by choosing one of those other programs because they are good and you might get something out of it that you might not have gotten here but what i&#39;m going to do is try and put together material and a process and a way of doing things that i&#39;ve seen be successful in my 10 years in the classroom and if you think that has value then stick around let me earn a little bit of that trust but if i can tell you anything don&#39;t give people that trust implicitly just because we look good we got good hair we we talk a big game check the receipts check the receipts okay and i say this as a as a way of telling you to be careful out in these streets let&#39;s be careful on these streets they&#39;re everybody at every turn wants that dollar right they want you to to do things that you probably shouldn&#39;t be doing that you don&#39;t have to do so make people earn that trust a little bit and then see if it&#39;s for you no harm no valve it&#39;s not for you but i think we&#39;re building a phenomenal community that wants you to be successful i think we&#39;re building a phenomenal program that&#39;s going to give you what you need to get a job in tech and it&#39;s not just code it&#39;s everything else okay now one last thing about this is that this ain&#39;t my job this ain&#39;t my moderator&#39;s job this ain&#39;t our alumni&#39;s job we do this because we want to help others right if it&#39;s not fun we&#39;re not going to do it right so don&#39;t be mean to the mods don&#39;t be mean to me like we&#39;re just going to ban you right like and we&#39;re not going to lose any sleep over this we don&#39;t we don&#39;t got numbers to keep we don&#39;t we don&#39;t have some boss that we have to make happy we&#39;re doing this because we want folks to be successful in a career in software engineering um but we could we could go do other stuff with our hours right so shout out to the mods right please be helpful please listen to them please take their guidance because they don&#39;t have to be here i can&#39;t tell you how many hours these mods have given up in the past week or so like hours like we&#39;re in meetings for two hours then they&#39;re moderating for four or five hours a day right like this ain&#39;t this ain&#39;t their job they don&#39;t have to be here they could they could click off discord and go away but they don&#39;t because they want you to be successful right so just be a little bit kind to them right like make sure you respect that idea and make sure that that you&#39;re you&#39;re participating in community that you want to belong to because as i said in the beginning you can&#39;t be nice if you you can&#39;t realize or or realize that people have flaws or things coming into this process that they might not be the best engineer right out the gate if you can&#39;t accept that get the out click click exit get the out i&#39;m gonna keep saying it all right i&#39;m gonna for the first moment i&#39;m gonna keep saying it because i just don&#39;t want people in this community that can&#39;t be kind first that can&#39;t be nice first that can&#39;t go out of their way to help others if you don&#39;t want to do that get the out cool and and that includes being positive to yourself being kind to yourself i see so many folks that are kind to others but they can&#39;t be kind to themselves be positive even on discord carry your head high you&#39;re going to get this stuff you&#39;re going to work out you&#39;re going to get the help that you need but i see some people that like take out time out of their day to be nice to others but then i see them saying like stuff in the threads calling themselves dumb or that they&#39;ll never get it no keep your head up be kind to yourself it&#39;s not just others you know all right next big thing on the docket houses uh i feel attacked it&#39;s not known to be attacked it&#39;s just meant to be a good reminder the the positivity like that you put out comes back right and so when you&#39;re on discord try and be positive right try try and keep a head up doesn&#39;t mean that you can&#39;t go into the struggle bus channel and lay it all on the line that&#39;s totally fine but uh be kind to yourself that&#39;s all i&#39;m asking there cool houses next week a lot of folks are asking about touring hopper we are going to settle that all next week we&#39;re going to make sure that if you&#39;re interested in joining those houses that you can we won&#39;t share anything else before next week so you don&#39;t have to ask can you still apply you don&#39;t to ask is it still open yes it&#39;s still open still shoot your shot still apply we&#39;re going to cover how that whole process will shake down next week and the part of the reason why we&#39;re doing that is because we want to see who got the homework in we want to see who&#39;s been participating in the community we need a little bit more information from y&#39;all to make sure that we&#39;re doing good right and so next week we&#39;re going to share more about the houses if you&#39;re like i have no idea what the houses are boy do we have a lovely faq section that&#39;s on discord or on leonwell.com 100 devs you can do bang 100 devs see that wonderful faq section to describe what we&#39;ve shared about houses so far so faq on discord or faq on my site i&#39;ll tell you more about it but next week also not this but next week we&#39;re going to be doing a twitter space y&#39;all love twitter spaces y&#39;all really do so we&#39;re going to do an alumni twitter space uh not this week but next week friday uh it&#39;ll be friday january 28th we&#39;re going to start at six o&#39;clock uh and we&#39;re gonna have a bunch of alumni there that you can ask a bunch of questions they&#39;re gonna tell you about their background their experience how they got their jobs all that fun stuff uh so if you don&#39;t know what twitter spaces don&#39;t worry i&#39;ll share out more information uh twitterspace is kind of like a voice call on twitter it&#39;s just a way for folks to all get into a call and hear each other talk and ask questions and it&#39;s a little bit easier to facilitate a a larger a larger conversation so we&#39;ll be doing that twitter space not this friday but the following friday all right also this week however we&#39;ll be sharing our survey all right we&#39;ll be sharing our survey for smaller study groups uh it is like clubhouse yeah it&#39;s exactly a clubhouse i will be sharing our survey for smaller study groups so if you&#39;re feeling that you know what the larger discord is too overwhelming it&#39;s too much for you right we&#39;re gonna be forming smaller study groups it&#39;ll be based on a lot of different stuff it can be location it can be uh affinities for different things it can be professional we have a lot of teachers that are that have been wanting to organize so we&#39;re gonna have these study groups that&#39;ll be ways of kind of connecting with smaller groups of folks in a hundred devs uh and we&#39;re gonna have ways for those little pockets to have their own channels their own voice channels so that you can really start using discord to hang out more and to get help a little bit more easily and so we&#39;ll be sharing that survey this week and you fill that out and then next week we&#39;ll be placing you into those study groups all right we&#39;ve been tearing up on that discord folks there&#39;s a lot of stuff that we&#39;ve been changing a lot of stuff that we&#39;re still trying to figure out and get right but i wanted to talk through some really important stuff when it comes to discord okay some important stuff that i need i need your help with i need you all to buy into some of these ideas and and help us reduce some of the burden on the moderators and on all the folks that show up to help you there&#39;s so many folks that show up to help and we want to make sure that discord is running well so that folks can get the help that they need okay alrighty uh if your username is still gray click today uh when you join the server there&#39;s a couple things you have to do uh you have to click our rules if you do not click the rules and agree to the rules on the server uh you don&#39;t see you don&#39;t see anything right and so iron squad exactly right and so if on discord you haven&#39;t clicked the rule like agreed to the rules you&#39;re like missing out on like most of discord right and then once you&#39;ve agreed to the rules there&#39;s also this channel called join 100 devs you have to click those emojis to get access to all the 100 dev stuff right so if you have a gray username you have not joined 100 devs on discord which means that there&#39;s a lot of channels that are still missing for you so make sure today you go to join 100 devs you click those emoji so you get access to everything if you have a gray username right if your username is still gray click today you don&#39;t want to be missing out on those channels and all the stuff that we&#39;ll be adding you won&#39;t be able to get into study groups you won&#39;t be able to get into any of the other stuff that&#39;s coming on discord if you don&#39;t click those two emojis rebel thank you for the posture check i&#39;m good all right iron squad alrighty please please pretty please with the biggest of cherries on top use the search bar but i gotta go big for this please please use the search bar okay please use the search bar if i see one more person asks how to submit the homework no god no god please no no no here&#39;s what that looks like i just typed in turn in homework not submit homework not something but look 75 results for turn in homework and that was like that was like a that was a couple days ago today i bet you it&#39;s like over a hundred easily easily 150 right that and then if you turn it to like submit like another hundred like so like 200 times it&#39;s been asked right but our lovely moderator already answered that question they&#39;ve already answered it multiple times so before you ask a simple question right homework simple question right just use the search bar please use the search bar because when you search for it you&#39;re probably going to see a lot of other people that asked and you&#39;re going to see some responses right so if you have a question that you think a lot of other people might have or you just want to check just use the search bar right use the search bar you&#39;re going to see the response in there and the beautiful thing is that the search bar right the the search bar actually has a lot of like ways to like dial in right you can you can search for just messages from me right so that&#39;d be really cool like if you know like if you look at art if you look on discord you&#39;ll see a list of moderators right so you could look for messages just from me you could look for messages just from our moderators because they&#39;ve probably already answered that question right or if there&#39;s somebody that you know is like really helpful in the cohort you could search for their username and see all the responses that they&#39;ve done right and so it&#39;s in the top right hand corner of discord you can always search for stuff you can search in certain channels you can search from certain individuals you can look at certain times you can see if it has a certain thing and so just get comfortable before you ask something kind of basic or simple just use the search bar because i guarantee somebody else has probably already asked it cool let&#39;s not let make sure that that me leaning is me trying to unlock my ipad uh i would have turned on my my drawing capabilities here cool let&#39;s let&#39;s let&#39;s stop let&#39;s stop uh put on demo bro there we go sorry let&#39;s uh let&#39;s stop this from happening in the future i don&#39;t know all right now let me draw there we go okay there we go i think my apple pencil died that&#39;s why i use my finger let&#39;s let&#39;s stop that from happening again please please please please all right another really important thing that comes up on discord right that comes up on discord but it also just comes up in any other place that you get help as an engineer um we have a like and i think this is for a lot of people we have this idea of like wanting to be respectful of people&#39;s time and their space and so we&#39;ll often ask hey can i ask a question right or does anybody have some time to answer a question or is anybody really good at html or is anybody really really good at discord like you&#39;ll put that out there right you&#39;ll put out that you&#39;ll put out like that question hoping to get a response and then you&#39;ll ask your question please don&#39;t do that right you don&#39;t exactly you don&#39;t need permission to ask we&#39;re all here because we want to help you we&#39;re all here because we want to answer those questions right so just ask your question right just just be to the point ask your question you can use things like please and you can put a thank you at the end of it right if you feel like you got to be extra nice right but just go ahead and ask your question really try to stop yourself from like asking to ask a question okay we all a lot of us start off by doing it it&#39;s okay it&#39;s just that when you are interacting with other engineers like eventually when you get on a team with other engineers you just got to ask the question so that they can do it asynchronously they can come back later and um and and and fill in that answer when they have time but if you say does anyone have time to answer a question they they don&#39;t know how long that&#39;s going to take to answer that it puts more weight on the person that&#39;s going to answer the question if they don&#39;t know what it is so just ask your question okay um before you type in a discord channel please read the channel heading right each channel has like a heading that describes like what you can do inside of that channel okay and so please make sure you you give those a read before you actually start typing in it because some things are allowed in some channels and some aren&#39;t allowed in others okay so make sure you just read that channel heading um and something weird happened last class and i know i&#39;m opening them i&#39;m opening myself up to the slaughter here a little bit but i think it&#39;s worthwhile to bring it up again last class i said please don&#39;t ask questions in the ask leon channel that other folks could answer and then like a hundred of you all just ask the question and so i think that there&#39;s a little bit of maybe me not being clear enough or or it&#39;s not coming through a little bit it&#39;s okay but please don&#39;t use the ask leon channel for something that somebody else could answer we have a lovely new channel called new need help so if you&#39;re new and you need help we have people that are paying attention to that channel that want to help folks that are new okay then if you need homework help we have a channel called homework help right so you could go there right things that moderators or other folks can answer they don&#39;t go and ask leon i like to keep ask leon clean because it&#39;s really important that when folks have something that they really need help with i can get to them like things that can go in the ask leon channel are leon i have an interview coming up and i need you to be a reference or leon i just got an offer i need help negotiating right if you&#39;re filling that with stuff that are just like basic like how the course works when to submit homework that means it&#39;s really hard for me to see the folks that really do need my help like when they need it okay and so please keep ask leon clear use every other channel before askleon cool robo thank you for the gift itself cool and uh each channel has a heading that tells you like what can happen in there uh and we&#39;re gonna be pretty serious now like the first week we kind of gave it to you we let you do what you like we let it kind of slide um but now if you&#39;re in askleon and you&#39;re not asking a question i&#39;m just going to delete it like the mods are just going to delete it i&#39;m just going to delete it right if you&#39;re responding to someone and ask leon we&#39;re just going to delete it because the only person that should be responding there is myself or the mods okay so please we&#39;re gonna we&#39;re gonna start turning up discord a little bit and to make it work we&#39;re just gonna start deleting okay all right often uh myself and mods will put like really important messages in the channels right and they&#39;ll be very clear like it&#39;ll be very clear when we&#39;re trying to get your attention uh here was me trying to be very very clear uh that please only share your twitter and linkedin and threads above all others will be deleted thank you and then i you not like three seconds later not even three it&#39;s like a minute later uh somebody posted their twitter right below right so please when you see like flashing lights and stop signs uh please stop and read that stuff right i i blanked out their name i don&#39;t like i don&#39;t want anybody to see it but like please read it uh you&#39;re making more work for our mods right you&#39;re making more work for our mods and like i said nobody&#39;s getting paid this ain&#39;t our job we do it because we love this community and we want to help y&#39;all so make our lives a little bit easier so we don&#39;t have to kind of deal with this stuff okay um that being said uh in the networking channel uh the networking channel should be more for like networking events like places that you&#39;re going things that you&#39;re doing conferences stuff like that we have these two threads uh a twitter thread and a linkedin thread uh for folks that want to share their twitter or linkedin right we&#39;re gonna have like lots of like meet and greets we&#39;re gonna have like our own events where we get to know each other as a cohort so you&#39;ll have time to like meet folks as we get into the program we don&#39;t do those super early because we only want folks that are like actually in the program a lot of y&#39;all are kind of checking it out seeing this is for you but like a month in and we&#39;ll start doing more meet and greets we&#39;ll start doing more sessions where you can hang out with each other get to know each other a little bit more but if for some reason you&#39;re you&#39;re just burning to share your twitter and your linkedin there&#39;s threads for it now anything that&#39;s not put in those threads step step we&#39;re going to delete it okay alrighty got a few more and then we&#39;ll take our break uh we&#39;ve we tested something starting yesterday in the homework help channel we have a new bot that makes everything a thread okay so any question that you ask is now a thread right so um you can see here in the example hey everyone for the bbc html do we need to build the html for the navigation bar too great question discord is way too hard to like read all the replies and everything especially when there&#39;s a lot of a lot of responses so now your question will automatically be turned into a thread and if you want to answer that person&#39;s question right if you want to answer that person&#39;s question you have to go into the thread to respond to them if you click reply like normal we&#39;re going to delete it let me say it again if you just click reply we&#39;re going to delete that reply you have to go into the thread to respond to that person directly and so before you even ask a question use the search bar see if somebody else has already asked that question and then if not just go ahead and type out your question and it will automatically be turned into a thread you don&#39;t have to worry about threads or anything any question you type into the help channels will automatically be turned into a thread and people can respond to you in that thread that way you&#39;re not scrolling through thousands of replies and other chit chat so in the help channels there should only be questions that are threads and then people responding in those threads okay if you type anything else into the help channel it&#39;s gonna get turned into a thread and it&#39;s gonna be weird if you&#39;re like if you&#39;re like huzzah i figured out the the bbc homework right that&#39;s gonna be a thread and we don&#39;t need that in the help channel you can do that somewhere else right like in in our general chit chat channels or something like that but be mindful if people are coming to the help channels we got to be respectful of people that are coming to those channels we have mentors giving up hours of their day coming after work tired and weary to go into those help channels and go to war right and so let&#39;s make it easier for them to help others right by having these threads okay alrighty so we at threads and uh you have the power to help uh now that we have these threads jump on in there right you all will know something that somebody else does not at different stages of this process okay i don&#39;t care if you think you&#39;re a super new beginner that&#39;s okay you&#39;re going to pick something up that might be able to help somebody else so jump into their thread and and help them out a little bit right if you know that if you know how to solve something that they ask go ahead and help them out right because i guarantee you at some point you&#39;re going to know something that somebody else does not and then a few weeks later they&#39;re going to know something that that you don&#39;t know and they&#39;re going to jump in the thread to help you right so don&#39;t don&#39;t forget that you got power if you made it through some of the shay how you know more than folks that haven&#39;t made it through the shahao also shout out to shayhao they just sent me a dm on twitter they want to come and hang out with us so we&#39;re going to have maybe either a twitter space or we might bring them up on stream uh to talk through some of the some of the decisions that they put into their um into their course or their their kind of the thing that we&#39;ve been working through yeah it&#39;s pretty cool all right so you got the power jump into those threads help each other out during this course any assignment i give you i&#39;m going to eventually give you the solution okay any assignment that i give you there will eventually be a solution most of the time like 80 of the time we&#39;re going to do it together live right like you&#39;re going to get assigned something and then like the week later we&#39;re probably going to go over it together okay if for some reason we don&#39;t go over it together you&#39;re just going to get a file that is the solution file right but like 80 90 of the time we&#39;re probably going to go over it together so you don&#39;t actually need like a full code review it&#39;s something that a lot of people ask for on discord that you that you don&#39;t really need somebody will say like can somebody check this bbc for me you don&#39;t have to do that we&#39;re gonna have the solution you&#39;re gonna you&#39;re gonna be able to compare it right you&#39;re gonna be able to put in that cognitive effort to like look at yours look at mine and go hmm where do i agree with leon and where do i not right i don&#39;t think he made the most semantic choice here or i think i think in terms of accessibility you might have done things a little bit differently right and so you will always have the ability to like compare your answers to mine now please don&#39;t ask for full code review right that&#39;s just too much time for someone when you&#39;re going to get right when you&#39;re going to get the full solution down the line okay if you have specific questions that&#39;s totally fair game if you&#39;re stuck on something if there&#39;s something that you think doesn&#39;t make sense right like if you&#39;re really confused about something in your code that&#39;s a really worthwhile question but just saying look at all this that&#39;s a pretty lazy question right that puts too much on the person that wants to help you right that puts too much on the person that wants to help you to have to figure out everything for you we want barbara all right the idea here is make sure that you&#39;re being respectful of the other person&#39;s time is going to help you don&#39;t don&#39;t ask for a full code review if you got you have a specific question right if you have a specific thing that you that you get stuck on ask that people will help cool uh we&#39;ll be taking our top of our break soon got a few more here sam thank you for the hydration cheers to you please leave voice channels when you&#39;re not chatting uh so you don&#39;t get got a lot of you all jump in the voice channels and then you like forget that you&#39;re in voice channels and i&#39;ve heard some some wild stuff i&#39;ve heard some things i&#39;ve heard some things and so uh please please make sure make sure that you leave voice channels when you&#39;re done chatting so you don&#39;t get got just make it a habit don&#39;t hang out on voice channels just leave them if you&#39;re not actively talking leave all right there&#39;s been there&#39;s been a lot of hot mic situations and i don&#39;t want that to happen to you so don&#39;t get got leave your voice channels uh often mods will kick you out of voice channels if like nobody&#39;s talking uh just because we don&#39;t want that to happen to you um so if you like real if you got kicked out of a voice channel it&#39;s probably because we thought maybe like nobody was talking in that channel we don&#39;t want you to get got but please leave voice channels i know a few of you what you had for dinner because i heard you talking in the background about what you were going to eat for dinner with your significant other uh so so please channels that&#39;s why leon&#39;s always sipping tea [Laughter] quantum [Laughter] alrighty we got some new channels uh we got a new need help channel so if you&#39;re new and you need help go to that channel first lots of folks will be able to help you and uh if you&#39;ve been around for a week or more guess what you can help the new folks that join so hang out in the new need help uh answer their questions uh homework help is a new channel right where if you have questions about the homework you can go there that homework help channel was the first channel that we had the thread system on and we&#39;re gonna bring that thread system to every other help channel so the new need help the the other help channels though they will turn into those threaded uh channels later tonight so tonight you&#39;ll see the full switch all the help channels will be threads please do not reply in any of those channels going forward it&#39;ll just be deleted make sure you&#39;re replying to folks in threads cool and the other channel i&#39;m really excited about is the ketchup crew so a lot of folks are not watching this live on twitch because they got work they&#39;re a different time zone and they catch up with the vods on twitch hey shout out to you in the future um so we have the ketchup crew and the ketchup crew has their own channel so feel free to jump into that channel um share time maybe that you&#39;re going to be watching the channel and there&#39;s actually a voice channel jump into that voice channel and start watching the class if you want you can watch you can share your your screen and watch the vods together and that&#39;s something that the last cohort did a lot so there&#39;s a catch-up crew channel i expect folks to be in that channel like watching the vods together and having a grand old time answering each other&#39;s questions and so feel free to jump into that catch up crew channel watch the vods together be able to talk about what&#39;s going on together and so if you&#39;re not watching live join the ketchup crew get in there and have some fun all right we got we got one more one more we&#39;re gonna take our top of the outbreak and then we&#39;re three minutes over uh the last one is please keep in mind our server rules uh we are super invested in creating a safe environment for folks to learn and to do their best and to eventually get that job we can&#39;t moderate stuff that&#39;s not on our server right so i i know wild stuff has been happening on twitter i know wild stuff has been happening on other discords we can&#39;t control or help with that what we can do is make a wonderful space for you on our discord and we&#39;re super invested in keeping it a great place for folks to be in so we have one rule that&#39;s really important that i want to shout out and then we&#39;re going to go through the chat etiquette and then we&#39;re going to take our break we have this rule for no advertising and read it again advertising your youtube twitch discord social media does not belong on this server this includes private study groups or other things that may split the community and leading folks to unmoderate 100 dev spaces if somebody&#39;s sharing a space about 100 devs on our discord the assumption is that we have created it or that we are moderating it or that we are taking care of that space that means if you&#39;re leading folks to spaces that are about 100 devs that are not on our discord we&#39;re going to delete them and we&#39;re going to ban you because we really do want to make sure that folks are kept safe and we can moderate as we need we prefer folks to be in our voice channels we prefer prefer folks to be in there where moderators can listen in and make sure folks aren&#39;t violent right and so if you share something that&#39;s like trying to convince other people to leave discord and go somewhere else um we&#39;re going to give you a ban like you won&#39;t be invited back and we&#39;re just going to leave the post okay yeah and that&#39;s just because we care deeply about making sure that we have a space that works for everyone right now uh the last thing i read out loud i think on class one i&#39;m going to read it out loud again uh and it&#39;s something that comes from a dear dear friend and my executive director at resilient coders they put this out there something that we read to every cohort at rc and i want to make sure i&#39;m reading it out to you um the no advertising rule right there are some there are two exceptions to that rule we have a self promo channel in that self promo channel you want to share your youtube your twitch your discord go ahead oh sorry you&#39;re sorry not your discord your youtube your twitch or twitter go ahead right don&#39;t share other communities don&#39;t share other like things that you might try and brand as 100 devs they&#39;ll be deleted but if you want to share like a video you&#39;ve been working on or if you&#39;re you&#39;re going to go stream go ahead put it in the um in the self promo channel lots of really cool people doing lots of cool stuff uh we do have a stream team uh that if you start streaming and you feel like you wanna stream some hundred devs content or learning to code content you can join our stream team we&#39;ll share more information about that you&#39;ll see some of our stream team going live soon the other exception to this rule is the threads that we created we have a twitter thread and a linkedin thread in the networking section go wild in there but any other place don&#39;t advertise cool two things and then we&#39;re gonna take our break like i said comes from my dear dear executive director dell uh be kind to one another be the type of person who stays positive gives people the benefit of the doubt see the best in people embrace diversity of backgrounds perspective of those things we can choose and those that we can&#39;t accept your own failures and those of your peers is an important part of the process we&#39;re all here to write some vomity chunky chunky code we&#39;re all here to get things wrong to break to fail to learn to grow to become a great software engineer right and so that&#39;s all part of that process and before you share anything on discord please please ask yourself this one question it&#39;s the only thing i care about if you&#39;re on discord it&#39;s the only thing you think about is i want you to think about please ask yourself is this the most supportive message i can send in this moment if not please and choose a new message if it&#39;s not the kindest most supportive thing you can send in that moment don&#39;t send it i can&#39;t tell you how many times i type out messages and have to delete them i do it all the time in the in the in the the ask leon channel i i typically give short responses um because it&#39;s just a lot of them but a lot of times you all ask some wild questions that are out of left field and i and i want to type something and the first time i type it out guess what it&#39;s not kind it&#39;s not kind so i delete it i sit back i think about it and i go how can i say this in a supportive way how can i say this in a kind way and then i rewrite it and sometimes i kind of rewrite it three or four times but that&#39;s what you&#39;re committing to if you want to be part of this community right we&#39;re not all perfect we get it wrong right that&#39;s okay but ask yourself is that the most kind of supportive thing you can send and if that&#39;s too much for you you&#39;re like leon i don&#39;t want to do that right but i don&#39;t want to do that i don&#39;t want that that&#39;s not for me that&#39;s fine leave go away don&#39;t join our discord don&#39;t come to class go by you don&#39;t need it trying to build a supportive inclusive wonderful community to belong to if you can&#39;t be kind get the out all right folks with that being said let&#39;s take our well-deserved break i know that this first hour was not anything coding but i think this is stuff that&#39;s really important for our community to survive and thrive and do really well so if you&#39;re new around here we take a break at the top of every hour or five minutes please if you&#39;re able get up move around stretch go grab some water kiss some babies look out the window focus your eyes on something that that&#39;s not that&#39;s not here right hey welcome back on deluxe thank you so much for the raid uh you all know them we rated them on uh sunday uh amazing raid uh the the the amazing uh if you&#39;re interested in game development this is the person to watch uh we&#39;re gonna rate them again because they&#39;re just amazing in in being able to like build stuff from beginning to end you see the whole process from like building actual models to building out like them actually moving around a room uh they&#39;re the channel i i have on in the background if i&#39;m working because their energy helps me work better so super thankful for uh the raid and uh we&#39;re definitely coming right back because uh it&#39;s just an amazing group to hang out with so thank you so much for the raid i really appreciate it um we are actually getting ready to take a break uh at the top of every hour we take a five-minute break just to be healthy and make sure that we&#39;re we&#39;re stretching moving around a little bit and so let&#39;s go ahead and take that break but i appreciate the raid thank you all for stopping by uh we&#39;re definitely going to swing by again soon uh the uh that that sunday crew is uh is a smaller crew and i would love to come hang out so i appreciate the raid all right folks let&#39;s go ahead and take our break unless you&#39;re gonna do a shout out for them i&#39;ll put it in the channel or if maj if you can throw it in there ah there we go awesome you haven&#39;t followed them yet go ahead and give them a follow there we go all right i&#39;m gonna go ahead and go ahead and start our timer here together there we go all right folks go ahead and take your break please we&#39;ll be back here together we turn on the music you for the raid again bob weiling over here that&#39;s funny i put their um their twitch name in chat again but if you haven&#39;t given them a follow on alex the person that rated us go ahead and give them a follow amazing amazing og of the streaming coding creating space for sure byron i appreciate that highest quality floating head i&#39;ve ever seen i appreciate it thank you i just i have a i have a a gnome shirt that i wear like the linux can somebody tell me what a raid is a raiders is like when folks are done their stream they can go to another streamer and all of their audience goes with them right like all the people that are in that channel go with them and so at the end of each stream uh we raid someone and so on sunday we rated lana lux and they&#39;re an amazing streamer they built video games from like like soup the nuts like the whole thing and so they raided us a few minutes ago and the cool thing about their channel is that they are literally like live every day so if you like them you can just like chill there all the time i love it because i like seeing like all the process of how they create like that whole world that they&#39;re building but it&#39;s just a chill stream to have on the background too so i like to have that in the background when i&#39;m working a lot all right yeah thank you for the stretch i just got a good one in before we uh came back all right folks come on back come on back let&#39;s show the music here this course is also introducing the whole world of streaming yeah that&#39;s pretty cool there&#39;s so many different people that are in this space that do really cool stuff like we had two amazing raids tonight the primogen is just next level like they&#39;re they they&#39;re an engineer at netflix and they like stream them working on netflix like that&#39;s so cool uh and then uh nlx is the like just building video games from from nothing into something that you can like actually play and see them working around like it&#39;s wild so i really i really love beyond like see people&#39;s process and how they do stuff and so primogen they&#39;re also live quite often we&#39;re going to rate them so all the people that are dope we&#39;re going to wind up raiding and so you&#39;ll be able to see them and get to jump in their channel oh yeah i appreciate that thank you appreciate that all right folks let&#39;s get back into it i think we&#39;re all back from the break all right trophisaro who&#39;s in it who&#39;s in the trough of sorrow who with html are are you are you at the peak are you plummeting downwards where are you at not yet you are almost peak of despair the peak peak peak so i think a lot of y&#39;all i think a lot of y&#39;all jumped into that trough when i signed the homework you know some of y&#39;all thought this was going to be something else but then you saw that i assigned four weeks of a corsair course in a week and you went i don&#39;t know about this i don&#39;t know about this that they say four weeks leon&#39;s asked me to do it in one and then you&#39;re like hi no worries i got it i got this you know what i&#39;m just gonna do it just do it then do it just do it i&#39;m gonna do it and you&#39;re with me you saw it you&#39;re like you know what i can do it i believe and i believe in this i can do it i want this for myself i&#39;m just gonna do it and then and then i hit you with the shea how and uh i felt bad for the first person that asks but that first person asks leon just just the first section right just the first section right i was like nah nah dawg nope i need all 12. and i need all 12 in a week and as soon as i said i needed 12 in one week all i all i could see the bells are turning and as soon as i said 12 in one week they took off they&#39;re like not for me dawg not not they say this this is that&#39;s not what i signed up for uh i don&#39;t know if i can do that so i think a lot of y&#39;all you made it to the tip and now you&#39;re crashing into the trophic sorrow i think you&#39;re still like on the really fun part of it though i think like your hands are still in the air you&#39;re still being beyonce you&#39;re like you&#39;re you&#39;re like riding down you haven&#39;t hit the bottom yet trust me if you haven&#39;t had like that existential like dread like not knowing like what&#39;s upside down what&#39;s up right side up like if you haven&#39;t hit that point yet you&#39;re still like in the fun part you&#39;re still on the wii part like you&#39;re still like i&#39;m beyonce like i&#39;m like i&#39;m i&#39;m flying down the hill right i feel really bad people just join live and have no idea what our reference is i&#39;m just talking about like domino&#39;s nuns and being beyonce and they&#39;re just like what are you talking about um so you&#39;re probably not there yet um but you&#39;re gonna get there at some point in time i&#39;m going to assign something that&#39;s going to be a lot you&#39;re just going to you&#39;re going to hit the bottom and you&#39;ll know when you&#39;re there you&#39;ll know when you&#39;ve hit the bottom and you&#39;re officially in the trough of sorrow there&#39;s like a very sharp like there&#39;s a moment where you wake up and just go right i got 29 more weeks to go uh so if you&#39;re not there yet enjoy enjoy the ride down enjoy being beyonce and um we&#39;ll all get there soon but one thing i&#39;ll say about the homework is that homework is just a first pass when you&#39;re going through the homework i want you to give it the old hold on my chair&#39;s in a weird spot i want you to give it the old 100 devs try right like when i give you homework give it the old 100 devs try but know that it&#39;s just the first pass okay all the important bits all the stuff that really matters we&#39;re gonna cover together right so if if you&#39;re like leon it&#39;s too much i just don&#39;t get it don&#39;t worry all the really important bits and bobs we&#39;re going to go over together right so you have this homework this homework is really broad in scope it&#39;s going to give you so many little things that are interesting and things that you should learn about but it&#39;s the first pass all the core really important stuff we&#39;re going to recover in class so when i give you reading i expect that to be your first time going through that type of material but i need it to be not i need i need class not to be the first time you&#39;ve heard about css i need a class to not be the first time that you&#39;ve heard about the box model i need class to not be the first time you&#39;ve heard about floats or flexbox right because if it&#39;s the first time your brain just won&#39;t be able to make the connections in class right so i give you this homework as a means of a first pass you&#39;re going to give it the good old 100 devs try you&#39;re going to try and do your active recall your space repetition but if there&#39;s something that fundamentally does not make sense to you that&#39;s okay we&#39;re probably going to cover it in class so on thursday you have the shea how do but that&#39;s just when we start css literally the the beginning of css is the day this really hard material is due and so we&#39;re going to come together and learn the basics of css with the expectation that you&#39;ve done the the the reading already all right and so i don&#39;t want you to panic i don&#39;t want you to feel bad if it doesn&#39;t make sense know that that&#39;s your first pass and we&#39;ll go over all the meaty stuff together all right i asked you all i gave you the three secrets you manage your frustration you be consistent you take care of yourself and so i got one question for you did you make a plan who made a plan who made a plan for their week who who who woke up today like an accident who woke up today like an accident who made up who made a plan now i&#39;m just getting all twisted you&#39;re saying yes for both all right if you haven&#39;t made a plan for your day for your weeks for your month you must be inconsistent takes some planning don&#39;t wake up like an accident have a plan right know what you&#39;re getting yourself into right so if you haven&#39;t made a plan for your week if you haven&#39;t had that conversation with the other folks in your life figure that out right you got to let folks around you know hey tuesday thursdays i&#39;m in class sundays i&#39;m at office hours friday i might be doing a twitter space with the alumni you gotta let folks know that you need that time okay i made a plan a there you go all right active recall remember you can do a quarter of the work all right but get better results and different said leon&#39;s calendar is the most scheduled and wild thing i&#39;ve ever seen yeah i can&#39;t show you all my calendar because i have a lot of like meetings with people on there that i can&#39;t like put on on stream um but i promise you it&#39;s glorious as we get later on i do one-on-ones with a lot of folks and so if you&#39;re in a 101 with me i&#39;ll show you all right you can do a quarter of the work but get better results just by recalling the things that you learn don&#39;t take notes take questions right take questions right and then remember don&#39;t put in all this work just to forget everything you have to reset your forgetting curve if you learn something new there&#39;s a good chance by the end of that 30 30 day period there&#39;s an 80 chance that you&#39;ve forgotten it flatten that forgetting curve by using a space repetition tool like anki right sider and said do you just not sleep hell no i need sleep to do what i do if i don&#39;t get sleep my whole my whole week&#39;s ruined like not even just the day like the week&#39;s a wrap and so i&#39;m very very very into making sure i get good sleep i&#39;m bipolar and so since i&#39;m bipolar i take medication that like zonks me like it like it it puts me out and if i like do something dumb like watch a lot of youtube while i&#39;m in like that good period where it&#39;s trying to put me to sleep and i get through it i ain&#39;t going to sleep and then my whole day&#39;s ruined my whole week&#39;s ruined and so for me sleep is one of the most important things you can do um and you learned about that exactly you learned about that in the course about like what sleep does how it helps with memory consolidation and if you&#39;re not getting sleep yeah you messed up sleeping water exactly all right chat what&#39;s the internet those brain toxins it&#39;s a wire yes a wire that connects two different kinds of devices we have our client-side devices and our server side devices the code that runs on the client side the code that runs on our desktops our laptops our mobile phones what type of the person that works on that type of code what do we call them yeah we call them front end developers and the individuals that write the code that runs on the server that hears those requests knows how to respond store stuff into a database um processes credit cards the person that works on all that stuff what do we call them yeah we call them back in developers nice cool if somebody works on both if somebody works on both we call them what there we go somebody works on both we call them full stack exactly now i keep saying that requests and responses are sent between the client and the server what enables those requests to go back from back and forth between the client and server like what what&#39;s enabling this to happen what technology people got it okay yeah it&#39;s sitting on top of the hypertext transfer protocol it&#39;s just way of sending those requests and getting those responses sending information back and forth across this internet nice well done all right i mentioned that separation of concerns is the most important thing that we cover in the beginning it is called the golden rule we want to keep our content in our html our style and our css and our behavior interaction our javascript we don&#39;t want to mix any of these things together why is this so important why do we keep separation of concerns especially as we get into on thursday css why do we keep everything separate yeah organization nice organization right organization for ourselves and organizations for the developers that we work with right if we join another team and somebody wants to make something yellow where do we send them they want to make something yellow where do we send them perfect we send them to our css if we if we want them to make something when they click on it wiggle where do we send them js nice and if we want to uh have them enter in like a a new headline for a newspaper article where do we send them html nice all right we&#39;re good we&#39;re good let&#39;s keep pushing all right we talked about html as the first language that we are learning right we said it&#39;s a markup language and like all languages it has spelling and grammar rules what do we call the spelling and grammar rules of a language there&#39;s a special word for it what do we call it yeah we call that syntax like the spelling gram rules the punctuation that make up that language we call it syntax so html has a very interesting bit of syntax you have your opening tag right and your closing tag and the way that the closing tag differs from the opening tag is that lovely forward slash right and so sometimes our opening tags can have some superpowers or some extra things that enables that tag to do and so here we see one of those superpowers we call them attribute value pairs so next week when we get into css and we&#39;re trying to style things we&#39;re going to see these classes and ids and all these things pop up that we need to put on our html so we know what tags we&#39;re talking to right so we notice that in our opening tags we can have attribute value pairs and our closing tags always have that lovely forward slash sometimes however sometimes however right there&#39;s a tag that doesn&#39;t need a closing tag why would a tag maybe not need a closing tag yeah because it&#39;s self-closing yeah because if they&#39;re already content right so we saw images images don&#39;t have a closing tag because they&#39;re already content here you can see we&#39;re wrapping around the content that is text hello world is the text right and so we&#39;re wrapping around that text beautiful however when we&#39;re looking at say an image it already is content we don&#39;t need to wrap around the content it is content beautiful all right now why do we have to follow these rules why do we need to have the opening tags and the closing tags why do we need to choose the right semantic important html tag like why do we need to have why do we need to follow these rules ah i see a lot of people throwing different ways here yeah it talks about like kind of like three different main things that we probably care about right we care one about our general users we saw that if for some reason like an image broke having that alt tag helped our general users know that there should have been a brownie photo there right so we have our general users if we don&#39;t use the right tags they&#39;re just not going to have a good experience we also talked about accessibility right somebody that might be using the internet in a way that is something that might need assistance to move through that content like a screen reader right so you might see someone with a screen reader if you don&#39;t use the right tags they can&#39;t move through your page in the right way or things aren&#39;t read to them in the right way and so you want to make sure right you want to make sure that you&#39;re following the rules for general users users using accessibility devices and then the last one is seo or search engine optimization if you want to show up on google you want to show up in these search engines google comes to your site and they&#39;re going to try and figure out what your site is about now i don&#39;t say i&#39;m not saying google does this but let&#39;s just let&#39;s just use this as a thought experiment if google was to come to our site and want to figure out what our site is about right what do you think they&#39;re going to look at first what do you think they&#39;re going to look at for can&#39;t decide what to make for dinner yeah they could look at the h1 if the h1 is the most important content on the page right if the h1 is the most important content on the page then they should probably look at the h1 right and so there you go we can see how it can work for general users assistive assistant devices or accessibility concerns and then our search engine observation or kind of our web crawlers they might be looking for those things trying the sound off on you all right so we looked at some basic tags last time we looked at our heading elements right we looked at our heading elements we have h1s through h6s right we have h1 through h6s and what we realize is that we pick these heading elements right there they&#39;re headings that describe the content that comes after think of like a newspaper you have a heading and then something comes after right you have a heading and something comes after so when we&#39;re picking those heading elements what do we use to pick them gabby lisa does it ever go past h6 no that&#39;s that&#39;s where we stop yeah we&#39;re picking these uh heading elements based on importance exactly based on importance nice cool so when we see an h4 we know that an h4 is a little bit less important than an h3 less important than h2 and then h1 is the most important content we have on our page now we talked about h1s probably only having one per page there is as you get deeper into the semantics of html sections can technically have their own h1s but for now let&#39;s just think about like all right most important content let&#39;s just have one we saw some other elements we saw for big blocks of text what do we use big blocks of text big boys big blocks of text what do we use paragraph nice if we want to be an abomination and have white space be preserved in our tags what do we use pre-tags but get out of here exactly and if you have a short piece of text what do we want that to be nice span all right we got it uh br tags hr tags skip i&#39;m gonna skip those all right assistant device elements we have m and strong tags all right m and strong tags remember we talked about image strong text being somewhat like odd if you look at an m tag it makes our content italicized and if we look at our strong tag it makes it bold if we use an emm strong tag to make something italicize italicized and bold it did we violate separation of concerns yeah if we use an m and strong tag because we like the way it looks it was at this moment that he knew he up exactly we don&#39;t use them based on how they look we use them because of what they help us with right what they help us with when it comes to accessibility remember individuals that come to your site and might not be able to see hey cross thank you for the 10 gifts it subs i appreciate that thank you so much uh oh cross is here so we can actually we can actually bring something back uh you can do exclamation point bingo uh and this lovely person uh recently got a job by the way and check out the celebrations channel made a bingo game early in the last last cohort and so some people religiously play bingo while the stream is going on um to to to just have something to help them stay a little bit more focused and i repeat a lot of words and i say a lot of funny stuff and so there&#39;s some things that come up quite often so bingo if you&#39;re interested let&#39;s see let me see if i can grab there we go all right tiny dot cc slash leon bingo and it takes you to a to a netlify app which will all learn how to use netlify and we can create a board and so you can see lovely things here don&#39;t call yourself a junior dev join us for office hours leon mentions his only fans leon says automagically i say that word a lot um it&#39;s not stalking it&#39;s networking no no someone redeems a soundboard alert um and so each time you create a card it&#39;s a completely different card and so you you can play bingo [Laughter] if you would like um tiny dot cc uh leon bingo and there you go thank you indifferent just something fun to do while you&#39;re watching and thank you cross for it and thank you for the 10 gifted subs i appreciate you all right let&#39;s keep pushing folks all right we also talked about there are lists we have two kinds of lists ordered lists where if something is not in the right order it messes up like it&#39;s a problem right so we think recipes should be an ordered list where as something like a grocery list doesn&#39;t matter if you put the the bread before the pickles right so that that list doesn&#39;t matter and so you can keep a different order all right we also have containing elements right containing elements are how we&#39;re going to group content together they&#39;re going to be the tags that we probably use the most divs it&#39;s not that divs are are wrong or you shouldn&#39;t use them we just have a lot more semantic decisions that we can make these days a lot more semantic choices that we can use and one of the common tags that we use a lot are sections we can group lots of content together articles are for content that should be shared so think newspaper articles think blog posts things that you could like cut out and share those are good articles and aside if you read the mdn which you should all have open the mozilla developers network thank you booty licker hey i hope you&#39;re doing well thank you for stopping by um if you i still don&#39;t i still still can&#39;t not laugh but you&#39;re dave aside is for ancillary extra content like things like ads or sidebars headers for content the beginning of a document footer is for content at the end of a document beautiful booty licker has returned nice all right we also talked about there are some deprecated elements like elements that we can no longer use right things that we used to see all the time right back when we were building our myspace pages our neopets accounts right we uh we we we had this idea of blink tags and marquee tags and bold tags and i tags why are all these tags deprecated and no longer used mon and lucky tiger thank you for the hydration cheers to you yeah a lot of those are css and maybe the marquee is like javascript right so as separation concerns became a thing that we agreed to a lot of this stuff really shouldn&#39;t be part of html and it&#39;s deprecated thank you all right we did this brownie code recipe and i just want to review it quickly i just want to take a look at what we did together and then we&#39;re going to move on so here is the browning code recipe that we did together we went through we chose the different tags that we thought made the most semantic sense right that were based on the real reason why we would use that tag and we talked about we talked about the importance behind our tags as well now when we get through here we we have some stuff that we did that i want to take a second just to talk about and uh and and cover a little bit more deeply before we move on to some new tags and then finally get our fingers that going and writing some code of our own so one thing we did here is an image and we talked about this image being a hot linked image meaning that we took somebody else&#39;s image that they are hosting on their own server and we&#39;re linking to that and we talked about some some some odd things that could happen because we are doing that what are some bad things that could happen because we are hot linking the image they could take it down y&#39;all just y&#39;all popped off of this so the twitch has a filter and when you put stuff that like breaks the filter i can still see it sometimes if my mods don&#39;t remove it before i see it um but sometimes i get to see him and they&#39;re funny people said they could change it to a turd someone they could they could change it to a picture of poop and uh now your lovely website has a picture of poop on it um so let&#39;s let&#39;s do let&#39;s not hot link a photo right let&#39;s go ahead and let&#39;s actually like download a photo so let&#39;s go back to google and i&#39;m gonna go to google images and we&#39;re going to say brownie yeah brownies there we go so if you a lot of folks asked me about this um they said leon what was that that was that bang gi that i just did uh so i use duckduckgo as my search engine right and when you use duckduckgo you have these bang syntaxes that enable you to do a bunch of different stuff so if like i do bang g it takes me to google i do bang gi takes me to google images i do bang a it takes me to amazon right so if you use duckduckgo as you&#39;re like your main search uh it really does speed up a lot of things that you do and you get all the wonderful stuff that comes along with using duckduckgo all right give me a moment oh cosmic brownies oh give me a second sorry folks if you uh i can i can know a lot about you i know a lot about you if you grew up eating a honey bun and a cosmic brownie for breakfast i know we&#39;ve gone through a certain struggle together and so that that&#39;s how i know and so give me a second here oh i haven&#39;t seen it i haven&#39;t had cosmic brownie in a minute all right let&#39;s click on this one nope i don&#39;t want to go there google let me just right click um oh cause this is an ad this i got got that&#39;s why that i got got it&#39;s an ad when did they start putting ads in here oh that&#39;s so dirty that&#39;s so dirty cause you&#39;re like trying to get the image and they put ads out there what wow they willing oh i can&#39;t we can&#39;t go wrong with these ones oh look at that right right click save image as and we&#39;re going to look at all my screenshots i did for the stream all right we&#39;re going to go to class 3 and we&#39;re going to save this as brownies all right so now we saved our brownies to our class three folder so what i can do is if i go back all right if i go back and i look in the folder so when i opened up in vs code i didn&#39;t just open the file i opened my entire folder and so what i did is i drug my entire folder so i have like my hundred devs folder and then i have my class three folder and what i did is i dragged this whole class three folder into vs code right uh oh i just drug it to my desktop anyway i wanna make sure i didn&#39;t screw that over hold on i just dragged the folder to my desktop all right one second i gotta bring that back all right one second all right all right there we go so i drug my class 3 folder into vs code and what that did is it opened up the entire folder for me in vs code right and the beautiful thing is i just saved my brownies photo into that class 3 folder you can see it here right that brownies.jpg you can see it if i open it up look at that delicious photo right so now i have the the photo on my computer i just right clicked right i just right clicked see i say certain words wrong because it increases my engagement you all got got you&#39;re all saying drag drag drag now i drug it you don&#39;t have to deal with it thank you for the engagement you got you got that um all right so i drug the entire folder into vs code and it opens the whole thing for you now you can see that like i have like the file that was just downloaded inside of the inside of the folder right cool so now instead of hot linking this photo what i can do is i can actually just link to that photo directly because my brownies.html is in the same folder as that brownies.jpg all right.jpeg right so if i just type in brownies.jpg that source will know from this html file to grab that image got a lot of hydrates in here tortuga memphis nomad thank you for the hydration cheers to you right and so now i have that lovely photo that no one can change on me right no one can change it on me and so if i go ahead and open this in the browser you can see that my photo still is there i don&#39;t have the hot linked version anymore it&#39;s the photo that i just downloaded right now somebody&#39;s saying does this work on codepen no because codepen doesn&#39;t give you the ability to upload or download like a like a an image on glitch it might work because on glitch you can upload stuff right you can upload files and things like that so that&#39;s why i like glitch if you&#39;re if you&#39;re going to be stuck uh like not sorry necessarily if you&#39;re going to be using like say like a chromebook or you have a computer that can only really use the browser using glitch is good because you can upload different stuff the glitch right so if you&#39;re going to use glitch like let&#39;s create a new project um this is a website it takes a while for glitch to kind of get going right it takes a while for glitch to get going and there are other things i just i just happen to like glitch i think it&#39;s easy the cool thing here is you can up you can like do files right so if i do plus files i can upload a file and then let&#39;s go ahead to stream 100 devs class three i can upload the brownie and can i do two files at the same time now just one at a time so i can upload my brownies.html file and boom my brownies.html file right my brownies.html file is just up here on glitch let&#39;s see if it&#39;ll let us do the images too not sure oh assets surprised to do it through assets yeah upload an asset brownies.jpg let&#39;s see cool now we got our brownies.jpeg here and cool and so with this you can actually like preview and do a bunch of other stuff right like but now you could go to this brownies.jpeg sorry this brownie.html and see it uh let&#39;s see open preview in a new window and then let&#39;s go to brownies.html slash brownies.html that was the name of our html file all right so it doesn&#39;t like the linking directly to brownies but i&#39;m sure there&#39;s a way to do an english i don&#39;t use glitch that often but i&#39;m sure there&#39;s a way to to take your asset and connect it to the brownies.html right oh is there is there a folder called assets is that what it is let&#39;s see um let&#39;s see assets flash brownie that work oh let&#39;s try again no i know there&#39;s a way to do it i just uh i gotta look at it yeah so that that&#39;s the idea here right might have to be like a like a real link sorry let&#39;s try this real quick let&#39;s try that try it i&#39;ll figure it out when we take a break but the idea here is that you can is it uppercase they wouldn&#39;t do that they&#39;re not monsters right it is a capital a no way let&#39;s check curious there has to be a way now anyway we&#39;ll figure it out but that&#39;s the idea right you can if you need to be if you need to use just your just your um oh yeah because it&#39;s going to be in a separate do you want us to go up a level see i get i get invested in these things we should be able to just go in are we like inside of a folder somehow let&#39;s see one more thing i want to just look at i&#39;m curious no all right we&#39;ll figure it out but that&#39;s the idea like if you need to be inside of your browser right you need to be inside of your browser and you don&#39;t have access to like the s code or something like that right you can use glitch to upload your html and then we&#39;ll figure out how to do the images and stuff like that as well but that&#39;s the idea is that you can link everything together and um and and have it work like that inside of just your browser so i&#39;m going to use vs code this whole time that&#39;s what i&#39;m comfortable with that&#39;s what i use right but if you for some reason can&#39;t use vs code there are other options right cool and we&#39;ll figure out the image thing i&#39;m not sure because i don&#39;t use glitch that often cool all right so here we have our local version of the image working we had some other lovely things down here i wanted to show out we have our lovely alt tags that we&#39;re working so we have an anchor tag that opened and anchor tag that closed and we had the ability to put in our actual href right all right all right put in actual href right and there we go oh i think we did i think people figured it out yeah so mine was a was a was mine a jpg let&#39;s see no it was jpg i put jpeg let&#39;s see no i had it right i thought that was a good idea though click the image is it not a jpeg did they convert it to something else when it got uploaded this this is no oh it does give us the cdn though copy url so we can do that and we can come back to our html and put it in like that there we go okay and then glitch i know you auto save it&#39;s just a habit boom there we go [Laughter] so they give you a cdn which is pretty dope so for those of you know where cdna cdn is for a content delivery network and what it means is that images are like heavy they take a while to download i know that like in the modern world we&#39;re going to talk about this tonight right like for those that have access to high-speed broadband images load instantly right but if you were with me back in the day we&#39;d be waiting a half an hour for that image to load right and so what a cdn does is it takes that image and it puts it on servers around the world right so that you don&#39;t have to wait as long to download that image or any of your heavier files right so if you were in say los angeles but your server was in london your request would have to go across the entire united states across the atlantic ocean and to london and then back right so why not put my image on a server closer right and so that&#39;s what a cdn can do a cdn can put your images on servers that are closer right so that you don&#39;t have to um wait for that that delay so there you go cool that&#39;s how you can do a glitch i haven&#39;t used glitch too much but i&#39;m glad to see that it works and so for folks that have to be in their browser this is what i recommend in fact for some of your homework i&#39;m going to ask you to like put it on glitch because the other cool thing about glitch is that you can just share the the link right you can share the code you can share the live link which is pretty dope and then the other cool thing is for those that are like in the ketchup crew you can actually share your glitch with like other people and collaboratively edit which is pretty dope yeah and so i i really like that because it&#39;s kind of like a google doc for your code and so a lot of times we&#39;ll see folks that are like working together on discord just share a glitch with each other and go at it alrighty keep pushing but like i said i&#39;m using vs code we&#39;re gonna see me use that the most but i wanted to show another option for folks that don&#39;t have that that luxury there&#39;s one other thing i wanted to show you what you&#39;ll be noticing i do a lot is i uh right-click and i open in my default browser there are many of plugins that you can use this is one of the very few plugins i&#39;ll ask you to use in the beginning or extensions as vs code calls them and that&#39;s called an open in browser plugin i use tech er&#39;s open in browser plugin right and what that does is just opens the file for you and you&#39;re in your default browser so instead of having to like drag your file to the browser or doing file open in the browser it just opens it i don&#39;t like live preview or any of those in the beginning um just because i i want you to get used to saving i know it sounds really dumb to have to like get used to saving but i really do want you to get used to saving because i&#39;ve had so many people like in real interviews like staring at their editor because that you don&#39;t always use like your own editor you use some other like like like you use like a editor that&#39;s in the cloud right i&#39;ve had people in interviews staring at going like i don&#39;t know what&#39;s happening like it should work because they didn&#39;t save so get used to saving for a week or two and then if you want to use things that like auto save and refresh for you do it but get used to saving refreshing just so it becomes some muscle memory so that when you&#39;re like in the actual interview you don&#39;t get got it sounds silly um occ said i&#39;ve done that live coding interview didn&#39;t update because i didn&#39;t save exactly so get into the habit so that like something clicks in your brain when it does happen so i use the opening browser one which i find really helpful something else a lot of people were kind of confused about last time is that you can change a lot of settings in vs code and so on mac os it&#39;s command comma on your operating system it might be control comma but that opens up settings and you can type things like html and it&#39;ll give you all your settings for html so i just did command comma which opens up settings you could also do like code and then preferences which will take you to settings but i did command comm it might be control comma on yours and then in settings you can type in html and i have my um auto closing off right i don&#39;t like that auto closing where like i open up i open a tag and it automatically closes it so i turn that off so just some settings that i use uh to make my life a lot easier while i&#39;m using vs code i wanted to show you some local images we&#39;re gonna have lots of practice with like local images local files when we get to css because we&#39;ve got to get good at it so i just wanted to show you the basics today with something that we&#39;ve already seen and what we&#39;re going to do now is we are going to move into html structure we&#39;re going to learn about uh a really important topic called progressive enhancement we&#39;re going to see some new tags like nav tags and then we&#39;re going to actually start coding out some websites together but before we do that we got to take a break if you&#39;re new around these parts we like to stay healthy we like to make sure that we get our uh if you&#39;re able to that you get up you move around you stretch you let your eyes relax on something that&#39;s not your screen you grab some water you hydrate you say hello to your loved ones uh yeah yeah yeah yeah maybe you say hello to your haters i don&#39;t know you pop on twitter for a second but uh whatever you do just like leave if you&#39;re able to uh and and and and come back to us in five minutes all right i&#39;m gonna put the timer on the music on and i&#39;m gonna give y&#39;all what you really want bob what do you think of notepad plus plus i mean i used it like 15 years ago but uh now vs code is where it&#39;s at do you vape nah great stuff so far learning life hey glad you are thanks remember do you like people always i i mean i like digimon i haven&#39;t like been involved in it in a very long time do i make vegan fun at home of course like all the time the red storm light archive no i have not can we see your computer set up it&#39;s wild it&#39;s it&#39;s super ridiculous one of these days i&#39;ll i&#39;ll share a photo with y&#39;all but it&#39;s it&#39;s it&#39;s pretty wild i request bob on screen for channel points goal it&#39;s just the camera points the bob i keep talking but it&#39;s just bob the whole time i love it good one you watch sports not really the only sports i really watch a rugby and a little bit of soccer here and there what mouse and keyboard should you get whatever&#39;s the cheapest and serves your purpose it&#39;s more like keyboards are more about like really deep personal preferences or if you&#39;re talking about like being like safe just like typing posture and ergonomic stuff is way more important than like the gear you actually use and then keyboards come in so many shapes sizes colors flavors like it&#39;s just you could go all in on that rotor rifles oh you just start playing that&#39;s pretty cool yeah i want to join a new team this uh this fall that&#39;s the goal what kind of rubber duck should i get there are so many fun weird ones out there get one that&#39;s fun all right folks come on back come on back how about that microsoft news yeah did it actually go through like did they actually buy them or no because they bought them that&#39;s wild good on them it&#39;s actually gone through dope yeah so microsoft bought activision blizzard um bring that to uh xbox game pass please you know let&#39;s get in there does it cost a lot of money oh could like your wow subscription be part of xbox uh we&#39;re just getting ahead of ourselves here welcome back both hope you had a good break 68 billion yes all right folks come on back hope you all did well yeah that&#39;s what i thought apple yeah they got to go underneath some sort of review right like they gotta make sure it&#39;s not some sort of monopolistic behavior or something like that but that&#39;s pretty wild if it does actually go through all righty look at how you got my posture right j coder got my hydration right thank you all right welcome back welcome back let&#39;s chill the music here so we looked at that brownie code recipes that we did together um but there was something that we didn&#39;t get a chance to get into on uh on on on thursday that&#39;s like how we actually structure our html right and so our html has a structure that we should bring to each html document right so a very common structure for an html document is to have this doctype at the top and this doctype lets the browser know kind of like what what type of html are we dealing with right what type of html are we dealing with here because if you look back a couple years ago and you&#39;re looking at something that was pre like html5 that doctype was messy and long right but when you see this nice clean doctype you know that you&#39;re dealing with the latest the greatest the html5 right and then we have the largest or we call the root element so every single thing that goes on your html document goes inside of that html tag so we call that the root tag and whenever you have a root tag anything that goes inside of it are its children so in html we have the html element which is the root element and then everything else inside of it is a child right whenever you have something inside of something we call that a parent-child relationship so here we see inside of the html we have the head and the body we would say that the head and the body are both children of the html element right and then what you&#39;ll notice is that the head and body are like where everything happens right excuse me thank you all right the head and the body are where everything happens right and the head is for everything that the browser needs to do its job right and the body is everything that we can see and interact with so if you can see it you can click on it you can look at it right you can highlight it that content has gone into the browser right i did censor my sneeze you were here for it um everything you can see and interact with goes in the body right the stuff that the browser needs to do its job like what characters are we using uh any of the meta stuff that we&#39;re eventually going to get into all that stuff goes into the head so the way i like to remember this is damn this joke does not work today hold on i do this right this joke doesn&#39;t work today there we go hold on one second there we go better the way i like to remember this is that you can see my sexy body but you can&#39;t see what&#39;s going on inside my head right you can see my sexy body but you can&#39;t see what&#39;s going on inside me let that burn into you for saying hold on you can see my sexy body but you can&#39;t see what&#39;s going on inside my head okay that&#39;s the same thing that you have when we get to our html if you can see it interact with it it goes inside the body right you can see it you can interact with it it goes inside the body but if you can&#39;t see it if it&#39;s something that just the browser needs to do its job that goes inside the head so if we were to go back to our html here where does all of this stuff go inside every single thing that we just coded out with the brownie recipe where does that all go it goes inside the body nice oh it goes inside the body so let&#39;s actually set that up something neat inside of most text editors and specifically vs code is that you can do a little shortcut so if we go to the top here and i just type html and i hit tab it kind of does everything for me let me let me do that again hold on let me let me do it i just typed out html and i went to this like html5 right like because i do the html just gives me html tag but if i type out html and i get this little drop down i go to html5 and i just hit tab it gives me everything that i just showed you so you don&#39;t actually have to type it out um it does make it a little bit quicker for you and this is like the one time that i would recommend you do it everything else i think you should type out heck i even think you should type out this stuff right i think you should even type out this stuff as well right but you can see there&#39;s a lot of stuff here that the browser might need and and don&#39;t worry about this stuff here for right now we&#39;ll cover all this stuff when we get to like css but for right now we got our doctype html we got our root element and then it&#39;s two children the head and the body and i always like to indent so i always do a little tab just to indent and then all of the content that we did before right all the stuff that we did before i&#39;m going to cut it or command x in my case or ctrl x in your case cut it i&#39;m going to come up to the body i&#39;m going to paste it in there now for some reason it didn&#39;t auto indent so i&#39;m just going to highlight it all and i&#39;m going to indent now leon why do you indent i indent because whenever you had a parent child relationship right whenever you have a parent-child relationship you want to put a little respect on the name right you just want to do the indentation so it&#39;s easier to see right it&#39;s easier to see that this h1 is inside of the body right it&#39;s easier to see that this h1 is inside the body the image is inside the body so whenever you have a tag that is inside of another tag put a little respect on the name and we indent okay right now is my code saved nope it&#39;s not safe you can tell because i have this little little white dot up top here that&#39;s how you know it&#39;s not saved so as soon as i do command s or control s if you&#39;re in a different operating system you can see that it&#39;s now saved if i go back and i refresh is there anything that&#39;s going to change here i added all this extra html but is anything going to change no right we just added more structure to our html and as we start to build out richer and richer sites and eventually applications this stuff all starts to be needed right all starts to be needed right thank you for the hydration cheers to you also just to make sure that we&#39;re agreeing to those rules remember we talked about like why do we have to follow these rules because it will help our junior general users it&#39;ll help our accessibility users it&#39;ll help our screen readers right and so we&#39;ve got to make sure that we are following these uh rules so that we can serve all the best interests of our users and there&#39;s a lot of stuff going on here right like we see this lang preference which is for letting the browser know that we are doing a site that&#39;s in english you can also do like a left to right um or right to left designation so that you know which way you&#39;re gonna read uh the the the the language right there&#39;s a bunch of other stuff that as we get into it we&#39;ll go over we talked about the chart set the other day um but there&#39;s a bunch other stuff that&#39;ll just go in here more meta than that&#39;s what&#39;s here right now so don&#39;t worry about that for right now we&#39;re gonna go into that more stuff when we get to css cool um some folks are saying how did i do that let me do it again for you so i just came up here i typed in html and i went to like see i have these options i went to the html5 one and hit tab all right now this won&#39;t work this won&#39;t work unless your file is saved as an html file if it&#39;s not saved as an html file it won&#39;t know what options to give you right so make sure that it&#39;s an html file yeah i didn&#39;t type in the carrot it was just i just typed out the word html and hit tab but if it&#39;s not saved as an html file you won&#39;t get those options so make sure it&#39;s saved as an html file and then you&#39;ll get those options how do i how do i indent so fast i hit tab you know a lot of people keep asking tabs versus spaces i have my tab set the spaces cool alrighty folks let&#39;s look at some new tags let&#39;s look at some new tags here all right this navigation tag is something that we got with html5 right with html5 we got some new tags and one of the tags that came along with us was a nav tag a nav tag short for navigation is for the content that&#39;s going to help your user move around your website right and so you got to think that there are a lot of repeated code in our sites these days right when you go to a site there&#39;s often some content at the top right there&#39;s some content at the top that enables you to move around that site right and so if we look at something like uh khan academy we have this this this kind of this this navigational content that&#39;s gonna be at the top of every single page right and sometimes you might have like let&#39;s say like you&#39;re amazon right let&#39;s say you&#39;re amazon and you have thousands and thousands if not hundreds of thousands of pages and google comes to your site and they see this word donate over and over and over again or they see like buy gift cards over and over and over again they might start to think you&#39;re trying to do some shady stuff called keyword stuffing where you&#39;re trying to convince google that your site is about say donation or your site is about um uh gift cards or something like that but that&#39;s not what you&#39;re saying what you&#39;re trying to say is hey i need this stuff to navigate around the site it&#39;s probably going to show up over and over and over again and so what we&#39;re able to do is have these lovely nav tags and in terms of like search engines they kind of just get like ignored right like they don&#39;t count against you they don&#39;t count for you um but you don&#39;t worry about that too much right now what they do is it just enables you to have like repeated content across all your pages and useful in a way so that you know that you&#39;re going to use this to navigate really helpful when it comes to screen readers as well they know that they can use the content in that tag to help them move around right got a lot of hydrates that came in cheers to you all thank you ruby thank you for the stretch i&#39;m gonna get a little chair stretching thank you thank you cool so whenever you have navigational content we&#39;re going to use this lovely nav tag right and we&#39;re going to see this over and over again we&#39;re going to we&#39;re gonna we&#39;re gonna put this into practice right we&#39;re gonna put this into practice but this nav tag is something we&#39;re gonna use to help us when it comes time to having content that directs people around your site so right up here we see a nav on techcrunch we maybe have like a nav on the left hand side on bbc we had a nav up top as well so this idea is that we&#39;re gonna have these navigational elements that enable us to move around our application now inside the nav we often have a list of links like the places that we&#39;re going to go to and so that&#39;s why you would often see like a ul with llis and anchor tags inside cool now so far right so far we have only shown data to users right we&#39;ve only shown data to users right but how do we get data from users what can we use to get data if you did the shahal reading you should know this already what do we do how can we get data from users we use a form exactly and so here we have a form tag and a form is an open and closing tag that wraps around inputs just like you have an o l and a ul that wraps around l i&#39;s like you would never have just an li right your your lis are always going to be wrapped in an o l or a ul right always going to be wrapped in an o l or a ul same thing with a form we&#39;re going to have inputs and those inputs are always going to be wrapped in a form tag now form tags have some pretty cool what are these called what are these called up here let me ask y&#39;all what is that called what are these called yeah forms have some pretty cool attribute value pairs we want to worry about them right now when we get to like building our full stack applications these become a lot more important uh actions are like what happens when the form submits so if you&#39;ve ever submitted a form and it&#39;s taking you to like a thank you page or a confirmation page it could have been one of those those attribute value pairs that helped you do that and then also like what are we doing with that information are we sending it somewhere that&#39;s where the post comes in but like i said you don&#39;t know about these attribute value pairs just yet we&#39;ll get to them later on when it becomes important but what we do need to know is that inside of a form can go a bunch of different kinds of inputs we can have text inputs password inputs tell inputs email inputs button inputs all these different types of inputs that can go inside of a form and there&#39;s a lot of them with html5 we got a lot of these new input types and the mdn has a full list of them uh should you want to see them right so mdn has a full list of all the input types um but let&#39;s go ahead and build a simple form together so i&#39;m going to go back to my brownie dishes here and i&#39;m just going to go ahead and give myself a little form at the top here&#39;s a little bit of room and i&#39;m going to go ahead and just do form and i&#39;m going to hit tab there we go cool so i have my form i don&#39;t really care about any of the attribute value pairs for right now we can just let that be and inside of my form i&#39;m going to put three inputs i&#39;m going to do input type text and then i&#39;m also going to do an input type tell and an input type email so let&#39;s go ahead and do tell and let&#39;s go ahead and do email cool is my site saved nope some folks are saying that they can&#39;t see the screen that&#39;s most likely due to your quality settings so the beautiful thing is that we have quality settings you can change the quality of the sh of the screen to a higher quality if you have the bandwidth to do it all right and then sometimes you just gotta refresh yeah sometimes you gotta refresh all right so now it&#39;s saved beautiful and let&#39;s go ahead and take a look at this in the browser here&#39;s which one it was there we go all right let me refresh because i can&#39;t see it right i can&#39;t see i can&#39;t see my form yet why can&#39;t i see my form yet i say let&#39;s go back let&#39;s look i saved look my my my x is a circle my my circle&#39;s an x all right why can&#39;t i see the form i didn&#39;t refresh my that&#39;s weird what happened oh there we go i just didn&#39;t scroll up i didn&#39;t refresh right i had to refresh and then i had to scroll up i didn&#39;t refresh and then i had to scroll up uh so now that i&#39;ve refreshed you can see my form but there&#39;s something interesting let&#39;s go back and take a look at these real quick um some folks are saying wait the input doesn&#39;t have a closing tag it&#39;s one of those very few tags that are self-closing the input is content itself we&#39;re not wrapping around content right it is an input it doesn&#39;t need a closing tag it&#39;s not wrapping around content it is self-closing just like images right but we have these different types text tell email but when i go back nothing really changed about each three of them right they&#39;re all the same they&#39;ll look the same i know we don&#39;t care what it looks like when we&#39;re writing html but they all look the same so why with html5 did we get all of these new like input types well something really important changed no cheating if you watched the class before something really important happened something fundamentally changed about the way that we use the internet something big a massive impact on everything that we do how we consume the internet what we use on a regular day-to-day basis it just kind of consumed how the internet functions and works so what changed yeah mobile and so with mobile we need ways of helping one very particular things how do phones and mobile change inputs like what do we need with inputs um if we&#39;re using a mobile yeah tony got it we need we need different keyboards right we need different keyboards when we type when we have an input type text is going to give us like a normal keyboard we have input type tell it&#39;s going to give us the number pad when we have an input type email it might give us the at sign or like your email provider on the keyboard so we needed all these different types of keyboards and the wonderful types and the inputs help us with that cool there&#39;s also one other thing i want to show you about forms that are really helpful and so here we have a form and i&#39;m going to have a label and there are a couple different ways of doing labels but let&#39;s just say that this was um we want we want the first input to be like your your first name let&#39;s let&#39;s put a label called first name right first name and what i want to have happen is i want to tie this label to this input and the way you can tie a label to an input is by having the same four attribute as the id attribute on the input so i&#39;m going to give the 4 the attribute of zebra right and i&#39;m going to use zebra a lot because there is nothing in html css or javascript right that has the word zebra in it or zebra if you want to say it that way right um you want to have a way like i want a way to like show you that like i&#39;m making it up so if i use zebra or zebra anywhere i am making that word up so my label is going to have a 4 of zebra and i&#39;m going to give this input the id of zebra cool cool so my label has the four and my id has the zebra as well i&#39;m gonna save this i&#39;m gonna go back let me refresh all right so now i have this label let me let me get a little bit bigger here i have this label and what i&#39;m going to do is i&#39;m going to click on the label okay let me go ahead and click on save already three two one did you see it you see what happened one more time one more time hold on i&#39;m gonna click on this label three two one boom you see what happened ah we got this cursor so when i clicked on the label it focused in that input right it focused for us it focused in on that input i clicked the label and it focused in on that input okay now why might that be important like why why might we want that to be a thing like why go through the the extra labor of creating labels for each of our inputs yeah accessibility and so accessibility is great because individuals might be reading out your website so the website might be read out to them and then as they&#39;re kind of like hovering over the text they want to be able to tap that text right so that the it can focus into that input for them and so it might be harder for them to find the inputs but they might be able to tap the text and have it focused for them so there are some accessibility concerns there there are some things that make it easier for folks to interact with your forms and so i want to show you some of these basics we&#39;ll get deeper into forms our forms will do more but for now this is some very simple forms and you&#39;ll see more in the reading and the homework that you get as well cool all right i said this is the most why am i saying why zebra so i use zebra a lot and i taught a class uh at ga and it was like a it was just like a front-end class which is like two nights a week for 12 weeks they&#39;re phenomenal classes i love teaching them and i always use zebra as my example and at the end of that cohort um a person came up to me they gave me a beautiful zebra pencil as like a thank you and said it&#39;s called zebra and then they walked out and so as an homage to that wonderful person i now say zebra uh they i think they were from south africa where it is pronounced zebra and not zebra and i think i think folks from south africa should be dictating how we say zebra um more than than my philly ass should be saying uh how zebra said so i&#39;m gonna call it zebra cool now i said that this was the second most important thing we&#39;re going to talk about tonight and it&#39;s called progressive enhancement and progressive enhancement is a really important concept for a lot of our users and all all progressive enhancement really means is that we should be focusing when we&#39;re building our websites at the core of our website should be our content our html right that should be our chief focus that&#39;s why we start with html if you&#39;re thinking about building a website your focus should be the content the html and then we&#39;re going to take that html and put a nice chocolatey coating around it and that chocolatey coating is our css and we&#39;re going to wrap that chocolate and peanut in a very thin candy coating that is our javascript okay so the idea here the idea here is that the core and the most important is the content the html we wrap some presentation on it and then the very last thing is that very thin candy coding and what you need to do is you have to realize that not everyone has broadband internet access in fact a lot of your users a lot of your consumers might not have access to super fast internet right and so if you are pulling in all the latest and greatest css you&#39;re pulling in all the fancy client-side javascript and you&#39;re making your sites heavy right you&#39;re making your sites heavy that increases the page load speed of that site let&#39;s look at a site let&#39;s look at cnn cnn.com i&#39;m going to do something i&#39;m going to right click inspect and don&#39;t worry about seeing this so i&#39;m just going to show you something i&#39;m going to go to network and i&#39;m going to refresh ready hard refresh and what we&#39;re really trying to focus on and let me turn off let me let me turn off the ad blockers here turn that off turn that off and we&#39;re going to do a refresh here and we&#39;re gonna let this run for a second give me a second here so what i just did is i just refreshed the cnn website okay and what we&#39;re seeing it&#39;s still loading you see all that movement that is it&#39;s still loading right we&#39;re 26 seconds in and there&#39;s still stuff happening there&#39;s 17 megabytes of resources that are coming in 897 requests that have been made so far remember when you go to a website you make a request to a server and you get stuff back oh my i don&#39;t know if i can stream that um you&#39;re getting all those responses back so that&#39;s like almost a thousand requests that have been made to different content right 21 megabytes of resources right and there is a good chance that some of our users might not be able to load that site that&#39;s a lot that that&#39;s somebody&#39;s data cap that we&#39;re eating into just going to a news website right just going to a news website 21 megabytes of space over a thousand requests and so this really escapes progressive enhancement but they realized that they said you know what let&#39;s get back to our roots right let&#39;s make it so that our users that may not have access to high-speed broadband could still use our site and they did what a lot of sites are doing now and they made a light version of cnn so this is light.cnn.com right let&#39;s do the same thing let&#39;s go ahead and inspect let me turn off my ad blockers for this site again there&#39;s notice there&#39;s only one that popped up and let&#39;s go to network and let&#39;s do a hard refresh so we&#39;re not even at we&#39;re at like a third of a megabyte right and only five requests as opposed to a thousand and untold megabytes of of data right and so this is a beautiful website that takes into account progressive enhancement the idea that the thing that people really care about right hey rob thank you for the bits the thing people really care about are the articles the stories right and so they they want to be able to look at that and have a clean experience this is a beautiful website in terms of progressive enhancement because it just gives you what you want there is no need for the chocolaty coating maybe a smidge of css and definitely no need for the the heavy javascript right and it&#39;s important to keep these things in mind and i pulled this up in 2017 the u.s said that 22 million americans or roughly 35 of the nation&#39;s rural residents did not have broadband access let&#39;s think about that in just 2017 in 2017 22 million americans about 35 percent of all rural residents lacked broadband access so that&#39;s a huge portion of your consumers a huge portion of folks that are trying to access the internet that if you go out and you wild out and you add tons of really heavy things to your site that doesn&#39;t really matter right it doesn&#39;t really matter you are impacting your users now something that was really cool that i looked up to is that in 2015 2015 aol had 2 million dial-up subscribers in 2015 in 2015 aol had 2 million dial-up subscribers they now said that they have very few like they like like in the thousands but in just 2015 2 million people still were paying for aol dial up and that&#39;s just aol so when you think about progressive enhancement i don&#39;t want you to think about some other places like even in just the us which has decent infrastructure we still have lots of individuals that do not have access to broadband and so then when you expand that to the rest of the world you got to think about do you want to reach people or not and you should be keeping progressive enhancement in mind i actually just got i don&#39;t know if it&#39;s in the room i just got a 56k modem because i want to do some fun stuff with it but yeah all right so with all that we have in mind and all that we&#39;ve learned let&#39;s look at this bbc website let&#39;s see if we can um if we can get this going here let&#39;s see if we can get get some things pop in here and see if we can start writing some code together so let&#39;s go ahead and look at the bbc website right so we look at the bbc we got a few things that are happening here we got what do we have up here at the top what do we got up here at the top where we say that is we definitely know it&#39;s a nav and that nav might be inside of another tag we talked about one tag very very briefly that that nav might be sitting in anybody know what that might be yeah it could be our header so we know that we know that everything on this page right you know everything on this page is sitting inside the what everything we can see right now sitting inside the what yep it&#39;s sitting inside the body sitting inside the body perfect and then inside that body we know that we have our header and inside our header we probably have our nav and then inside of our nav we probably have like our ul and all of our allies all right so just by taking a quick look at this i know that i have like my header my nav my ul my lis probably my anchor tags inside of those allies and then we also have something over here that search what is that going to be a form exactly somebody says why are you well well it&#39;s because we have a list of links we have a list of links they don&#39;t have to be in a specific order so it&#39;s not an ol since it&#39;s a list of links we put them in a ul cool so if we look at this we have a header a nav ul lies maybe a form cool how about when we look here would that be big block taking up some space what would that be a section nice how about welcome to bbc.com what would that be maybe some sort of heading some folks might say that&#39;s dh1 some folks might say that might be an h2 it&#39;s up to you um i&#39;m thinking the h1 might be one of these down here that seems really important if you come to bbc that&#39;s the thing they want you to know their h1 might change a lot all right maybe we got some another section here that&#39;s holding the heading the paragraph and the span maybe we got four more sections over here each holding maybe a heading and a span all right down here we probably have like another section and maybe three sections inside of that and maybe some sort of maybe like an h2 for news and then inside of those sections maybe like an image an h3 a paragraph a span maybe an image a heading a paragraph and a span right so what you&#39;re seeing me do right here is something i do with every single site that i ever get right i mark it up some folks are saying are they articles so articles i think are interesting there are some people that are purist when it comes to the articles and it&#39;s used just for articles like things that you would clip out and share to me these all link to the actual article right these all linked to the actual article so some developers would say oh if they actually link to the article then they&#39;re not actually articles they&#39;re like links to the article that&#39;ll be the actual articles right and then there are some people that say actually those things could be shared so maybe you can also give them article tags as well so it&#39;s kind of a decision you have to make are you a purist that says that that&#39;s not really an article just links to one or is that something that could also be shared right it could also be shared and therefore is an article all right to you i&#39;ll show you why i do it but don&#39;t take my word for it reading rainbow you know um but what you&#39;re seeing here this this mess on my screen right is what i do for every single layout if i ever am on the job or i have a client and i work with a designer and they give me a layout i i until i got an ipad i printed it out so maybe until like a year or two ago i printed it out i&#39;m not ashamed to admit this i printed out every single design i ever got and i would sit down with a pencil and a piece of paper and i would draw out my boxes all right this is going to be a section this is going to be a heading this is going to be a header and i would sit there and i would draw it all out and then that just helped me think through it so that when i went to my boomer so when i went to my my my html i kind of had like a direction like i knew where i was going and so whenever i give you a design that you have to write the html and then starting next week to css for i really recommend like drawing it out some people will use some sort of program on their computer to draw it out some folks will literally print it out and draw on it but i really think there&#39;s a lot of value and and drawing it out even if you just have a blank piece of paper and you draw your boxes on that blank piece of paper it really does help my brain think through all the decisions i have to make so that i can go ahead and and get through them you know let&#39;s look at another one khan academy we&#39;re looking up here everything we see everything that we see right now is inside the what everything we see is inside the body all right how about this area up here would that area be yep that&#39;s the header nice inside the header we have the what we got the nav all right inside that nav we got some somewhat and maybe a nav and then maybe like a ul and there&#39;s some some lis in there right we could definitely see some li&#39;s and some anchor tags and then maybe in one of those li&#39;s we have a or maybe outside of the the the now depending how you think about it we have a form we have a what how about that what would that be an image nice then these would just be like normal allies and those allies would have what inside of them yeah those those lies would have anchor tags and there are links that go somewhere to sign up to log in to donate cool all right how about this this uh white area here what could that be yep that&#39;s probably a section nice inside that section we have a what would that be an image of some sort beautiful and then we have a what would that be h1 nice how about this here would that be paragraph nice i feel a paragraph there and this one&#39;s tricky what do y&#39;all think this could be what are those what are those to me it&#39;s a it&#39;s a ul with lis and anchor tags inside of them each one of those i think are links to other places they just so happen to look like buttons now i don&#39;t care what they look like we&#39;ll get to that with css so are they buttons or are they anchor tags to me it&#39;s gonna be a ul li with anchor tags inside i can even see some people saying that&#39;s also a nav right like if that if that&#39;s navigation that&#39;s going to take you to learners teachers district&#39;s parents and that shows up on every page then that could be like a nav to me but for me right now i feel comfortable with like a ul line anchor tags inside cool about below right here i&#39;m just getting to the fold another what another section nice and then how about this inside of the section h2 nice look at us go look at us go come on now look at us go y&#39;all just knew every single thing on this site this is like a normal in production site and y&#39;all are just blasting through this right i told you it&#39;s not it&#39;s not too much right like you learn some of the basics beyonce has arrived you learn some of the basics and you could start to really kind of to really do the html for these sites now we&#39;re going to get to css and stuff next week but for now like y&#39;all rocking and rolling with this html kudos to you well done let&#39;s do one more techcrunch oh this one&#39;s a little a little odd um what is everything we see inside of everything we can see right here so what are we inside of body alright when i look at this i kind of see like three distinct areas all right i see that that and that okay so what would this be it&#39;s definitely a nav right definitely nev some people might throw it in a header some people might not i think it could be a header it&#39;s the beginning of the document notice why i always say beginning of a document i don&#39;t say top or bottom right it could be a header it could have a nav inside of it could just be a nav right uh inside of that nav we have a what what&#39;s inside of that nav a ul exactly with l i&#39;s and inside of those l i&#39;s are probably what anchor tags nice we also have probably up here like an image that&#39;s their logo or something cool how about the box next to it what would that be like this this this uh big boy over here what would this be like that whole box what would it be section i could see being a section that comes down to that argument again right is that a section is an article to me section some other folks might argue and say no it&#39;s an article but to me articles are meant to be fully shared right so i would say section here and then what would this be at the top h1 i feel an h1 there yeah most important thing it&#39;s like their biggest headline you come here that&#39;s what they want you to walk away with how about the person underneath amanda a would to be it could be a span could also you can make an argument that doesn&#39;t describe the content that comes after because if it describes the content that comes after it&#39;s a heading and maybe we have to start thinking about what type of heading it might be based on how important we think it is if you don&#39;t think it describes that content describes that that section at all then it would be a span yeah i might i might lean into the heading category here the heading camp on this one and then this one should be easy what would that be yeah an image cool and then we got something interesting over here on the right got something interesting over here on the right what do you what do you all think that this this uh this could be i see a lot of people saying in a side i don&#39;t think it&#39;s an aside i think that&#39;s important content i i think it&#39;s not ancillary or extra or something that they could like remove and the site still be okay i think these are like they&#39;re like important stories like they want you they definitely want you to go to these stories right so to me this could be a section and then inside that section could definitely be a ul some people might just make it a ul which can be weird right but like you could just make it maybe a ul it could be a section with a ul inside of it or some people might even do a section with an article inside and those could all be all four of those could be articles i actually think techcrunch does list those as articles but to me i&#39;m a purist i think articles are meant to be shared and that to me isn&#39;t i think those linked to articles so for me this would be a ul well it would be a section with a ul with lis with anchor tags inside but or maybe not even anchor tags it might be headings first like h2s and either i would say spam right so that that&#39;s what mine looks like i think this box is a section and then this whole thing is a ul and then each of these are list and each of those lis has a heading in them and a span i&#39;m literally using my fingertip because my apple pencil doesn&#39;t work for some reason y&#39;all don&#39;t blame look we already talked about this we&#39;ve been through this don&#39;t blame me blame the nuns don&#39;t blame me blame the nuns we&#39;ve been through this now this can be overwhelming at first right and so what i really want to put on yourself is don&#39;t worry about perfection here pick the most semantic thing you can think of and go with that you&#39;re gonna have plenty of time to figure all this out the high heavens give yourself a little bit of grace give yourself a little breathing room write vomit code get something on the board get it working right you don&#39;t have to have it perfect it doesn&#39;t have to be the best html in hell if i give this if i give this image to 10 different front-end developers i am getting 10 completely different sets of code back so nobody has this perfect right nobody has this perfect it&#39;s up to you to make the best semantic decision that you can reason about and then put it into practice okay it could be inside of an anchor tag too like this stuff could be wrapped in an anchor tag like that h2 and span could be inside of an anchor tag um so like that the the whole thing that like that whole area could be clickable and that could that whole thing could be an anchor tag it seems like the box is not clickable but the heading is uh and so that gets us into some interesting territory cool are all these layers nesting yes they are they are nesting so what i want to do is i want to i want to do one quickly together i know we&#39;re going to go a little over i actually thought we could end a little bit early which is you&#39;re going to find as a meme i want to do one together and then we&#39;ll wrap for the evenings i want you i want to i want you to get some fingers on keyboard time right once you get some fingers on keyboard time and then um i want you to we&#39;re going to do a raid right we&#39;re going to do a raid and then uh after the raid like after you&#39;ve hung out in the raid a little bit you&#39;ve given them some like some follows you shared the love a little bit uh i want you to maybe finish it up i like this tech crunch one i think this one&#39;s weird i think this one&#39;s weird uh and so since it&#39;s weird i want to take a look at it all right i want to take a look at it so let&#39;s go ahead and look at um let&#39;s go ahead and look at this one so we already kind of talked through it so i&#39;m just going to open up a html file all right i&#39;m going to go ahead and open up an html file and i&#39;m just going to do file new so on my library system i do command n it might be control n for you and what i&#39;m going to do is i&#39;m going to immediately save this as an html file so i&#39;m going to call this tech crunch dot html so i did command n all right i did command n uh and when i did command n uh that brought me to [Music] the new file and i immediately saved that file the command s to save the file and i&#39;m just going to call it techcrunch.html you have to save it as an html file if you do not save it as an html file you don&#39;t get all the stuff that we kind of just walk through that can help you so now that i&#39;ve saved it as an html file i can just type out the word html yep and i&#39;m going to do the html5 hit enter now i have my head i have my body and i&#39;m ready to rock and roll i like to indent my head and body a little respect on the html element&#39;s name and then inside the body right inside the body i&#39;m gonna start writing my my my html here so i have let&#39;s just say that that&#39;s the header and we&#39;re gonna have uh an image and then we&#39;re gonna have a nav with uh ul and li so let&#39;s go ahead and put our header in here cool and you don&#39;t have to code along for right now kind of just watch this one this isn&#39;t like you don&#39;t have to be coding this live like pay attention watch ask questions and then we&#39;ll go over it together all right so i have my header inside my header i know i have like an image and then i have my ul in some of you i have my lis and inside my allies had my anchor tag and that anchor tag was all different stuff so it was search well that&#39;s probably like a form of some sort but startups techcrunch let&#39;s just say startups and i&#39;m just going to copy and paste this because there&#39;s like eight of them all right so there&#39;s some of them and just uh to to have some placeholders when i do the octothorpe there we go so the idea here is we looked at it we said that this whole area was a header maybe like i said we don&#39;t care we&#39;re we&#39;re trying to figure this stuff out there&#39;s no perfection here there&#39;s no absolutely right absolutely wrong thing inside that header we had like our logo which was an image we had uh maybe a ul with a bunch of links in it and so that&#39;s what we&#39;re kind of working through here we got our header the image let&#39;s just put like logo in here as well as the alt we had a ul right with a bunch of lis and anchor tags in it but let&#39;s think about this what is this what is this it&#39;s a nav exactly it&#39;s a nav and so if we go ahead we should actually put that all in a nav i&#39;m going to go ahead and bring out my nav and i&#39;m going to put my ul in there boom there we go so now we got a nice header we got a nice nav our ul our lis are looking good right maybe the image is inside the nav that could be true maybe the image is inside the nav that would be okay maybe we have an li that&#39;s just for the for the logo that&#39;s fine could be is this saved not saved nope there we go uh we also i have some other stuff in here this might be like a form we could wind up with like a form in here somewhere like we might have a form outside the nav it depends on whether or not it depends on whether or not this search shows up on every single page right if this search shows up on every single page we might we might put it in the in the inside the nav that would be okay like we can do that remember fight the urge to pick stuff based on how it looks right all right and then we could have like a text for like our search right all right so the idea being here that we could have uh image in our nav maybe the form is inside there maybe it&#39;s inside one of our allies the idea here is that like it&#39;s it&#39;s it&#39;s i want you to be a little bit free-flowing with this don&#39;t don&#39;t get caught up in it having to be perfect right we&#39;re kind of riffing here a little bit we&#39;re trying to think through the semantic decisions behind what we&#39;re doing right and if it doesn&#39;t have to be perfect right get the idea of it being perfect out of your head it just doesn&#39;t don&#39;t worry about that right now you&#39;re gonna have years and years to be perfect right now get a win on the board get get some ideas flowing right think through what it should be right cool all right so we i think we got a rough idea of what the header might look like i&#39;m going to save it and let&#39;s go look at this next portion all right we got like this next big thing which i&#39;m probably going to say is a section and so i&#39;m just going to put a section after my header here some folks might argue an article here but i&#39;m going to go with a section i&#39;m going to have an h1 in it and microsoft eyes activision by blizzard right uh brooks you it&#39;s your quality settings you have to improve your you have to change your quality settings on twitch if it looks blurry well jax thank you for the hydration cabin thank you for posture check real both thing for hydration cool all right so we got that section with the h1 microsoft buys blizzard let&#39;s take a look at it again we have the amanda silverling um that could be it could be a span or it could be some sort of heading that describes the content that comes after i don&#39;t know does the person&#39;s name actually describe the content it is their article i&#39;m not going to get up in my my feels about it for right now i&#39;m just going to say a span something i might come back to right i might come back to you and say you know what that that that should be um that should be somebody&#39;s like that that describes the content might come back to it right and take another look image that&#39;s definitely an image for me and so i&#39;m gonna go and put an image in here and i&#39;m just going to put the often for now and that&#39;s going to be like the i think it was like the call of duty activision there you go is it okay to be lost it absolutely is okay to be lost but uh you better jump in one of those voice channels and get help you know this is stuff that you should have seen in the shay how but if it&#39;s your first time ever being in a tech center and your first ever even looking at this stuff it&#39;s going to be completely just a it&#39;s like a whole different language right and so it&#39;s okay to be lost it&#39;s okay for a lot of stuff not to make sense but you got to put in the cognitive effort to get over it right you got you got to put in the work to get there so come back re-watch the video if you have to make sure you&#39;re doing your active recall whatever i do you try doing afterwards right so when you&#39;re done the raid make sure you yeah yeah yeah yeah you go back you know all right so got that section there a lot of stuff we might come back and change we might add some anchor tags here or there all right we&#39;ve got this last one over here like this last area i&#39;m just going to say a section with a ul in it and that&#39;s what i&#39;m going to come over here and do cool section with the ul and then each one of those lies is going to have for me it was like an h2 we&#39;ll say h2 some text and then um there was like a span which was the person&#39;s name let&#39;s go back and take a look real quick yep heading maybe a span and then these were all like in a in a in a list somehow cool might add anchor tags here we might might make some of these things clickable right right this whole thing might be inside of an anchor tag uh the the the text here right the text here that might be uh an anchor tag so let&#39;s go ahead and get rid of that real quick so we might put like our sum text and we might make it an anchor tag right all right we might make it an anchor tag right so like i said there&#39;s a lot of little things you can come back and do and i want you to play with this right the idea is i want you to play with these things so i showed you a kind of a quick run through right i&#39;m going to share this file after class of course but i want you to come back i want you to re-watch this i want you to see if you can come to some of the same same ideas that i came to get the practice right get the practice of typing all this out right so i&#39;m going to share this file but what i want you to do tonight like what i want you to do if you have time tonight or as part of your homework i want you to take this tech crunch right and type it out right get get this get this nav going get this section going get this this list going right i want you to do the same thing for khan academy talk through it get it going we have the same thing for the bbc homework get it going you got to practice it you gotta get into your text editor you gotta you gotta mess up you gotta make sure that things aren&#39;t like things aren&#39;t right right you gotta make sure that like you you you play with it right and the more you do it the more you get in there the more you practice the more you feel uncomfortable the easier this becomes okay so do what you got to do jump into a voice channel re-watch the video in a voice channel i&#39;m sure you have a bunch of folks that&#39;ll join you talk through together talk through your semantic decisions together if you&#39;re catching up as a vod jump into the ketchup crew channel watch it together talk through it together practice it together get your fingers moving get into your text editor to break stuff it doesn&#39;t have to be perfect so that&#39;s what i really want you to focus on tonight is that it does not have to be perfect right you you you saw me making some guesses some educated guesses i put in there i might come back to i might change it but it doesn&#39;t have to be perfect okay this is your first time right it&#39;s your first time for a lot of you writing html and so let&#39;s get into it when we come back on thursday yeah we shift some gears though folks we get into some css so make sure you&#39;ve gotten through the shay hal reading and we&#39;re going to do a little little little little raid here um we we talked about the primogen let&#39;s see if they&#39;re live let&#39;s see i think they&#39;re live yep let&#39;s go and do a raid remember the when you raid you you get you get the channel points you want the channel points folks it&#39;s all about the channel points all right so let&#39;s go ahead and get a raid in primogen uh they&#39;re they&#39;re a wizard on the keyboard that&#39;s what i want you to say i want you to see what you could what you could get up to like how your how fast your fingers can move uh how how uh how lit your code could become and so let&#39;s let&#39;s go ahead and raid prime while they&#39;re live we&#39;re going to the primogen uh folks asked me to say it out loud before we do it so we&#39;re ready in the primogen we&#39;re going to start the raid and we&#39;re going to be over there in 10 seconds but please give yourself some grace get into your text editor have some fun break some things i&#39;m going to see you all on thursday to do it all again cool i&#39;ll see y&#39;all over there folks peace a wonderful evening let&#39;s raid

we&amp;#39;re back did it again did it again let&amp;#39;s go hey bangers only hey good morning good afternoon good evening we&amp;#39;re coming from hope you all are doing well welcome back everybody welcome back class three let&amp;#39;s go turn up [Laughter] so today&amp;#39;s today&amp;#39;s the first day with the hair down so we gotta you know make sure we&amp;#39;re focused on it prime with the raid let&amp;#39;s go what up ron how you doing hope you&amp;#39;re doing well hope your stream was well uh we got to make sure that we get folks coming your way uh hopefully maybe like a i don&amp;#39;t know if you&amp;#39;re live on a sunday but one of these nights we got to get make sure everyone here gets to come back and see y&amp;#39;all now folks hands down the best streamer in our category prime with the raid i appreciate it thank you so much uh hands down the best tech streamer best coding streamer if you have not checked them out i&amp;#39;ll make sure i&amp;#39;ll drop a link to their channel we&amp;#39;ll shout them out as we get going but you definitely need to swing by their stream hands down the best so one of these days hopefully soon we got to get the raid coming back to you i appreciate y&amp;#39;all swinging by welcome everybody hey let&amp;#39;s go so for folks that are new we&amp;#39;re doing a 30-week software engineering bootcamp uh we&amp;#39;re starting from the beginnings we&amp;#39;re just in html land right now we&amp;#39;re going to go full 30 weeks give you the skills that you need to be a full stack software engineer last cohort we saw 75 folks get jobs it&amp;#39;s probably a little bit higher now we had a few come in a couple days ago so yeah welcome hey yeah yeah first day with the hair down you know you got to do it right you got to make sure that it&amp;#39;s just just just the focus right just the focus alrighty folks tonight we got a really good class uh we&amp;#39;re probably gonna end a little early tonight we&amp;#39;re gonna get some lots of hands on keyboard practice tonight uh we got some more html to get to uh on class two we didn&amp;#39;t get to the end of everything we need to cover so tonight we&amp;#39;re getting our space repetition in we&amp;#39;re getting our review in we&amp;#39;re making sure that we feel comfortable with the topics that have been taught so far and then we&amp;#39;re pushing i&amp;#39;ll push a little bit further right we&amp;#39;re gonna push a little bit further right and then we&amp;#39;re gonna get down to actually typing some stuff tonight we&amp;#39;re going to be building three different websites something we&amp;#39;ve already seen before we&amp;#39;re going to make sure we go over the bbc together we&amp;#39;re going to look at khan academy together and we&amp;#39;re going to look at tech crunch together and we&amp;#39;re going to code it all out so if you&amp;#39;re here to get some practice in tonight you&amp;#39;re in the right spot if you&amp;#39;re here to just look at some beautiful hair you&amp;#39;re in the right spot but uh if you&amp;#39;re down to learn let&amp;#39;s get into it we always like to start with a little bit of questions the question of the evening the question of the evening is as such would you rather like snap your fingers and they produce a new season of your favorite television so or you snap your fingers and they produce a sequel to your favorite movie so do show or movie and chat for me please show our movie thanks again for uh for the raid i really appreciate it oh folks are going show seeing that show go wild okay man i thought it&amp;#39;d be a little bit more balanced but now you all are definitely feeling the the show over the movie here so i just watched over the weekend two seasons of snow piercer two whole seasons while y&amp;#39;all were doing your shay how reading i i just i tore through snow piercer it was it was pretty it&amp;#39;s pretty wild love the movie love the tv show and so i as soon as i was done the second season i was like come on they gotta give me a third and so if i could have snapped my fingers in that moment i would have picked another season still piercer but third season comes out in a couple days and then they&amp;#39;ve already planned the fourth season i&amp;#39;m still going to snap it give me give me a fifth season all right everybody always discover questions what questions you got for me tonight will we use emmett for abbreviation at some point not really it&amp;#39;s not something that i like my folks to start off especially in the beginning but like i said once we get through the basics together it&amp;#39;s up to you you can do whatever you want i just like to show the basics first i like to get folks comfortable using tools that they might not have access to during interviews and then if you decide that there&amp;#39;s something that&amp;#39;s going to improve your workflow by all means go for it what if we get the homework done i&amp;#39;ll talk about the homework in a little bit we got we got a whole slide for it um but yeah what the goal is that you get the homework done on time if you&amp;#39;re shooting for touring or hopper you actually got to get stuff in on time if you&amp;#39;re in hamilton you can take your own pace uh and life happens right life happens uh one of my dear friends and somebody i consider a mentor always told me god family academics right so god family academics something i live up to family&amp;#39;s gonna come first right your your your your responsibilities have to come first learning will take a back seat to that but you can always catch up in fact we have ketchup crew which we&amp;#39;ll talk about in a few seconds roy said why are you a floating head right now because i want you to focus on the hair tonight this is gonna be a little bit shorter of a class because we&amp;#39;re just getting a lot of review in and so if we&amp;#39;re going to get a little bit short of a class a little bit more time to focus uh i might as well focus on the hair let&amp;#39;s get a few more questions in while folks get in here folks are always trying to run to their computer right as the the stream is starting where do we submit the homework uh we&amp;#39;re gonna get into all that in a bit but if you noticed whenever there&amp;#39;s homework due in the message for today in the following materials channel there will always be a place to submit it my hair routine uh my hair routine is not that wild i use ogx products i don&amp;#39;t shampoo every day uh i don&amp;#39;t even wash my hair every day which is pretty normal so a lot of times i&amp;#39;ll just have my hair up i feel special for y&amp;#39;all so i get in there and then uh shea moisture every other every every couple of days as well and then just lots of water you gotta drink your water folks how far advanced will we learn css uh so on thursday we start css so today is like our last day of just html thursday we get into the thick of it with css and so by the end of our time with html and css i should be able to give you a photo and you should be able to build that photo in html and css like if i give you a website you should be able to build that website in html and css now you could spend your whole career building stuff right building stuff with just html and css we don&amp;#39;t care about perfection we write zombie code around here we just want it to work we wanted to look at it and be like yep that was the design that was the site and so you&amp;#39;ll have your whole career to like get really into it to like really understand all the nitty-gritty details why things work to go super deep into to all the different types of layout systems but for us and our purposes our goal is the job right and so we&amp;#39;re going to learn enough so that we can get our sites up and live looking good and move on we don&amp;#39;t have to be pixel perfect exactly no pixel perfect around here what is my preference front end back end i love back end stick me in the back ends i want to worry about stuff let me build my apis in peace and and call it a day yeah if running running gives me too many nightmares we cover uh sequel no we&amp;#39;re going to be focusing mainly on mongodb we&amp;#39;ll touch a little bit of postgres um but mainly mongodb what kind of team i drink it&amp;#39;s always the same it&amp;#39;s always that that tazzo vanilla try i need to i need to get a t sponsor is what we need oh bootstrap material or tailwind well our og sam you can do bang exclamation point sam here in chat uh they uh they&amp;#39;re they&amp;#39;re they&amp;#39;re going with material ui so i&amp;#39;m gonna go with them as well it&amp;#39;s got a new gig cool alrighty folks looks like we got the whole crew in here i&amp;#39;m glad you stuck by let&amp;#39;s uh let&amp;#39;s let&amp;#39;s move on from the questions and let&amp;#39;s see what we&amp;#39;re going to talk about tonight so tonight we&amp;#39;re getting our review in i like to go slow in the beginning i really do for folks this is if this is your first time a lot of this stuff can be overwhelming a lot of this stuff it can just be a real real torture in the beginning if you&amp;#39;ve never touched code so we have folks from all ranges here we&amp;#39;ve had folks that have like built full stack apps already and they&amp;#39;re here to learn stuff that&amp;#39;s going to help them get a job we have folks that have literally never opened a text editor before so this first week two weeks is really going to go a little bit slower than you would see in other programs see in other places i really do want to get that review in i really do want to make sure that folks kind of get a clue as to what&amp;#39;s going on then we pick it up we get a little bit faster we get a little bit faster we get a little bit faster right so if you&amp;#39;re if you&amp;#39;re brand new this is gonna be great review for you today if you already kind of know what you&amp;#39;re doing with html and css great go fast like when we get to our coding challenges today see how fast you can go see how far you can go push yourself in that moment but for folks that are brand new let&amp;#39;s take our time let&amp;#39;s ease into it and we&amp;#39;ll move on to css uh on thursday cool so we&amp;#39;re going to review of course the client server model we&amp;#39;re going to see some html tags we&amp;#39;re going to take a peek at that brownie recipe just to just to talk through some of those semantic decisions we&amp;#39;re going to see some new html tags that we didn&amp;#39;t get to on thursday we&amp;#39;re going to talk about the second most important thing of the evening first is always separation of concerns but the second most important thing is even will be progressive enhancement and talking through why that&amp;#39;s an important concept and why as newly knighted developers of the web we need to incorporate that into our building of our front ends we&amp;#39;re going to build uh the bbc together so if you&amp;#39;ve been sweating that homework that&amp;#39;s going to be due on thursday we&amp;#39;re going to actually do some of it together not all of it but some of it we&amp;#39;re going to do khan academy together and we&amp;#39;re going to look at another newspaper or news website called techcrunch and build it so there will be kind of like us walking through it together we&amp;#39;re going to we&amp;#39;re going to highlight circle stuff we&amp;#39;re going to not like highlight in terms of notes we&amp;#39;re going to like circle different pieces of it we&amp;#39;re going to talk through the design and then you&amp;#39;re going to get a few minutes to code it and then we&amp;#39;re going to go over it together and we&amp;#39;re going to do that at least three times today so if you kind of been sweating the writing the html boom we&amp;#39;re going to get into it three four times tonight any way to get rid of the ads while watching the vods well uh our past two classes are up on youtube and i do not monetize my youtube uh so you can go on youtube and watch the past two classes without any ads yeah so that&amp;#39;s why it&amp;#39;s why i keep the the youtube not monetized so that you can just watch them ad free yeah yeah now there are some rumors that youtube will be um that youtube will be kind of turning on ads even for um non-monetized channels if that happens then we&amp;#39;ll have to figure out some other way but for now i&amp;#39;m monetized bugaboo got two interviews back to back tomorrow let&amp;#39;s go wish you luck hey wish you all the luck in the world good luck you don&amp;#39;t need it you got it you&amp;#39;re built for this alrighty so that&amp;#39;s what we&amp;#39;re up to today and uh at the start we got to talk about a few things we got to talk about some discord stuff uh discord has been popping off we got 20 000 people in there now uh so we&amp;#39;re going to talk through some changes that we made some more changes that are coming and so that&amp;#39;s where we spend a little bit of time in the beginning just to make sure everybody&amp;#39;s on the same page in terms of how we&amp;#39;re going to use discord going forward to make sure folks get the help that they need and to reduce the burden on some of our mods right so let&amp;#39;s get into that and then we&amp;#39;ll get into the actual code all right if you haven&amp;#39;t checked in yet uh please go ahead and check in you can always do exclamation point check in uh remember the link to check in is always in the follow along materials channel and it&amp;#39;s always in the go live uh message right so uh you don&amp;#39;t have to to wait until you get here to check in you can always just go ahead and look at those two messages and and grab the link cool you might have to scroll over chat and slow it as nightbot post it if you need the link uh as always please go ahead and give it a like and a retweet that&amp;#39;s your attendance if you&amp;#39;re shooting for touring or hopper attendance is mandatory uh if you&amp;#39;re in hamilton and just want to support the stream go ahead and do the like and the retweeting uh if you&amp;#39;re following on youtube go ahead and give us a like a thumbs up go ahead and click the notification bell right that helps a lot and the folks finding a free software engineering bootcamp instead of paying lots of money to go to one cool submitting your homework finally if there&amp;#39;s one question that has been asked to me of the past week is how do you submit the homework let somebody come through on the raid who that was thank you for the raid not showing up in my notifications appreciate the raid thank you if anybody saw who that was can you paste it into the chat for me please here all righty cool so here&amp;#39;s how you submit the homework stock for machines a thank you so much for the for the host i appreciate it alrighty here is how you submit the homework or homework that was due today you had to watch two ollie abdominal videos which are amazing videos and then you had to go through the coursera learning how to learn what i want is for you to submit that completion of coursera right so on coursera you will have like a section that shows you all the stuff that you completed i want you to take a screenshot of that you&amp;#39;re gonna have to figure out how to do a screenshot on your operating system each operating system is slightly different how you do a screenshot right but you&amp;#39;re going to do a screenshot of that page where you&amp;#39;ve completed everything right and so you&amp;#39;re going to do that screenshot where you&amp;#39;ve completed everything and you&amp;#39;re gonna upload that screenshot to that google form in the link right there on the slides or if you looked in the follow along materials channel i give you the link there as well now the wonderful thing about coursera is it covers so many topics that we don&amp;#39;t have a chance to cover in class that was a four-week course that i asked you to get done in one week there&amp;#39;s no way we could spend all that time live going through everything and what you&amp;#39;ll notice is that a lot of the things were covered in that coursera course that are going to help you day-to-day learning how to code but they also supplement the things that we do cover in class right this idea of chunking is so important when you tie that in with your space repetition and your active recall they&amp;#39;re like things that if you did not go through that course you are at a severe disadvantage going forward so please if you have it you must get through that course you must finish it don&amp;#39;t do the rest of this program without having gone through that course you will be at a severe disadvantage for everything that we cover going forward cool now uh take your screenshot proving that you completed everything uh upload it to some sort of image sharing i gave you image bb and then uh go ahead and submit it in that google form okay if you&amp;#39;re trying to keep up with touring and hopper guess what homework&amp;#39;s do when it&amp;#39;s due you gotta get it in okay once the houses are formed we&amp;#39;ll have a special channel where you can let us know that like hey like i&amp;#39;m gonna be late because family or something else popped up that&amp;#39;s okay like life life gets in the way that&amp;#39;s okay we understand that you&amp;#39;re giving up your nights and your weekends to be here and so stuff&amp;#39;s gonna happen try and get it in on time alrighty before we get into some of the discord stuff and the things that i want to cover tonight i gotta give a a psa and that&amp;#39;s to be uh to be careful out in these streets folks uh to be careful uh interacting with folks out there in this world because 100 devs we&amp;#39;ve been we&amp;#39;ve gone trending folks we&amp;#39;ve gone trending the 100 devs has hit the trending on twitter a couple of times in the technology section and so now everyone knows who we are we out there right we outside we we&amp;#39;re inside but we outside you know i&amp;#39;m saying and so be careful now that 100 devs has become bigger and we&amp;#39;re 20 000 deep on discord there&amp;#39;s gonna be scammers there&amp;#39;s gonna be folks that are trying to get you twisted and do things that you shouldn&amp;#39;t do but around here we don&amp;#39;t get got we go get so don&amp;#39;t get got out in these streets make sure you&amp;#39;re taking care of yourself and look out for others in the community if you&amp;#39;re using the hundred devs hashtag on twitter i&amp;#39;ve seen it all i&amp;#39;ve seen people like trying to make you buy courses i&amp;#39;ve seen people that are like sending you to like weird discords i&amp;#39;ve seen folks that are like using 100 devs and pretending that they&amp;#39;re like me like be careful i&amp;#39;m never ever ever ever ever i gotta go big for this ever ever ever ever ever gonna ask you for money just i&amp;#39;m just not there&amp;#39;s never gonna come a time where i ask you for money there&amp;#39;s never gonna be a time where i ask you for a gofundme uh there&amp;#39;s never going to be a time where i asked you for some cryptocurrency uh there&amp;#39;s never going to be a time where i asked for monetary things of any nature so if someone is pretending to me to be me and asking you for those things please know that i have told you that i will never ask for those things okay so be careful uh we only have one discord that&amp;#39;s the learn with leon and friends discord uh there&amp;#39;s 20 000 of us on there there are a lot of people pretending that we have other discords we don&amp;#39;t we have one amazing discord that is uh overseen by an amazing crew of moderators that want to keep you safe and healthy even in this amazing moderated space we still have scammers you got to be careful do not click those free nitro links right we stepped up the security on discord but nobody&amp;#39;s sharing free nitro links please don&amp;#39;t click that stuff like be careful out here we&amp;#39;re a bigger community unfortunately there are some shitty people in this world and they&amp;#39;re going to want to take advantage of a bigger group of people that are all new to learning how to code right and that might be willing to click on a few things okay so please be careful as we get larger be careful i feel like a boomer what&amp;#39;s nitro nitros like um discords like boost like you get like extra features when you&amp;#39;re nitro on discord and so a lot of people try to scam others by like giving them free nitro links whether they input their credit card and stuff like that just don&amp;#39;t don&amp;#39;t ever worry about that stuff don&amp;#39;t do it um thank you to everyone that nitro boosts our server on discord but it&amp;#39;s never needed i&amp;#39;m never gonna share a way for you to do it uh there&amp;#39;s no links to do it please please don&amp;#39;t be careful okay uh if you see somebody scamming or spamming on discord please just at the mods you can just do at friends mods so that we can see it and we&amp;#39;re pretty clicked to delete delete everything and ban those people right now you need to have a verified email to join discord and in like a week or two we&amp;#39;re going to make it so that you have to have a verified phone number if you want to join discord like again right so if you&amp;#39;re in you&amp;#39;re good you&amp;#39;re in you&amp;#39;re good but going forward we&amp;#39;re gonna crank the protection all the way up to stop folks from coming in um when we don&amp;#39;t want them to so just note be careful out in these streets it&amp;#39;s getting wild i&amp;#39;ve seen it all be careful all right the other thing that i&amp;#39;ve been seeing a lot and that i really want to take some time to emphasize is that going through this program is going to take a little bit of trust in myself a little bit of trust in our moderators a little bit of trust in our alumni have gone through the program and like i told you i&amp;#39;m going to work on earning it but you got to give me a little time to earn it right and the very first rule whenever somebody asks you to trust them is just as this gift mentions trust nobody not even me that&amp;#39;s right you heard it folks first heard it you heard it first here don&amp;#39;t trust me right here&amp;#39;s why what we are going through together is a process that i&amp;#39;ve been working on for 10 plus years i&amp;#39;ve been teaching people to code for 10 years i have seen it all i have assigned things that sucked i have assigned things that were great i have assigned things that nobody needed to use on the job and i have assigned things that everyone needed on the job i used to be in the classroom i had eight plus years like in the classroom with multiple cohorts of students like two to three nights a week for like eight years like literally in the classroom with real living breathing people like meat space like i could i could poke them right i could poke them right i stay in contact with a lot of my students i i know what&amp;#39;s been helpful to them and i know what&amp;#39;s not been helpful to them i know what comes up and i know what doesn&amp;#39;t come up i&amp;#39;m trying to distill all of that into a course right so that means sometimes i&amp;#39;m gonna do stuff that seems a little weird i&amp;#39;m gonna do stuff that maybe other tutorials aren&amp;#39;t doing right one of the questions i get asked all that once we get to css this is gonna be the i just know i&amp;#39;m gonna see to see discord a bazillion times leon why do you teach floats well i teach floats because i&amp;#39;ve had dozens of students that have come back to me and said leon thank you so much for teaching me floats because the very first project i got was converting an old code base from floats to flexbox i would have been  if i did not know what floats were right and so that&amp;#39;s why we start with floats now do i love flexbox so i love css grid yes do i want you to use that going forward yes but i understand working with that stuff is an overwhelming privilege that not all of you will get so i need you to show up on the job and be ready and i can&amp;#39;t have you showing up to the job and not knowing the simple stuff so i spend a lot of time on simple stuff that other kind of programs might skip or go through faster because i don&amp;#39;t want you to show up and week one bumble the easy project i don&amp;#39;t want you to show up in that first month fumbling the stuff that you should probably have already done the reason why i don&amp;#39;t tell you to use prettier out the gate is because i want you to be able to do it because when you&amp;#39;re on a system for some reason on a on a vm that you have to log into you have to use their editor and their editor doesn&amp;#39;t have prettier i want you to know how to do it right i&amp;#39;ve seen it all i&amp;#39;ve seen people get twisted and do weird stuff so we&amp;#39;re gonna do it in a way that i know has helped a lot of people that has worked for a lot of people now my way might not be the way that works for you okay the way i teach you might not like might not like my hair down today that&amp;#39;s okay this is my attempt at helping as many folks as i can but if this isn&amp;#39;t for you after you give me a couple classes you give me that month you say leon you know what seem like a cool person it&amp;#39;s going too slow it&amp;#39;s going too fast it might not be for me that&amp;#39;s okay that&amp;#39;s okay there are so many phenomenal courses out there that you can do for folks that need a little bit more kind of hand holding more fingers on keyboard time free code camp is amazing at that for folks that want to go a little bit faster and want to learn ruby instead of javascript the odin project is phenomenal for folks that have already coded before right and want to know the modern modern stack full stack open is incredible i tell all of my alumni to go do full stack open because it&amp;#39;s just it&amp;#39;s just that good so there are some phenomenal resources out there right that are not this so when you come here you&amp;#39;re you&amp;#39;re buying into right you&amp;#39;re buying into the path that i&amp;#39;ve seen work for a lot of folks and we&amp;#39;re going to do things a little bit differently and so i&amp;#39;m going to ask you to trust me a little bit i&amp;#39;m going to work on earning that trust hopefully you see me popping off in discord answering all those questions putting in hours every day to help you all right but you don&amp;#39;t have to take my word for it you don&amp;#39;t have to trust me right and i don&amp;#39;t want you to because there are lots of folks out there that are scamming that are scheming so go into it with a skeptical heart right go into it with a skeptical eye don&amp;#39;t trust me let me earn it right let me earn it right let me earn it right go check the celebrations channel let me bring alumni to talk to you let me show you the way right but you don&amp;#39;t have to you don&amp;#39;t have to do this like there are so many other phenomenal programs that might be more your speed and i don&amp;#39;t want you to feel upset i want you to feel guilt i don&amp;#39;t want you to feel like you&amp;#39;re doing something wrong by choosing one of those other programs because they are good and you might get something out of it that you might not have gotten here but what i&amp;#39;m going to do is try and put together material and a process and a way of doing things that i&amp;#39;ve seen be successful in my 10 years in the classroom and if you think that has value then stick around let me earn a little bit of that trust but if i can tell you anything don&amp;#39;t give people that trust implicitly just because we look good we got good hair we we talk a big game check the receipts check the receipts okay and i say this as a as a way of telling you to be careful out in these streets let&amp;#39;s be careful on these streets they&amp;#39;re everybody at every turn wants that dollar right they want you to to do things that you probably shouldn&amp;#39;t be doing that you don&amp;#39;t have to do so make people earn that trust a little bit and then see if it&amp;#39;s for you no harm no valve it&amp;#39;s not for you but i think we&amp;#39;re building a phenomenal community that wants you to be successful i think we&amp;#39;re building a phenomenal program that&amp;#39;s going to give you what you need to get a job in tech and it&amp;#39;s not just code it&amp;#39;s everything else okay now one last thing about this is that this ain&amp;#39;t my job this ain&amp;#39;t my moderator&amp;#39;s job this ain&amp;#39;t our alumni&amp;#39;s job we do this because we want to help others right if it&amp;#39;s not fun we&amp;#39;re not going to do it right so don&amp;#39;t be mean to the mods don&amp;#39;t be mean to me like we&amp;#39;re just going to ban you right like and we&amp;#39;re not going to lose any sleep over this we don&amp;#39;t we don&amp;#39;t got numbers to keep we don&amp;#39;t we don&amp;#39;t have some boss that we have to make happy we&amp;#39;re doing this because we want folks to be successful in a career in software engineering um but we could we could go do other stuff with our hours right so shout out to the mods right please be helpful please listen to them please take their guidance because they don&amp;#39;t have to be here i can&amp;#39;t tell you how many hours these mods have given up in the past week or so like hours like we&amp;#39;re in meetings for two hours then they&amp;#39;re moderating for four or five hours a day right like this ain&amp;#39;t this ain&amp;#39;t their job they don&amp;#39;t have to be here they could they could click off discord and go away but they don&amp;#39;t because they want you to be successful right so just be a little bit kind to them right like make sure you respect that idea and make sure that that you&amp;#39;re you&amp;#39;re participating in community that you want to belong to because as i said in the beginning you can&amp;#39;t be nice if you you can&amp;#39;t realize or or realize that people have flaws or things coming into this process that they might not be the best engineer right out the gate if you can&amp;#39;t accept that get the out click click exit get the out i&amp;#39;m gonna keep saying it all right i&amp;#39;m gonna for the first moment i&amp;#39;m gonna keep saying it because i just don&amp;#39;t want people in this community that can&amp;#39;t be kind first that can&amp;#39;t be nice first that can&amp;#39;t go out of their way to help others if you don&amp;#39;t want to do that get the out cool and and that includes being positive to yourself being kind to yourself i see so many folks that are kind to others but they can&amp;#39;t be kind to themselves be positive even on discord carry your head high you&amp;#39;re going to get this stuff you&amp;#39;re going to work out you&amp;#39;re going to get the help that you need but i see some people that like take out time out of their day to be nice to others but then i see them saying like stuff in the threads calling themselves dumb or that they&amp;#39;ll never get it no keep your head up be kind to yourself it&amp;#39;s not just others you know all right next big thing on the docket houses uh i feel attacked it&amp;#39;s not known to be attacked it&amp;#39;s just meant to be a good reminder the the positivity like that you put out comes back right and so when you&amp;#39;re on discord try and be positive right try try and keep a head up doesn&amp;#39;t mean that you can&amp;#39;t go into the struggle bus channel and lay it all on the line that&amp;#39;s totally fine but uh be kind to yourself that&amp;#39;s all i&amp;#39;m asking there cool houses next week a lot of folks are asking about touring hopper we are going to settle that all next week we&amp;#39;re going to make sure that if you&amp;#39;re interested in joining those houses that you can we won&amp;#39;t share anything else before next week so you don&amp;#39;t have to ask can you still apply you don&amp;#39;t to ask is it still open yes it&amp;#39;s still open still shoot your shot still apply we&amp;#39;re going to cover how that whole process will shake down next week and the part of the reason why we&amp;#39;re doing that is because we want to see who got the homework in we want to see who&amp;#39;s been participating in the community we need a little bit more information from y&amp;#39;all to make sure that we&amp;#39;re doing good right and so next week we&amp;#39;re going to share more about the houses if you&amp;#39;re like i have no idea what the houses are boy do we have a lovely faq section that&amp;#39;s on discord or on leonwell.com 100 devs you can do bang 100 devs see that wonderful faq section to describe what we&amp;#39;ve shared about houses so far so faq on discord or faq on my site i&amp;#39;ll tell you more about it but next week also not this but next week we&amp;#39;re going to be doing a twitter space y&amp;#39;all love twitter spaces y&amp;#39;all really do so we&amp;#39;re going to do an alumni twitter space uh not this week but next week friday uh it&amp;#39;ll be friday january 28th we&amp;#39;re going to start at six o&amp;#39;clock uh and we&amp;#39;re gonna have a bunch of alumni there that you can ask a bunch of questions they&amp;#39;re gonna tell you about their background their experience how they got their jobs all that fun stuff uh so if you don&amp;#39;t know what twitter spaces don&amp;#39;t worry i&amp;#39;ll share out more information uh twitterspace is kind of like a voice call on twitter it&amp;#39;s just a way for folks to all get into a call and hear each other talk and ask questions and it&amp;#39;s a little bit easier to facilitate a a larger a larger conversation so we&amp;#39;ll be doing that twitter space not this friday but the following friday all right also this week however we&amp;#39;ll be sharing our survey all right we&amp;#39;ll be sharing our survey for smaller study groups uh it is like clubhouse yeah it&amp;#39;s exactly a clubhouse i will be sharing our survey for smaller study groups so if you&amp;#39;re feeling that you know what the larger discord is too overwhelming it&amp;#39;s too much for you right we&amp;#39;re gonna be forming smaller study groups it&amp;#39;ll be based on a lot of different stuff it can be location it can be uh affinities for different things it can be professional we have a lot of teachers that are that have been wanting to organize so we&amp;#39;re gonna have these study groups that&amp;#39;ll be ways of kind of connecting with smaller groups of folks in a hundred devs uh and we&amp;#39;re gonna have ways for those little pockets to have their own channels their own voice channels so that you can really start using discord to hang out more and to get help a little bit more easily and so we&amp;#39;ll be sharing that survey this week and you fill that out and then next week we&amp;#39;ll be placing you into those study groups all right we&amp;#39;ve been tearing up on that discord folks there&amp;#39;s a lot of stuff that we&amp;#39;ve been changing a lot of stuff that we&amp;#39;re still trying to figure out and get right but i wanted to talk through some really important stuff when it comes to discord okay some important stuff that i need i need your help with i need you all to buy into some of these ideas and and help us reduce some of the burden on the moderators and on all the folks that show up to help you there&amp;#39;s so many folks that show up to help and we want to make sure that discord is running well so that folks can get the help that they need okay alrighty uh if your username is still gray click today uh when you join the server there&amp;#39;s a couple things you have to do uh you have to click our rules if you do not click the rules and agree to the rules on the server uh you don&amp;#39;t see you don&amp;#39;t see anything right and so iron squad exactly right and so if on discord you haven&amp;#39;t clicked the rule like agreed to the rules you&amp;#39;re like missing out on like most of discord right and then once you&amp;#39;ve agreed to the rules there&amp;#39;s also this channel called join 100 devs you have to click those emojis to get access to all the 100 dev stuff right so if you have a gray username you have not joined 100 devs on discord which means that there&amp;#39;s a lot of channels that are still missing for you so make sure today you go to join 100 devs you click those emoji so you get access to everything if you have a gray username right if your username is still gray click today you don&amp;#39;t want to be missing out on those channels and all the stuff that we&amp;#39;ll be adding you won&amp;#39;t be able to get into study groups you won&amp;#39;t be able to get into any of the other stuff that&amp;#39;s coming on discord if you don&amp;#39;t click those two emojis rebel thank you for the posture check i&amp;#39;m good all right iron squad alrighty please please pretty please with the biggest of cherries on top use the search bar but i gotta go big for this please please use the search bar okay please use the search bar if i see one more person asks how to submit the homework no god no god please no no no here&amp;#39;s what that looks like i just typed in turn in homework not submit homework not something but look 75 results for turn in homework and that was like that was like a that was a couple days ago today i bet you it&amp;#39;s like over a hundred easily easily 150 right that and then if you turn it to like submit like another hundred like so like 200 times it&amp;#39;s been asked right but our lovely moderator already answered that question they&amp;#39;ve already answered it multiple times so before you ask a simple question right homework simple question right just use the search bar please use the search bar because when you search for it you&amp;#39;re probably going to see a lot of other people that asked and you&amp;#39;re going to see some responses right so if you have a question that you think a lot of other people might have or you just want to check just use the search bar right use the search bar you&amp;#39;re going to see the response in there and the beautiful thing is that the search bar right the the search bar actually has a lot of like ways to like dial in right you can you can search for just messages from me right so that&amp;#39;d be really cool like if you know like if you look at art if you look on discord you&amp;#39;ll see a list of moderators right so you could look for messages just from me you could look for messages just from our moderators because they&amp;#39;ve probably already answered that question right or if there&amp;#39;s somebody that you know is like really helpful in the cohort you could search for their username and see all the responses that they&amp;#39;ve done right and so it&amp;#39;s in the top right hand corner of discord you can always search for stuff you can search in certain channels you can search from certain individuals you can look at certain times you can see if it has a certain thing and so just get comfortable before you ask something kind of basic or simple just use the search bar because i guarantee somebody else has probably already asked it cool let&amp;#39;s not let make sure that that me leaning is me trying to unlock my ipad uh i would have turned on my my drawing capabilities here cool let&amp;#39;s let&amp;#39;s let&amp;#39;s stop let&amp;#39;s stop uh put on demo bro there we go sorry let&amp;#39;s uh let&amp;#39;s stop this from happening in the future i don&amp;#39;t know all right now let me draw there we go okay there we go i think my apple pencil died that&amp;#39;s why i use my finger let&amp;#39;s let&amp;#39;s stop that from happening again please please please please all right another really important thing that comes up on discord right that comes up on discord but it also just comes up in any other place that you get help as an engineer um we have a like and i think this is for a lot of people we have this idea of like wanting to be respectful of people&amp;#39;s time and their space and so we&amp;#39;ll often ask hey can i ask a question right or does anybody have some time to answer a question or is anybody really good at html or is anybody really really good at discord like you&amp;#39;ll put that out there right you&amp;#39;ll put out that you&amp;#39;ll put out like that question hoping to get a response and then you&amp;#39;ll ask your question please don&amp;#39;t do that right you don&amp;#39;t exactly you don&amp;#39;t need permission to ask we&amp;#39;re all here because we want to help you we&amp;#39;re all here because we want to answer those questions right so just ask your question right just just be to the point ask your question you can use things like please and you can put a thank you at the end of it right if you feel like you got to be extra nice right but just go ahead and ask your question really try to stop yourself from like asking to ask a question okay we all a lot of us start off by doing it it&amp;#39;s okay it&amp;#39;s just that when you are interacting with other engineers like eventually when you get on a team with other engineers you just got to ask the question so that they can do it asynchronously they can come back later and um and and and fill in that answer when they have time but if you say does anyone have time to answer a question they they don&amp;#39;t know how long that&amp;#39;s going to take to answer that it puts more weight on the person that&amp;#39;s going to answer the question if they don&amp;#39;t know what it is so just ask your question okay um before you type in a discord channel please read the channel heading right each channel has like a heading that describes like what you can do inside of that channel okay and so please make sure you you give those a read before you actually start typing in it because some things are allowed in some channels and some aren&amp;#39;t allowed in others okay so make sure you just read that channel heading um and something weird happened last class and i know i&amp;#39;m opening them i&amp;#39;m opening myself up to the slaughter here a little bit but i think it&amp;#39;s worthwhile to bring it up again last class i said please don&amp;#39;t ask questions in the ask leon channel that other folks could answer and then like a hundred of you all just ask the question and so i think that there&amp;#39;s a little bit of maybe me not being clear enough or or it&amp;#39;s not coming through a little bit it&amp;#39;s okay but please don&amp;#39;t use the ask leon channel for something that somebody else could answer we have a lovely new channel called new need help so if you&amp;#39;re new and you need help we have people that are paying attention to that channel that want to help folks that are new okay then if you need homework help we have a channel called homework help right so you could go there right things that moderators or other folks can answer they don&amp;#39;t go and ask leon i like to keep ask leon clean because it&amp;#39;s really important that when folks have something that they really need help with i can get to them like things that can go in the ask leon channel are leon i have an interview coming up and i need you to be a reference or leon i just got an offer i need help negotiating right if you&amp;#39;re filling that with stuff that are just like basic like how the course works when to submit homework that means it&amp;#39;s really hard for me to see the folks that really do need my help like when they need it okay and so please keep ask leon clear use every other channel before askleon cool robo thank you for the gift itself cool and uh each channel has a heading that tells you like what can happen in there uh and we&amp;#39;re gonna be pretty serious now like the first week we kind of gave it to you we let you do what you like we let it kind of slide um but now if you&amp;#39;re in askleon and you&amp;#39;re not asking a question i&amp;#39;m just going to delete it like the mods are just going to delete it i&amp;#39;m just going to delete it right if you&amp;#39;re responding to someone and ask leon we&amp;#39;re just going to delete it because the only person that should be responding there is myself or the mods okay so please we&amp;#39;re gonna we&amp;#39;re gonna start turning up discord a little bit and to make it work we&amp;#39;re just gonna start deleting okay all right often uh myself and mods will put like really important messages in the channels right and they&amp;#39;ll be very clear like it&amp;#39;ll be very clear when we&amp;#39;re trying to get your attention uh here was me trying to be very very clear uh that please only share your twitter and linkedin and threads above all others will be deleted thank you and then i you not like three seconds later not even three it&amp;#39;s like a minute later uh somebody posted their twitter right below right so please when you see like flashing lights and stop signs uh please stop and read that stuff right i i blanked out their name i don&amp;#39;t like i don&amp;#39;t want anybody to see it but like please read it uh you&amp;#39;re making more work for our mods right you&amp;#39;re making more work for our mods and like i said nobody&amp;#39;s getting paid this ain&amp;#39;t our job we do it because we love this community and we want to help y&amp;#39;all so make our lives a little bit easier so we don&amp;#39;t have to kind of deal with this stuff okay um that being said uh in the networking channel uh the networking channel should be more for like networking events like places that you&amp;#39;re going things that you&amp;#39;re doing conferences stuff like that we have these two threads uh a twitter thread and a linkedin thread uh for folks that want to share their twitter or linkedin right we&amp;#39;re gonna have like lots of like meet and greets we&amp;#39;re gonna have like our own events where we get to know each other as a cohort so you&amp;#39;ll have time to like meet folks as we get into the program we don&amp;#39;t do those super early because we only want folks that are like actually in the program a lot of y&amp;#39;all are kind of checking it out seeing this is for you but like a month in and we&amp;#39;ll start doing more meet and greets we&amp;#39;ll start doing more sessions where you can hang out with each other get to know each other a little bit more but if for some reason you&amp;#39;re you&amp;#39;re just burning to share your twitter and your linkedin there&amp;#39;s threads for it now anything that&amp;#39;s not put in those threads step step we&amp;#39;re going to delete it okay alrighty got a few more and then we&amp;#39;ll take our break uh we&amp;#39;ve we tested something starting yesterday in the homework help channel we have a new bot that makes everything a thread okay so any question that you ask is now a thread right so um you can see here in the example hey everyone for the bbc html do we need to build the html for the navigation bar too great question discord is way too hard to like read all the replies and everything especially when there&amp;#39;s a lot of a lot of responses so now your question will automatically be turned into a thread and if you want to answer that person&amp;#39;s question right if you want to answer that person&amp;#39;s question you have to go into the thread to respond to them if you click reply like normal we&amp;#39;re going to delete it let me say it again if you just click reply we&amp;#39;re going to delete that reply you have to go into the thread to respond to that person directly and so before you even ask a question use the search bar see if somebody else has already asked that question and then if not just go ahead and type out your question and it will automatically be turned into a thread you don&amp;#39;t have to worry about threads or anything any question you type into the help channels will automatically be turned into a thread and people can respond to you in that thread that way you&amp;#39;re not scrolling through thousands of replies and other chit chat so in the help channels there should only be questions that are threads and then people responding in those threads okay if you type anything else into the help channel it&amp;#39;s gonna get turned into a thread and it&amp;#39;s gonna be weird if you&amp;#39;re like if you&amp;#39;re like huzzah i figured out the the bbc homework right that&amp;#39;s gonna be a thread and we don&amp;#39;t need that in the help channel you can do that somewhere else right like in in our general chit chat channels or something like that but be mindful if people are coming to the help channels we got to be respectful of people that are coming to those channels we have mentors giving up hours of their day coming after work tired and weary to go into those help channels and go to war right and so let&amp;#39;s make it easier for them to help others right by having these threads okay alrighty so we at threads and uh you have the power to help uh now that we have these threads jump on in there right you all will know something that somebody else does not at different stages of this process okay i don&amp;#39;t care if you think you&amp;#39;re a super new beginner that&amp;#39;s okay you&amp;#39;re going to pick something up that might be able to help somebody else so jump into their thread and and help them out a little bit right if you know that if you know how to solve something that they ask go ahead and help them out right because i guarantee you at some point you&amp;#39;re going to know something that somebody else does not and then a few weeks later they&amp;#39;re going to know something that that you don&amp;#39;t know and they&amp;#39;re going to jump in the thread to help you right so don&amp;#39;t don&amp;#39;t forget that you got power if you made it through some of the shay how you know more than folks that haven&amp;#39;t made it through the shahao also shout out to shayhao they just sent me a dm on twitter they want to come and hang out with us so we&amp;#39;re going to have maybe either a twitter space or we might bring them up on stream uh to talk through some of the some of the decisions that they put into their um into their course or their their kind of the thing that we&amp;#39;ve been working through yeah it&amp;#39;s pretty cool all right so you got the power jump into those threads help each other out during this course any assignment i give you i&amp;#39;m going to eventually give you the solution okay any assignment that i give you there will eventually be a solution most of the time like 80 of the time we&amp;#39;re going to do it together live right like you&amp;#39;re going to get assigned something and then like the week later we&amp;#39;re probably going to go over it together okay if for some reason we don&amp;#39;t go over it together you&amp;#39;re just going to get a file that is the solution file right but like 80 90 of the time we&amp;#39;re probably going to go over it together so you don&amp;#39;t actually need like a full code review it&amp;#39;s something that a lot of people ask for on discord that you that you don&amp;#39;t really need somebody will say like can somebody check this bbc for me you don&amp;#39;t have to do that we&amp;#39;re gonna have the solution you&amp;#39;re gonna you&amp;#39;re gonna be able to compare it right you&amp;#39;re gonna be able to put in that cognitive effort to like look at yours look at mine and go hmm where do i agree with leon and where do i not right i don&amp;#39;t think he made the most semantic choice here or i think i think in terms of accessibility you might have done things a little bit differently right and so you will always have the ability to like compare your answers to mine now please don&amp;#39;t ask for full code review right that&amp;#39;s just too much time for someone when you&amp;#39;re going to get right when you&amp;#39;re going to get the full solution down the line okay if you have specific questions that&amp;#39;s totally fair game if you&amp;#39;re stuck on something if there&amp;#39;s something that you think doesn&amp;#39;t make sense right like if you&amp;#39;re really confused about something in your code that&amp;#39;s a really worthwhile question but just saying look at all this that&amp;#39;s a pretty lazy question right that puts too much on the person that wants to help you right that puts too much on the person that wants to help you to have to figure out everything for you we want barbara all right the idea here is make sure that you&amp;#39;re being respectful of the other person&amp;#39;s time is going to help you don&amp;#39;t don&amp;#39;t ask for a full code review if you got you have a specific question right if you have a specific thing that you that you get stuck on ask that people will help cool uh we&amp;#39;ll be taking our top of our break soon got a few more here sam thank you for the hydration cheers to you please leave voice channels when you&amp;#39;re not chatting uh so you don&amp;#39;t get got a lot of you all jump in the voice channels and then you like forget that you&amp;#39;re in voice channels and i&amp;#39;ve heard some some wild stuff i&amp;#39;ve heard some things i&amp;#39;ve heard some things and so uh please please make sure make sure that you leave voice channels when you&amp;#39;re done chatting so you don&amp;#39;t get got just make it a habit don&amp;#39;t hang out on voice channels just leave them if you&amp;#39;re not actively talking leave all right there&amp;#39;s been there&amp;#39;s been a lot of hot mic situations and i don&amp;#39;t want that to happen to you so don&amp;#39;t get got leave your voice channels uh often mods will kick you out of voice channels if like nobody&amp;#39;s talking uh just because we don&amp;#39;t want that to happen to you um so if you like real if you got kicked out of a voice channel it&amp;#39;s probably because we thought maybe like nobody was talking in that channel we don&amp;#39;t want you to get got but please leave voice channels i know a few of you what you had for dinner because i heard you talking in the background about what you were going to eat for dinner with your significant other uh so so please channels that&amp;#39;s why leon&amp;#39;s always sipping tea [Laughter] quantum [Laughter] alrighty we got some new channels uh we got a new need help channel so if you&amp;#39;re new and you need help go to that channel first lots of folks will be able to help you and uh if you&amp;#39;ve been around for a week or more guess what you can help the new folks that join so hang out in the new need help uh answer their questions uh homework help is a new channel right where if you have questions about the homework you can go there that homework help channel was the first channel that we had the thread system on and we&amp;#39;re gonna bring that thread system to every other help channel so the new need help the the other help channels though they will turn into those threaded uh channels later tonight so tonight you&amp;#39;ll see the full switch all the help channels will be threads please do not reply in any of those channels going forward it&amp;#39;ll just be deleted make sure you&amp;#39;re replying to folks in threads cool and the other channel i&amp;#39;m really excited about is the ketchup crew so a lot of folks are not watching this live on twitch because they got work they&amp;#39;re a different time zone and they catch up with the vods on twitch hey shout out to you in the future um so we have the ketchup crew and the ketchup crew has their own channel so feel free to jump into that channel um share time maybe that you&amp;#39;re going to be watching the channel and there&amp;#39;s actually a voice channel jump into that voice channel and start watching the class if you want you can watch you can share your your screen and watch the vods together and that&amp;#39;s something that the last cohort did a lot so there&amp;#39;s a catch-up crew channel i expect folks to be in that channel like watching the vods together and having a grand old time answering each other&amp;#39;s questions and so feel free to jump into that catch up crew channel watch the vods together be able to talk about what&amp;#39;s going on together and so if you&amp;#39;re not watching live join the ketchup crew get in there and have some fun all right we got we got one more one more we&amp;#39;re gonna take our top of the outbreak and then we&amp;#39;re three minutes over uh the last one is please keep in mind our server rules uh we are super invested in creating a safe environment for folks to learn and to do their best and to eventually get that job we can&amp;#39;t moderate stuff that&amp;#39;s not on our server right so i i know wild stuff has been happening on twitter i know wild stuff has been happening on other discords we can&amp;#39;t control or help with that what we can do is make a wonderful space for you on our discord and we&amp;#39;re super invested in keeping it a great place for folks to be in so we have one rule that&amp;#39;s really important that i want to shout out and then we&amp;#39;re going to go through the chat etiquette and then we&amp;#39;re going to take our break we have this rule for no advertising and read it again advertising your youtube twitch discord social media does not belong on this server this includes private study groups or other things that may split the community and leading folks to unmoderate 100 dev spaces if somebody&amp;#39;s sharing a space about 100 devs on our discord the assumption is that we have created it or that we are moderating it or that we are taking care of that space that means if you&amp;#39;re leading folks to spaces that are about 100 devs that are not on our discord we&amp;#39;re going to delete them and we&amp;#39;re going to ban you because we really do want to make sure that folks are kept safe and we can moderate as we need we prefer folks to be in our voice channels we prefer prefer folks to be in there where moderators can listen in and make sure folks aren&amp;#39;t violent right and so if you share something that&amp;#39;s like trying to convince other people to leave discord and go somewhere else um we&amp;#39;re going to give you a ban like you won&amp;#39;t be invited back and we&amp;#39;re just going to leave the post okay yeah and that&amp;#39;s just because we care deeply about making sure that we have a space that works for everyone right now uh the last thing i read out loud i think on class one i&amp;#39;m going to read it out loud again uh and it&amp;#39;s something that comes from a dear dear friend and my executive director at resilient coders they put this out there something that we read to every cohort at rc and i want to make sure i&amp;#39;m reading it out to you um the no advertising rule right there are some there are two exceptions to that rule we have a self promo channel in that self promo channel you want to share your youtube your twitch your discord go ahead oh sorry you&amp;#39;re sorry not your discord your youtube your twitch or twitter go ahead right don&amp;#39;t share other communities don&amp;#39;t share other like things that you might try and brand as 100 devs they&amp;#39;ll be deleted but if you want to share like a video you&amp;#39;ve been working on or if you&amp;#39;re you&amp;#39;re going to go stream go ahead put it in the um in the self promo channel lots of really cool people doing lots of cool stuff uh we do have a stream team uh that if you start streaming and you feel like you wanna stream some hundred devs content or learning to code content you can join our stream team we&amp;#39;ll share more information about that you&amp;#39;ll see some of our stream team going live soon the other exception to this rule is the threads that we created we have a twitter thread and a linkedin thread in the networking section go wild in there but any other place don&amp;#39;t advertise cool two things and then we&amp;#39;re gonna take our break like i said comes from my dear dear executive director dell uh be kind to one another be the type of person who stays positive gives people the benefit of the doubt see the best in people embrace diversity of backgrounds perspective of those things we can choose and those that we can&amp;#39;t accept your own failures and those of your peers is an important part of the process we&amp;#39;re all here to write some vomity chunky chunky code we&amp;#39;re all here to get things wrong to break to fail to learn to grow to become a great software engineer right and so that&amp;#39;s all part of that process and before you share anything on discord please please ask yourself this one question it&amp;#39;s the only thing i care about if you&amp;#39;re on discord it&amp;#39;s the only thing you think about is i want you to think about please ask yourself is this the most supportive message i can send in this moment if not please and choose a new message if it&amp;#39;s not the kindest most supportive thing you can send in that moment don&amp;#39;t send it i can&amp;#39;t tell you how many times i type out messages and have to delete them i do it all the time in the in the in the the ask leon channel i i typically give short responses um because it&amp;#39;s just a lot of them but a lot of times you all ask some wild questions that are out of left field and i and i want to type something and the first time i type it out guess what it&amp;#39;s not kind it&amp;#39;s not kind so i delete it i sit back i think about it and i go how can i say this in a supportive way how can i say this in a kind way and then i rewrite it and sometimes i kind of rewrite it three or four times but that&amp;#39;s what you&amp;#39;re committing to if you want to be part of this community right we&amp;#39;re not all perfect we get it wrong right that&amp;#39;s okay but ask yourself is that the most kind of supportive thing you can send and if that&amp;#39;s too much for you you&amp;#39;re like leon i don&amp;#39;t want to do that right but i don&amp;#39;t want to do that i don&amp;#39;t want that that&amp;#39;s not for me that&amp;#39;s fine leave go away don&amp;#39;t join our discord don&amp;#39;t come to class go by you don&amp;#39;t need it trying to build a supportive inclusive wonderful community to belong to if you can&amp;#39;t be kind get the out all right folks with that being said let&amp;#39;s take our well-deserved break i know that this first hour was not anything coding but i think this is stuff that&amp;#39;s really important for our community to survive and thrive and do really well so if you&amp;#39;re new around here we take a break at the top of every hour or five minutes please if you&amp;#39;re able get up move around stretch go grab some water kiss some babies look out the window focus your eyes on something that that&amp;#39;s not that&amp;#39;s not here right hey welcome back on deluxe thank you so much for the raid uh you all know them we rated them on uh sunday uh amazing raid uh the the the amazing uh if you&amp;#39;re interested in game development this is the person to watch uh we&amp;#39;re gonna rate them again because they&amp;#39;re just amazing in in being able to like build stuff from beginning to end you see the whole process from like building actual models to building out like them actually moving around a room uh they&amp;#39;re the channel i i have on in the background if i&amp;#39;m working because their energy helps me work better so super thankful for uh the raid and uh we&amp;#39;re definitely coming right back because uh it&amp;#39;s just an amazing group to hang out with so thank you so much for the raid i really appreciate it um we are actually getting ready to take a break uh at the top of every hour we take a five-minute break just to be healthy and make sure that we&amp;#39;re we&amp;#39;re stretching moving around a little bit and so let&amp;#39;s go ahead and take that break but i appreciate the raid thank you all for stopping by uh we&amp;#39;re definitely going to swing by again soon uh the uh that that sunday crew is uh is a smaller crew and i would love to come hang out so i appreciate the raid all right folks let&amp;#39;s go ahead and take our break unless you&amp;#39;re gonna do a shout out for them i&amp;#39;ll put it in the channel or if maj if you can throw it in there ah there we go awesome you haven&amp;#39;t followed them yet go ahead and give them a follow there we go all right i&amp;#39;m gonna go ahead and go ahead and start our timer here together there we go all right folks go ahead and take your break please we&amp;#39;ll be back here together we turn on the music you for the raid again bob weiling over here that&amp;#39;s funny i put their um their twitch name in chat again but if you haven&amp;#39;t given them a follow on alex the person that rated us go ahead and give them a follow amazing amazing og of the streaming coding creating space for sure byron i appreciate that highest quality floating head i&amp;#39;ve ever seen i appreciate it thank you i just i have a i have a a gnome shirt that i wear like the linux can somebody tell me what a raid is a raiders is like when folks are done their stream they can go to another streamer and all of their audience goes with them right like all the people that are in that channel go with them and so at the end of each stream uh we raid someone and so on sunday we rated lana lux and they&amp;#39;re an amazing streamer they built video games from like like soup the nuts like the whole thing and so they raided us a few minutes ago and the cool thing about their channel is that they are literally like live every day so if you like them you can just like chill there all the time i love it because i like seeing like all the process of how they create like that whole world that they&amp;#39;re building but it&amp;#39;s just a chill stream to have on the background too so i like to have that in the background when i&amp;#39;m working a lot all right yeah thank you for the stretch i just got a good one in before we uh came back all right folks come on back come on back let&amp;#39;s show the music here this course is also introducing the whole world of streaming yeah that&amp;#39;s pretty cool there&amp;#39;s so many different people that are in this space that do really cool stuff like we had two amazing raids tonight the primogen is just next level like they&amp;#39;re they they&amp;#39;re an engineer at netflix and they like stream them working on netflix like that&amp;#39;s so cool uh and then uh nlx is the like just building video games from from nothing into something that you can like actually play and see them working around like it&amp;#39;s wild so i really i really love beyond like see people&amp;#39;s process and how they do stuff and so primogen they&amp;#39;re also live quite often we&amp;#39;re going to rate them so all the people that are dope we&amp;#39;re going to wind up raiding and so you&amp;#39;ll be able to see them and get to jump in their channel oh yeah i appreciate that thank you appreciate that all right folks let&amp;#39;s get back into it i think we&amp;#39;re all back from the break all right trophisaro who&amp;#39;s in it who&amp;#39;s in the trough of sorrow who with html are are you are you at the peak are you plummeting downwards where are you at not yet you are almost peak of despair the peak peak peak so i think a lot of y&amp;#39;all i think a lot of y&amp;#39;all jumped into that trough when i signed the homework you know some of y&amp;#39;all thought this was going to be something else but then you saw that i assigned four weeks of a corsair course in a week and you went i don&amp;#39;t know about this i don&amp;#39;t know about this that they say four weeks leon&amp;#39;s asked me to do it in one and then you&amp;#39;re like hi no worries i got it i got this you know what i&amp;#39;m just gonna do it just do it then do it just do it i&amp;#39;m gonna do it and you&amp;#39;re with me you saw it you&amp;#39;re like you know what i can do it i believe and i believe in this i can do it i want this for myself i&amp;#39;m just gonna do it and then and then i hit you with the shea how and uh i felt bad for the first person that asks but that first person asks leon just just the first section right just the first section right i was like nah nah dawg nope i need all 12. and i need all 12 in a week and as soon as i said i needed 12 in one week all i all i could see the bells are turning and as soon as i said 12 in one week they took off they&amp;#39;re like not for me dawg not not they say this this is that&amp;#39;s not what i signed up for uh i don&amp;#39;t know if i can do that so i think a lot of y&amp;#39;all you made it to the tip and now you&amp;#39;re crashing into the trophic sorrow i think you&amp;#39;re still like on the really fun part of it though i think like your hands are still in the air you&amp;#39;re still being beyonce you&amp;#39;re like you&amp;#39;re you&amp;#39;re like riding down you haven&amp;#39;t hit the bottom yet trust me if you haven&amp;#39;t had like that existential like dread like not knowing like what&amp;#39;s upside down what&amp;#39;s up right side up like if you haven&amp;#39;t hit that point yet you&amp;#39;re still like in the fun part you&amp;#39;re still on the wii part like you&amp;#39;re still like i&amp;#39;m beyonce like i&amp;#39;m like i&amp;#39;m i&amp;#39;m flying down the hill right i feel really bad people just join live and have no idea what our reference is i&amp;#39;m just talking about like domino&amp;#39;s nuns and being beyonce and they&amp;#39;re just like what are you talking about um so you&amp;#39;re probably not there yet um but you&amp;#39;re gonna get there at some point in time i&amp;#39;m going to assign something that&amp;#39;s going to be a lot you&amp;#39;re just going to you&amp;#39;re going to hit the bottom and you&amp;#39;ll know when you&amp;#39;re there you&amp;#39;ll know when you&amp;#39;ve hit the bottom and you&amp;#39;re officially in the trough of sorrow there&amp;#39;s like a very sharp like there&amp;#39;s a moment where you wake up and just go right i got 29 more weeks to go uh so if you&amp;#39;re not there yet enjoy enjoy the ride down enjoy being beyonce and um we&amp;#39;ll all get there soon but one thing i&amp;#39;ll say about the homework is that homework is just a first pass when you&amp;#39;re going through the homework i want you to give it the old hold on my chair&amp;#39;s in a weird spot i want you to give it the old 100 devs try right like when i give you homework give it the old 100 devs try but know that it&amp;#39;s just the first pass okay all the important bits all the stuff that really matters we&amp;#39;re gonna cover together right so if if you&amp;#39;re like leon it&amp;#39;s too much i just don&amp;#39;t get it don&amp;#39;t worry all the really important bits and bobs we&amp;#39;re going to go over together right so you have this homework this homework is really broad in scope it&amp;#39;s going to give you so many little things that are interesting and things that you should learn about but it&amp;#39;s the first pass all the core really important stuff we&amp;#39;re going to recover in class so when i give you reading i expect that to be your first time going through that type of material but i need it to be not i need i need class not to be the first time you&amp;#39;ve heard about css i need a class to not be the first time that you&amp;#39;ve heard about the box model i need class to not be the first time you&amp;#39;ve heard about floats or flexbox right because if it&amp;#39;s the first time your brain just won&amp;#39;t be able to make the connections in class right so i give you this homework as a means of a first pass you&amp;#39;re going to give it the good old 100 devs try you&amp;#39;re going to try and do your active recall your space repetition but if there&amp;#39;s something that fundamentally does not make sense to you that&amp;#39;s okay we&amp;#39;re probably going to cover it in class so on thursday you have the shea how do but that&amp;#39;s just when we start css literally the the beginning of css is the day this really hard material is due and so we&amp;#39;re going to come together and learn the basics of css with the expectation that you&amp;#39;ve done the the the reading already all right and so i don&amp;#39;t want you to panic i don&amp;#39;t want you to feel bad if it doesn&amp;#39;t make sense know that that&amp;#39;s your first pass and we&amp;#39;ll go over all the meaty stuff together all right i asked you all i gave you the three secrets you manage your frustration you be consistent you take care of yourself and so i got one question for you did you make a plan who made a plan who made a plan for their week who who who woke up today like an accident who woke up today like an accident who made up who made a plan now i&amp;#39;m just getting all twisted you&amp;#39;re saying yes for both all right if you haven&amp;#39;t made a plan for your day for your weeks for your month you must be inconsistent takes some planning don&amp;#39;t wake up like an accident have a plan right know what you&amp;#39;re getting yourself into right so if you haven&amp;#39;t made a plan for your week if you haven&amp;#39;t had that conversation with the other folks in your life figure that out right you got to let folks around you know hey tuesday thursdays i&amp;#39;m in class sundays i&amp;#39;m at office hours friday i might be doing a twitter space with the alumni you gotta let folks know that you need that time okay i made a plan a there you go all right active recall remember you can do a quarter of the work all right but get better results and different said leon&amp;#39;s calendar is the most scheduled and wild thing i&amp;#39;ve ever seen yeah i can&amp;#39;t show you all my calendar because i have a lot of like meetings with people on there that i can&amp;#39;t like put on on stream um but i promise you it&amp;#39;s glorious as we get later on i do one-on-ones with a lot of folks and so if you&amp;#39;re in a 101 with me i&amp;#39;ll show you all right you can do a quarter of the work but get better results just by recalling the things that you learn don&amp;#39;t take notes take questions right take questions right and then remember don&amp;#39;t put in all this work just to forget everything you have to reset your forgetting curve if you learn something new there&amp;#39;s a good chance by the end of that 30 30 day period there&amp;#39;s an 80 chance that you&amp;#39;ve forgotten it flatten that forgetting curve by using a space repetition tool like anki right sider and said do you just not sleep hell no i need sleep to do what i do if i don&amp;#39;t get sleep my whole my whole week&amp;#39;s ruined like not even just the day like the week&amp;#39;s a wrap and so i&amp;#39;m very very very into making sure i get good sleep i&amp;#39;m bipolar and so since i&amp;#39;m bipolar i take medication that like zonks me like it like it it puts me out and if i like do something dumb like watch a lot of youtube while i&amp;#39;m in like that good period where it&amp;#39;s trying to put me to sleep and i get through it i ain&amp;#39;t going to sleep and then my whole day&amp;#39;s ruined my whole week&amp;#39;s ruined and so for me sleep is one of the most important things you can do um and you learned about that exactly you learned about that in the course about like what sleep does how it helps with memory consolidation and if you&amp;#39;re not getting sleep yeah you messed up sleeping water exactly all right chat what&amp;#39;s the internet those brain toxins it&amp;#39;s a wire yes a wire that connects two different kinds of devices we have our client-side devices and our server side devices the code that runs on the client side the code that runs on our desktops our laptops our mobile phones what type of the person that works on that type of code what do we call them yeah we call them front end developers and the individuals that write the code that runs on the server that hears those requests knows how to respond store stuff into a database um processes credit cards the person that works on all that stuff what do we call them yeah we call them back in developers nice cool if somebody works on both if somebody works on both we call them what there we go somebody works on both we call them full stack exactly now i keep saying that requests and responses are sent between the client and the server what enables those requests to go back from back and forth between the client and server like what what&amp;#39;s enabling this to happen what technology people got it okay yeah it&amp;#39;s sitting on top of the hypertext transfer protocol it&amp;#39;s just way of sending those requests and getting those responses sending information back and forth across this internet nice well done all right i mentioned that separation of concerns is the most important thing that we cover in the beginning it is called the golden rule we want to keep our content in our html our style and our css and our behavior interaction our javascript we don&amp;#39;t want to mix any of these things together why is this so important why do we keep separation of concerns especially as we get into on thursday css why do we keep everything separate yeah organization nice organization right organization for ourselves and organizations for the developers that we work with right if we join another team and somebody wants to make something yellow where do we send them they want to make something yellow where do we send them perfect we send them to our css if we if we want them to make something when they click on it wiggle where do we send them js nice and if we want to uh have them enter in like a a new headline for a newspaper article where do we send them html nice all right we&amp;#39;re good we&amp;#39;re good let&amp;#39;s keep pushing all right we talked about html as the first language that we are learning right we said it&amp;#39;s a markup language and like all languages it has spelling and grammar rules what do we call the spelling and grammar rules of a language there&amp;#39;s a special word for it what do we call it yeah we call that syntax like the spelling gram rules the punctuation that make up that language we call it syntax so html has a very interesting bit of syntax you have your opening tag right and your closing tag and the way that the closing tag differs from the opening tag is that lovely forward slash right and so sometimes our opening tags can have some superpowers or some extra things that enables that tag to do and so here we see one of those superpowers we call them attribute value pairs so next week when we get into css and we&amp;#39;re trying to style things we&amp;#39;re going to see these classes and ids and all these things pop up that we need to put on our html so we know what tags we&amp;#39;re talking to right so we notice that in our opening tags we can have attribute value pairs and our closing tags always have that lovely forward slash sometimes however sometimes however right there&amp;#39;s a tag that doesn&amp;#39;t need a closing tag why would a tag maybe not need a closing tag yeah because it&amp;#39;s self-closing yeah because if they&amp;#39;re already content right so we saw images images don&amp;#39;t have a closing tag because they&amp;#39;re already content here you can see we&amp;#39;re wrapping around the content that is text hello world is the text right and so we&amp;#39;re wrapping around that text beautiful however when we&amp;#39;re looking at say an image it already is content we don&amp;#39;t need to wrap around the content it is content beautiful all right now why do we have to follow these rules why do we need to have the opening tags and the closing tags why do we need to choose the right semantic important html tag like why do we need to have why do we need to follow these rules ah i see a lot of people throwing different ways here yeah it talks about like kind of like three different main things that we probably care about right we care one about our general users we saw that if for some reason like an image broke having that alt tag helped our general users know that there should have been a brownie photo there right so we have our general users if we don&amp;#39;t use the right tags they&amp;#39;re just not going to have a good experience we also talked about accessibility right somebody that might be using the internet in a way that is something that might need assistance to move through that content like a screen reader right so you might see someone with a screen reader if you don&amp;#39;t use the right tags they can&amp;#39;t move through your page in the right way or things aren&amp;#39;t read to them in the right way and so you want to make sure right you want to make sure that you&amp;#39;re following the rules for general users users using accessibility devices and then the last one is seo or search engine optimization if you want to show up on google you want to show up in these search engines google comes to your site and they&amp;#39;re going to try and figure out what your site is about now i don&amp;#39;t say i&amp;#39;m not saying google does this but let&amp;#39;s just let&amp;#39;s just use this as a thought experiment if google was to come to our site and want to figure out what our site is about right what do you think they&amp;#39;re going to look at first what do you think they&amp;#39;re going to look at for can&amp;#39;t decide what to make for dinner yeah they could look at the h1 if the h1 is the most important content on the page right if the h1 is the most important content on the page then they should probably look at the h1 right and so there you go we can see how it can work for general users assistive assistant devices or accessibility concerns and then our search engine observation or kind of our web crawlers they might be looking for those things trying the sound off on you all right so we looked at some basic tags last time we looked at our heading elements right we looked at our heading elements we have h1s through h6s right we have h1 through h6s and what we realize is that we pick these heading elements right there they&amp;#39;re headings that describe the content that comes after think of like a newspaper you have a heading and then something comes after right you have a heading and something comes after so when we&amp;#39;re picking those heading elements what do we use to pick them gabby lisa does it ever go past h6 no that&amp;#39;s that&amp;#39;s where we stop yeah we&amp;#39;re picking these uh heading elements based on importance exactly based on importance nice cool so when we see an h4 we know that an h4 is a little bit less important than an h3 less important than h2 and then h1 is the most important content we have on our page now we talked about h1s probably only having one per page there is as you get deeper into the semantics of html sections can technically have their own h1s but for now let&amp;#39;s just think about like all right most important content let&amp;#39;s just have one we saw some other elements we saw for big blocks of text what do we use big blocks of text big boys big blocks of text what do we use paragraph nice if we want to be an abomination and have white space be preserved in our tags what do we use pre-tags but get out of here exactly and if you have a short piece of text what do we want that to be nice span all right we got it uh br tags hr tags skip i&amp;#39;m gonna skip those all right assistant device elements we have m and strong tags all right m and strong tags remember we talked about image strong text being somewhat like odd if you look at an m tag it makes our content italicized and if we look at our strong tag it makes it bold if we use an emm strong tag to make something italicize italicized and bold it did we violate separation of concerns yeah if we use an m and strong tag because we like the way it looks it was at this moment that he knew he  up exactly we don&amp;#39;t use them based on how they look we use them because of what they help us with right what they help us with when it comes to accessibility remember individuals that come to your site and might not be able to see hey cross thank you for the 10 gifts it subs i appreciate that thank you so much uh oh cross is here so we can actually we can actually bring something back uh you can do exclamation point bingo uh and this lovely person uh recently got a job by the way and check out the celebrations channel made a bingo game early in the last last cohort and so some people religiously play bingo while the stream is going on um to to to just have something to help them stay a little bit more focused and i repeat a lot of words and i say a lot of funny stuff and so there&amp;#39;s some things that come up quite often so bingo if you&amp;#39;re interested let&amp;#39;s see let me see if i can grab there we go all right tiny dot cc slash leon bingo and it takes you to a to a netlify app which will all learn how to use netlify and we can create a board and so you can see lovely things here don&amp;#39;t call yourself a junior dev join us for office hours leon mentions his only fans leon says automagically i say that word a lot um it&amp;#39;s not stalking it&amp;#39;s networking no no someone redeems a soundboard alert um and so each time you create a card it&amp;#39;s a completely different card and so you you can play bingo [Laughter] if you would like um tiny dot cc uh leon bingo and there you go thank you indifferent just something fun to do while you&amp;#39;re watching and thank you cross for it and thank you for the 10 gifted subs i appreciate you all right let&amp;#39;s keep pushing folks all right we also talked about there are lists we have two kinds of lists ordered lists where if something is not in the right order it messes up like it&amp;#39;s a problem right so we think recipes should be an ordered list where as something like a grocery list doesn&amp;#39;t matter if you put the the bread before the pickles right so that that list doesn&amp;#39;t matter and so you can keep a different order all right we also have containing elements right containing elements are how we&amp;#39;re going to group content together they&amp;#39;re going to be the tags that we probably use the most divs it&amp;#39;s not that divs are are wrong or you shouldn&amp;#39;t use them we just have a lot more semantic decisions that we can make these days a lot more semantic choices that we can use and one of the common tags that we use a lot are sections we can group lots of content together articles are for content that should be shared so think newspaper articles think blog posts things that you could like cut out and share those are good articles and aside if you read the mdn which you should all have open the mozilla developers network thank you booty licker hey i hope you&amp;#39;re doing well thank you for stopping by um if you i still don&amp;#39;t i still still can&amp;#39;t not laugh but you&amp;#39;re dave aside is for ancillary extra content like things like ads or sidebars headers for content the beginning of a document footer is for content at the end of a document beautiful booty licker has returned nice all right we also talked about there are some deprecated elements like elements that we can no longer use right things that we used to see all the time right back when we were building our myspace pages our neopets accounts right we uh we we we had this idea of blink tags and marquee tags and bold tags and i tags why are all these tags deprecated and no longer used mon and lucky tiger thank you for the hydration cheers to you yeah a lot of those are css and maybe the marquee is like javascript right so as separation concerns became a thing that we agreed to a lot of this stuff really shouldn&amp;#39;t be part of html and it&amp;#39;s deprecated thank you all right we did this brownie code recipe and i just want to review it quickly i just want to take a look at what we did together and then we&amp;#39;re going to move on so here is the browning code recipe that we did together we went through we chose the different tags that we thought made the most semantic sense right that were based on the real reason why we would use that tag and we talked about we talked about the importance behind our tags as well now when we get through here we we have some stuff that we did that i want to take a second just to talk about and uh and and cover a little bit more deeply before we move on to some new tags and then finally get our fingers that going and writing some code of our own so one thing we did here is an image and we talked about this image being a hot linked image meaning that we took somebody else&amp;#39;s image that they are hosting on their own server and we&amp;#39;re linking to that and we talked about some some some odd things that could happen because we are doing that what are some bad things that could happen because we are hot linking the image they could take it down y&amp;#39;all just y&amp;#39;all popped off of this so the twitch has a filter and when you put stuff that like breaks the filter i can still see it sometimes if my mods don&amp;#39;t remove it before i see it um but sometimes i get to see him and they&amp;#39;re funny people said they could change it to a turd someone they could they could change it to a picture of poop and uh now your lovely website has a picture of poop on it um so let&amp;#39;s let&amp;#39;s do let&amp;#39;s not hot link a photo right let&amp;#39;s go ahead and let&amp;#39;s actually like download a photo so let&amp;#39;s go back to google and i&amp;#39;m gonna go to google images and we&amp;#39;re going to say brownie yeah brownies there we go so if you a lot of folks asked me about this um they said leon what was that that was that bang gi that i just did uh so i use duckduckgo as my search engine right and when you use duckduckgo you have these bang syntaxes that enable you to do a bunch of different stuff so if like i do bang g it takes me to google i do bang gi takes me to google images i do bang a it takes me to amazon right so if you use duckduckgo as you&amp;#39;re like your main search uh it really does speed up a lot of things that you do and you get all the wonderful stuff that comes along with using duckduckgo all right give me a moment oh cosmic brownies oh give me a second sorry folks if you uh i can i can know a lot about you i know a lot about you if you grew up eating a honey bun and a cosmic brownie for breakfast i know we&amp;#39;ve gone through a certain struggle together and so that that&amp;#39;s how i know and so give me a second here oh i haven&amp;#39;t seen it i haven&amp;#39;t had cosmic brownie in a minute all right let&amp;#39;s click on this one nope i don&amp;#39;t want to go there google let me just right click um oh cause this is an ad this i got got that&amp;#39;s why that i got got it&amp;#39;s an ad when did they start putting ads in here oh that&amp;#39;s so dirty that&amp;#39;s so dirty cause you&amp;#39;re like trying to get the image and they put ads out there what wow they willing oh i can&amp;#39;t we can&amp;#39;t go wrong with these ones oh look at that right right click save image as and we&amp;#39;re going to look at all my screenshots i did for the stream all right we&amp;#39;re going to go to class 3 and we&amp;#39;re going to save this as brownies all right so now we saved our brownies to our class three folder so what i can do is if i go back all right if i go back and i look in the folder so when i opened up in vs code i didn&amp;#39;t just open the file i opened my entire folder and so what i did is i drug my entire folder so i have like my hundred devs folder and then i have my class three folder and what i did is i dragged this whole class three folder into vs code right uh oh i just drug it to my desktop anyway i wanna make sure i didn&amp;#39;t screw that over hold on i just dragged the folder to my desktop all right one second i gotta bring that back all right one second all right all right there we go so i drug my class 3 folder into vs code and what that did is it opened up the entire folder for me in vs code right and the beautiful thing is i just saved my brownies photo into that class 3 folder you can see it here right that brownies.jpg you can see it if i open it up look at that delicious photo right so now i have the the photo on my computer i just right clicked right i just right clicked see i say certain words wrong because it increases my engagement you all got got you&amp;#39;re all saying drag drag drag now i drug it you don&amp;#39;t have to deal with it thank you for the engagement you got you got that um all right so i drug the entire folder into vs code and it opens the whole thing for you now you can see that like i have like the file that was just downloaded inside of the inside of the folder right cool so now instead of hot linking this photo what i can do is i can actually just link to that photo directly because my brownies.html is in the same folder as that brownies.jpg all right.jpeg right so if i just type in brownies.jpg that source will know from this html file to grab that image got a lot of hydrates in here tortuga memphis nomad thank you for the hydration cheers to you right and so now i have that lovely photo that no one can change on me right no one can change it on me and so if i go ahead and open this in the browser you can see that my photo still is there i don&amp;#39;t have the hot linked version anymore it&amp;#39;s the photo that i just downloaded right now somebody&amp;#39;s saying does this work on codepen no because codepen doesn&amp;#39;t give you the ability to upload or download like a like a an image on glitch it might work because on glitch you can upload stuff right you can upload files and things like that so that&amp;#39;s why i like glitch if you&amp;#39;re if you&amp;#39;re going to be stuck uh like not sorry necessarily if you&amp;#39;re going to be using like say like a chromebook or you have a computer that can only really use the browser using glitch is good because you can upload different stuff the glitch right so if you&amp;#39;re going to use glitch like let&amp;#39;s create a new project um this is a website it takes a while for glitch to kind of get going right it takes a while for glitch to get going and there are other things i just i just happen to like glitch i think it&amp;#39;s easy the cool thing here is you can up you can like do files right so if i do plus files i can upload a file and then let&amp;#39;s go ahead to stream 100 devs class three i can upload the brownie and can i do two files at the same time now just one at a time so i can upload my brownies.html file and boom my brownies.html file right my brownies.html file is just up here on glitch let&amp;#39;s see if it&amp;#39;ll let us do the images too not sure oh assets surprised to do it through assets yeah upload an asset brownies.jpg let&amp;#39;s see cool now we got our brownies.jpeg here and cool and so with this you can actually like preview and do a bunch of other stuff right like but now you could go to this brownies.jpeg sorry this brownie.html and see it uh let&amp;#39;s see open preview in a new window and then let&amp;#39;s go to brownies.html slash brownies.html that was the name of our html file all right so it doesn&amp;#39;t like the linking directly to brownies but i&amp;#39;m sure there&amp;#39;s a way to do an english i don&amp;#39;t use glitch that often but i&amp;#39;m sure there&amp;#39;s a way to to take your asset and connect it to the brownies.html right oh is there is there a folder called assets is that what it is let&amp;#39;s see um let&amp;#39;s see assets flash brownie that work oh let&amp;#39;s try again no i know there&amp;#39;s a way to do it i just uh i gotta look at it yeah so that that&amp;#39;s the idea here right might have to be like a like a real link sorry let&amp;#39;s try this real quick let&amp;#39;s try that try it i&amp;#39;ll figure it out when we take a break but the idea here is that you can is it uppercase they wouldn&amp;#39;t do that they&amp;#39;re not monsters right it is a capital a no way let&amp;#39;s check curious there has to be a way now anyway we&amp;#39;ll figure it out but that&amp;#39;s the idea right you can if you need to be if you need to use just your just your um oh yeah because it&amp;#39;s going to be in a separate do you want us to go up a level see i get i get invested in these things we should be able to just go in are we like inside of a folder somehow let&amp;#39;s see one more thing i want to just look at i&amp;#39;m curious no all right we&amp;#39;ll figure it out but that&amp;#39;s the idea like if you need to be inside of your browser right you need to be inside of your browser and you don&amp;#39;t have access to like the s code or something like that right you can use glitch to upload your html and then we&amp;#39;ll figure out how to do the images and stuff like that as well but that&amp;#39;s the idea is that you can link everything together and um and and have it work like that inside of just your browser so i&amp;#39;m going to use vs code this whole time that&amp;#39;s what i&amp;#39;m comfortable with that&amp;#39;s what i use right but if you for some reason can&amp;#39;t use vs code there are other options right cool and we&amp;#39;ll figure out the image thing i&amp;#39;m not sure because i don&amp;#39;t use glitch that often cool all right so here we have our local version of the image working we had some other lovely things down here i wanted to show out we have our lovely alt tags that we&amp;#39;re working so we have an anchor tag that opened and anchor tag that closed and we had the ability to put in our actual href right all right all right put in actual href right and there we go oh i think we did i think people figured it out yeah so mine was a was a was mine a jpg let&amp;#39;s see no it was jpg i put jpeg let&amp;#39;s see no i had it right i thought that was a good idea though click the image is it not a jpeg did they convert it to something else when it got uploaded this this is no oh it does give us the cdn though copy url so we can do that and we can come back to our html and put it in like that there we go okay and then glitch i know you auto save it&amp;#39;s just a habit boom there we go [Laughter] so they give you a cdn which is pretty dope so for those of you know where cdna cdn is for a content delivery network and what it means is that images are like heavy they take a while to download i know that like in the modern world we&amp;#39;re going to talk about this tonight right like for those that have access to high-speed broadband images load instantly right but if you were with me back in the day we&amp;#39;d be waiting a half an hour for that image to load right and so what a cdn does is it takes that image and it puts it on servers around the world right so that you don&amp;#39;t have to wait as long to download that image or any of your heavier files right so if you were in say los angeles but your server was in london your request would have to go across the entire united states across the atlantic ocean and to london and then back right so why not put my image on a server closer right and so that&amp;#39;s what a cdn can do a cdn can put your images on servers that are closer right so that you don&amp;#39;t have to um wait for that that delay so there you go cool that&amp;#39;s how you can do a glitch i haven&amp;#39;t used glitch too much but i&amp;#39;m glad to see that it works and so for folks that have to be in their browser this is what i recommend in fact for some of your homework i&amp;#39;m going to ask you to like put it on glitch because the other cool thing about glitch is that you can just share the the link right you can share the code you can share the live link which is pretty dope and then the other cool thing is for those that are like in the ketchup crew you can actually share your glitch with like other people and collaboratively edit which is pretty dope yeah and so i i really like that because it&amp;#39;s kind of like a google doc for your code and so a lot of times we&amp;#39;ll see folks that are like working together on discord just share a glitch with each other and go at it alrighty keep pushing but like i said i&amp;#39;m using vs code we&amp;#39;re gonna see me use that the most but i wanted to show another option for folks that don&amp;#39;t have that that luxury there&amp;#39;s one other thing i wanted to show you what you&amp;#39;ll be noticing i do a lot is i uh right-click and i open in my default browser there are many of plugins that you can use this is one of the very few plugins i&amp;#39;ll ask you to use in the beginning or extensions as vs code calls them and that&amp;#39;s called an open in browser plugin i use tech er&amp;#39;s open in browser plugin right and what that does is just opens the file for you and you&amp;#39;re in your default browser so instead of having to like drag your file to the browser or doing file open in the browser it just opens it i don&amp;#39;t like live preview or any of those in the beginning um just because i i want you to get used to saving i know it sounds really dumb to have to like get used to saving but i really do want you to get used to saving because i&amp;#39;ve had so many people like in real interviews like staring at their editor because that you don&amp;#39;t always use like your own editor you use some other like like like you use like a editor that&amp;#39;s in the cloud right i&amp;#39;ve had people in interviews staring at going like i don&amp;#39;t know what&amp;#39;s happening like it should work because they didn&amp;#39;t save so get used to saving for a week or two and then if you want to use things that like auto save and refresh for you do it but get used to saving refreshing just so it becomes some muscle memory so that when you&amp;#39;re like in the actual interview you don&amp;#39;t get got it sounds silly um occ said i&amp;#39;ve done that live coding interview didn&amp;#39;t update because i didn&amp;#39;t save exactly so get into the habit so that like something clicks in your brain when it does happen so i use the opening browser one which i find really helpful something else a lot of people were kind of confused about last time is that you can change a lot of settings in vs code and so on mac os it&amp;#39;s command comma on your operating system it might be control comma but that opens up settings and you can type things like html and it&amp;#39;ll give you all your settings for html so i just did command comma which opens up settings you could also do like code and then preferences which will take you to settings but i did command comm it might be control comma on yours and then in settings you can type in html and i have my um auto closing off right i don&amp;#39;t like that auto closing where like i open up i open a tag and it automatically closes it so i turn that off so just some settings that i use uh to make my life a lot easier while i&amp;#39;m using vs code i wanted to show you some local images we&amp;#39;re gonna have lots of practice with like local images local files when we get to css because we&amp;#39;ve got to get good at it so i just wanted to show you the basics today with something that we&amp;#39;ve already seen and what we&amp;#39;re going to do now is we are going to move into html structure we&amp;#39;re going to learn about uh a really important topic called progressive enhancement we&amp;#39;re going to see some new tags like nav tags and then we&amp;#39;re going to actually start coding out some websites together but before we do that we got to take a break if you&amp;#39;re new around these parts we like to stay healthy we like to make sure that we get our uh if you&amp;#39;re able to that you get up you move around you stretch you let your eyes relax on something that&amp;#39;s not your screen you grab some water you hydrate you say hello to your loved ones uh yeah yeah yeah yeah maybe you say hello to your haters i don&amp;#39;t know you pop on twitter for a second but uh whatever you do just like leave if you&amp;#39;re able to uh and and and and come back to us in five minutes all right i&amp;#39;m gonna put the timer on the music on and i&amp;#39;m gonna give y&amp;#39;all what you really want bob what do you think of notepad plus plus i mean i used it like 15 years ago but uh now vs code is where it&amp;#39;s at do you vape nah great stuff so far learning life hey glad you are thanks remember do you like people always i i mean i like digimon i haven&amp;#39;t like been involved in it in a very long time do i make vegan fun at home of course like all the time the red storm light archive no i have not can we see your computer set up it&amp;#39;s wild it&amp;#39;s it&amp;#39;s super ridiculous one of these days i&amp;#39;ll i&amp;#39;ll share a photo with y&amp;#39;all but it&amp;#39;s it&amp;#39;s it&amp;#39;s pretty wild i request bob on screen for channel points goal it&amp;#39;s just the camera points the bob i keep talking but it&amp;#39;s just bob the whole time i love it good one you watch sports not really the only sports i really watch a rugby and a little bit of soccer here and there what mouse and keyboard should you get whatever&amp;#39;s the cheapest and serves your purpose it&amp;#39;s more like keyboards are more about like really deep personal preferences or if you&amp;#39;re talking about like being like safe just like typing posture and ergonomic stuff is way more important than like the gear you actually use and then keyboards come in so many shapes sizes colors flavors like it&amp;#39;s just you could go all in on that rotor rifles oh you just start playing that&amp;#39;s pretty cool yeah i want to join a new team this uh this fall that&amp;#39;s the goal what kind of rubber duck should i get there are so many fun weird ones out there get one that&amp;#39;s fun all right folks come on back come on back how about that microsoft news yeah did it actually go through like did they actually buy them or no because they bought them that&amp;#39;s wild good on them it&amp;#39;s actually gone through dope yeah so microsoft bought activision blizzard um bring that to uh xbox game pass please you know let&amp;#39;s get in there does it cost a lot of money oh could like your wow subscription be part of xbox uh we&amp;#39;re just getting ahead of ourselves here welcome back both hope you had a good break 68 billion yes all right folks come on back hope you all did well yeah that&amp;#39;s what i thought apple yeah they got to go underneath some sort of review right like they gotta make sure it&amp;#39;s not some sort of monopolistic behavior or something like that but that&amp;#39;s pretty wild if it does actually go through all righty look at how you got my posture right j coder got my hydration right thank you all right welcome back welcome back let&amp;#39;s chill the music here so we looked at that brownie code recipes that we did together um but there was something that we didn&amp;#39;t get a chance to get into on uh on on on thursday that&amp;#39;s like how we actually structure our html right and so our html has a structure that we should bring to each html document right so a very common structure for an html document is to have this doctype at the top and this doctype lets the browser know kind of like what what type of html are we dealing with right what type of html are we dealing with here because if you look back a couple years ago and you&amp;#39;re looking at something that was pre like html5 that doctype was messy and long right but when you see this nice clean doctype you know that you&amp;#39;re dealing with the latest the greatest the html5 right and then we have the largest or we call the root element so every single thing that goes on your html document goes inside of that html tag so we call that the root tag and whenever you have a root tag anything that goes inside of it are its children so in html we have the html element which is the root element and then everything else inside of it is a child right whenever you have something inside of something we call that a parent-child relationship so here we see inside of the html we have the head and the body we would say that the head and the body are both children of the html element right and then what you&amp;#39;ll notice is that the head and body are like where everything happens right excuse me thank you all right the head and the body are where everything happens right and the head is for everything that the browser needs to do its job right and the body is everything that we can see and interact with so if you can see it you can click on it you can look at it right you can highlight it that content has gone into the browser right i did censor my sneeze you were here for it um everything you can see and interact with goes in the body right the stuff that the browser needs to do its job like what characters are we using uh any of the meta stuff that we&amp;#39;re eventually going to get into all that stuff goes into the head so the way i like to remember this is damn this joke does not work today hold on i do this right this joke doesn&amp;#39;t work today there we go hold on one second there we go better the way i like to remember this is that you can see my sexy body but you can&amp;#39;t see what&amp;#39;s going on inside my head right you can see my sexy body but you can&amp;#39;t see what&amp;#39;s going on inside me let that burn into you for saying hold on you can see my sexy body but you can&amp;#39;t see what&amp;#39;s going on inside my head okay that&amp;#39;s the same thing that you have when we get to our html if you can see it interact with it it goes inside the body right you can see it you can interact with it it goes inside the body but if you can&amp;#39;t see it if it&amp;#39;s something that just the browser needs to do its job that goes inside the head so if we were to go back to our html here where does all of this stuff go inside every single thing that we just coded out with the brownie recipe where does that all go it goes inside the body nice oh it goes inside the body so let&amp;#39;s actually set that up something neat inside of most text editors and specifically vs code is that you can do a little shortcut so if we go to the top here and i just type html and i hit tab it kind of does everything for me let me let me do that again hold on let me let me do it i just typed out html and i went to this like html5 right like because i do the html just gives me html tag but if i type out html and i get this little drop down i go to html5 and i just hit tab it gives me everything that i just showed you so you don&amp;#39;t actually have to type it out um it does make it a little bit quicker for you and this is like the one time that i would recommend you do it everything else i think you should type out heck i even think you should type out this stuff right i think you should even type out this stuff as well right but you can see there&amp;#39;s a lot of stuff here that the browser might need and and don&amp;#39;t worry about this stuff here for right now we&amp;#39;ll cover all this stuff when we get to like css but for right now we got our doctype html we got our root element and then it&amp;#39;s two children the head and the body and i always like to indent so i always do a little tab just to indent and then all of the content that we did before right all the stuff that we did before i&amp;#39;m going to cut it or command x in my case or ctrl x in your case cut it i&amp;#39;m going to come up to the body i&amp;#39;m going to paste it in there now for some reason it didn&amp;#39;t auto indent so i&amp;#39;m just going to highlight it all and i&amp;#39;m going to indent now leon why do you indent i indent because whenever you had a parent child relationship right whenever you have a parent-child relationship you want to put a little respect on the name right you just want to do the indentation so it&amp;#39;s easier to see right it&amp;#39;s easier to see that this h1 is inside of the body right it&amp;#39;s easier to see that this h1 is inside the body the image is inside the body so whenever you have a tag that is inside of another tag put a little respect on the name and we indent okay right now is my code saved nope it&amp;#39;s not safe you can tell because i have this little little white dot up top here that&amp;#39;s how you know it&amp;#39;s not saved so as soon as i do command s or control s if you&amp;#39;re in a different operating system you can see that it&amp;#39;s now saved if i go back and i refresh is there anything that&amp;#39;s going to change here i added all this extra html but is anything going to change no right we just added more structure to our html and as we start to build out richer and richer sites and eventually applications this stuff all starts to be needed right all starts to be needed right thank you for the hydration cheers to you also just to make sure that we&amp;#39;re agreeing to those rules remember we talked about like why do we have to follow these rules because it will help our junior general users it&amp;#39;ll help our accessibility users it&amp;#39;ll help our screen readers right and so we&amp;#39;ve got to make sure that we are following these uh rules so that we can serve all the best interests of our users and there&amp;#39;s a lot of stuff going on here right like we see this lang preference which is for letting the browser know that we are doing a site that&amp;#39;s in english you can also do like a left to right um or right to left designation so that you know which way you&amp;#39;re gonna read uh the the the the language right there&amp;#39;s a bunch of other stuff that as we get into it we&amp;#39;ll go over we talked about the chart set the other day um but there&amp;#39;s a bunch other stuff that&amp;#39;ll just go in here more meta than that&amp;#39;s what&amp;#39;s here right now so don&amp;#39;t worry about that for right now we&amp;#39;re gonna go into that more stuff when we get to css cool um some folks are saying how did i do that let me do it again for you so i just came up here i typed in html and i went to like see i have these options i went to the html5 one and hit tab all right now this won&amp;#39;t work this won&amp;#39;t work unless your file is saved as an html file if it&amp;#39;s not saved as an html file it won&amp;#39;t know what options to give you right so make sure that it&amp;#39;s an html file yeah i didn&amp;#39;t type in the carrot it was just i just typed out the word html and hit tab but if it&amp;#39;s not saved as an html file you won&amp;#39;t get those options so make sure it&amp;#39;s saved as an html file and then you&amp;#39;ll get those options how do i how do i indent so fast i hit tab you know a lot of people keep asking tabs versus spaces i have my tab set the spaces cool alrighty folks let&amp;#39;s look at some new tags let&amp;#39;s look at some new tags here all right this navigation tag is something that we got with html5 right with html5 we got some new tags and one of the tags that came along with us was a nav tag a nav tag short for navigation is for the content that&amp;#39;s going to help your user move around your website right and so you got to think that there are a lot of repeated code in our sites these days right when you go to a site there&amp;#39;s often some content at the top right there&amp;#39;s some content at the top that enables you to move around that site right and so if we look at something like uh khan academy we have this this this kind of this this navigational content that&amp;#39;s gonna be at the top of every single page right and sometimes you might have like let&amp;#39;s say like you&amp;#39;re amazon right let&amp;#39;s say you&amp;#39;re amazon and you have thousands and thousands if not hundreds of thousands of pages and google comes to your site and they see this word donate over and over and over again or they see like buy gift cards over and over and over again they might start to think you&amp;#39;re trying to do some shady stuff called keyword stuffing where you&amp;#39;re trying to convince google that your site is about say donation or your site is about um uh gift cards or something like that but that&amp;#39;s not what you&amp;#39;re saying what you&amp;#39;re trying to say is hey i need this stuff to navigate around the site it&amp;#39;s probably going to show up over and over and over again and so what we&amp;#39;re able to do is have these lovely nav tags and in terms of like search engines they kind of just get like ignored right like they don&amp;#39;t count against you they don&amp;#39;t count for you um but you don&amp;#39;t worry about that too much right now what they do is it just enables you to have like repeated content across all your pages and useful in a way so that you know that you&amp;#39;re going to use this to navigate really helpful when it comes to screen readers as well they know that they can use the content in that tag to help them move around right got a lot of hydrates that came in cheers to you all thank you ruby thank you for the stretch i&amp;#39;m gonna get a little chair stretching thank you thank you cool so whenever you have navigational content we&amp;#39;re going to use this lovely nav tag right and we&amp;#39;re going to see this over and over again we&amp;#39;re going to we&amp;#39;re gonna we&amp;#39;re gonna put this into practice right we&amp;#39;re gonna put this into practice but this nav tag is something we&amp;#39;re gonna use to help us when it comes time to having content that directs people around your site so right up here we see a nav on techcrunch we maybe have like a nav on the left hand side on bbc we had a nav up top as well so this idea is that we&amp;#39;re gonna have these navigational elements that enable us to move around our application now inside the nav we often have a list of links like the places that we&amp;#39;re going to go to and so that&amp;#39;s why you would often see like a ul with llis and anchor tags inside cool now so far right so far we have only shown data to users right we&amp;#39;ve only shown data to users right but how do we get data from users what can we use to get data if you did the shahal reading you should know this already what do we do how can we get data from users we use a form exactly and so here we have a form tag and a form is an open and closing tag that wraps around inputs just like you have an o l and a ul that wraps around l i&amp;#39;s like you would never have just an li right your your lis are always going to be wrapped in an o l or a ul right always going to be wrapped in an o l or a ul same thing with a form we&amp;#39;re going to have inputs and those inputs are always going to be wrapped in a form tag now form tags have some pretty cool what are these called what are these called up here let me ask y&amp;#39;all what is that called what are these called yeah forms have some pretty cool attribute value pairs we want to worry about them right now when we get to like building our full stack applications these become a lot more important uh actions are like what happens when the form submits so if you&amp;#39;ve ever submitted a form and it&amp;#39;s taking you to like a thank you page or a confirmation page it could have been one of those those attribute value pairs that helped you do that and then also like what are we doing with that information are we sending it somewhere that&amp;#39;s where the post comes in but like i said you don&amp;#39;t know about these attribute value pairs just yet we&amp;#39;ll get to them later on when it becomes important but what we do need to know is that inside of a form can go a bunch of different kinds of inputs we can have text inputs password inputs tell inputs email inputs button inputs all these different types of inputs that can go inside of a form and there&amp;#39;s a lot of them with html5 we got a lot of these new input types and the mdn has a full list of them uh should you want to see them right so mdn has a full list of all the input types um but let&amp;#39;s go ahead and build a simple form together so i&amp;#39;m going to go back to my brownie dishes here and i&amp;#39;m just going to go ahead and give myself a little form at the top here&amp;#39;s a little bit of room and i&amp;#39;m going to go ahead and just do form and i&amp;#39;m going to hit tab there we go cool so i have my form i don&amp;#39;t really care about any of the attribute value pairs for right now we can just let that be and inside of my form i&amp;#39;m going to put three inputs i&amp;#39;m going to do input type text and then i&amp;#39;m also going to do an input type tell and an input type email so let&amp;#39;s go ahead and do tell and let&amp;#39;s go ahead and do email cool is my site saved nope some folks are saying that they can&amp;#39;t see the screen that&amp;#39;s most likely due to your quality settings so the beautiful thing is that we have quality settings you can change the quality of the sh of the screen to a higher quality if you have the bandwidth to do it all right and then sometimes you just gotta refresh yeah sometimes you gotta refresh all right so now it&amp;#39;s saved beautiful and let&amp;#39;s go ahead and take a look at this in the browser here&amp;#39;s which one it was there we go all right let me refresh because i can&amp;#39;t see it right i can&amp;#39;t see i can&amp;#39;t see my form yet why can&amp;#39;t i see my form yet i say let&amp;#39;s go back let&amp;#39;s look i saved look my my my x is a circle my my circle&amp;#39;s an x all right why can&amp;#39;t i see the form i didn&amp;#39;t refresh my that&amp;#39;s weird what happened oh there we go i just didn&amp;#39;t scroll up i didn&amp;#39;t refresh right i had to refresh and then i had to scroll up i didn&amp;#39;t refresh and then i had to scroll up uh so now that i&amp;#39;ve refreshed you can see my form but there&amp;#39;s something interesting let&amp;#39;s go back and take a look at these real quick um some folks are saying wait the input doesn&amp;#39;t have a closing tag it&amp;#39;s one of those very few tags that are self-closing the input is content itself we&amp;#39;re not wrapping around content right it is an input it doesn&amp;#39;t need a closing tag it&amp;#39;s not wrapping around content it is self-closing just like images right but we have these different types text tell email but when i go back nothing really changed about each three of them right they&amp;#39;re all the same they&amp;#39;ll look the same i know we don&amp;#39;t care what it looks like when we&amp;#39;re writing html but they all look the same so why with html5 did we get all of these new like input types well something really important changed no cheating if you watched the class before something really important happened something fundamentally changed about the way that we use the internet something big a massive impact on everything that we do how we consume the internet what we use on a regular day-to-day basis it just kind of consumed how the internet functions and works so what changed yeah mobile and so with mobile we need ways of helping one very particular things how do phones and mobile change inputs like what do we need with inputs um if we&amp;#39;re using a mobile yeah tony got it we need we need different keyboards right we need different keyboards when we type when we have an input type text is going to give us like a normal keyboard we have input type tell it&amp;#39;s going to give us the number pad when we have an input type email it might give us the at sign or like your email provider on the keyboard so we needed all these different types of keyboards and the wonderful types and the inputs help us with that cool there&amp;#39;s also one other thing i want to show you about forms that are really helpful and so here we have a form and i&amp;#39;m going to have a label and there are a couple different ways of doing labels but let&amp;#39;s just say that this was um we want we want the first input to be like your your first name let&amp;#39;s let&amp;#39;s put a label called first name right first name and what i want to have happen is i want to tie this label to this input and the way you can tie a label to an input is by having the same four attribute as the id attribute on the input so i&amp;#39;m going to give the 4 the attribute of zebra right and i&amp;#39;m going to use zebra a lot because there is nothing in html css or javascript right that has the word zebra in it or zebra if you want to say it that way right um you want to have a way like i want a way to like show you that like i&amp;#39;m making it up so if i use zebra or zebra anywhere i am making that word up so my label is going to have a 4 of zebra and i&amp;#39;m going to give this input the id of zebra cool cool so my label has the four and my id has the zebra as well i&amp;#39;m gonna save this i&amp;#39;m gonna go back let me refresh all right so now i have this label let me let me get a little bit bigger here i have this label and what i&amp;#39;m going to do is i&amp;#39;m going to click on the label okay let me go ahead and click on save already three two one did you see it you see what happened one more time one more time hold on i&amp;#39;m gonna click on this label three two one boom you see what happened ah we got this cursor so when i clicked on the label it focused in that input right it focused for us it focused in on that input i clicked the label and it focused in on that input okay now why might that be important like why why might we want that to be a thing like why go through the the extra labor of creating labels for each of our inputs yeah accessibility and so accessibility is great because individuals might be reading out your website so the website might be read out to them and then as they&amp;#39;re kind of like hovering over the text they want to be able to tap that text right so that the it can focus into that input for them and so it might be harder for them to find the inputs but they might be able to tap the text and have it focused for them so there are some accessibility concerns there there are some things that make it easier for folks to interact with your forms and so i want to show you some of these basics we&amp;#39;ll get deeper into forms our forms will do more but for now this is some very simple forms and you&amp;#39;ll see more in the reading and the homework that you get as well cool all right i said this is the most why am i saying why zebra so i use zebra a lot and i taught a class uh at ga and it was like a it was just like a front-end class which is like two nights a week for 12 weeks they&amp;#39;re phenomenal classes i love teaching them and i always use zebra as my example and at the end of that cohort um a person came up to me they gave me a beautiful zebra pencil as like a thank you and said it&amp;#39;s called zebra and then they walked out and so as an homage to that wonderful person i now say zebra uh they i think they were from south africa where it is pronounced zebra and not zebra and i think i think folks from south africa should be dictating how we say zebra um more than than my philly ass should be saying uh how zebra said so i&amp;#39;m gonna call it zebra cool now i said that this was the second most important thing we&amp;#39;re going to talk about tonight and it&amp;#39;s called progressive enhancement and progressive enhancement is a really important concept for a lot of our users and all all progressive enhancement really means is that we should be focusing when we&amp;#39;re building our websites at the core of our website should be our content our html right that should be our chief focus that&amp;#39;s why we start with html if you&amp;#39;re thinking about building a website your focus should be the content the html and then we&amp;#39;re going to take that html and put a nice chocolatey coating around it and that chocolatey coating is our css and we&amp;#39;re going to wrap that chocolate and peanut in a very thin candy coating that is our javascript okay so the idea here the idea here is that the core and the most important is the content the html we wrap some presentation on it and then the very last thing is that very thin candy coding and what you need to do is you have to realize that not everyone has broadband internet access in fact a lot of your users a lot of your consumers might not have access to super fast internet right and so if you are pulling in all the latest and greatest css you&amp;#39;re pulling in all the fancy client-side javascript and you&amp;#39;re making your sites heavy right you&amp;#39;re making your sites heavy that increases the page load speed of that site let&amp;#39;s look at a site let&amp;#39;s look at cnn cnn.com i&amp;#39;m going to do something i&amp;#39;m going to right click inspect and don&amp;#39;t worry about seeing this so i&amp;#39;m just going to show you something i&amp;#39;m going to go to network and i&amp;#39;m going to refresh ready hard refresh and what we&amp;#39;re really trying to focus on and let me turn off let me let me turn off the ad blockers here turn that off turn that off and we&amp;#39;re going to do a refresh here and we&amp;#39;re gonna let this run for a second give me a second here so what i just did is i just refreshed the cnn website okay and what we&amp;#39;re seeing it&amp;#39;s still loading you see all that movement that is it&amp;#39;s still loading right we&amp;#39;re 26 seconds in and there&amp;#39;s still stuff happening there&amp;#39;s 17 megabytes of resources that are coming in 897 requests that have been made so far remember when you go to a website you make a request to a server and you get stuff back oh my i don&amp;#39;t know if i can stream that um you&amp;#39;re getting all those responses back so that&amp;#39;s like almost a thousand requests that have been made to different content right 21 megabytes of resources right and there is a good chance that some of our users might not be able to load that site that&amp;#39;s a lot that that&amp;#39;s somebody&amp;#39;s data cap that we&amp;#39;re eating into just going to a news website right just going to a news website 21 megabytes of space over a thousand requests and so this really escapes progressive enhancement but they realized that they said you know what let&amp;#39;s get back to our roots right let&amp;#39;s make it so that our users that may not have access to high-speed broadband could still use our site and they did what a lot of sites are doing now and they made a light version of cnn so this is light.cnn.com right let&amp;#39;s do the same thing let&amp;#39;s go ahead and inspect let me turn off my ad blockers for this site again there&amp;#39;s notice there&amp;#39;s only one that popped up and let&amp;#39;s go to network and let&amp;#39;s do a hard refresh so we&amp;#39;re not even at we&amp;#39;re at like a third of a megabyte right and only five requests as opposed to a thousand and untold megabytes of of data right and so this is a beautiful website that takes into account progressive enhancement the idea that the thing that people really care about right hey rob thank you for the bits the thing people really care about are the articles the stories right and so they they want to be able to look at that and have a clean experience this is a beautiful website in terms of progressive enhancement because it just gives you what you want there is no need for the chocolaty coating maybe a smidge of css and definitely no need for the the heavy javascript right and it&amp;#39;s important to keep these things in mind and i pulled this up in 2017 the u.s said that 22 million americans or roughly 35 of the nation&amp;#39;s rural residents did not have broadband access let&amp;#39;s think about that in just 2017 in 2017 22 million americans about 35 percent of all rural residents lacked broadband access so that&amp;#39;s a huge portion of your consumers a huge portion of folks that are trying to access the internet that if you go out and you wild out and you add tons of really heavy things to your site that doesn&amp;#39;t really matter right it doesn&amp;#39;t really matter you are impacting your users now something that was really cool that i looked up to is that in 2015 2015 aol had 2 million dial-up subscribers in 2015 in 2015 aol had 2 million dial-up subscribers they now said that they have very few like they like like in the thousands but in just 2015 2 million people still were paying for aol dial up and that&amp;#39;s just aol so when you think about progressive enhancement i don&amp;#39;t want you to think about some other places like even in just the us which has decent infrastructure we still have lots of individuals that do not have access to broadband and so then when you expand that to the rest of the world you got to think about do you want to reach people or not and you should be keeping progressive enhancement in mind i actually just got i don&amp;#39;t know if it&amp;#39;s in the room i just got a 56k modem because i want to do some fun stuff with it but yeah all right so with all that we have in mind and all that we&amp;#39;ve learned let&amp;#39;s look at this bbc website let&amp;#39;s see if we can um if we can get this going here let&amp;#39;s see if we can get get some things pop in here and see if we can start writing some code together so let&amp;#39;s go ahead and look at the bbc website right so we look at the bbc we got a few things that are happening here we got what do we have up here at the top what do we got up here at the top where we say that is we definitely know it&amp;#39;s a nav and that nav might be inside of another tag we talked about one tag very very briefly that that nav might be sitting in anybody know what that might be yeah it could be our header so we know that we know that everything on this page right you know everything on this page is sitting inside the what everything we can see right now sitting inside the what yep it&amp;#39;s sitting inside the body sitting inside the body perfect and then inside that body we know that we have our header and inside our header we probably have our nav and then inside of our nav we probably have like our ul and all of our allies all right so just by taking a quick look at this i know that i have like my header my nav my ul my lis probably my anchor tags inside of those allies and then we also have something over here that search what is that going to be a form exactly somebody says why are you well well it&amp;#39;s because we have a list of links we have a list of links they don&amp;#39;t have to be in a specific order so it&amp;#39;s not an ol since it&amp;#39;s a list of links we put them in a ul cool so if we look at this we have a header a nav ul lies maybe a form cool how about when we look here would that be big block taking up some space what would that be a section nice how about welcome to bbc.com what would that be maybe some sort of heading some folks might say that&amp;#39;s dh1 some folks might say that might be an h2 it&amp;#39;s up to you um i&amp;#39;m thinking the h1 might be one of these down here that seems really important if you come to bbc that&amp;#39;s the thing they want you to know their h1 might change a lot all right maybe we got some another section here that&amp;#39;s holding the heading the paragraph and the span maybe we got four more sections over here each holding maybe a heading and a span all right down here we probably have like another section and maybe three sections inside of that and maybe some sort of maybe like an h2 for news and then inside of those sections maybe like an image an h3 a paragraph a span maybe an image a heading a paragraph and a span right so what you&amp;#39;re seeing me do right here is something i do with every single site that i ever get right i mark it up some folks are saying are they articles so articles i think are interesting there are some people that are purist when it comes to the articles and it&amp;#39;s used just for articles like things that you would clip out and share to me these all link to the actual article right these all linked to the actual article so some developers would say oh if they actually link to the article then they&amp;#39;re not actually articles they&amp;#39;re like links to the article that&amp;#39;ll be the actual articles right and then there are some people that say actually those things could be shared so maybe you can also give them article tags as well so it&amp;#39;s kind of a decision you have to make are you a purist that says that that&amp;#39;s not really an article just links to one or is that something that could also be shared right it could also be shared and therefore is an article all right to you i&amp;#39;ll show you why i do it but don&amp;#39;t take my word for it reading rainbow you know um but what you&amp;#39;re seeing here this this mess on my screen right is what i do for every single layout if i ever am on the job or i have a client and i work with a designer and they give me a layout i i until i got an ipad i printed it out so maybe until like a year or two ago i printed it out i&amp;#39;m not ashamed to admit this i printed out every single design i ever got and i would sit down with a pencil and a piece of paper and i would draw out my boxes all right this is going to be a section this is going to be a heading this is going to be a header and i would sit there and i would draw it all out and then that just helped me think through it so that when i went to my boomer so when i went to my my my html i kind of had like a direction like i knew where i was going and so whenever i give you a design that you have to write the html and then starting next week to css for i really recommend like drawing it out some people will use some sort of program on their computer to draw it out some folks will literally print it out and draw on it but i really think there&amp;#39;s a lot of value and and drawing it out even if you just have a blank piece of paper and you draw your boxes on that blank piece of paper it really does help my brain think through all the decisions i have to make so that i can go ahead and and get through them you know let&amp;#39;s look at another one khan academy we&amp;#39;re looking up here everything we see everything that we see right now is inside the what everything we see is inside the body all right how about this area up here would that area be yep that&amp;#39;s the header nice inside the header we have the what we got the nav all right inside that nav we got some somewhat and maybe a nav and then maybe like a ul and there&amp;#39;s some some lis in there right we could definitely see some li&amp;#39;s and some anchor tags and then maybe in one of those li&amp;#39;s we have a or maybe outside of the the the now depending how you think about it we have a form we have a what how about that what would that be an image nice then these would just be like normal allies and those allies would have what inside of them yeah those those lies would have anchor tags and there are links that go somewhere to sign up to log in to donate cool all right how about this this uh white area here what could that be yep that&amp;#39;s probably a section nice inside that section we have a what would that be an image of some sort beautiful and then we have a what would that be h1 nice how about this here would that be paragraph nice i feel a paragraph there and this one&amp;#39;s tricky what do y&amp;#39;all think this could be what are those what are those to me it&amp;#39;s a it&amp;#39;s a ul with lis and anchor tags inside of them each one of those i think are links to other places they just so happen to look like buttons now i don&amp;#39;t care what they look like we&amp;#39;ll get to that with css so are they buttons or are they anchor tags to me it&amp;#39;s gonna be a ul li with anchor tags inside i can even see some people saying that&amp;#39;s also a nav right like if that if that&amp;#39;s navigation that&amp;#39;s going to take you to learners teachers district&amp;#39;s parents and that shows up on every page then that could be like a nav to me but for me right now i feel comfortable with like a ul line anchor tags inside cool about below right here i&amp;#39;m just getting to the fold another what another section nice and then how about this inside of the section h2 nice look at us go look at us go come on now look at us go y&amp;#39;all just knew every single thing on this site this is like a normal in production site and y&amp;#39;all are just blasting through this right i told you it&amp;#39;s not it&amp;#39;s not too much right like you learn some of the basics beyonce has arrived you learn some of the basics and you could start to really kind of to really do the html for these sites now we&amp;#39;re going to get to css and stuff next week but for now like y&amp;#39;all rocking and rolling with this html kudos to you well done let&amp;#39;s do one more techcrunch oh this one&amp;#39;s a little a little odd um what is everything we see inside of everything we can see right here so what are we inside of body alright when i look at this i kind of see like three distinct areas all right i see that that and that okay so what would this be it&amp;#39;s definitely a nav right definitely nev some people might throw it in a header some people might not i think it could be a header it&amp;#39;s the beginning of the document notice why i always say beginning of a document i don&amp;#39;t say top or bottom right it could be a header it could have a nav inside of it could just be a nav right uh inside of that nav we have a what what&amp;#39;s inside of that nav a ul exactly with l i&amp;#39;s and inside of those l i&amp;#39;s are probably what anchor tags nice we also have probably up here like an image that&amp;#39;s their logo or something cool how about the box next to it what would that be like this this this uh big boy over here what would this be like that whole box what would it be section i could see being a section that comes down to that argument again right is that a section is an article to me section some other folks might argue and say no it&amp;#39;s an article but to me articles are meant to be fully shared right so i would say section here and then what would this be at the top h1 i feel an h1 there yeah most important thing it&amp;#39;s like their biggest headline you come here that&amp;#39;s what they want you to walk away with how about the person underneath amanda a would to be it could be a span could also you can make an argument that doesn&amp;#39;t describe the content that comes after because if it describes the content that comes after it&amp;#39;s a heading and maybe we have to start thinking about what type of heading it might be based on how important we think it is if you don&amp;#39;t think it describes that content describes that that section at all then it would be a span yeah i might i might lean into the heading category here the heading camp on this one and then this one should be easy what would that be yeah an image cool and then we got something interesting over here on the right got something interesting over here on the right what do you what do you all think that this this uh this could be i see a lot of people saying in a side i don&amp;#39;t think it&amp;#39;s an aside i think that&amp;#39;s important content i i think it&amp;#39;s not ancillary or extra or something that they could like remove and the site still be okay i think these are like they&amp;#39;re like important stories like they want you they definitely want you to go to these stories right so to me this could be a section and then inside that section could definitely be a ul some people might just make it a ul which can be weird right but like you could just make it maybe a ul it could be a section with a ul inside of it or some people might even do a section with an article inside and those could all be all four of those could be articles i actually think techcrunch does list those as articles but to me i&amp;#39;m a purist i think articles are meant to be shared and that to me isn&amp;#39;t i think those linked to articles so for me this would be a ul well it would be a section with a ul with lis with anchor tags inside but or maybe not even anchor tags it might be headings first like h2s and either i would say spam right so that that&amp;#39;s what mine looks like i think this box is a section and then this whole thing is a ul and then each of these are list and each of those lis has a heading in them and a span i&amp;#39;m literally using my fingertip because my apple pencil doesn&amp;#39;t work for some reason y&amp;#39;all don&amp;#39;t blame look we already talked about this we&amp;#39;ve been through this don&amp;#39;t blame me blame the nuns don&amp;#39;t blame me blame the nuns we&amp;#39;ve been through this now this can be overwhelming at first right and so what i really want to put on yourself is don&amp;#39;t worry about perfection here pick the most semantic thing you can think of and go with that you&amp;#39;re gonna have plenty of time to figure all this out the high heavens give yourself a little bit of grace give yourself a little breathing room write vomit code get something on the board get it working right you don&amp;#39;t have to have it perfect it doesn&amp;#39;t have to be the best html in hell if i give this if i give this image to 10 different front-end developers i am getting 10 completely different sets of code back so nobody has this perfect right nobody has this perfect it&amp;#39;s up to you to make the best semantic decision that you can reason about and then put it into practice okay it could be inside of an anchor tag too like this stuff could be wrapped in an anchor tag like that h2 and span could be inside of an anchor tag um so like that the the whole thing that like that whole area could be clickable and that could that whole thing could be an anchor tag it seems like the box is not clickable but the heading is uh and so that gets us into some interesting territory cool are all these layers nesting yes they are they are nesting so what i want to do is i want to i want to do one quickly together i know we&amp;#39;re going to go a little over i actually thought we could end a little bit early which is you&amp;#39;re going to find as a meme i want to do one together and then we&amp;#39;ll wrap for the evenings i want you i want to i want you to get some fingers on keyboard time right once you get some fingers on keyboard time and then um i want you to we&amp;#39;re going to do a raid right we&amp;#39;re going to do a raid and then uh after the raid like after you&amp;#39;ve hung out in the raid a little bit you&amp;#39;ve given them some like some follows you shared the love a little bit uh i want you to maybe finish it up i like this tech crunch one i think this one&amp;#39;s weird i think this one&amp;#39;s weird uh and so since it&amp;#39;s weird i want to take a look at it all right i want to take a look at it so let&amp;#39;s go ahead and look at um let&amp;#39;s go ahead and look at this one so we already kind of talked through it so i&amp;#39;m just going to open up a html file all right i&amp;#39;m going to go ahead and open up an html file and i&amp;#39;m just going to do file new so on my library system i do command n it might be control n for you and what i&amp;#39;m going to do is i&amp;#39;m going to immediately save this as an html file so i&amp;#39;m going to call this tech crunch dot html so i did command n all right i did command n uh and when i did command n uh that brought me to [Music] the new file and i immediately saved that file the command s to save the file and i&amp;#39;m just going to call it techcrunch.html you have to save it as an html file if you do not save it as an html file you don&amp;#39;t get all the stuff that we kind of just walk through that can help you so now that i&amp;#39;ve saved it as an html file i can just type out the word html yep and i&amp;#39;m going to do the html5 hit enter now i have my head i have my body and i&amp;#39;m ready to rock and roll i like to indent my head and body a little respect on the html element&amp;#39;s name and then inside the body right inside the body i&amp;#39;m gonna start writing my my my html here so i have let&amp;#39;s just say that that&amp;#39;s the header and we&amp;#39;re gonna have uh an image and then we&amp;#39;re gonna have a nav with uh ul and li so let&amp;#39;s go ahead and put our header in here cool and you don&amp;#39;t have to code along for right now kind of just watch this one this isn&amp;#39;t like you don&amp;#39;t have to be coding this live like pay attention watch ask questions and then we&amp;#39;ll go over it together all right so i have my header inside my header i know i have like an image and then i have my ul in some of you i have my lis and inside my allies had my anchor tag and that anchor tag was all different stuff so it was search well that&amp;#39;s probably like a form of some sort but startups techcrunch let&amp;#39;s just say startups and i&amp;#39;m just going to copy and paste this because there&amp;#39;s like eight of them all right so there&amp;#39;s some of them and just uh to to have some placeholders when i do the octothorpe there we go so the idea here is we looked at it we said that this whole area was a header maybe like i said we don&amp;#39;t care we&amp;#39;re we&amp;#39;re trying to figure this stuff out there&amp;#39;s no perfection here there&amp;#39;s no absolutely right absolutely wrong thing inside that header we had like our logo which was an image we had uh maybe a ul with a bunch of links in it and so that&amp;#39;s what we&amp;#39;re kind of working through here we got our header the image let&amp;#39;s just put like logo in here as well as the alt we had a ul right with a bunch of lis and anchor tags in it but let&amp;#39;s think about this what is this what is this it&amp;#39;s a nav exactly it&amp;#39;s a nav and so if we go ahead we should actually put that all in a nav i&amp;#39;m going to go ahead and bring out my nav and i&amp;#39;m going to put my ul in there boom there we go so now we got a nice header we got a nice nav our ul our lis are looking good right maybe the image is inside the nav that could be true maybe the image is inside the nav that would be okay maybe we have an li that&amp;#39;s just for the for the logo that&amp;#39;s fine could be is this saved not saved nope there we go uh we also i have some other stuff in here this might be like a form we could wind up with like a form in here somewhere like we might have a form outside the nav it depends on whether or not it depends on whether or not this search shows up on every single page right if this search shows up on every single page we might we might put it in the in the inside the nav that would be okay like we can do that remember fight the urge to pick stuff based on how it looks right all right and then we could have like a text for like our search right all right so the idea being here that we could have uh image in our nav maybe the form is inside there maybe it&amp;#39;s inside one of our allies the idea here is that like it&amp;#39;s it&amp;#39;s it&amp;#39;s i want you to be a little bit free-flowing with this don&amp;#39;t don&amp;#39;t get caught up in it having to be perfect right we&amp;#39;re kind of riffing here a little bit we&amp;#39;re trying to think through the semantic decisions behind what we&amp;#39;re doing right and if it doesn&amp;#39;t have to be perfect right get the idea of it being perfect out of your head it just doesn&amp;#39;t don&amp;#39;t worry about that right now you&amp;#39;re gonna have years and years to be perfect right now get a win on the board get get some ideas flowing right think through what it should be right cool all right so we i think we got a rough idea of what the header might look like i&amp;#39;m going to save it and let&amp;#39;s go look at this next portion all right we got like this next big thing which i&amp;#39;m probably going to say is a section and so i&amp;#39;m just going to put a section after my header here some folks might argue an article here but i&amp;#39;m going to go with a section i&amp;#39;m going to have an h1 in it and microsoft eyes activision by blizzard right uh brooks you it&amp;#39;s your quality settings you have to improve your you have to change your quality settings on twitch if it looks blurry well jax thank you for the hydration cabin thank you for posture check real both thing for hydration cool all right so we got that section with the h1 microsoft buys blizzard let&amp;#39;s take a look at it again we have the amanda silverling um that could be it could be a span or it could be some sort of heading that describes the content that comes after i don&amp;#39;t know does the person&amp;#39;s name actually describe the content it is their article i&amp;#39;m not going to get up in my my feels about it for right now i&amp;#39;m just going to say a span something i might come back to right i might come back to you and say you know what that that that should be um that should be somebody&amp;#39;s like that that describes the content might come back to it right and take another look image that&amp;#39;s definitely an image for me and so i&amp;#39;m gonna go and put an image in here and i&amp;#39;m just going to put the often for now and that&amp;#39;s going to be like the i think it was like the call of duty activision there you go is it okay to be lost it absolutely is okay to be lost but uh you better jump in one of those voice channels and get help you know this is stuff that you should have seen in the shay how but if it&amp;#39;s your first time ever being in a tech center and your first ever even looking at this stuff it&amp;#39;s going to be completely just a it&amp;#39;s like a whole different language right and so it&amp;#39;s okay to be lost it&amp;#39;s okay for a lot of stuff not to make sense but you got to put in the cognitive effort to get over it right you got you got to put in the work to get there so come back re-watch the video if you have to make sure you&amp;#39;re doing your active recall whatever i do you try doing afterwards right so when you&amp;#39;re done the raid make sure you yeah yeah yeah yeah you go back you know all right so got that section there a lot of stuff we might come back and change we might add some anchor tags here or there all right we&amp;#39;ve got this last one over here like this last area i&amp;#39;m just going to say a section with a ul in it and that&amp;#39;s what i&amp;#39;m going to come over here and do cool section with the ul and then each one of those lies is going to have for me it was like an h2 we&amp;#39;ll say h2 some text and then um there was like a span which was the person&amp;#39;s name let&amp;#39;s go back and take a look real quick yep heading maybe a span and then these were all like in a in a in a list somehow cool might add anchor tags here we might might make some of these things clickable right right this whole thing might be inside of an anchor tag uh the the the text here right the text here that might be uh an anchor tag so let&amp;#39;s go ahead and get rid of that real quick so we might put like our sum text and we might make it an anchor tag right all right we might make it an anchor tag right so like i said there&amp;#39;s a lot of little things you can come back and do and i want you to play with this right the idea is i want you to play with these things so i showed you a kind of a quick run through right i&amp;#39;m going to share this file after class of course but i want you to come back i want you to re-watch this i want you to see if you can come to some of the same same ideas that i came to get the practice right get the practice of typing all this out right so i&amp;#39;m going to share this file but what i want you to do tonight like what i want you to do if you have time tonight or as part of your homework i want you to take this tech crunch right and type it out right get get this get this nav going get this section going get this this list going right i want you to do the same thing for khan academy talk through it get it going we have the same thing for the bbc homework get it going you got to practice it you gotta get into your text editor you gotta you gotta mess up you gotta make sure that things aren&amp;#39;t like things aren&amp;#39;t right right you gotta make sure that like you you you play with it right and the more you do it the more you get in there the more you practice the more you feel uncomfortable the easier this becomes okay so do what you got to do jump into a voice channel re-watch the video in a voice channel i&amp;#39;m sure you have a bunch of folks that&amp;#39;ll join you talk through together talk through your semantic decisions together if you&amp;#39;re catching up as a vod jump into the ketchup crew channel watch it together talk through it together practice it together get your fingers moving get into your text editor to break stuff it doesn&amp;#39;t have to be perfect so that&amp;#39;s what i really want you to focus on tonight is that it does not have to be perfect right you you you saw me making some guesses some educated guesses i put in there i might come back to i might change it but it doesn&amp;#39;t have to be perfect okay this is your first time right it&amp;#39;s your first time for a lot of you writing html and so let&amp;#39;s get into it when we come back on thursday yeah we shift some gears though folks we get into some css so make sure you&amp;#39;ve gotten through the shay hal reading and we&amp;#39;re going to do a little little little little raid here um we we talked about the primogen let&amp;#39;s see if they&amp;#39;re live let&amp;#39;s see i think they&amp;#39;re live yep let&amp;#39;s go and do a raid remember the when you raid you you get you get the channel points you want the channel points folks it&amp;#39;s all about the channel points all right so let&amp;#39;s go ahead and get a raid in primogen uh they&amp;#39;re they&amp;#39;re a wizard on the keyboard that&amp;#39;s what i want you to say i want you to see what you could what you could get up to like how your how fast your fingers can move uh how how uh how lit your code could become and so let&amp;#39;s let&amp;#39;s go ahead and raid prime while they&amp;#39;re live we&amp;#39;re going to the primogen uh folks asked me to say it out loud before we do it so we&amp;#39;re ready in the primogen we&amp;#39;re going to start the raid and we&amp;#39;re going to be over there in 10 seconds but please give yourself some grace get into your text editor have some fun break some things i&amp;#39;m going to see you all on thursday to do it all again cool i&amp;#39;ll see y&amp;#39;all over there folks peace a wonderful evening let&amp;#39;s raid

Transcript for:Lecture 3 Notes

Transcript for:
Lecture 3 Notes