Software Engineering & Full Stack Web Development - Class Notes

history [Applause] i&#39;m ready to be beyonce today ready to be beyonce today now the question is are you good morning good afternoon good evening where you coming from hope you all are doing well let&#39;s go what&#39;s going on everybody hope everybody&#39;s doing well hope you&#39;re ready for another class uh bobby bangers with the sub bangers only that&#39;s how we start each stream what&#39;s going on everybody let&#39;s get in here hey we we we got the slow chat on tonight so maybe a little little little a little a little easier tonight maybe in the chats to read the things but welcome everybody hope you all are doing well rufio what&#39;s up what&#39;s going on everybody hey so we got a question tonight we got a question the question tonight is rob what&#39;s going on bringing the whole gang let&#39;s go thank you for the raid we&#39;re returning the favor we&#39;re coming right back as soon as i see you live after we&#39;re done we&#39;re coming right back what&#39;s up everybody hope your stream went well thank you for joining us we&#39;re all uh we&#39;re all ready to be beyonce today so thank you for stopping by thank you for being here what&#39;s going on everybody all right so the question the question in chat today to start us off as folks get in they get the stream right they get the volume up is would you rather win a bronze medal at the olympics or be a recurring actor on one season of a somewhat popular netflix show so give me give me like actor or or metal what do you want actor or metal we should start doing polls for this that&#39;s wild all right you know it&#39;s kind of mixed it&#39;s kind of mixed it&#39;s kind of mixed we&#39;re seeing actor we&#39;re seeing metal we&#39;re seeing both i like it you know what i&#39;m gonna go with i&#39;m gonna go with i was gonna say metal metal came out so easy like it was about to flow out the tongue but i don&#39;t know what&#39;s what&#39;s what&#39;s going to last longer the olympics or or netflix i don&#39;t know see why people go an actor i don&#39;t know i think actor be more fun i feel like i had to do more to get the medal i feel like that&#39;s a lot of late nights early mornings a lot i&#39;m a big boy i&#39;m a big boy that&#39;s a lot of moving actor that&#39;s it that sold it sponsored by domino&#39;s pizza actor it is for me welcome everybody glad you&#39;re in here rob thank you for the raid what&#39;s going on all right so tonight we got a lot of stuff in store last class we set the stage what does it mean to be a software engineer what&#39;s the opportunity that&#39;s in front of you what is the internet what was the beginnings of html and tonight we continue that so we&#39;re going to lay down our first lines of code together by the end of this stream you will be a software engineer you&#39;ll be writing code with the best of them and so i hope you&#39;re ready for it a lot of y&#39;all came back i&#39;m glad you&#39;re here don&#39;t tell the wife welcome back everybody all right let me bring up the uh the slides here we&#39;re gonna go a little leon cool so agenda tonight every single stream we are going to get our spaced repetition in we&#39;re starting from the beginning and these first couple classes we&#39;re building up the steam right for some of you this might be a lot of review for some of you this might be the very first time i care about the folks that are starting from zero the very first time you can always push yourself if you want all right so we&#39;re gonna start at zero we&#39;re gonna get our space repetition in but i promise you i promise you it picks up steam it gets faster it gets harder but we start at the beginning and we get our space repetition in all right after we get started i&#39;m going to open up some time for some questions after we get started we&#39;re going to review the client server model the basics of the internet how do we make those requests and receive those responses what the heck is going on hey what&#39;s up thank you so much for the get the subs after we review the client server model we&#39;re jumping into the basics of html we&#39;re viewing those tags we&#39;re seeing some new ones we&#39;re seeing what&#39;s changed with html5 once we kind of learn the basics you&#39;re going to get the first chance to get your fingers on those keyboards right to get your fingers on those keyboards and start coding an actual assignment while we&#39;re live after that we&#39;ll show a few more html tags we&#39;ll talk about another important rule last class we learned about separation of concerns this class we&#39;re going to learn about progressive enhancement and then i will leave you to the raid and then to your homework sound good we feel good you ready to get into this all right every stream i like to start off with some questions so if you got a question you got a question for me now is the time to ask the question this just gives folks a few more minutes to get here if they&#39;re running late they had to grab the the cheetos and they&#39;re running they&#39;re they&#39;re they&#39;re they&#39;re opening up the computer they&#39;re slamming to get in here what&#39;s a raid jesus said what&#39;s a raid at the end of each stream we go to somebody else&#39;s stream just to spread a little bit of positivity uh give them some follows and say what&#39;s up what is your headband uh my headband is a buff it&#39;s actually like what like it&#39;s like a like a like you get rei like hikers use it like to keep away mosquitoes but i just like it it doesn&#39;t keep my hair too tight do you know of any coders with dyslexia yes i absolutely do uh one of my most more recent rc students had pretty severe dyslexia and where we actually were able to come up with a lot of tips and strategies on how to like work around that and they wound up getting a phenomenal job so if you ping me in the ask leon channel with just say like dyslexia resources i&#39;ll i&#39;ll share them out but yeah definitely doable ibrahim in the house hey thank you for the gift of subs how do you use anki uh we&#39;ll share some some videos that i think will be helpful but we&#39;re also going to do it in class so i&#39;m going to show you my anki decks we&#39;re going to break it all down we&#39;re going to do that next week together question if you miss class are you screwed no immediately after class the vods are available and then each weekend they go up on youtube we have to have a little bit of delay before the videos go up on youtube because we&#39;re partnered here on twitch any partners uh any any folks here that are hearing impaired yes we have quite a few uh just as a note you can turn on closed captioning on twitch you can also turn on closed captioning on available god please no no no no don&#39;t pay for anything if you are here please do never pay a dime for anything i will never ever give you a resource that you have to pay for right that that you had to pay for anki is a completely free tool you can use it for free on on mac os windows gnu linux android however if you want the app on ios there is like a 25 version of that app do not buy it you can use there are other free ones you can get or you can use the web version i use the web version a lot and the web version is completely free please don&#39;t ever pay money the whole point of this experience is to go from complete beginner to employed without paying any money to get there you&#39;ll see a lot of folks are subscribing a lot of folks giving out gifted subs i appreciate that that goes to a donation to the nonprofit i work at during the day that does not go to me there&#39;s no way for you to give me money i want this to be a completely free experience so if i ever give you a resource there sometimes are paid components to them but you don&#39;t have to like with our learning how to learn there is like if you want the certificate you can pay for it please don&#39;t do that completely unnecessary all right one or two more questions we&#39;re going to jump into it will we learn how to practice on our own absolutely we&#39;re going to build up to it though a lot of people love to come out the gate super hot right and they they they really i mean and i understand it right a lot of folks they&#39;re up against the wall and coding is the way out i understand it but i&#39;m gonna i&#39;m gonna um we&#39;re we gotta realize that this program is a jobs program okay let me say it one more time this is this is not necessarily a coding program this is a jobs program what the heck does that mean well if underwater basket weaving if underwater basket weaving let me get big if underwater basket weaving was a high-paying career if it was consistently ranked one of the happiest professions if you could learn it for free and you didn&#39;t need a degree my ass would be on this stream with with hold on i gotta get it this would be stream this would be it this is what we&#39;d be doing for the next 30 weeks right we&#39;d be sitting here this is how you do it folks this is called a cross weave this is a this is a top sectional this is a fiber material uh this this is this is the top of the line of basket weaving technology however thankfully that is not the case it just so happens that being a software engineer and full stack web development is the path to a high-paying job that is consistently ranked one of the happiest that you can learn for free and you don&#39;t need a degree so let&#39;s not get it twisted that&#39;s why we&#39;re here folks that&#39;s why we&#39;re here cool all right let&#39;s jump into it this isn&#39;t a programming course it is a programming course let&#39;s not get that wrong like we got to learn it to get to the end goal but um there are lots and lots of programming courses out there that let&#39;s be real are way more in-depth probably cover way more material that um are harder that may even be completely free but they&#39;re not geared to get you a job if you&#39;re just here to learn how to code great hang out have some fun but this is more than just learning how to code i have been teaching people to how to code for 10 plus years and across those 10 plus years i have done things the right way i have done things the complete wrong way i&#39;ve given resources that have helped people get closer to their goals and farther from their goals but we&#39;re at a version of that where i feel pretty confident and that i&#39;m just giving you straight bangers i said we only started with bangers today we&#39;re going to keep that going throughout the entire course i&#39;m not going to give you material that won&#39;t help you i&#39;m not going to give you material just because i think i should assign it i&#39;m giving you material that i&#39;ve literally seen help others get to their end goal of knowing how to code and being confident enough to get a job as a software engineer i&#39;m cutting out all the fluff i don&#39;t care about being 100 correct i don&#39;t care about teaching the the the the thing that should be like no i&#39;m teaching the thing that&#39;s going to help you get the job and i&#39;m going to make it so that it&#39;s a way where you can pick it up you can absorb it you can digest it and you can put it into practice hundreds of other places you could go if that&#39;s not what you want that are probably better harder easier to to sit through that that but no what i&#39;ve seen time and time again is that there&#39;s too much crap it&#39;s not distilled and there&#39;s no body there to help that&#39;s what we&#39;re here for cool all right let&#39;s go back to little leon here we got a lot of stuff to catch up on tonight uh remember if you are here i would appreciate you checking in please you can do exclamation point check in uh the check-in is also always in the discord messages that you get uh that link will take you to the tweet please go ahead and give it a retweet go ahead and give it a like and uh that really does help the community grow it does help other folks find us so that hopefully they don&#39;t wind up paying hundreds and like hundreds of dollars thousands of dollars to learn the same stuff they can learn here for free also this is a practice you want to get into twitter is going to be a really important tool for us as we continue on that networking piece that we talked about on tuesday twitter makes that a lot easier uh so when you check in you&#39;re using that 100 devs hashtag you can find each other you can follow each other you can start to build that network of folks that are going to help jorgen gave me the posture check all right there we go get a nice little posture check somebody says i have heterochromia i do have heterochromia how would you see it maybe i want the big leon means one of my eyes is a different color than the other that&#39;s wild thanks for paying attention all right we&#39;re making a lot of changes and there is a lot of y&#39;all a lot of y&#39;all showed up and a lot of y&#39;all came back i&#39;m so happy that you&#39;re taking this journey with us but it is definitely a surprise and so give us a little bit of time to make things a smooth and comfortable experience for everyone you can see that we made some changes here on uh on twitch we&#39;re using slow mode we&#39;re making sure that if you joined us recently so like if you&#39;re brand new to the stream uh you have to have been here for a few minutes before you can start chatting you&#39;ll notice you can only really send one message every 30 seconds so we&#39;re going to be playing with those we&#39;re going to dial it in we&#39;re going to figure out what works what doesn&#39;t work right and we&#39;re gonna make some changes right we&#39;re gonna make some changes to the twitch and then we&#39;re gonna make a lot of changes to discord uh so this weekend this saturday expect it to be wild on discord uh we&#39;ll be getting rid of some channels adding a lot of channels and making it easier to use threads and to find the things that you want to find but we&#39;re going to make it nice and neat and easy for everyone and so give us a little bit of time over the weekend myself the mods are working really really hard to make this a wonderful experience for you uh we&#39;re blessed to have so many people that are tuning in to join us on this experience and build this community and build off the community we built before and so i asked for a little bit of time a little bit of grace we&#39;re going to get there with you now one of the other really exciting things that are coming up and one of the big things that people keep asking me so i wanted to throw it out there at the beginning and that was hey leon i want i want like a smaller group i want to i want to get to know people better uh why can&#39;t i have like this type of group or that type of group we&#39;re working on it uh next week we will have a survey that will go out to all of you and you&#39;ll be able to select what type of group you want to be involved in you they&#39;re going to be like study groups like a smaller microcosm of the 100 devs community where you can get to know each other better work together and so we&#39;re gonna have it across different time zones uh different kind of languages affinities uh groups so that you can all come together and you&#39;re all gonna have your own space on the discord so you&#39;ll have your private text channel your private voice channel so just know that that&#39;s coming hopefully that&#39;ll make it easier for you to make friends and to to find the community that you deserve here on twitch and discord so just know that that&#39;s coming uh that&#39;ll start happening next week and then this weekend expect a lot of changes on twitch and discord remember we have our office hours on sunday so i&#39;m excited to see you all there remember office hours are not required it&#39;s just a time for us to come get questions answered we&#39;re going to use a slightly different format where you can upvote the questions so the only bangers get answered but yeah so lots of changes to be had because a lot of folks showed up but we&#39;re happy that you&#39;re here now i have one major ask i commit hours upon hours each day to answering you all on discord like a lot of time i don&#39;t know if you&#39;ve looked in that ask leon channel but i i just go in waves and i respond to as much as i can now the the the ask i have of you is that you please only put questions into the ask leon channel on discord don&#39;t respond to other folks don&#39;t say even like thank you just put your questions lady thank you for the hydration lady raff thank you just your questions uh don&#39;t you don&#39;t have to say thank you don&#39;t do any responses and the reason why is because i need to be able to bang through each of those questions right and be able to answer you as quickly as possible so please keep keep that channel sacred in a little bit of a way right just your questions uh just um no responses and make sure that it&#39;s like a question that only i could answer right so if it&#39;s like something general about the program when do i submit something where do i do this there are plenty of other 100 devs channels that you could ask those questions in where you&#39;re going to be able to get the help that you need all right i think uh folks found that the gift itself makes sounds and now they&#39;re using them so it&#39;s going to turn down my sound there we go cool what am i drinking i&#39;m always drinking tea most likely on on stream cool all right thank you so much for that i appreciate that thank you now a big question that came up a lot between now in class was homework when&#39;s it due ah how do i turn it in right well don&#39;t worry homework is always due a week after it is assigned so on on tuesday you were assigned the two videos by ali abdal and you were assigned the coursera course learning how to learn all of that is due next tuesday let me say it again watching the two videos and the entire the entire coursera learning how to learn course not just the first week the entire course please do not do the essays and do not pay for the certificate but it&#39;s all four weeks because it is straight heat it is the thing that will be the difference maker in your time with us here at 100 dose if you can learn all those tools tips tricks and put them into practice each class you&#39;re going to be a lean mean studying machine and i want that for you so that&#39;s why i sign it now the expectation is that you&#39;re putting in at least 10 hours a week outside of class time say again expectation right is that you&#39;re putting in like 10 hours a week outside of class time so that means those two videos and that course easy peasy right you should be able to get that done and notice i&#39;m not giving you like really wild programming assignments yet we&#39;re not there yet we&#39;re gonna work our way up to writing code and getting that kind of being the main focus but it&#39;s so much more important that you lay a foundation of learning how to learn before you ramp up in terms of your technical knowledge yeah slow degree said two hours a day yes remember we don&#39;t chunk our time we take a consistent approach so many folks so many folks start that journey to learn how to code and they&#39;re they&#39;re on the starting line and they trip and that&#39;s it they had a brief moment where as they were crashing into the ground they were studying and then that was it don&#39;t burn out don&#39;t trip out the gate be beyonce all right oh before i also move on is that the homework that is assigned today will be due next thursday so you&#39;re going to have some extra work that&#39;s assigned today that is due next thursday so next week some of those 10 hours are going to be doing not only the homework through tuesday but the homework due thursday as well now some of you well you all came back so that means something right we lost a few folks that&#39;s that&#39;s expected right we&#39;re going to lose some as people figure out like is this experience for me or not but you came back so that&#39;s great and for some folks when they start to hear all of the things that have to get done right they start to hear all right leon i need to watch videos i need to do homework i need to do all these things you&#39;re standing on the tip of this hill all right you&#39;re standing on the tip of this hill looking over into the trough of sorrow and you all have a decision to make i can&#39;t make that decision for you you all have a decision to make right do you want to become a software engineer and are you going to commit to the process what it takes to become a software engineer i can&#39;t make that decision for you what i can do over this week and next week is present the opportunity to you i presented it on tuesday we&#39;re going to present it again tonight but what i can tell you is that i have helped hundreds thousands of people go on this journey i know where you&#39;re going to get stuck i know where you&#39;re going to hit a roadblock and i&#39;m going to try and make it as smooth as a process as i possibly can so if you&#39;re standing on top of you doomy hill and you&#39;re looking over and screaming know that you are in good company now i have a secret to tell you i have a secret to tell you i tell you my secret in your arms i have a secret to tell you i&#39;m going to show you something on my github github is a place that you can store your code so you can share with other developers on my github i&#39;ve and don&#39;t you all do this this is this is this is for other people on my github i&#39;ve had this for a very long time if you&#39;re learning how to code i&#39;m happy to build you a custom learning plan that takes into account your strengths and what you want to learn this has been on my github for a while but i&#39;ve also made this promise to lots of folks at my day job i run a boot camp called resilient coders and we have hundreds and hundreds of people that come to learn how to code at resilient coders we used to have open office hours before the pandemic where anyone from the city could stop in meet us and i would build them out a custom learning plan now what i always told these individuals was hey i will happily build you out a custom learning plan i will build out the next couple weeks for you i will meet with you every week we&#39;ll go through it together we&#39;ll make sure you get unstuck when you get unstuck but here&#39;s what i want you to do first here&#39;s what i want you to do first i want you to do the first segment of free code cam i want you to do the html and css all the way to that first that first project do it and when you come back to me i am going to build you out a full plan i will be your mentor i will meet with you week by week by week okay i gave that promise to hundreds of people let&#39;s say out let&#39;s say the first hundred out of the first hundred people i made that promise to just do this first section of a of a program come back to me and we&#39;ll work out the rest out of that first hundred how many you think actually came back to me with it done some people already know how many out of the first hundred that i gave that promise to how many came back to me with it done two now that&#39;s nothing against free code camp i love free code camp i think it&#39;s a great way to get some some practice in but it speaks to something bigger it&#39;s that a lot of folks come out the gate wanting to learn how to code but something happens something happens something happens that stops them from getting to the thing that they wanted people are saying stress sadness burnout they&#39;re so the devil there are so many things that will stop someone from being successful at learning to code even if they really wanted it and we talked about some of the solutions to these problems but i have found a method that increases the success rate of that gambit that i&#39;ve given to people so the first thing that helps people when i give them that first assignment to actually get through that trough of sorrow to get through that initial push of wanting to learn how to code that very first thing is community if they don&#39;t have community they don&#39;t come back the students that would come back to our like open office hours every week those were the ones that actually continued on the path to learning how to code right it was the folks that that knew when they sat down the room they were around other people even if they didn&#39;t talk to a single person in that room just being in that room knowing that other people were grinding out learning how to code that energy right that made them more successful so community was one of the very first things that i saw that unlocked the ability to actually get over that initial hump of learning that&#39;s why all of us being here together is so important right it&#39;s why us coming together on tuesday thursdays and sundays is important it&#39;s why discord as wild as it is right now is so important there&#39;s a reason i don&#39;t use a forum there&#39;s a reason why we make it so that it&#39;s live there&#39;s a difference when you&#39;re with folks that are going through the same experience there&#39;s a difference when there&#39;s folks that will help you get unstuck and there&#39;s a difference just when the energy is in the room and so i am glad that you came back here i&#39;m glad that you want to go on this journey together and i&#39;m glad that you found us because we&#39;re going to work tirelessly to build a community that supports each and every single one of you on that journey to learn how to code so that that two is a number that i don&#39;t ever have to talk about again now we talked about the other things last class that help folks make it to the end and screw making it to the end let&#39;s make it to next week first so many folks come out the gate should i do this tutorial should i do that tutorial i&#39;m freaking out like there&#39;s so much on the line let&#39;s let&#39;s just chill for a second let&#39;s get the next week we got 30 of them let&#39;s let&#39;s get the next week first let&#39;s get the next week first you&#39;ll have plenty of time to go chase that thing in that thing let&#39;s focus maybe for the first time in a while let&#39;s focus on one process one way of doing things and let&#39;s do it together so that we can make it to next week and the next one and the next one there are lots of other things that could take up your attention that could suck up your mental energy for learning but what i&#39;m telling you is i have laid a path that has helped thousands of people learn how to code and hundreds get jobs and i&#39;m gonna keep saying that you don&#39;t need to take my word for it i make these claims i check the weather and it&#39;s real hoppy outside i always check the weather when i make these claims it gets real real hoppy outside and so what i want you to do is to not to not take my word for it but go to the celebrations channel don&#39;t spam in the celebration channel but go to celebrations channel i pinned 50 folks that got jobs that were celebrating this community that we&#39;re celebrating that this community was the thing that helped them get across the finish line so don&#39;t take my word for it literally just go to celebrations channel look at the pinned look at the pinned messages that are in that channel and i pinned 50 of them you know why there&#39;s only 50. know why there&#39;s only 50. there&#39;s only 50 because that&#39;s all it lets you pin i could keep going baby i could keep going i could keep going but that&#39;s the limit that is the limit that&#39;s all they let me do so that&#39;s what i had to do that&#39;s what i had to do they said they only get 50. that&#39;s what i had to do i pinned 50 because that&#39;s what i had to but guess what there&#39;s more [Music] go check all right that&#39;s all i got to say about that i pin 50 because that&#39;s all i could pin only bangers we don&#39;t get got all right so we talked about community we go get exactly we don&#39;t get got we go get around here all right 10 50 what so i went into the celebrations channel and i pinned every person that mentioned getting a job and celebrating this channel so don&#39;t take my word for it ignore the ops go take go take a look for yourself all right now the the other things that we talked about that get you off of this this hill of of damnation we talked about community being one of the secrets but it&#39;s that idea of managing frustration right all of you all are about to get frustrated like real frustrated there there&#39;s there&#39;s no way that you make it through this program without being at a point where you want to give up every single one of you&#39;re going to hit that point and the difference between folks that make it from here to the end are simply individuals when they have the privilege of being here don&#39;t give up now the next thing we talked about was that consistency making sure that we&#39;re not chunking our time we learned we learned right we learned that if we chunk our time if we just study all day saturday that that is less effective as a study habit than it is to spread out our learning each day no chunkers there you go and the last thing that i see folks time and time again trip up on is they don&#39;t take care of themselves they don&#39;t take care of themselves they they burden themselves with having to juggle 14 different tutorials and feeling like they got a grind leak code until their eyes fall out they&#39;re staying up until three o&#39;clock in the morning because they got a code code code when they would be way better off having stopped six hours ago had some tea given a light stretch and gone to bed so give me give me a couple weeks give me a month give me a month to paint a picture at the end of the month if you&#39;re like screw it leon i don&#39;t like this you can go it was free you can go but i think if you give me that month to show you that you can manage that frustration that you can be consistent that we can create a space where not only you are learning but you are taking care of yourself i think you&#39;re gonna find that maybe for a lot of you it&#39;s the first time that a lot of this clicks now part of that consistency right part of that consistency is making a plan you gotta make a plan you gotta make a plan for how your days are gonna be structured a lot of folks wake up and go into their day like an accident you can&#39;t do that anymore if you&#39;re committing to becoming a software engineer and learning everything that it takes to get to that job within these 30 weeks you got to wake up with a plan so what i do is every month i plan out my month every sunday i plan out my week and then i plan out every single day my google calendar i wish i could show it to you every single day has exactly what i should be doing and where i should be if it&#39;s not on my calendar it does not happen and that&#39;s that&#39;s a symptom of some of the issues i deal with day to day but for me that&#39;s the that&#39;s the way that the plan works so one of the things i want you to do this weekend is to make a plan what are your days going to look like when are you going to study what works for you right and then you must realize that you might have to get some other folks involved right a lot of you have partners or a lot of you have family or a lot of you have jobs or other responsibilities you got to plan that in you got to have those conversations with those that you care about saying hey look i&#39;m committing to these next 30 weeks because i think it&#39;s the best move for myself for you for our family for our friends and so i&#39;m gonna need some time some of you might actually have to ask for that time because it&#39;s not a given some of you might have to realize that studying in the morning is way easier than studying at night and so make a plan if you want to be one of the folks that make it to the end they all had a plan they didn&#39;t go into each day hoping to find the time to study that time the study was already on their calendar and that calendar was already shared with their partner cool now talked about the the other kind of little tricks that i&#39;ve noticed that help folks get through the beginning stages of learning how to code community is the biggest managing frustration being consistent with a plan being consistent with a plan taking care of themselves getting good sleep hydrating every single one of my resilient coders cohorts every single one somebody goes to the hospital every every single one we&#39;ve ever taught somebody&#39;s gone to the hospital every single one and it&#39;s always because their hands start to hurt their hands start to hurt they start to get really serious pain in their forearms and their wrists and their fingers and that&#39;s always because when i said this very important thing take care of yourself they don&#39;t do it so when we take those breaks at the top of the hour please take that break get out from your chair right if you&#39;re able to walk around if you&#39;re able to make sure you&#39;re letting your eyes focus on something that is not what you&#39;ll be focusing on let your hands relax shake them out give a little bit of a light stretch i&#39;m going to share some videos next week on the stretches that i do to stay healthy i&#39;m a big boy but i still stretch every day i have a a split keyboard a rollerball mouse like i i take this seriously and so that taking care of yourself is a lot it&#39;s it&#39;s understanding that what you&#39;re about to do you might not have ever done before hitting all those accessory keys makes your fingers move in ways that unless you have some people play saying they played piano unless you play piano you&#39;ve never really stretched your fingers in those ways you&#39;ve never stretched your forearms in those ways it is a serious toll on your body so you have to take care of yourself right you got to get that sleep in if you want memory consolidation to happen so they&#39;ve made a plan they&#39;re taking care of themselves and then here here&#39;s a cheat code ready for a cheat code tell someone i want every single one of you right now to tell someone that you are becoming a that know [ __ ] that that you are a software engineer and that you are committed to learning web development over the next 30 weeks tell someone if you don&#39;t have someone to text or call put it up on twitter put it into the void all right tell someone i&#39;m serious i&#39;m gonna stop right here i&#39;m gonna put the tunes on go ahead i&#39;m gonna put a timer up i&#39;m gonna give you a minute you want the chico this is it it&#39;s that commitment tell someone go for it i&#39;ll wait you&#39;re a software engineer you&#39;re committed to learning web development tell someone oh oh [ __ ] i didn&#39;t even realize hold up [ __ ] that was not intentional all right got 20 seconds left to tell someone done i see a bunch of duns nice all right there we go all right let&#39;s come back you told someone beautiful that was the first cheat code you ready for the second cheat code i gave you the first one telling someone does something to our brains where we have to be more successful are you ready for the second cheat code here&#39;s the second one [Laughter] now tell everyone tell everyone put it public go on your your your your instagram your twitter whatever it is tell everyone i&#39;m serious whatever social media you use the most where the most people that care about you will see it put it software engineering my journey becoming a full stack web developer do it put in your bio live that life i&#39;m going to give you another minute for this you got that you got so i&#39;m telling you you asked leon what are the tricks what are the secrets there&#39;s there&#39;s there&#39;s i guarantee you at least a thousand of you that are not going to do this and in a couple weeks from now when times are getting tough and you&#39;re like leon my brain&#39;s just not working why can&#39;t i sit down and study more it&#39;s because you didn&#39;t do this right now my students that share publicly what they&#39;re doing their aspirations the things that they&#39;re working on they succeed you got got i&#39;m gonna be with you got cop don&#39;t you take the 20 seconds hold your family good twitter bio is updated wonderful kimberly&#39;s boyfriend looked at them sideways that&#39;s all right you&#39;ll see kimberly they&#39;re going to see they&#39;re going to realize wonderful that&#39;s the secret folks that&#39;s the secret you put it out there people now know and here&#39;s the beautiful thing about this you will be surprised how many folks are in your network that are also software engineers or that needs somebody to build a website to do things so the more you put it out there the more that comes back your way now you&#39;re a little bit more accountable you&#39;ve built up some things here that are that are in your favor all right you&#39;ve built up some things that were in your favor you&#39;re committing right you&#39;re committing to a community a community that you&#39;re going to support and then in turn is going to support you you&#39;re committing to knowing how to manage your frustration or at least working on it knowing that in the moment when you are frustrated there&#39;s something that you are going to work on you&#39;re committing to consistency and a plan for each one of your days to learn how to code you&#39;re committing to the idea of taking care of yourself not over extending taking breaks when you need them or should take them and getting good sleep you&#39;ve told someone you&#39;ve told everyone now you got to do it and on the days where you feel like you can&#39;t do it guess what we&#39;re here to help all right last class we saw uh the amazing amazing active recall uh anybody get a chance to watch the videos yet they&#39;re amazing i hope you got a chance to watch them already if not you&#39;re in for a treat this weekend active recall the idea the idea that i can do a fourth of the work and get better results is mind-blowing we know that if you were to just read something once and then actively recall the things that you learned you were better off than rereading that material four times four times folks you&#39;re better off once and a recall versus four times come on now now here&#39;s the real question we had a lovely raid phenomenal raid rav is one of the best people on this earth always in our discord helping everyone but after that raid the active recall did you actively recall the things that we learned yes i&#39;m looking at you you right there in the back right there did you actively recall because if you didn&#39;t you [ __ ] up if you didn&#39;t you [ __ ] up so that&#39;s all right it&#39;s all right all right all right it&#39;s cool all right it was the first one you didn&#39;t listen to me that one listen to me now when you go through these classes remember we&#39;re not taking notes we know that&#39;s an inefficient right it&#39;s an inefficient study habit but probably taking questions is a really good idea right so taking questions so that at the end of stream right at the end of stream you can go to the raid have some fun hang out i&#39;m always hanging out post raid and then when the raid&#39;s done you feel good you look through your questions right you look through your questions and you actively recall now today right today right today you&#39;re gonna get into more material right you&#39;re gonna get into more material and so today it&#39;s really important that you do actually actively recall post class you could have got away with it a little bit last class but no more classes will you be able to get away without actively recalling okay and that&#39;s because learning to code is a cumulative career the things that we learn today are things that you&#39;re going to have to put into action next week the week after months from now years from now and so we have to flatten our forgetting curve right now if you put in all the work if you watched all the videos if you paid attention the whole class you actively recalled after that class there is still a good chance that by day eight you forgot everything there&#39;s a good chance even if you did everything right you came you took questions you actively recalled right all right there is still a good chance that in eight days you will have forgotten something and so we need to flatten our forgetting curves right we need to flatten our forgetting curves and make sure that you&#39;re using some sort of space repetition tool like enkei enki will stop this forgetfulness from happening and so please when you make your plans this weekend and you&#39;re setting up your days for studying and for class don&#39;t forget to include anki i can&#39;t use it unless you show me leon no that&#39;s not how this course is gonna work you are all gonna get super powers your ability to google will be next level your ability to figure things out will be next level and then when you really have given it the good old boot camp try right when you&#39;ve given it the good old boot camp try you&#39;ve researched you&#39;ve put in the work and you can&#39;t figure it out and you come to discord we&#39;ll be there to help you all right but you got to take control all right you got to be the type of person that solves the problems that comes their way because that&#39;s what a software engineer does we solve problems that have not been solved before and we get paid good money to do it so you need to start practicing that right you got to start practicing that every day now i&#39;m not going to skip the good stuff or the big stuff we&#39;re always going to have classes on it we&#39;re going to have a class on anki but please before you say oh what about this what about that give it a try get into that mode of researching exploring trying to figure out on your own before you come to the community to get unstuck it&#39;s freeing right it&#39;s being freeing all right there&#39;s people saying like start already leave go don&#39;t you don&#39;t have to be here but close your eyes like take out your headphones and like walk away uh this is called spaced repetition if you were here last class you know what we&#39;re doing every single class is going to be like this right every single class is going to be like this where we spend a good 30 minutes plus reviewing because folks here are starting from the beginning you can go do some other tutorial you can go do some other stuff if you want you don&#39;t have to be here skedaddle leave sayonara i i don&#39;t need you here because every single class guess what we&#39;re going to start off by actively recalling getting our space repetition in and in the beginning it&#39;s going to be a third of class as we get further into the course guess what we don&#39;t need to repeat as much right you don&#39;t have to repeat as much if you don&#39;t want to be here don&#39;t be here i don&#39;t know why you&#39;re here go i&#39;m looking cute today that&#39;s what it is that&#39;s all it is folks i&#39;m looking cute today it&#39;s my my raw animal magnetism that&#39;s pulling them in they&#39;re staying here for that i understand i get it you came here for the code you you met me and now you&#39;re in love and like you just can&#39;t go away so you&#39;re you&#39;re frustrated you don&#39;t know how to handle the the the the feelings that you have right now that&#39;s okay we&#39;re here for you but uh you can just close your eyes that&#39;s all you got to do alrighty alrighty now to continue our space repetition i got him [Laughter] got him to continue our space repetition and we say bye-bye we got him oh and we say bye-bye to continue our space repetition um we are going to talk about what is the internet we&#39;re going to review the basics what the heck does a front-end web developer do what does a back-end web developer do why are we software engineers but also full stack web developers so we&#39;re going to review that but before we review it it&#39;s top of the hour this is the top of the hour we must stay healthy must be beyonce we must take our break so let me go ahead and slide up the five minute timer here we&#39;re going to take our full five minutes cool put some tunes on please if you are able get up stretch move around go to the bathroom say hello to your loved ones i don&#39;t know play with your your rubik&#39;s cube whatever whatever gets you going during the break to get you away from the screen moving around let your eyes focus on something else and we&#39;ll be back in four minutes and 38 seconds cool all right folks uh please take that break i am going to take the break myself and i will see you soon if people want bob you&#39;ll get bob you um so my do you how are you liking the eagles chances this weekend i don&#39;t really follow football i know i&#39;m a bad philadelphian i don&#39;t really follow sports honestly other than like rugby basically my grandfather calls me and keeps me up to date i&#39;m from california is the philly cheesesteak that good it&#39;s the best the best of the sandwiches by far bill&#39;s on 24th street best cheesesteak spot in philly mods if anybody says something other than phil&#39;s in 24th street give him a light band something he&#39;ll eat a real flu cheese steak do you fancy ponyta&#39;s there was um a meta a couple years ago that was like the rapid dash and like the ponyta meta there was a meta deck that was really good my google calendar is much more busy now let&#39;s go all right folks come on back come on back uh you can actually see if you do estimation point pokemon in chat there is like the list of pokemon cards that are available for um channel points and i send them anywhere in the world it&#39;s another bunch you can see that you can see what&#39;s on the list there all right folks come on back hope you had a good break yeah hold on let me see if i can grab the list here yeah so we can see here we got some good ones and these values are way off now like way off in terms of value i have no idea what these cards are worth right now but we got some some good cards here we got like the full the full legendary sets which are pretty cool um i used to run a typhlosion deck that was really like a big deal in one of the older metas um so i got a bunch of like the good typhlosions yeah so there you go something some other fun things you can do at channel points if you would like remember channel points you just get by being here so the more you&#39;re in stream the more channel points you get and uh when we do raids if you do the raid you also get channel points favorite pokemon is bulbasaur all right let&#39;s get back into it folks we got a lot of stuff to get to tonight and so i want to make sure we we cover it all let&#39;s come on back come back from your stretches grabbing your water and let&#39;s go through this together all right so last class we talked about what the internet is so chat what is the internet a wire it&#39;s wires series of cables how i get milk series of tubes wires across oceans yeah it starts off with a wire right and we can actually look at these transatlantic internet cables and see them so we got these like big beefy cables that lay across the ocean and we can see that there&#39;s a bunch of them all across like connecting all the countries together um these were like originally telegraph cables like the first people to do that and then like eventually they became fiber cables and other wonderful stuff now and so there are a lot of these right these are there&#39;s a lot that we know i&#39;m sure like high frequency trading firms and like um other governmental agencies have their own as well but there&#39;s a lot of these cables that connect around the world in fact there was this trading firm that ran a cable from new york to chicago just to get a better connection which is pretty cool and so we have these wires that we can send data across and the idea of the internet is that we can have this system that relies on top of this protocol called http and it&#39;s a system where we can send requests and get responses and it&#39;s a system where we can make requests from our client-side devices and get a response from our server what type of code runs on our client-side devices that we know of so far what type of code do we know that runs on our client-side devices html css javascript yup these are all client-side like all code that runs on the client side and so someone that specializes in that html css and javascript the html that we&#39;re going to be writing today somebody that specializes in that html that css.javascript what would we call them like what would be their job title yep they&#39;d be a front-end web developer right they&#39;re a web developer developing stuff for the web but if they focus just on the client side they focus just on the stuff that runs on our phones or tablets or desktops in the browser we would call them a front-end web developer now those devices make requests to our servers and our servers do a lot of stuff the primary thing that a server does is it listens for those requests and there&#39;s some code that&#39;s running on it that knows how to respond to those requests sometimes it hears a request from our client side device and it needs to talk to a database or it needs to process a credit card or it needs to just respond with some things right so the code that runs on the server if you focus just on that what type of developer would you be someone that just focus on stuff that runs on the server yeah you&#39;d be a backend web developer and then just the last question here if you worked on both the server side and the client side both the front end and the back end you consider yourself a what a full stack web developer and that&#39;s exactly what we are to be here we are full stack of developers now if you&#39;re someone that can write code conduct yourself as a professional knows the tools and systems behind the code that you&#39;re writing maybe knows a little bit more about the the math and the the the efficiency of the code you&#39;re writing what would you call yourself you would call yourself a software engineer exactly so after today we will all be software engineers that focus on full stack web development right you just told your friends that&#39;s what we&#39;re doing here we&#39;re trying to become full stack web developers right we&#39;re already software engineers but we&#39;re going to focus on full stack web development we could go write code for robots we could go write code for refrigerators we&#39;re focusing on a skill called full stack web development and the reason why we&#39;re focused on full stack of development is solely because of job demand right now there is an overwhelming amount of demand for web developers specifically folks that know the front end and the back end and the beautiful thing is you only need to learn one language and that&#39;s javascript because javascript works both on the front end and the server side by something called node right so there&#39;s this beautiful window open right now where we don&#39;t have to go and learn ruby and rails we have to learn python we can learn javascript and write code both on the client side and the server side it&#39;s a good time to be alive folks all right now last class i said separation of concerns was the golden rule the most important thing that i was going to teach you right why is this rule so important why do we why do we want our html separate from our css our css separate from our javascript why is that important yeah for organization exactly when we come back to our code a month later we wanted to be able to go to a place and figure something out right you want to know where to go if we&#39;re working with other developers we want to be able to tell them where to go and look to find things so if i said to you hey i want to make my pizza ordering app right i want i want to be able to drag the ingredients onto the pizza shout out dominoes right i want to drag those ingredients onto the pizza what what technology am i using yeah i&#39;d be using javascript and if domino&#39;s comes out with a new ingredient that they&#39;re now making available to all their pizzas and they have to update the content on that website what technology would we use to list that new ingredient yeah be html nice and if that new ingredient is blue all right if it&#39;s blue i don&#39;t think i can use green if i use green i think it&#39;ll get chroma keyed yeah that&#39;s green it&#39;s just chroma keyed outside the green screen behind me so if it was blue or green do blue get chroma keyed no it&#39;s interesting it was blue or green what would we use yeah css cool so if domino&#39;s adds a new ingredient that content that&#39;s html if that content is gonna be blue or green that&#39;s css and then if they wanna make it so they can drag it onto the pizza that&#39;s all javascript we learned some stuff last class look at us look at us chat hey proud of you keep it going keep it up all right we also learned the beginnings of html now we we briefly mentioned that html and css are not really programming languages they&#39;re what we call markup languages uh alan turing modern grandfather of computer science had this completeness test that said if you give a language like an operation and you get a response back then you might be dealing with like a programming language so if i was to give html two plus two i&#39;m never getting four back if i was to give css five plus five i&#39;m never getting 10 back but if i was to give javascript i don&#39;t know three plus three it&#39;s gonna give me six back all day long right and so that makes html and css not full programming languages but rather markup languages but they&#39;re all languages the same and just like any language there&#39;s gonna be spelling and grammar rules that that language has to abide by like when you&#39;re writing spanish you have the enyes right like when you&#39;re learning other languages you might have special characters right that you could use each language has its own spelling grammar punctuation that makes it up when we&#39;re talking about markup languages and programming languages we call that syntax right so each language will have its own syntax thank you mac thank you for the hydration cheers to you each language has its own syntax all right now the beautiful thing about html is that we have an opening tag and a closing tag every bit of content that you have on the page must be wrapped in tags and sometimes those tags we give them a little bit of like a super power and we call those super powers an attribute value pair for today and next week we won&#39;t really have to worry about too many of these attribute value pairs there are kind of like two that we&#39;re going to run into a lot when we have links that link has to go somewhere so there will be a special attribute value pair for that and then when we get to images they&#39;re going to need like a source that shows you what image to show so outside of those we won&#39;t really see too many and today we&#39;re going to cover the basic tags that you need to be successful for building pretty much any website we&#39;re gonna learn about 15 tags today they&#39;re probably around like 30 that i use day to day and there are a bunch more there is a wonderful website however called the mdn the mozilla developers network it&#39;s by the people that make firefox well they have this documentation for html css and javascript it&#39;s actually linked as part of your homework on discord but anything that you would ever want to know about html is on this site and it&#39;s beautiful it&#39;s perfect it&#39;s always good and so you&#39;re gonna typically keep the mdn open while you&#39;re working on this stuff okay jasmine don&#39;t worry we&#39;re gonna we&#39;re gonna talk more about those actual value pairs give me a chance to show you one live cool with w3school suffice no get out of here run absolutely not absolutely not so what happened with w3schools is remember we talked about that world wide web consortium the w3c that certain burners lee created well w3 schools just kind of like took that name right and built out like their site and when it first started it was horrendous like it was really bad and they always had wrong stuff on there they didn&#39;t update it and so it was just it was just bad all around and it was the bane of my existence because they had really good seo it always showed up but it just led my students astray they over the past few years have like modernized it and made it better but they don&#39;t get a pass they [ __ ] up they ruined the web for a while so it&#39;s over we&#39;re not making up they&#39;re done so no get out of here mdn is where it&#39;s at we also took a quick we took a quick peek at this first kind of throw at html i didn&#39;t want you to type any of this stuff i just wanted to show you some html and we were kind of running out of time so i went a little bit quicker day ops exactly raised adam to add them to the ops list uh we we added some html here you can see that all of my content right all of my content is wrapped in tags there&#39;s not any text that is not wrapped in tags you can see that everything is wrapped in these lovely tags right this is vs code yep yes code now we have here this last paragraph and this last paragraph is appropriately wrapped in that paragraph tag remember each tag that we choose has a rhyme and reason like the purpose behind why we would pick that tag anybody remember what what that&#39;s called like the purpose or the rhyme and reason behind why we chose that tag the specific word for that yes semantics the semantic meaning yes so this was a big block of text so semantically it is a paragraph so i wrapped it in a paragraph tag beautiful now if we were to read this paragraph however let me read it if you would like real-time answers to your questions please join our discord here what the heck does here sound like what is what should that be a link yeah it should be a link so in html we have a tag that handles links okay we have a tag that handles links and so that tag is an anchor tag so i&#39;m going to go ahead i&#39;m going to open up my a tag then i&#39;m going to go around the text where i want it to close and then notice how the closing tag simply the only differentiation is that it has a lovely forward slash so the open tag and the closing tag are the same except for that forward slash however remember we talked about those super powers right we talked about how sometimes we need our tags to do a little bit more right we need our tags to just be able to do something a little bit extra and so our anchor tags which are for our links has an attribute value pair that we can use i don&#39;t like this uh go into the new line has an attribute value pair that we can use right that is called an href so the href equals and then inside these quotes i can put the link so our discord link is https forward slash forward slash leon noel.com discord right that&#39;s the actual link to our discord now the text right the text that will show up in the browser and don&#39;t worry about following along right now i&#39;m just showing you you shouldn&#39;t be typing anything right you&#39;re here to absorb right now right what you&#39;ll notice is that this text here will still show up however when i click on it it&#39;ll go to this link that&#39;s the power of having an attribute called an href our anchor tags or our link tags can have that href that&#39;ll take the user somewhere now something interesting about this page right now this page is not saved can anyone in chat tell me how i know i have not saved my work what does href stand for it stands for hypertext reference remember how we said that the protocol that the internet uses that http that hypertext transfer protocol well this href is a hypertext reference it&#39;s old school it&#39;s how the internet works yeah this dot at the top right this dot at the top tells me that my start at the top tells me that my file has not been saved right and so as soon as i save you can see that that dot goes away right as soon as that dot goes away i can&#39;t even repeat that but it&#39;s hilarious uh as soon as as soon as we um save that dot goes away and we are able to now go ahead and open this uh go ahead and open this in our browser so irish you already have it open and if i come over here and i refresh we&#39;ll notice that this here right this here right this here is underlined and like purple or blue why the heck is this like underlined and purple why the heck is the the h1 big bold black and beautiful much like myself why is that all there what happened yeah that&#39;s automatically coming from the browser remember how we said the browser wars back in the day on tuesday every browser is kind of fighting to be the best well there are still some things that browsers do by default and if you are a front-end web developer this is one of the things you have to think about when you start a project there are many ways to handle this problem of having not written css we didn&#39;t write any css we didn&#39;t write any css so this shouldn&#39;t be happening this is one of the things that uh we have to start remembering i like to call these money problems because they&#39;re problems but that&#39;s what makes us the money because we know how to fix these and as we go on i&#39;ll show you how to fix these right now however when we write html do i care how it looks let me say it one more time when i write html do i care how it looks no i don&#39;t i&#39;ll be able to fix all of that right i&#39;ll be able to fix all of that when i get to css right when i get to css i can go ahead and fix anything that looks the way i don&#39;t want it to look right and so what i want you to make sure that you&#39;re doing right is make sure that when you&#39;re writing html right when you&#39;re writing html do not care what it looks like we&#39;ll get there with css cool all right so we looked at that about page and um what you&#39;re going to notice is there there are some rules when it comes to html right and one of the things you might be saying is leon who cares who cares if i use the semantically appropriate tag like why does that matter right why does it matter if i use the semantically appropriate tag well there are actually three big reasons why you should care about writing semantically appropriate html like picking the right tags and using them correctly one of the first reasons is that if you do not use the appropriate tags and the appropriate attribute value pairs your content might just not render so for our general users if you&#39;re not using the regular tags right if you&#39;re not using the regular tags you might not give your users a good experience things might break they might not be in the right spot and so using the appropriately semantic tags means that your general users are going to have good content displayed the way that you wanted it to be shown now the second set of users we want to be concerned about are folks that may be using accessibility devices folks that may be consuming the web in a way that the general public might not we&#39;re talking about things like screen readers things that make it easier for certain folks to use and consume the web if you are not using the appropriate semantic html tags things like screen readers have a more difficult time moving through the content of your page right and then the last users that we want to be concerned with are web crawlers we want to make sure that when google tries and comes and figures out what our site is about so that it can list it in the search engines right we call this seo search engine optimization if we do not use the appropriate semantically structured html tags google will not rank your content so i like to say we have a moral reason and a greedy reason morally i hope everyone in this person every person in this community cares about accessibility and uses the correct and appropriate html tags so that folks have a better experience on the web but then there are also greedy reasons first the greedy reason is that you want your website to rank in google and if you&#39;re not using the right tags it won&#39;t show up in google and then the other greedy reason is that individuals using accessibility devices is a large portion of the internet you have a lot of your customers future consumers of your content that are using accessibility devices and if you don&#39;t use the right tags they won&#39;t be able to enjoy it so pick which one you care about but remember remember you are all newly united developers of the web it is your job to go out there and do good and with this information that is your mandate cool now we&#39;ll we&#39;ll cover more accessibility stuff as it goes on um for today we&#39;re not going to go too deep into it but we&#39;re going to have a full class on accessibility all right now i would like to take a look at some tags remember we said every html tag has a specific reason right that it would be used and so we want to look at some tags and see all right in what situations would i use that tag what is the semantic reasoning behind that tag when we choose tags to write in our html it comes down to two things it comes down to the semantic importance behind that tag and it comes down to the importance behind that content right so folks are having some trouble with the closed captioning we&#39;ll have to figure that out when we take a break i&#39;ll double check alrighty now this right here was a uh this was a youtube rabbit hole for me right this right here we&#39;re gonna look at some tags and i don&#39;t mean this type of tag i mean like the html tags and so the this was a pretty deep youtube poll this is this is like a weekend or two of just consuming content this is competitive tag imagine if the sport of tag had a full community an audience and brought in all the best free runners and parkour specialists to play tag yes the ocho exactly uh it&#39;s amazing i watched every single episode i could find on youtube so tonight i&#39;m not talking about competitive tag i&#39;m talking about html tag got the store army in here i see y&#39;all all right so here are the first set of tags that we&#39;re going to look at all right here&#39;s the first set of tags we&#39;re going to look at we&#39;ll look at heading elements these are called heading elements you&#39;ve seen heading elements all the time heading elements are the elements on a page that describe all the content that comes after it so if you&#39;ve ever been to like say a news website you&#39;re typically going to have like a heading that describes the article that comes after it right and so when we&#39;re looking at our content we might have multiple headings throughout the page and there are six kinds of headings you can have an h1 a two a three a four a five or a six typically the most important content on your page the thing that describes the page the best or whatever else is to come that heading gets the h1 right so if that content is the most important how many h1s do you think we should have yeah you should have one h1 it is the most important thing on the page so you should have one now there&#39;s that this is this is how i know that i know you&#39;re watching there&#39;s just somebody that literally when i said there should only be one h1 this is what they did they went only on i don&#39;t know i don&#39;t know about that there is this one there&#39;s this there&#39;s this edge case there&#39;s this edge case technically with html5 semantically each section could have its own h1 like that that&#39;s that&#39;s changed now like that&#39;s different they couldn&#39;t contain themselves they&#39;re like they&#39;re literally yelling at the screen right now they just they just can&#39;t contain it um that that they&#39;re all there they had they had to hit up stack overflow yet today like it just boiled out of them they like it just fell out their mouth they couldn&#39;t they couldn&#39;t hold themselves back yes the codeweenies i don&#39;t care about them it&#39;s not the time to nitpick we&#39;re all here trying to get the general picture there will always be edge cases right there will always be caveats to the things that we&#39;re learning but when it&#39;s day one of html on your journey to become a software engineer you don&#39;t need to give a [ __ ] about any of that release yourself feel the weight come off your shoulders to not write perfect code we love we love we love to write vomity code here right we love to write vomiting code i&#39;ll bring this little this little logo up whenever i&#39;m writing vomit code because i just don&#39;t care remember this isn&#39;t this isn&#39;t a coding tutorial this is a jobs program i&#39;m trying to get you to have a wide breadth of knowledge that you can use to build out a series of amazing projects to get clients and ultimately get the job they&#39;re going to be some things that are chunky vomity that don&#39;t look good but i don&#39;t give a crap because i rather you learn than become a codeweeny and if you&#39;re not okay with that that&#39;s fine some people have to be perfect they have to be right but that&#39;s an awful lot of energy to expend when you still don&#39;t really know that much about html let&#39;s get the job done let&#39;s get our sites built right and then we can worry about being perfect i really like to hearken this to learning a language some people will sit there and study the conjugations of the word to be for five hours instead of having a conversation with someone you&#39;re way better off having a conversation than you are sitting there conjugating in the dark room by yourself don&#39;t be that person get the wide breath of knowledge be able to build be able to bring things into existence to make things exist that did not exist by the end of this class you will be able to build basic websites it doesn&#39;t matter if you got the semantic update to html5 that sections can include h1s cool all right cool so we can also have h2s threes fours fives and sixes and the way we know when to move from a two to a three is based on the importance like how important is that heading as opposed to another so sometimes you&#39;ll have twos then you&#39;ll have threes because that content is less important than the other cool now we have some other tags that we are going to learn tonight and some of them we&#39;ve already kind of seen we have paragraphs which are for large blocks of text we have spans which are for short pieces of text so if you have a big block of text right that would be a paragraph if you have a small piece of text that would be a spam like that&#39;s what you&#39;re going to wrap it in as a span and then we have the pre tag which is an abomination it should never be used it should be yeted into oblivion and let&#39;s just move on like leon what&#39;s a pretext so here&#39;s what a pre-tag does a pre-tag when you&#39;re writing out your html keeps all the white space the enters the carriage returns and all that stuff right all that stuff right all that stuff gets put on the site so all that spacing that positioning that movement that gets put onto your site if you use a pre-tag why do you think i don&#39;t like pre-tags why do you think i don&#39;t like pre-tags that&#39;s css there&#39;s nothing you can ever convince me that that&#39;s not css and that leads us to talk about nerd fights so at this point you&#39;re gonna start to realize that some of my opinions are opinions and here&#39;s the most beautiful thing about learning specifically front end or even any programming is that there&#39;s often not a 100 correct way of doing things right for some folks that&#39;s very freeing and for some folks that&#39;s very frustrating the idea that there&#39;s never going to be like a 100 correct way of doing something what you&#39;re going to have is a bunch of nerds arguing over what is the correct thing right and so i bring this story up whenever i teach this class no one ever believes me this is a true story but i promise you with a true story i have lost a friend over the br tag so i was at a tech meet up with my friend uh we were a few beers deep eating some some good food as you&#39;d normally do at tech meetups and uh got to talking somehow about the br tag i said the br tag introduces uh a space that&#39;s an abomination that&#39;s clearly style the hr tag puts a line that&#39;s clearly a border right and so to me right that&#39;s that&#39;s style there&#39;s nothing you&#39;re going to ever say to convince me that introducing spacing pushing stuff away is not something that should be handled with css now was i right and they wrong are they wrong and i right no we both nerds at the end of the day yes now the beautiful thing is that really good engineers like really good entry-level engineers like the folks that are here watching the stream the best entry-level engineers that i&#39;ve worked with do something very special they form strong opinions but they hold them weekly let me say that one more time they form strong opinions but they hold them weekly what that means as as you are writing your html tonight and as you are writing your html this weekend you are going to be tasked to pick the appropriate semantic html tag and that will be your decision you have to come up with reasons why you chose that tag once you are on a team or working with other developers if they present a better way of doing something then you let go of that assumption that you&#39;ve made that decision that you made when they present the better argument but you don&#39;t want to go into your code just like you&#39;re weak by accident you want to be making good strong semantic decisions and thinking behind the moves that you make now i&#39;ll say it i said it last class and i&#39;m going to say it this one because there&#39;s a lot more people here friend you&#39;re watching this maybe the twitter went viral i don&#39;t know i apologize i shouldn&#39;t have raised my voice in the way that i did around the br tag i would like to be friends again so if you ever do happen to see this send me a message let&#39;s go grab a beer even though that&#39;s where this started and uh maybe we can talk about all the new stuff that&#39;s coming out all right we got some other tags we got some other text if you see an m tag when you wrap content in an m tag it makes that content all right it makes that content look italicized and when you wrap content in a strong tag it makes that content bolded if you use an m or a strong tag did you violate separations of concerns but yes or no in chat for me please if you used an emmer strong tag did you violate separation of concerns yes or no you&#39;re both right all of you are right if you wrote yes or no you&#39;re right let me tell you why you&#39;re right so if you used an m tag and a strong tag to make it italicized or make it bold you [ __ ] up right we do not choose html tags based on how they are going to look the beautiful thing however is that m or strong tags do something else their accessibility tags what they do is they provide emphasis to words that screen readers can pick up on right so when you go to a website and there could be a banner at the top that&#39;s flashing red uh saying like warning like we&#39;ve just been hacked or you go to a website and it&#39;s like flashing like yellow there&#39;s a sale there&#39;s a sale there&#39;s a sale if you have the means to see the page you would be able to see that there is a sale going on right you&#39;ll be able to see that there is a sale going on but if you had a visual impairment you might not be able to see that sale so how do we convey to our users emphasis well that&#39;s where these tags come in the hand so if you use these tags right if you use these tags to provide emphasis to folks that might have an accessibility concern then you&#39;re doing the right thing but if you chose these tags based on how they look that violates separations of concerns now the beautiful thing is it just so happens that these m and strong tags make them look that way but we can always overwrite how it looks with what we can always write how it looks with what exactly there we go chat here we go pop off css cool keep pushing here we saw this one last class uh an ordered list we saw an unordered list last class well the sibling to the unordered list is the ordered list an ordered list expects that every single thing in that list is coming in a specific order i always think a great candidate for ordered list are recipes right they are recipes because if i pour the brownie mix onto the pan put it in the oven for 30 minutes pull out the pan and sprinkle water on it i&#39;m not gonna have good brownies they&#39;re not just not gonna be good brownies right there&#39;s a specific order to the brownies and so recipes uh smith said directions exactly these are things that make sense to be in an ordered list as opposed to an unordered list where it&#39;s still a list of stuff but there&#39;s no specific order to it so think of things like a grocery list it doesn&#39;t have to be a specific order to your grocery list actually i found out there are some monsters among us uh last time i said that a grocery list doesn&#39;t have to be a civic order uh i got i got some people that reached out and they&#39;re like leon i make sure that my that my grocery list right is in the order in which i will move through the supermarket right like they put the things on their grocery list but it&#39;s like aisle by aisle does that who does that so in that case maybe it&#39;d be an ordered list but that&#39;s the that&#39;s some next level efficiency there yeah they&#39;re playing 5d chests out there owl thank you for the hydration hello thank you for the hydration oh that&#39;s hilarious all right containing elements a lot of what we&#39;re going to do on the web is like containing other content and the beautiful thing with html5 is that we got a lot of new containing elements okay we got a lot of new containing elements before html5 we kind of use divs everywhere and so if you were using it if you&#39;re doing a tutorial right if you&#39;re doing a tutorial and it&#39;s not a react tutorial and there are divs everywhere run it&#39;s not a good tutorial right we we we have it&#39;s been years we&#39;ve progressed there are a lot better containing elements okay there are a lot better containing elements containing elements that got rich semantic meaning now it doesn&#39;t mean that you can&#39;t use divs right let me let me make that clear it&#39;s not that you can&#39;t use divs it&#39;s just that we got all of these rich right we have these rich semantic tags that we can use instead right and so sections help us group like content so if you had some content that was all about liver frosted treats what the heck would be a liver frost retreat it just doesn&#39;t make sense but if you&#39;re grouping like content and that content is on a dog food website then it makes a little bit more sense so we got these sections that are probably going to be one of the bigger tags that you use it&#39;s a it&#39;s a container that&#39;s going to help us group all of our like content together we also got articles which are containing elements that help us contain things that are meant to be shared think of like a newspaper article i could clip that newspaper article out and hand it to you and you would be able to read it and understand what the heck&#39;s going on you don&#39;t really need other context for it it might be helpful to know where it originated from but you don&#39;t need it so for content that&#39;s meant to be shared think blog post articles we got a new containing element called the article tag we also got a new tag called an aside and the side stands for ancillary or extra content according to the mdn it was originally created because back when the standard came out sidebars were all the rage remember sidebars so the aside was there the aside was there to help with sidebars now the semantic meaning behind and aside is for extra or ancillary content what do you think might be a good candidate for asides what do you think is a good candidate for his sides yeah ads exactly ads ads are all really good candidates for sides beautiful we also got headers and footers headers are for content at the beginning of the document helps us group our content at the beginning of a document footer is for grouping content at the end of a document notice i didn&#39;t say top or bottom because that gets too close to css and there are some really interesting things like articles can actually have their own headers and footers so you&#39;re like leon what the heck does this all mean like what do you mean all these tags let&#39;s take a look at some websites and let&#39;s see if we can guess what the tag would be i need to like have like a millionaire sound that&#39;s like let&#39;s see if we can guess the tag all right so i really love khan academy and i love khan academy&#39;s website if i was looking at khan academy&#39;s website what tag do we think this would be what could this be yeah in h1 now here&#39;s my question to you why would that content be the h1 more important question ah it&#39;s it&#39;s so good to see so some folks i saw some folks that slipped in here some folks said it because it&#39;s the biggest do we ever choose html tags based on how big or how styled they&#39;re going to be does it matter where it&#39;s located does it matter anything about style no the reason why that would be the h1 is because it is the most important thing on the page that&#39;s what they want you to come here and remember right for every student every classroom real results if you think khan academy that&#39;s what they want you to remember right it is the most important thing now if i wanted to i could make it real small and put it all the way like in the bottom corner i could just like eat it over here right that would still work right i could use css to make it small and dump it down into the bottom right but if it&#39;s the most important thing i&#39;m probably never going to do that but remember style positioning has no bearing on the html tags that we use cool we got three hydrates in a row uh burberry newbie cleo thank you for hydration cheers to you and thank everyone for the subs tonight uh it&#39;s been pretty wild i appreciate you all that all goes directly into the emergency fund at rc so thank you all right how about this big block of text here what would that be that was weird yeah it&#39;s a paragraph big block of text full sentence at least it&#39;s a paragraph cool um we also noticed something here are you ready for this look what happens when my mouse moves in you see that hey turn up look that oh oh you can go fast too hold up what&#39;s handling that that behavior that interaction what would that be yeah yeah i looked at chad it&#39;s already flooded with javascript i love it yeah it&#39;d be javascript there&#39;s definitely some javascript to foot here that&#39;s beautiful all right how about we come down here what about why iconic hat well actually let&#39;s start here what would this big block be it&#39;s kind of like gray i don&#39;t know if you can see it but what would that would that block be what what tag would we use for that block yep that&#39;s a section that&#39;d be a section and how about why khan academy works would that be definitely an h2 yep i think it&#39;s definitely an h2 um how about we come down here we kind of have like a no i was almost perfect too we have another box here right we have another box here what would that box be another box yep another section yep another section nice how about khan academy boost student learning what would that be oh this is like the first big point of contention of the evening some people are saying two some people are saying three i would argue that that&#39;s another h2 i think to me to me right why khan academy works and khan academy boosts student learning to me that is equally important right to me that&#39;s equally important and so for me those will both be h2s right when we get down here right i&#39;m finally able to truly differentiate my classroom that&#39;s when it gets a little bit less that to me h3 right that would be an h3 to me but up here these are both the same h2s and h2s right that would be mine we got paragraphs all over the place boom boom boom boom how about here how about districts whoop all right to the end how about districts what could that be span i think that&#39;s a span yeah someone said how do you decide importance that&#39;s a phenomenal question that&#39;s a really good question how do you decide importance it depends on the team that you are on sometimes this will be up to you specifically also if like you&#39;re a front-end web developer you might be making those decisions by yourself sometimes you&#39;re working with a designer that gives you the design and the designer will say here&#39;s the hierarchy of the site this should be this should be that right sometimes you&#39;re working with a ux professional that would get their hands dirty with that stuff right sometimes you&#39;re working with marketing and somebody from marketing will come down in their their nice suit and say actually this should be an h2 this should be an h1 like because of seo so the cool thing about being a front end web developer is you often actually work with a lot of different people designers user experience professionals marketing other folks on your team right and so it does really depend on who you&#39;re working with how big your team is who makes those decisions but you all need to start making those decisions for yourself you have to at the end of the day say from what i know about the semantics of the tags i have at my disposal this makes the most sense and we&#39;re going to see a lot of these over and over again this is your first time for a lot of you seeing these words hearing the words coming out of my mouth semantics tags that&#39;s that&#39;s that&#39;s scary [ __ ] it sounds like a lot but don&#39;t worry we&#39;re going to see it over and over again we will get our spaced repetition in we&#39;re going to write some real code together then we&#39;re going to review it and then we&#39;re next we&#39;re going to do it again we got that we&#39;re going to do it again we will always get our repetition in so if the very first time you hear a word it doesn&#39;t make sense that&#39;s your test that&#39;s your frustration test do you get frustrated and turn off the stream or do you stick it out you ask questions do you go to discord after and be like i had no idea what leon meant by span right that&#39;s it this is this is your this is your this is the moment right mom spaghetti right let&#39;s do so i think that&#39;s pretty interesting right like just looking at this site we saw that the site was mainly sections headings and paragraphs like we could probably do 70 of this site with just those three tags like probably 70 of this site sections headings and paragraphs like we could probably get there throwing a few spans maybe an article like an anchor tag and we did it right like we got it and so yes these things are hard yes these things are new but it&#39;s really not that many right you&#39;re going to learn about 15 today 30 over the next week or two and then you&#39;ll be able to lay you&#39;ll be able to build any site that you want in terms of content with the stuff that we learned today and next week so hang with me we&#39;re at the top of the hour so you know that that means a break when we come back you officially become a software engineer when we come back from this break your hands get on the keyboard you&#39;re gonna write some actual real code you&#39;re gonna earn that badge you&#39;re gonna earn the messages that you said to all your friends that you put out into the world so please if you&#39;re able get up move around hydrate let your eyes focus on something else we will be back together in five minutes all right folks get up hydrate move around i&#39;ll see you all soon don&#39;t worry about the text editor yet take your break we&#39;ll come back i&#39;m not going to lead you astray you got this go take your break so hey what split keyboard do i use i use the kinesis advantage 2. do i play magic i did when i was younger i haven&#39;t played it a long time excuse me sorry i got a hyperx keyboard with lights that night that lights up yeah i got um i have the logitech uh g like the 915 that&#39;s pretty pretty i use that for gaming what boom arm do i use i use the rode pro whatever it is when everybody uses i want a vertical mouse i really like my rollerball mouse it&#39;s really helpful you know i i get really really bad wrist pain like severe like have to go to the doctors like my bones have rubbed together it&#39;s pretty bad um so that plus split keyboard is like what keeps the pain away and i really take my breaks i stretch out top of every hour even when you&#39;re not here i take my breaks super important all right folks come on back come on back hope you had a good break hopefully we would have stretched a little bit grab some water but i prefer one os over another i use all of the i i use mac os windows and gnu linux every day all three of them so i don&#39;t really have a preference i like doing my business on mac os i like doing my tinkering on new linux and i enjoy gaming on windows so they all have their tools to me i&#39;m a big fan of like realizing that a lot of technology stuff is really just about having tools on your tool belt a lot of people get really stressed out in the beginning they&#39;re like leon should i learn to learn angular should i learn react should i learn flim flop or flap flam or zaboomafoo right and um my answer is no you learn the thing you need to learn when the job requires you to learn it right and you got to realize that they&#39;re all just different tools on your tool belt of success right that&#39;s so cheesy but that is true um sometimes i&#39;m surprised what comes out of my mouth but yeah they&#39;re just all different tools they have their their rhymes and their reasons that when you should use them when you shouldn&#39;t use them and so don&#39;t worry about having to learn everything get good at a core set of stuff and the skills that you learn will be transferable to whatever else you need to pick up all right folks come on back alrighty we&#39;re in the home stretch we&#39;re going to start writing some real code tonight you&#39;re going to have some lab time to do it i&#39;m just going to sit here look pretty you&#39;re going to write some code let&#39;s get into it all right so we looked at some websites and we learned some tags but it is interesting to note that all the tags we started with are not still here so back in the day i had a dragon ball z pokemon harry potter fan site it was lit had like pikachu running across the top it like flashed a lot of those tags that we used are now we call deprecated why do you think things like blinking tags and marquee tags why do you think we no longer use those tags they go yeah that&#39;s all that&#39;s all css or somehow even javascript too somebody said it looks dumb yeah it was css right it was css or javascript like we we&#39;ve now separated our concerns exactly it violates separation of concerns we&#39;ve separated our concerns so that we can&#39;t have html that does things like css or html it does things like javascript so once we separate those concerns we got rid of those tags that are now called deprecated so a lot of the tags that you might have used back in the day they might have been repurposed to something that&#39;s a little bit more semantically correct or they might just be gone um so like b and i tags that made stuff bold and italicized obviously like those can&#39;t be used anymore you have a tag to make something bold it&#39;s something that makes italicized that clearly violates separation of concerns so they like tweak those tags to do other things um i is really commonly used for things like called font awesome and other fun stuff that we&#39;ll get into later but a lot of stuff we worried about or used back in the day are gone now i have a fun question i always like to ask that&#39;s related to deprecated elements there&#39;s a survey that went out one year to a bunch of software engineers and the question was where did you get your start as a software engineer now if you know the answer to this don&#39;t spam it but um where did where do you think based on the survey of like thousands of engineers where do you think most engineers got their start as a software engineer victoria thank you for the hydration cheers to you a lot of folks are saying myspace believe it or not myspace was the number two place the number one place folks got their start as a software engineer according to that survey was neopets neopets let me say one more time the number one place that these software engineers got their start with neopets back in the day on neopets you could have like your like your your pet pages and like store pages and you could write html and like write inline css and all these like what would be now horrible practices that violate separation of concerns that&#39;s where most engineers got their start so i want you to keep that in the back your brain the day some software engineer tries to tell you that you&#39;re not a software engineer that tries to gatekeep you from this industry you could tell them to go [ __ ] themselves because they probably got their start on [ __ ] neopets get out go home you cut it&#39;s over you got your start on neopets get the hell out of here get out alrighty it&#39;s time for a lab the first true test in frustration so today in the materials that you need it for this class if you are new around these parts welcome we are doing a free 30-week software engineer bootcamp where you can go from zero technical skill to employable if you would like the materials the materials are shared on our discord exclamation point discord we have a follow-along materials channel that has the zip for today you all need that zip file now what you&#39;re going to do is unzip that file each operating system has a different way to unzip files on mac os you can just double click on it on most windows operating systems you can typically right click and unzip or extract here gnu linux has the ability to unzip so you&#39;re going to need to figure out the way to unzip your file if for some reason you cannot figure out how to unzip that is okay you&#39;re going to go to discord after class and you&#39;re going to get help on how to unzip your files okay thank you thank you indifferent you can use other tools to unzip but the idea is that you need to unzip that file because inside of that file are the files that we&#39;re going to use today so i&#39;m going to go ahead and show you what&#39;s in those files so from today you can see that i have this lovely class 2 materials zip i double clicked on that zip because i&#39;m using mac os and inside that file that i opened or that file that i opened it wound up being a folder that had two things in it brownies html and bbc image right so you unzip and you get both of those files now what you&#39;re going to do right what you&#39;re going to do is open this brownies html file in a text editor right in a text editor right now the text editor that i am using is called vs code you can simply google vs code and you will find the ability to download that text editor if for some reason you cannot download a text editor to your computer maybe it&#39;s a work computer or something like that there are plenty of websites that you can use that you can just type directly in your browser so you can use a website like glitch glitch is completely free to use and you can go ahead and start writing your code directly in the browser i like glitch over things like codepen just because it&#39;s a little bit easier to use to do more advanced stuff and i use replit a lot as well also again completely free right inside of here you can just click create and then you can say that you want html css and javascript and then you can create the repl so if for some reason you cannot download vs code right you cannot download vs code you can start with replit or glitch right cool now if for some reason you have trouble downloading vs code you don&#39;t know how to open it the the the computer basics are a little bit hard there you&#39;re gonna have to come to discord we&#39;re going to help you out there right we&#39;re going to help you out there some folks are saying like how do i open it in reply well there&#39;s a couple ways you can open files in here but one thing that you&#39;ll note is if you click on this brownies html this brownies html is already an html file so one of the interesting things you can do is you can just open brownies html in the browser and you&#39;ll see all the text and content right there you can copy and paste to your heart&#39;s content right does vs code work with a chromebook there is a newer version of vs code that would you can actually use vs code in the browser now if you would like but otherwise you&#39;re gonna have to download it okay now like i said you do not need to download vs code tonight you can use glitch you can use replit directly in your browser whatever browser you&#39;re watching me right now right whatever your browser you&#39;re watching me on right now you can uh just use that with glitch or replit where are the materials the materials are in the follow along materials channel before every single class i will always put the materials in there can you use adam of course the text editor is up to you however you wish whatever one you used to use you can i will be using vs code i recommend that you use vs code for the duration at least the beginning of the program so that way all the stuff i do is similar all right cool all right so what i want to do is i want to open this brownie file inside of my text editor there are lots of places that i can there are lots of ways i can open that file in my text editor right if i already have my text editor open um i can simply do like file open and open that file a lot of times you might have the vs code like in your dock and so what you could do is you could drag this file to vs code and it&#39;ll open right so i just dragged that file right to vs code and it opened it up for me right so there are many ways you can open the file in vs code file open dragging the file right it&#39;s all open to you okay now if you&#39;re if you&#39;re panicking you don&#39;t know how to unzip files you&#39;re having trouble opening it in a text editor right you&#39;re gonna have to come to discord and get that help remember this is your first exercise in frustration cool so i decided to just drag the file remember i unzipped the folder and then i dragged that file into vs code right now my vs code is pretty simplified right now right it&#39;s pretty simplified i really highly recommend early on not really adding stuff to vs code don&#39;t use any of the tools or tips or tricks that improve your workflow right they&#39;re going to be stuff that makes your code look prettier there&#39;ll be stuff that automatically saves files for you there&#39;s going to be stuff that will make your life as a developer right much much easier don&#39;t use those at the beginning right now the reason why i tell you not to add all those things or use those tools in the beginning is because there is nothing more embarrassing right than finally getting that technical interview and they use a platform that does not have all your magic plugins and you struggle to indent you struggle to save you struggle to do the very very basics and i&#39;ve seen it happen seen gonna happen multiple times so please get used to doing stuff manually without all those gadgets until you feel comfortable doing it on your own once you feel comfortable you get all the though you can zip zip zap through it then add all that other stuff to make your life easier you know specifically prettier like you want to get good at indenting and stuff like that just for a week or two just to make sure you know it on your own right and then you will then you will bring all that stuff back if you want all right so once again i&#39;m using vs code here you do not need to use vs code i unzip the folder i drag out the file and i drag the file to my vs code you could also have done file open i am using vs code but you could have also used glitch or any of the other kind of browser-based editors for right now all right like i said if you&#39;re stuck on this step you&#39;re gonna have to come to discord cool now here we have a bunch of content all of this content must be wrapped in what all this content must be wrapped in what tags exactly every bit of content on this page must be wrapped in tags so i come here and i see deep dish brownies chat what do you think deep dish brownies should be what should deep dish brownies be yeah it&#39;s definitely our h1 so i&#39;m going to open my h1 and i&#39;m going to close my h1 remember our h1 the closing and the opening tags are very similar except for that closing slash right right now is my page saved nope it&#39;s not saved how can you tell you can tell because the dot up here right is white and circle and not the x so i have to save this so i did i did command s to save you can do file save but getting used to your shortcuts is really helpful so on on mac it&#39;s command s on windows it can be control s right but get used to saving the biggest the biggest issue that a lot of folks have early on they&#39;ll come to me leon why right why why is it not working why why did these changes not like why can&#39;t i see the changes in the browser and it&#39;s almost always because you didn&#39;t save so get used to saving manually right alrighty so we have a lot of content here a lot of content here i want you to go through this content and give your best honest attempt at semantically marking up this content everything must be wrapped in tags you can use the previous slides right you can use the previous slides to get a get a hint of tags but you can also use the mdn the mozilla developers network if you need help looking up tags right i&#39;m gonna let you try it if you run across something odd if you&#39;re if your stuff were on auto if if it&#39;s not if your tech server is doing something you don&#39;t want it to do start with a google people are throwing in chat how to fix certain things but start with a google get used to it right and if you still need help with something discord alrighty i&#39;m going to put a 10 minute timer up on the clock here uh just ignore me for these 10 minutes just ignore me i&#39;m going to keep talking i&#39;m going to keep talking i&#39;m going to be answering people&#39;s questions in chat but the expectation is that for these 10 minutes you&#39;re writing code so go ahead get your fingers moving get the typing get to wrapping each of this content in tags and then we&#39;re gonna do it all together right so if you get stuck you don&#39;t know how to do it you&#39;re gonna have to be able to go through it remember there&#39;s two different sets of slides there are the live slides right that only i control and then they&#39;re the second set of slides that you have full control over so if there&#39;s the live link you can&#39;t move those slides around only i can the second link wasn&#39;t working but it should be working now if you opened it in the beginning you got to give it a hard refresh let&#39;s take a look at them i&#39;m gonna bring up my uh regular screen just in case i pull up something for you one second just checking on the slides for folks that are having trouble hmm i see the error now hold on i&#39;m working on it working on the sides one second public what i&#39;ll also do is i&#39;ll just download the slides for y&#39;all one second i think slides.com is down i think i think i think it&#39;s the actual place i used to uh host the slides checking it out still working on it you can use the mdn or hopefully it took questions you can actively recall yeah i think it might have been i think we might have crashed it because the uh they were working but it won&#39;t even let me export the um don&#39;t even let me export you need https to make the link let&#39;s try don&#39;t worry about it i think we broke it after class i will put the pdf into discord give your best shot this is a good chance for actively recalling use the mdn if you need it zip file is on discord if you&#39;re lost that&#39;s okay make sure you come back after the five minutes we&#39;re gonna go through it together this is your first chance at trying to write some code folks are putting if you don&#39;t like the auto closing tags people are putting that in chat so that that initial question you have like how do you stop auto closing tags that&#39;s a google question that&#39;s something you definitely should use but there&#39;s also people throwing the the pattern in chat for you if you want it preferences search html uncheck auto close beans googled it i love it is there something is there something i can do on your mobile yeah you can just use glitch or replit that work in the browser i&#39;ll get round that&#39;s on your side there is sound the zip is in the follow along materials channel all the code will always be in that channel hey how you doing thank you for the hydration cheers to you how do i revert the file you can do ctrl z or command z to go back a step yep the the zip file should not have the brownies image not to figure that out we have an html and css help channel okay murray what are you confused about can a section have can can i have a section one tag no the only ones that have numbers are the heading elements where is the brownies image i didn&#39;t give you one that&#39;s a fine one nope no brownie image from me do you know cobalt hell no you need your dual monitors back yeah they do help yep just wrapping all the content and tags exactly do i play league no that would just be the end of me oh ryan the first stretch that i&#39;ve seen i used to do a can&#39;t give you too much of the stretching it&#39;s the only fan&#39;s goal i could do this but not in 10 minutes yeah that that&#39;s totally fine done hey if you&#39;re done throw a gun in there that&#39;s wild good job wow crew came in that&#39;s funny there must be like a like like a a peace figured out the brownie that&#39;s good use dmdn could have helped there crunch time can you get it in you can get it done you finish up run alrighty folks stop come regroup with us no matter if you had trouble opening the file are you finished we took our 10 minutes we&#39;re gonna stop we&#39;re gonna go over it together all right so come on back come on back yeah i know the person you&#39;re still typing stop typing come on back first of all congrats you&#39;re working with code even if you struggled to open the file you were still working with a code file you&#39;re a software engineer if you wrote a line of code you&#39;re a software engineer so let&#39;s take a second i know that can be very frustrating you know some folks are still stuck that&#39;s okay but you are now all officially software engineers you&#39;re struggling you&#39;re in the muck with the code over the next 30 weeks you&#39;re going to add the tools and the knowledge behind that but right now carry yourself high matter if you got stuck you didn&#39;t know what you were doing it didn&#39;t make sense that&#39;s okay we&#39;ll get there together you&#39;re a software engineer congrats all right let&#39;s take a look at this together remember the vods are always available right after we&#39;re done streaming so you can always go and take a look at it all right we got some stuff here uh this first one is a tricky one we haven&#39;t even seen images so if you looked at this and you saw images right remember you can also change your quality settings since we&#39;re partnered you can change your quality settings to make it more less blurry like if it&#39;s blurry you probably have the quality settings too low yeah all right now look if you didn&#39;t know how to do we didn&#39;t cover the image so if you didn&#39;t know how to do the image what could you have done you know how to use an image tag what could you have done oh y&#39;all next level y&#39;all saying google y&#39;all saying mdn but you know what she could have done skipped it could just skipped it went on to the next thing don&#39;t sit there and bang your head against the keyboard trying to do something that you don&#39;t know how to do you gave it a quick google you looked on the mdn you didn&#39;t see it yes skip it and then you come back to it when you have more time so for all of y&#39;all that just stopped here let that be a lesson get all this other stuff to figure out you could have skipped it could have came back could have figured it out later you could have googled it had md end it you could have gotten help on discord right but you have you have to think about and the reason why i like to bring this up is because in uh less than six weeks you will all be getting paid clients that&#39;ll be your task is to get a paid client and uh let&#39;s say the client project is due in 10 minutes do you want to tell the client hey i got the image working it&#39;s the best image you&#39;ve ever seen it&#39;s a delicious image of brownie but nothing else works or do you want to say to your client all the content is here everything looks good we&#39;re just still tweaking this image right think about that think about that under promise over deliver exactly cool all right so if i didn&#39;t know how the image worked i could go to the mdn i could do something as very simple as kind of like um google mdn brownie oh i&#39;m so i&#39;m a big boy mdn image that was sad oh man clip it clip it [Laughter] all right there we go i could have did an mdn image and then boom here you go everything i need to know about the image tag oh there&#39;s this source property oh there&#39;s this alt property source is required alt does this other stuff for accessibility all the stuff i would ever need to know with very clear examples the html is here for us we can see the output how wonderful i love the mdn you should use the mdn and you saw i didn&#39;t use any big brain tricks here i just typed in mdn brownie that didn&#39;t work so i typed in mdn image and here you go your new best friend the mdn shows you exactly how to do images beautiful all right so let&#39;s go back and uh let&#39;s let&#39;s take a look at some of our code here and say all right well based on this i know i need to open my tag and i need to close it but something interesting about images is that they&#39;re one of the very few tags that don&#39;t need an open and a close tag the reason why images don&#39;t need an open and a close tag is because it&#39;s already content for all these other things you&#39;re wrapping around content but the image is already content so it is self-closing you don&#39;t need a closing tag it already is the content instead of wrapping around the content cool now we saw on the mdn that we needed a source so src equals and the brownies.jpg so that could be my source and the interesting thing about the source though is that i didn&#39;t give you a brownies image so we have to go get a brownies image we could have a local image which means that the image is on our computer or we could go hot link somebody else&#39;s image that&#39;s what we&#39;re going to do we&#39;re going to go and uh google brownies let&#39;s get some images here oh it&#39;s gonna be a problem yeah all right right click copy image address all right copy image address he&#39;s taking his time with it and then in the source i&#39;m gonna paste that image address right there you go i just went to the image i right clicked copy image address and i pasted it into my source so now when i open this brownies html remember i could drag the html file to the browser you can right-click open if you want to there&#39;s so many ways you can get this file open in the browser for me let&#39;s see i already have it open here so what i&#39;ll do is i will bring up my browser and i&#39;m going to drag the file into my browser and there we go it opened it up right that looks delicious so what i did here is i gave it a source and i grabbed an image source just from a random image on the internet uh you can go to pretty much any image you want on the internet and right click on it and copy image address that&#39;s going to give you the image address right you copy that you paste it into your source and you&#39;re good to go this is called hot linking this is not a file on my computer i am using this file from buzzfeed uh this could cause me some problems down the line if i kept it this way what what could happen if i kept the source this way oh you&#39;re thinking big brain you&#39;re saying like copyright no i don&#39;t own this image i don&#39;t own where it&#39;s stored i don&#39;t own the server that it&#39;s sitting on so buzzfeed could change this link right could change this link and then my image would break right or worse if you were little leon back in the day and somebody hot linked your image well they own that server they could change this to whatever the heck they wanted i could i could think it would be brownies and i come in the next day and it&#39;s a picture of rubber ducks or if you were back on the forums in my day it wasn&#39;t rubber ducks i&#39;ll tell you that much all right right so they control it right they control it and so they can change whatever they want so there&#39;s a chance that it could break in the future so next week we&#39;ll download our images and i&#39;ll show you how to use the images that are on like your side like your local or your server right but it could break and since it could break we want to make sure that we also have a what if we know that this this might break in the future what do we want to also give it yeah we want to give it an alt so alt is something that we also saw in the mdn and we can just say brownies right so now if for some reason this image was to break and not show up the user would still see brownies like they would still know that that should have been a brownie photo the other wonderful thing is that for accessibility if someone has a visual impairment and maybe they&#39;re using a screen reader they can know what that image is by having the alt text read to them so somebody with a visual impairment wouldn&#39;t maybe not be able to see the brownies but they would be able to hear that it was a brownie and then google&#39;s kind of moved on from this a little bit but it does help seo too like google might have an easier time figuring out that these are brownies can you can you test messing with the link sure so let&#39;s get rid of the b i&#39;m going to save i&#39;m going to go back to my my site here so boom it broke but look you see next to the broken helmet i can make this bigger next to the broken image is the word brownies so the alt tag is there right i broke that link and so you can still see the alt tag so even though the image is broken i know that that was brownies cool all right so we got our image tag going and uh next to this image tag we see this thing here uh that looks weird it&#39;s like it&#39;s like a different color and that definitely wasn&#39;t in the brows like if i go back i don&#39;t see the word hint like if i make this a little bit bigger there&#39;s no word hint here right so that&#39;s called a comment a comment is a way of like leading leaving a note for yourself or a note for another developer it doesn&#39;t actually make its way into the browser it&#39;s just in the file for you to see it it&#39;s called a comment in html the comments are made by doing our uh arrows and then our bangs so this we call exclamation point bangs so you&#39;ll do your left carrot or your left arrow we&#39;re going to call it your left carrot bang hyphen hyphen and on the end hyphen hyphen right carrot right anything you put in between this and this is now a comment it won&#39;t show up in the browser there&#39;s also typically shortcuts to do this right um nvs code and a lot of text editors if you do command and then forward slash it automatically turns it into a comment for you that was command forward slash control forward slash beans thank you for the gift it subs right so there are ways to do these comments that&#39;ll be important all right if the image is large we can fix it with css exactly let me go and put the b back here cool next i have this recipe by biz mcmahon what were you feeling for the tag here what tag should we use for biz here what types we use for biz h2 one so here&#39;s a question for you um have you ever read who made the recipe like is that important to you when you go to a recipe website never i don&#39;t think i&#39;ve ever landed on a recipe and gone oh that&#39;s biz i&#39;m i&#39;m dipping out of here [ __ ] that guy like no i&#39;ve never i&#39;ve never even cared before right so to me there&#39;s no way that that&#39;s an h2 that&#39;s so not important that it has to be like i don&#39;t know like an h4 at least right like like just not anything that&#39;s important right now i am jumping here there is some accessibility things that we have to get to where we go from ones to twos to threes and we should lay out our content more accessibly but for now let&#39;s just focus on making good semantic decisions here okay so for me that&#39;s just not important so it&#39;s at least a four now here&#39;s the thing you might be a rachel ray household right you might only cook rachel ray recipes if it&#39;s not rachel ray you ain&#39;t cooking it so to you that might be an h2 it might be really important to you and so that&#39;s where these semantic decisions have to be made that&#39;s why there&#39;s never going to be one exact way to do this if i give this site to 10 different front-end developers i might get 10 different versions of the same code back right now some people are saying why is it not a span to me it&#39;s a heading it describes what comes after everything that comes after that line right everything that comes after that line is the recipe by biz right so to me it&#39;s a heading it&#39;s not just a short piece of text it definitely does describe what comes after a spam would just be a short piece of text right so to me it&#39;s a heading it does describe what comes after cool how about related recipes what do we think that is to me that&#39;s an h2 it&#39;s really important to me that if you don&#39;t like my deep dish brownie recipe you go to my other recipes right so if you don&#39;t like the deep dish brownie recipes you go to my other recipes so h2 is really important for me here cool so i&#39;m going to go ahead and make this an h2 right cool and then here i have a what what are what are all of these yes that&#39;s a list of the related recipes um so this is a list of all the red recipes but i&#39;m going to do something a little funky here stay with me for a second so it&#39;s definitely a list of recipes so that&#39;s a ul uh it&#39;s not in any specific order so it&#39;s not an ordered list it&#39;s definitely an unordered list of recipes but all of them are yes people are thinking they&#39;re all links to those recipes so it&#39;s a list of links so i am going to use some developer magic here you can as you&#39;re clicking hold down command or control or alt depending on what type of operating system you&#39;re using michelle hey thank you for the gift itself 20 gift itselves wow i appreciate that shell i appreciate you thanks for stopping by that&#39;s wild thank you so much so you can hold down command control right or alt depending on your operating system and then wherever you click you got to keep it held down for me it&#39;s command wherever you click you get the repl right you get the reply right and so now i can do whatever i can tab them in i can do my li i can start my anchor tag i can give them all an href just as a placeholder we&#39;re going to put an octothorpe in there i can jump to the end for me it&#39;s command right arrow it might be control right hour if you want to jump to the end and then i can go ahead and close my anchor tags i can go ahead and close my allies right so how do i do that again i got you uh depending on operating system for me it&#39;s command so i would just hold down command and wherever i click while holding down command i get that reply for you it might be control or it might be alt it does depend on your operating system cool once you&#39;re doing that you&#39;ll notice that you have this little flashing rebel that flashing replica means that you can now type on each one of those lines yep all for windows and gnu linux yup there you go cool and so that&#39;s how i was able to do it but i knew that this was a a list of links and so each one of these links is wrapped in an li and then it&#39;s wrapped in an anchor tag and right now i don&#39;t actually have the links to the chewiest brownies i don&#39;t have the link to the can&#39;t you tell i don&#39;t have the link to the bodacious brownies so i just put an octothorpe in here some people might call that the pound sign or if you&#39;re hip a hashtag but in programming we call them octothorpes yeah or sharp exactly noctothorp cool let&#39;s look down here how about prep time what are we feeling for prep time chat i&#39;m feeling like a an h2 here i think that&#39;s really important i think it&#39;s like the only thing i look at i look at like is it rachel ray and is it like going to take me a long time so that to me is an h2 like i said you gotta make your own semantic decisions make your own semantic decisions if you if you don&#39;t think that&#39;s an h2 what the heck am i doing if you don&#39;t think that&#39;s an h2 that&#39;s okay it&#39;s okay make your own semantic decisions how about 60 minutes what is that it&#39;s a short piece of text if it&#39;s a short piece of text that&#39;s a span for me yep that&#39;s a span for me and for me short piece of text beautiful all right how about servings some people really care about the servers that could also be like an h2 again maybe an h3 i don&#39;t know the servings matter i&#39;m a big boy i&#39;m gonna eat the whole thing anyway yeah h2h3 i don&#39;t know maybe hd just so we can see something new just so we can see something new that the most demanding i&#39;m not sure and probably a span again right span with the nine there we go case you always check for servings that&#39;s good to hear i i don&#39;t think i i&#39;m gonna eat the whole thing anyway don&#39;t matter all right why is it a span instead of a paragraph because it&#39;s a short piece of text if it was like a long piece of text like a sentence or more then we&#39;re talking paragraph but short piece of text that&#39;s a span cool all right ingredients what do we think that is how do we feel about ingredients i think that&#39;s an h2 as well h2 as well yeah if you&#39;re like leon i have no idea what the hell you&#39;re doing right now that&#39;s okay it&#39;s all right guess what you have homework that&#39;s gonna walk you through all of these things you literally have homework it&#39;s gonna that&#39;s gonna span you a couple hours of you sitting down with this material again so if it doesn&#39;t make sense in this moment that&#39;s okay this is your first time seeing a lot of this stuff this is your first time seeing a lot of this stuff give yourself some grace it&#39;ll come all right i don&#39;t like how this is like all indented already oh so the thing is here eventually we&#39;re going to start to notice some indentation like leon why did you indent here uh we have something called parent child relationships right we have parent child relationships where these lie since they&#39;re inside the ul that parent-child relationship you put a little respect on the name and you give it a little bit of an indentation don&#39;t worry about that for right now but if you&#39;re like leon why are you indenting that&#39;s because we have some parent child relationships that we got to deal with cool all right so we have the ingredients what is what is this here what do we think this is we have the ingredients what is this yeah it&#39;s a list so again is this an unordered list or an ordered list yeah unordered right it doesn&#39;t matter if i put the eggs before the vanilla it&#39;s not like when i use them it&#39;s just the things i need to grab from the grocery store so unordered lists i&#39;m going gonna put all of this stuff inside of my list and then i&#39;m gonna use my developer magic again now the cool thing is you don&#39;t have to click right you don&#39;t have to click look at this i&#39;m not clicking i&#39;m just pressing the down arrow so on mac i can do command alt and then just press the down arrow and i get the reply going all the way down my list right on your operating system might be different there&#39;s gonna be something for different for windows or something for gnu linux uh but for me yeah there you go control alt down arrow on windows people are saying yep yep yep there you go beautiful beautiful beautiful we already have we got code weenies that&#39;s not a rebel you see the code weenie oh boy they found us they got us all right cool there we go now now we can go ahead and do our li we can jump to the end there we go beautiful so now each of our ingredients are wrapped in in an li beautiful cool almost at the top of the hour we&#39;re going to finish this out we&#39;ll do our raid and we&#39;ll end it there so let&#39;s finish this up together maybe another two minutes or so to finish this up and then we&#39;ll do our raid alrighty direction what we say that would be ah yes our lovely h2 again directions are very important let&#39;s go ahead and do our h2 here once again we&#39;re going to have the ingredients that we have to wrap in our lovely ul there we go i&#39;m gonna we could just break it down here i&#39;m just gonna copy everything i&#39;m gonna paste it in boom alrighty now is this a ul uh y&#39;all paying attention look at you y&#39;all paying attention no that&#39;s not a ul no well all right oh well right oh well anybody ever watch the mistborn trilogy or sorry read the mistborn trilogy ren always tells his sister that i will betray you and then one day ren betrays all right and so you gotta you gotta you gotta be on your your tippy toes around here right all right some things won&#39;t always be correct you gotta you&#39;ll be like leon ah that&#39;s not that&#39;s not that&#39;s not a ul that&#39;s an oh well all right i will betray you call it out when you see it beautiful we got the ol now we&#39;re going to go ahead and click for our lis this one&#39;s a little bit weird because when i jump to the end i won&#39;t actually be at the end for each of these lines don&#39;t worry about that for now we can clean that up though i&#39;m oops clean this up so the lies are actually at the end of each thing my screen&#39;s all magnified in so it&#39;s a little different on here all right here we go beautiful you betrayed us last time you said domino&#39;s was good get out of here delicious s tier you can press n key on control like uh n key on windows mac i do command and my arrows to move around cool so we got our ordered list uh how about tip what do you think the tip should be yeah i&#39;m feeling like an h3 here yeah like do you do you ever read the tips though who reads the tips do you ever read the the drivel that comes before the recipe my my great grandfather tripped on a penny and uh that penny we then wished in a fountain and we&#39;ve got a genie and that genie is the one that delivered this recipe and so i hope you enjoy this recipe coming to your your household right now you know why they do that you know why they put all that stuff in there when i was doing this for the last class i found out that the reason why they do all that extra text is because it makes it so that it&#39;s harder to have like a copyright claim like recipes are completely not copyrightable but that like stuff they spill out it has like a slightly better chance of being copyrightable and then um the other thing too is seo right cool so tip or you&#39;re saying h3 h4 i could see it i think i think for me i don&#39;t think i read it but it seems like a lot of you do read them so i&#39;ll listen to y&#39;all and i&#39;ll say h3 beautiful and then big piece of text definitely a sentence or more what should that be paragraph beautiful i&#39;m gonna close my paragraph nice nutritional info you already know what that&#39;s gonna be yup come on now nice little span here all right nobody ready to get out of here you ain&#39;t looking at the calories i&#39;m a big boy that don&#39;t play around here no nutritional info in this house get out of here h6 if there was a if there was an h8 i&#39;ll be using it but there isn&#39;t that&#39;s that&#39;s how you know h6 is the is the lowest that&#39;s how you know h6 is the lowest because if there was something lower i would have used it right then and there that&#39;s how you know all right let&#39;s finish this up we got another we got another uh string here what do we got here what are we doing another paragraph okay another paragraph and then inside this paragraph we have another what yeah we got another anchor tag and the cool thing is that this anchor tag already has the what here yeah we have the href beautiful cool let&#39;s go ahead and close that up close up that carrot and then make sure that we close up our anchor tag chat we did it look at us now do i care what this looks like in the browser nope right because that we&#39;re choosing html we don&#39;t choose html based on how it looks right we don&#39;t choose html based on how it looks we&#39;ll get to that with css all right we&#39;ll get to that with css now there are some more things that we didn&#39;t get to tonight because we&#39;re going a little bit over time i want to stop here when we come back on tuesday we&#39;re going to see some more tags we&#39;re going to see some some forms we&#39;re going to see uh the actual structure of html we&#39;re going to see like the header and the footer we&#39;re gonna see uh these other pieces that we might have heard a little bit of but we&#39;re gonna put that all together on tuesday between now and tuesday y&#39;all got a lot of homework like a lot of homework you got two videos by ali abdal to to watch you got a whole learning how to learn course on coursera to get through you have a whole learning how like learning about html through learn.shayhow right so you have all the stuff that you got to get through between now and next week if you want this code this code will be shared with you on discord after class so anytime i write code i will always just upload it on discord in the follow on materials channel after class so i think the reason why the slides aren&#39;t working right now is because i think we have so many people using them i have to like upgrade my payment tier on the slides so i&#39;ll figure that out as soon as we get we&#39;re done going live i&#39;ll share all the code with you on discord we have a lot of reading to get through tonight but before you leave we&#39;re going to do a raid remember we like to hang around here we like to go spread positivity to other folks and so we&#39;re going to go ahead and do that right now we&#39;re going to go and set up a raid and remember when you&#39;re ready to get more channel points those channel points actually help you do a lot of stuff and so we&#39;re going to go ahead and start a lovely raid here and we&#39;re going to go over to someone that we&#39;ve we&#39;ve rated in the past they&#39;re learning too uh and so that could be that could be fun so let&#39;s go ahead and uh go over to them remember red love positivity give them some follows if you&#39;re not already following cool all right starting the raid now it&#39;ll take about 10 seconds and i&#39;ll see you i&#39;ll be hanging out over there uh please if you got stuck tonight if things didn&#39;t make sense if it was hard if you feel like you need some extra help that&#39;s what discord is for please come to discord we will help you you will get unstuck you&#39;ll figure out how to open things you&#39;ll figure out how to type but please be consistent set up a plan right how are you going to study each day how are you going to do the things that you want to do make sure this weekend you don&#39;t go into the weekend like an accident go into the weekend with a study plan and i will see you all on sunday for office hours i hope you had a wonderful second class i will see you all on sunday for office hours remember they&#39;re optional you have to be there but i&#39;ll be answering tons of questions uh if you have questions about the stuff we covered today that&#39;s what office hours is for and then on tuesday we&#39;re back at it we&#39;re gonna dive deeper into html we&#39;re gonna make it make sense we&#39;re gonna have more fun with it so good luck with your homework good luck with the raid i&#39;ll see you all over there now peace everyone you

history [Applause] i&amp;#39;m ready to be beyonce today ready to be beyonce today now the question is are you good morning good afternoon good evening where you coming from hope you all are doing well let&amp;#39;s go what&amp;#39;s going on everybody hope everybody&amp;#39;s doing well hope you&amp;#39;re ready for another class uh bobby bangers with the sub bangers only that&amp;#39;s how we start each stream what&amp;#39;s going on everybody let&amp;#39;s get in here hey we we we got the slow chat on tonight so maybe a little little little a little a little easier tonight maybe in the chats to read the things but welcome everybody hope you all are doing well rufio what&amp;#39;s up what&amp;#39;s going on everybody hey so we got a question tonight we got a question the question tonight is rob what&amp;#39;s going on bringing the whole gang let&amp;#39;s go thank you for the raid we&amp;#39;re returning the favor we&amp;#39;re coming right back as soon as i see you live after we&amp;#39;re done we&amp;#39;re coming right back what&amp;#39;s up everybody hope your stream went well thank you for joining us we&amp;#39;re all uh we&amp;#39;re all ready to be beyonce today so thank you for stopping by thank you for being here what&amp;#39;s going on everybody all right so the question the question in chat today to start us off as folks get in they get the stream right they get the volume up is would you rather win a bronze medal at the olympics or be a recurring actor on one season of a somewhat popular netflix show so give me give me like actor or or metal what do you want actor or metal we should start doing polls for this that&amp;#39;s wild all right you know it&amp;#39;s kind of mixed it&amp;#39;s kind of mixed it&amp;#39;s kind of mixed we&amp;#39;re seeing actor we&amp;#39;re seeing metal we&amp;#39;re seeing both i like it you know what i&amp;#39;m gonna go with i&amp;#39;m gonna go with i was gonna say metal metal came out so easy like it was about to flow out the tongue but i don&amp;#39;t know what&amp;#39;s what&amp;#39;s what&amp;#39;s going to last longer the olympics or or netflix i don&amp;#39;t know see why people go an actor i don&amp;#39;t know i think actor be more fun i feel like i had to do more to get the medal i feel like that&amp;#39;s a lot of late nights early mornings a lot i&amp;#39;m a big boy i&amp;#39;m a big boy that&amp;#39;s a lot of moving actor that&amp;#39;s it that sold it sponsored by domino&amp;#39;s pizza actor it is for me welcome everybody glad you&amp;#39;re in here rob thank you for the raid what&amp;#39;s going on all right so tonight we got a lot of stuff in store last class we set the stage what does it mean to be a software engineer what&amp;#39;s the opportunity that&amp;#39;s in front of you what is the internet what was the beginnings of html and tonight we continue that so we&amp;#39;re going to lay down our first lines of code together by the end of this stream you will be a software engineer you&amp;#39;ll be writing code with the best of them and so i hope you&amp;#39;re ready for it a lot of y&amp;#39;all came back i&amp;#39;m glad you&amp;#39;re here don&amp;#39;t tell the wife welcome back everybody all right let me bring up the uh the slides here we&amp;#39;re gonna go a little leon cool so agenda tonight every single stream we are going to get our spaced repetition in we&amp;#39;re starting from the beginning and these first couple classes we&amp;#39;re building up the steam right for some of you this might be a lot of review for some of you this might be the very first time i care about the folks that are starting from zero the very first time you can always push yourself if you want all right so we&amp;#39;re gonna start at zero we&amp;#39;re gonna get our space repetition in but i promise you i promise you it picks up steam it gets faster it gets harder but we start at the beginning and we get our space repetition in all right after we get started i&amp;#39;m going to open up some time for some questions after we get started we&amp;#39;re going to review the client server model the basics of the internet how do we make those requests and receive those responses what the heck is going on hey what&amp;#39;s up thank you so much for the get the subs after we review the client server model we&amp;#39;re jumping into the basics of html we&amp;#39;re viewing those tags we&amp;#39;re seeing some new ones we&amp;#39;re seeing what&amp;#39;s changed with html5 once we kind of learn the basics you&amp;#39;re going to get the first chance to get your fingers on those keyboards right to get your fingers on those keyboards and start coding an actual assignment while we&amp;#39;re live after that we&amp;#39;ll show a few more html tags we&amp;#39;ll talk about another important rule last class we learned about separation of concerns this class we&amp;#39;re going to learn about progressive enhancement and then i will leave you to the raid and then to your homework sound good we feel good you ready to get into this all right every stream i like to start off with some questions so if you got a question you got a question for me now is the time to ask the question this just gives folks a few more minutes to get here if they&amp;#39;re running late they had to grab the the cheetos and they&amp;#39;re running they&amp;#39;re they&amp;#39;re they&amp;#39;re they&amp;#39;re opening up the computer they&amp;#39;re slamming to get in here what&amp;#39;s a raid jesus said what&amp;#39;s a raid at the end of each stream we go to somebody else&amp;#39;s stream just to spread a little bit of positivity uh give them some follows and say what&amp;#39;s up what is your headband uh my headband is a buff it&amp;#39;s actually like what like it&amp;#39;s like a like a like you get rei like hikers use it like to keep away mosquitoes but i just like it it doesn&amp;#39;t keep my hair too tight do you know of any coders with dyslexia yes i absolutely do uh one of my most more recent rc students had pretty severe dyslexia and where we actually were able to come up with a lot of tips and strategies on how to like work around that and they wound up getting a phenomenal job so if you ping me in the ask leon channel with just say like dyslexia resources i&amp;#39;ll i&amp;#39;ll share them out but yeah definitely doable ibrahim in the house hey thank you for the gift of subs how do you use anki uh we&amp;#39;ll share some some videos that i think will be helpful but we&amp;#39;re also going to do it in class so i&amp;#39;m going to show you my anki decks we&amp;#39;re going to break it all down we&amp;#39;re going to do that next week together question if you miss class are you screwed no immediately after class the vods are available and then each weekend they go up on youtube we have to have a little bit of delay before the videos go up on youtube because we&amp;#39;re partnered here on twitch any partners uh any any folks here that are hearing impaired yes we have quite a few uh just as a note you can turn on closed captioning on twitch you can also turn on closed captioning on available god please no no no no don&amp;#39;t pay for anything if you are here please do never pay a dime for anything i will never ever give you a resource that you have to pay for right that that you had to pay for anki is a completely free tool you can use it for free on on mac os windows gnu linux android however if you want the app on ios there is like a 25 version of that app do not buy it you can use there are other free ones you can get or you can use the web version i use the web version a lot and the web version is completely free please don&amp;#39;t ever pay money the whole point of this experience is to go from complete beginner to employed without paying any money to get there you&amp;#39;ll see a lot of folks are subscribing a lot of folks giving out gifted subs i appreciate that that goes to a donation to the nonprofit i work at during the day that does not go to me there&amp;#39;s no way for you to give me money i want this to be a completely free experience so if i ever give you a resource there sometimes are paid components to them but you don&amp;#39;t have to like with our learning how to learn there is like if you want the certificate you can pay for it please don&amp;#39;t do that completely unnecessary all right one or two more questions we&amp;#39;re going to jump into it will we learn how to practice on our own absolutely we&amp;#39;re going to build up to it though a lot of people love to come out the gate super hot right and they they they really i mean and i understand it right a lot of folks they&amp;#39;re up against the wall and coding is the way out i understand it but i&amp;#39;m gonna i&amp;#39;m gonna um we&amp;#39;re we gotta realize that this program is a jobs program okay let me say it one more time this is this is not necessarily a coding program this is a jobs program what the heck does that mean well if underwater basket weaving if underwater basket weaving let me get big if underwater basket weaving was a high-paying career if it was consistently ranked one of the happiest professions if you could learn it for free and you didn&amp;#39;t need a degree my ass would be on this stream with with hold on i gotta get it this would be stream this would be it this is what we&amp;#39;d be doing for the next 30 weeks right we&amp;#39;d be sitting here this is how you do it folks this is called a cross weave this is a this is a top sectional this is a fiber material uh this this is this is the top of the line of basket weaving technology however thankfully that is not the case it just so happens that being a software engineer and full stack web development is the path to a high-paying job that is consistently ranked one of the happiest that you can learn for free and you don&amp;#39;t need a degree so let&amp;#39;s not get it twisted that&amp;#39;s why we&amp;#39;re here folks that&amp;#39;s why we&amp;#39;re here cool all right let&amp;#39;s jump into it this isn&amp;#39;t a programming course it is a programming course let&amp;#39;s not get that wrong like we got to learn it to get to the end goal but um there are lots and lots of programming courses out there that let&amp;#39;s be real are way more in-depth probably cover way more material that um are harder that may even be completely free but they&amp;#39;re not geared to get you a job if you&amp;#39;re just here to learn how to code great hang out have some fun but this is more than just learning how to code i have been teaching people to how to code for 10 plus years and across those 10 plus years i have done things the right way i have done things the complete wrong way i&amp;#39;ve given resources that have helped people get closer to their goals and farther from their goals but we&amp;#39;re at a version of that where i feel pretty confident and that i&amp;#39;m just giving you straight bangers i said we only started with bangers today we&amp;#39;re going to keep that going throughout the entire course i&amp;#39;m not going to give you material that won&amp;#39;t help you i&amp;#39;m not going to give you material just because i think i should assign it i&amp;#39;m giving you material that i&amp;#39;ve literally seen help others get to their end goal of knowing how to code and being confident enough to get a job as a software engineer i&amp;#39;m cutting out all the fluff i don&amp;#39;t care about being 100 correct i don&amp;#39;t care about teaching the the the the thing that should be like no i&amp;#39;m teaching the thing that&amp;#39;s going to help you get the job and i&amp;#39;m going to make it so that it&amp;#39;s a way where you can pick it up you can absorb it you can digest it and you can put it into practice hundreds of other places you could go if that&amp;#39;s not what you want that are probably better harder easier to to sit through that that but no what i&amp;#39;ve seen time and time again is that there&amp;#39;s too much crap it&amp;#39;s not distilled and there&amp;#39;s no body there to help that&amp;#39;s what we&amp;#39;re here for cool all right let&amp;#39;s go back to little leon here we got a lot of stuff to catch up on tonight uh remember if you are here i would appreciate you checking in please you can do exclamation point check in uh the check-in is also always in the discord messages that you get uh that link will take you to the tweet please go ahead and give it a retweet go ahead and give it a like and uh that really does help the community grow it does help other folks find us so that hopefully they don&amp;#39;t wind up paying hundreds and like hundreds of dollars thousands of dollars to learn the same stuff they can learn here for free also this is a practice you want to get into twitter is going to be a really important tool for us as we continue on that networking piece that we talked about on tuesday twitter makes that a lot easier uh so when you check in you&amp;#39;re using that 100 devs hashtag you can find each other you can follow each other you can start to build that network of folks that are going to help jorgen gave me the posture check all right there we go get a nice little posture check somebody says i have heterochromia i do have heterochromia how would you see it maybe i want the big leon means one of my eyes is a different color than the other that&amp;#39;s wild thanks for paying attention all right we&amp;#39;re making a lot of changes and there is a lot of y&amp;#39;all a lot of y&amp;#39;all showed up and a lot of y&amp;#39;all came back i&amp;#39;m so happy that you&amp;#39;re taking this journey with us but it is definitely a surprise and so give us a little bit of time to make things a smooth and comfortable experience for everyone you can see that we made some changes here on uh on twitch we&amp;#39;re using slow mode we&amp;#39;re making sure that if you joined us recently so like if you&amp;#39;re brand new to the stream uh you have to have been here for a few minutes before you can start chatting you&amp;#39;ll notice you can only really send one message every 30 seconds so we&amp;#39;re going to be playing with those we&amp;#39;re going to dial it in we&amp;#39;re going to figure out what works what doesn&amp;#39;t work right and we&amp;#39;re gonna make some changes right we&amp;#39;re gonna make some changes to the twitch and then we&amp;#39;re gonna make a lot of changes to discord uh so this weekend this saturday expect it to be wild on discord uh we&amp;#39;ll be getting rid of some channels adding a lot of channels and making it easier to use threads and to find the things that you want to find but we&amp;#39;re going to make it nice and neat and easy for everyone and so give us a little bit of time over the weekend myself the mods are working really really hard to make this a wonderful experience for you uh we&amp;#39;re blessed to have so many people that are tuning in to join us on this experience and build this community and build off the community we built before and so i asked for a little bit of time a little bit of grace we&amp;#39;re going to get there with you now one of the other really exciting things that are coming up and one of the big things that people keep asking me so i wanted to throw it out there at the beginning and that was hey leon i want i want like a smaller group i want to i want to get to know people better uh why can&amp;#39;t i have like this type of group or that type of group we&amp;#39;re working on it uh next week we will have a survey that will go out to all of you and you&amp;#39;ll be able to select what type of group you want to be involved in you they&amp;#39;re going to be like study groups like a smaller microcosm of the 100 devs community where you can get to know each other better work together and so we&amp;#39;re gonna have it across different time zones uh different kind of languages affinities uh groups so that you can all come together and you&amp;#39;re all gonna have your own space on the discord so you&amp;#39;ll have your private text channel your private voice channel so just know that that&amp;#39;s coming hopefully that&amp;#39;ll make it easier for you to make friends and to to find the community that you deserve here on twitch and discord so just know that that&amp;#39;s coming uh that&amp;#39;ll start happening next week and then this weekend expect a lot of changes on twitch and discord remember we have our office hours on sunday so i&amp;#39;m excited to see you all there remember office hours are not required it&amp;#39;s just a time for us to come get questions answered we&amp;#39;re going to use a slightly different format where you can upvote the questions so the only bangers get answered but yeah so lots of changes to be had because a lot of folks showed up but we&amp;#39;re happy that you&amp;#39;re here now i have one major ask i commit hours upon hours each day to answering you all on discord like a lot of time i don&amp;#39;t know if you&amp;#39;ve looked in that ask leon channel but i i just go in waves and i respond to as much as i can now the the the ask i have of you is that you please only put questions into the ask leon channel on discord don&amp;#39;t respond to other folks don&amp;#39;t say even like thank you just put your questions lady thank you for the hydration lady raff thank you just your questions uh don&amp;#39;t you don&amp;#39;t have to say thank you don&amp;#39;t do any responses and the reason why is because i need to be able to bang through each of those questions right and be able to answer you as quickly as possible so please keep keep that channel sacred in a little bit of a way right just your questions uh just um no responses and make sure that it&amp;#39;s like a question that only i could answer right so if it&amp;#39;s like something general about the program when do i submit something where do i do this there are plenty of other 100 devs channels that you could ask those questions in where you&amp;#39;re going to be able to get the help that you need all right i think uh folks found that the gift itself makes sounds and now they&amp;#39;re using them so it&amp;#39;s going to turn down my sound there we go cool what am i drinking i&amp;#39;m always drinking tea most likely on on stream cool all right thank you so much for that i appreciate that thank you now a big question that came up a lot between now in class was homework when&amp;#39;s it due ah how do i turn it in right well don&amp;#39;t worry homework is always due a week after it is assigned so on on tuesday you were assigned the two videos by ali abdal and you were assigned the coursera course learning how to learn all of that is due next tuesday let me say it again watching the two videos and the entire the entire coursera learning how to learn course not just the first week the entire course please do not do the essays and do not pay for the certificate but it&amp;#39;s all four weeks because it is straight heat it is the thing that will be the difference maker in your time with us here at 100 dose if you can learn all those tools tips tricks and put them into practice each class you&amp;#39;re going to be a lean mean studying machine and i want that for you so that&amp;#39;s why i sign it now the expectation is that you&amp;#39;re putting in at least 10 hours a week outside of class time say again expectation right is that you&amp;#39;re putting in like 10 hours a week outside of class time so that means those two videos and that course easy peasy right you should be able to get that done and notice i&amp;#39;m not giving you like really wild programming assignments yet we&amp;#39;re not there yet we&amp;#39;re gonna work our way up to writing code and getting that kind of being the main focus but it&amp;#39;s so much more important that you lay a foundation of learning how to learn before you ramp up in terms of your technical knowledge yeah slow degree said two hours a day yes remember we don&amp;#39;t chunk our time we take a consistent approach so many folks so many folks start that journey to learn how to code and they&amp;#39;re they&amp;#39;re on the starting line and they trip and that&amp;#39;s it they had a brief moment where as they were crashing into the ground they were studying and then that was it don&amp;#39;t burn out don&amp;#39;t trip out the gate be beyonce all right oh before i also move on is that the homework that is assigned today will be due next thursday so you&amp;#39;re going to have some extra work that&amp;#39;s assigned today that is due next thursday so next week some of those 10 hours are going to be doing not only the homework through tuesday but the homework due thursday as well now some of you well you all came back so that means something right we lost a few folks that&amp;#39;s that&amp;#39;s expected right we&amp;#39;re going to lose some as people figure out like is this experience for me or not but you came back so that&amp;#39;s great and for some folks when they start to hear all of the things that have to get done right they start to hear all right leon i need to watch videos i need to do homework i need to do all these things you&amp;#39;re standing on the tip of this hill all right you&amp;#39;re standing on the tip of this hill looking over into the trough of sorrow and you all have a decision to make i can&amp;#39;t make that decision for you you all have a decision to make right do you want to become a software engineer and are you going to commit to the process what it takes to become a software engineer i can&amp;#39;t make that decision for you what i can do over this week and next week is present the opportunity to you i presented it on tuesday we&amp;#39;re going to present it again tonight but what i can tell you is that i have helped hundreds thousands of people go on this journey i know where you&amp;#39;re going to get stuck i know where you&amp;#39;re going to hit a roadblock and i&amp;#39;m going to try and make it as smooth as a process as i possibly can so if you&amp;#39;re standing on top of you doomy hill and you&amp;#39;re looking over and screaming know that you are in good company now i have a secret to tell you i have a secret to tell you i tell you my secret in your arms i have a secret to tell you i&amp;#39;m going to show you something on my github github is a place that you can store your code so you can share with other developers on my github i&amp;#39;ve and don&amp;#39;t you all do this this is this is this is for other people on my github i&amp;#39;ve had this for a very long time if you&amp;#39;re learning how to code i&amp;#39;m happy to build you a custom learning plan that takes into account your strengths and what you want to learn this has been on my github for a while but i&amp;#39;ve also made this promise to lots of folks at my day job i run a boot camp called resilient coders and we have hundreds and hundreds of people that come to learn how to code at resilient coders we used to have open office hours before the pandemic where anyone from the city could stop in meet us and i would build them out a custom learning plan now what i always told these individuals was hey i will happily build you out a custom learning plan i will build out the next couple weeks for you i will meet with you every week we&amp;#39;ll go through it together we&amp;#39;ll make sure you get unstuck when you get unstuck but here&amp;#39;s what i want you to do first here&amp;#39;s what i want you to do first i want you to do the first segment of free code cam i want you to do the html and css all the way to that first that first project do it and when you come back to me i am going to build you out a full plan i will be your mentor i will meet with you week by week by week okay i gave that promise to hundreds of people let&amp;#39;s say out let&amp;#39;s say the first hundred out of the first hundred people i made that promise to just do this first section of a of a program come back to me and we&amp;#39;ll work out the rest out of that first hundred how many you think actually came back to me with it done some people already know how many out of the first hundred that i gave that promise to how many came back to me with it done two now that&amp;#39;s nothing against free code camp i love free code camp i think it&amp;#39;s a great way to get some some practice in but it speaks to something bigger it&amp;#39;s that a lot of folks come out the gate wanting to learn how to code but something happens something happens something happens that stops them from getting to the thing that they wanted people are saying stress sadness burnout they&amp;#39;re so the devil there are so many things that will stop someone from being successful at learning to code even if they really wanted it and we talked about some of the solutions to these problems but i have found a method that increases the success rate of that gambit that i&amp;#39;ve given to people so the first thing that helps people when i give them that first assignment to actually get through that trough of sorrow to get through that initial push of wanting to learn how to code that very first thing is community if they don&amp;#39;t have community they don&amp;#39;t come back the students that would come back to our like open office hours every week those were the ones that actually continued on the path to learning how to code right it was the folks that that knew when they sat down the room they were around other people even if they didn&amp;#39;t talk to a single person in that room just being in that room knowing that other people were grinding out learning how to code that energy right that made them more successful so community was one of the very first things that i saw that unlocked the ability to actually get over that initial hump of learning that&amp;#39;s why all of us being here together is so important right it&amp;#39;s why us coming together on tuesday thursdays and sundays is important it&amp;#39;s why discord as wild as it is right now is so important there&amp;#39;s a reason i don&amp;#39;t use a forum there&amp;#39;s a reason why we make it so that it&amp;#39;s live there&amp;#39;s a difference when you&amp;#39;re with folks that are going through the same experience there&amp;#39;s a difference when there&amp;#39;s folks that will help you get unstuck and there&amp;#39;s a difference just when the energy is in the room and so i am glad that you came back here i&amp;#39;m glad that you want to go on this journey together and i&amp;#39;m glad that you found us because we&amp;#39;re going to work tirelessly to build a community that supports each and every single one of you on that journey to learn how to code so that that two is a number that i don&amp;#39;t ever have to talk about again now we talked about the other things last class that help folks make it to the end and screw making it to the end let&amp;#39;s make it to next week first so many folks come out the gate should i do this tutorial should i do that tutorial i&amp;#39;m freaking out like there&amp;#39;s so much on the line let&amp;#39;s let&amp;#39;s just chill for a second let&amp;#39;s get the next week we got 30 of them let&amp;#39;s let&amp;#39;s get the next week first let&amp;#39;s get the next week first you&amp;#39;ll have plenty of time to go chase that thing in that thing let&amp;#39;s focus maybe for the first time in a while let&amp;#39;s focus on one process one way of doing things and let&amp;#39;s do it together so that we can make it to next week and the next one and the next one there are lots of other things that could take up your attention that could suck up your mental energy for learning but what i&amp;#39;m telling you is i have laid a path that has helped thousands of people learn how to code and hundreds get jobs and i&amp;#39;m gonna keep saying that you don&amp;#39;t need to take my word for it i make these claims i check the weather and it&amp;#39;s real hoppy outside i always check the weather when i make these claims it gets real real hoppy outside and so what i want you to do is to not to not take my word for it but go to the celebrations channel don&amp;#39;t spam in the celebration channel but go to celebrations channel i pinned 50 folks that got jobs that were celebrating this community that we&amp;#39;re celebrating that this community was the thing that helped them get across the finish line so don&amp;#39;t take my word for it literally just go to celebrations channel look at the pinned look at the pinned messages that are in that channel and i pinned 50 of them you know why there&amp;#39;s only 50. know why there&amp;#39;s only 50. there&amp;#39;s only 50 because that&amp;#39;s all it lets you pin i could keep going baby i could keep going i could keep going but that&amp;#39;s the limit that is the limit that&amp;#39;s all they let me do so that&amp;#39;s what i had to do that&amp;#39;s what i had to do they said they only get 50. that&amp;#39;s what i had to do i pinned 50 because that&amp;#39;s what i had to but guess what there&amp;#39;s more [Music] go check all right that&amp;#39;s all i got to say about that i pin 50 because that&amp;#39;s all i could pin only bangers we don&amp;#39;t get got all right so we talked about community we go get exactly we don&amp;#39;t get got we go get around here all right 10 50 what so i went into the celebrations channel and i pinned every person that mentioned getting a job and celebrating this channel so don&amp;#39;t take my word for it ignore the ops go take go take a look for yourself all right now the the other things that we talked about that get you off of this this hill of of damnation we talked about community being one of the secrets but it&amp;#39;s that idea of managing frustration right all of you all are about to get frustrated like real frustrated there there&amp;#39;s there&amp;#39;s no way that you make it through this program without being at a point where you want to give up every single one of you&amp;#39;re going to hit that point and the difference between folks that make it from here to the end are simply individuals when they have the privilege of being here don&amp;#39;t give up now the next thing we talked about was that consistency making sure that we&amp;#39;re not chunking our time we learned we learned right we learned that if we chunk our time if we just study all day saturday that that is less effective as a study habit than it is to spread out our learning each day no chunkers there you go and the last thing that i see folks time and time again trip up on is they don&amp;#39;t take care of themselves they don&amp;#39;t take care of themselves they they burden themselves with having to juggle 14 different tutorials and feeling like they got a grind leak code until their eyes fall out they&amp;#39;re staying up until three o&amp;#39;clock in the morning because they got a code code code when they would be way better off having stopped six hours ago had some tea given a light stretch and gone to bed so give me give me a couple weeks give me a month give me a month to paint a picture at the end of the month if you&amp;#39;re like screw it leon i don&amp;#39;t like this you can go it was free you can go but i think if you give me that month to show you that you can manage that frustration that you can be consistent that we can create a space where not only you are learning but you are taking care of yourself i think you&amp;#39;re gonna find that maybe for a lot of you it&amp;#39;s the first time that a lot of this clicks now part of that consistency right part of that consistency is making a plan you gotta make a plan you gotta make a plan for how your days are gonna be structured a lot of folks wake up and go into their day like an accident you can&amp;#39;t do that anymore if you&amp;#39;re committing to becoming a software engineer and learning everything that it takes to get to that job within these 30 weeks you got to wake up with a plan so what i do is every month i plan out my month every sunday i plan out my week and then i plan out every single day my google calendar i wish i could show it to you every single day has exactly what i should be doing and where i should be if it&amp;#39;s not on my calendar it does not happen and that&amp;#39;s that&amp;#39;s a symptom of some of the issues i deal with day to day but for me that&amp;#39;s the that&amp;#39;s the way that the plan works so one of the things i want you to do this weekend is to make a plan what are your days going to look like when are you going to study what works for you right and then you must realize that you might have to get some other folks involved right a lot of you have partners or a lot of you have family or a lot of you have jobs or other responsibilities you got to plan that in you got to have those conversations with those that you care about saying hey look i&amp;#39;m committing to these next 30 weeks because i think it&amp;#39;s the best move for myself for you for our family for our friends and so i&amp;#39;m gonna need some time some of you might actually have to ask for that time because it&amp;#39;s not a given some of you might have to realize that studying in the morning is way easier than studying at night and so make a plan if you want to be one of the folks that make it to the end they all had a plan they didn&amp;#39;t go into each day hoping to find the time to study that time the study was already on their calendar and that calendar was already shared with their partner cool now talked about the the other kind of little tricks that i&amp;#39;ve noticed that help folks get through the beginning stages of learning how to code community is the biggest managing frustration being consistent with a plan being consistent with a plan taking care of themselves getting good sleep hydrating every single one of my resilient coders cohorts every single one somebody goes to the hospital every every single one we&amp;#39;ve ever taught somebody&amp;#39;s gone to the hospital every single one and it&amp;#39;s always because their hands start to hurt their hands start to hurt they start to get really serious pain in their forearms and their wrists and their fingers and that&amp;#39;s always because when i said this very important thing take care of yourself they don&amp;#39;t do it so when we take those breaks at the top of the hour please take that break get out from your chair right if you&amp;#39;re able to walk around if you&amp;#39;re able to make sure you&amp;#39;re letting your eyes focus on something that is not what you&amp;#39;ll be focusing on let your hands relax shake them out give a little bit of a light stretch i&amp;#39;m going to share some videos next week on the stretches that i do to stay healthy i&amp;#39;m a big boy but i still stretch every day i have a a split keyboard a rollerball mouse like i i take this seriously and so that taking care of yourself is a lot it&amp;#39;s it&amp;#39;s understanding that what you&amp;#39;re about to do you might not have ever done before hitting all those accessory keys makes your fingers move in ways that unless you have some people play saying they played piano unless you play piano you&amp;#39;ve never really stretched your fingers in those ways you&amp;#39;ve never stretched your forearms in those ways it is a serious toll on your body so you have to take care of yourself right you got to get that sleep in if you want memory consolidation to happen so they&amp;#39;ve made a plan they&amp;#39;re taking care of themselves and then here here&amp;#39;s a cheat code ready for a cheat code tell someone i want every single one of you right now to tell someone that you are becoming a that know [ __ ] that that you are a software engineer and that you are committed to learning web development over the next 30 weeks tell someone if you don&amp;#39;t have someone to text or call put it up on twitter put it into the void all right tell someone i&amp;#39;m serious i&amp;#39;m gonna stop right here i&amp;#39;m gonna put the tunes on go ahead i&amp;#39;m gonna put a timer up i&amp;#39;m gonna give you a minute you want the chico this is it it&amp;#39;s that commitment tell someone go for it i&amp;#39;ll wait you&amp;#39;re a software engineer you&amp;#39;re committed to learning web development tell someone oh oh [ __ ] i didn&amp;#39;t even realize hold up [ __ ] that was not intentional all right got 20 seconds left to tell someone done i see a bunch of duns nice all right there we go all right let&amp;#39;s come back you told someone beautiful that was the first cheat code you ready for the second cheat code i gave you the first one telling someone does something to our brains where we have to be more successful are you ready for the second cheat code here&amp;#39;s the second one [Laughter] now tell everyone tell everyone put it public go on your your your your instagram your twitter whatever it is tell everyone i&amp;#39;m serious whatever social media you use the most where the most people that care about you will see it put it software engineering my journey becoming a full stack web developer do it put in your bio live that life i&amp;#39;m going to give you another minute for this you got that you got so i&amp;#39;m telling you you asked leon what are the tricks what are the secrets there&amp;#39;s there&amp;#39;s there&amp;#39;s i guarantee you at least a thousand of you that are not going to do this and in a couple weeks from now when times are getting tough and you&amp;#39;re like leon my brain&amp;#39;s just not working why can&amp;#39;t i sit down and study more it&amp;#39;s because you didn&amp;#39;t do this right now my students that share publicly what they&amp;#39;re doing their aspirations the things that they&amp;#39;re working on they succeed you got got i&amp;#39;m gonna be with you got cop don&amp;#39;t you take the 20 seconds hold your family good twitter bio is updated wonderful kimberly&amp;#39;s boyfriend looked at them sideways that&amp;#39;s all right you&amp;#39;ll see kimberly they&amp;#39;re going to see they&amp;#39;re going to realize wonderful that&amp;#39;s the secret folks that&amp;#39;s the secret you put it out there people now know and here&amp;#39;s the beautiful thing about this you will be surprised how many folks are in your network that are also software engineers or that needs somebody to build a website to do things so the more you put it out there the more that comes back your way now you&amp;#39;re a little bit more accountable you&amp;#39;ve built up some things here that are that are in your favor all right you&amp;#39;ve built up some things that were in your favor you&amp;#39;re committing right you&amp;#39;re committing to a community a community that you&amp;#39;re going to support and then in turn is going to support you you&amp;#39;re committing to knowing how to manage your frustration or at least working on it knowing that in the moment when you are frustrated there&amp;#39;s something that you are going to work on you&amp;#39;re committing to consistency and a plan for each one of your days to learn how to code you&amp;#39;re committing to the idea of taking care of yourself not over extending taking breaks when you need them or should take them and getting good sleep you&amp;#39;ve told someone you&amp;#39;ve told everyone now you got to do it and on the days where you feel like you can&amp;#39;t do it guess what we&amp;#39;re here to help all right last class we saw uh the amazing amazing active recall uh anybody get a chance to watch the videos yet they&amp;#39;re amazing i hope you got a chance to watch them already if not you&amp;#39;re in for a treat this weekend active recall the idea the idea that i can do a fourth of the work and get better results is mind-blowing we know that if you were to just read something once and then actively recall the things that you learned you were better off than rereading that material four times four times folks you&amp;#39;re better off once and a recall versus four times come on now now here&amp;#39;s the real question we had a lovely raid phenomenal raid rav is one of the best people on this earth always in our discord helping everyone but after that raid the active recall did you actively recall the things that we learned yes i&amp;#39;m looking at you you right there in the back right there did you actively recall because if you didn&amp;#39;t you [ __ ] up if you didn&amp;#39;t you [ __ ] up so that&amp;#39;s all right it&amp;#39;s all right all right all right it&amp;#39;s cool all right it was the first one you didn&amp;#39;t listen to me that one listen to me now when you go through these classes remember we&amp;#39;re not taking notes we know that&amp;#39;s an inefficient right it&amp;#39;s an inefficient study habit but probably taking questions is a really good idea right so taking questions so that at the end of stream right at the end of stream you can go to the raid have some fun hang out i&amp;#39;m always hanging out post raid and then when the raid&amp;#39;s done you feel good you look through your questions right you look through your questions and you actively recall now today right today right today you&amp;#39;re gonna get into more material right you&amp;#39;re gonna get into more material and so today it&amp;#39;s really important that you do actually actively recall post class you could have got away with it a little bit last class but no more classes will you be able to get away without actively recalling okay and that&amp;#39;s because learning to code is a cumulative career the things that we learn today are things that you&amp;#39;re going to have to put into action next week the week after months from now years from now and so we have to flatten our forgetting curve right now if you put in all the work if you watched all the videos if you paid attention the whole class you actively recalled after that class there is still a good chance that by day eight you forgot everything there&amp;#39;s a good chance even if you did everything right you came you took questions you actively recalled right all right there is still a good chance that in eight days you will have forgotten something and so we need to flatten our forgetting curves right we need to flatten our forgetting curves and make sure that you&amp;#39;re using some sort of space repetition tool like enkei enki will stop this forgetfulness from happening and so please when you make your plans this weekend and you&amp;#39;re setting up your days for studying and for class don&amp;#39;t forget to include anki i can&amp;#39;t use it unless you show me leon no that&amp;#39;s not how this course is gonna work you are all gonna get super powers your ability to google will be next level your ability to figure things out will be next level and then when you really have given it the good old boot camp try right when you&amp;#39;ve given it the good old boot camp try you&amp;#39;ve researched you&amp;#39;ve put in the work and you can&amp;#39;t figure it out and you come to discord we&amp;#39;ll be there to help you all right but you got to take control all right you got to be the type of person that solves the problems that comes their way because that&amp;#39;s what a software engineer does we solve problems that have not been solved before and we get paid good money to do it so you need to start practicing that right you got to start practicing that every day now i&amp;#39;m not going to skip the good stuff or the big stuff we&amp;#39;re always going to have classes on it we&amp;#39;re going to have a class on anki but please before you say oh what about this what about that give it a try get into that mode of researching exploring trying to figure out on your own before you come to the community to get unstuck it&amp;#39;s freeing right it&amp;#39;s being freeing all right there&amp;#39;s people saying like start already leave go don&amp;#39;t you don&amp;#39;t have to be here but close your eyes like take out your headphones and like walk away uh this is called spaced repetition if you were here last class you know what we&amp;#39;re doing every single class is going to be like this right every single class is going to be like this where we spend a good 30 minutes plus reviewing because folks here are starting from the beginning you can go do some other tutorial you can go do some other stuff if you want you don&amp;#39;t have to be here skedaddle leave sayonara i i don&amp;#39;t need you here because every single class guess what we&amp;#39;re going to start off by actively recalling getting our space repetition in and in the beginning it&amp;#39;s going to be a third of class as we get further into the course guess what we don&amp;#39;t need to repeat as much right you don&amp;#39;t have to repeat as much if you don&amp;#39;t want to be here don&amp;#39;t be here i don&amp;#39;t know why you&amp;#39;re here go i&amp;#39;m looking cute today that&amp;#39;s what it is that&amp;#39;s all it is folks i&amp;#39;m looking cute today it&amp;#39;s my my raw animal magnetism that&amp;#39;s pulling them in they&amp;#39;re staying here for that i understand i get it you came here for the code you you met me and now you&amp;#39;re in love and like you just can&amp;#39;t go away so you&amp;#39;re you&amp;#39;re frustrated you don&amp;#39;t know how to handle the the the the feelings that you have right now that&amp;#39;s okay we&amp;#39;re here for you but uh you can just close your eyes that&amp;#39;s all you got to do alrighty alrighty now to continue our space repetition i got him [Laughter] got him to continue our space repetition and we say bye-bye we got him oh and we say bye-bye to continue our space repetition um we are going to talk about what is the internet we&amp;#39;re going to review the basics what the heck does a front-end web developer do what does a back-end web developer do why are we software engineers but also full stack web developers so we&amp;#39;re going to review that but before we review it it&amp;#39;s top of the hour this is the top of the hour we must stay healthy must be beyonce we must take our break so let me go ahead and slide up the five minute timer here we&amp;#39;re going to take our full five minutes cool put some tunes on please if you are able get up stretch move around go to the bathroom say hello to your loved ones i don&amp;#39;t know play with your your rubik&amp;#39;s cube whatever whatever gets you going during the break to get you away from the screen moving around let your eyes focus on something else and we&amp;#39;ll be back in four minutes and 38 seconds cool all right folks uh please take that break i am going to take the break myself and i will see you soon if people want bob you&amp;#39;ll get bob you um so my do you how are you liking the eagles chances this weekend i don&amp;#39;t really follow football i know i&amp;#39;m a bad philadelphian i don&amp;#39;t really follow sports honestly other than like rugby basically my grandfather calls me and keeps me up to date i&amp;#39;m from california is the philly cheesesteak that good it&amp;#39;s the best the best of the sandwiches by far bill&amp;#39;s on 24th street best cheesesteak spot in philly mods if anybody says something other than phil&amp;#39;s in 24th street give him a light band something he&amp;#39;ll eat a real flu cheese steak do you fancy ponyta&amp;#39;s there was um a meta a couple years ago that was like the rapid dash and like the ponyta meta there was a meta deck that was really good my google calendar is much more busy now let&amp;#39;s go all right folks come on back come on back uh you can actually see if you do estimation point pokemon in chat there is like the list of pokemon cards that are available for um channel points and i send them anywhere in the world it&amp;#39;s another bunch you can see that you can see what&amp;#39;s on the list there all right folks come on back hope you had a good break yeah hold on let me see if i can grab the list here yeah so we can see here we got some good ones and these values are way off now like way off in terms of value i have no idea what these cards are worth right now but we got some some good cards here we got like the full the full legendary sets which are pretty cool um i used to run a typhlosion deck that was really like a big deal in one of the older metas um so i got a bunch of like the good typhlosions yeah so there you go something some other fun things you can do at channel points if you would like remember channel points you just get by being here so the more you&amp;#39;re in stream the more channel points you get and uh when we do raids if you do the raid you also get channel points favorite pokemon is bulbasaur all right let&amp;#39;s get back into it folks we got a lot of stuff to get to tonight and so i want to make sure we we cover it all let&amp;#39;s come on back come back from your stretches grabbing your water and let&amp;#39;s go through this together all right so last class we talked about what the internet is so chat what is the internet a wire it&amp;#39;s wires series of cables how i get milk series of tubes wires across oceans yeah it starts off with a wire right and we can actually look at these transatlantic internet cables and see them so we got these like big beefy cables that lay across the ocean and we can see that there&amp;#39;s a bunch of them all across like connecting all the countries together um these were like originally telegraph cables like the first people to do that and then like eventually they became fiber cables and other wonderful stuff now and so there are a lot of these right these are there&amp;#39;s a lot that we know i&amp;#39;m sure like high frequency trading firms and like um other governmental agencies have their own as well but there&amp;#39;s a lot of these cables that connect around the world in fact there was this trading firm that ran a cable from new york to chicago just to get a better connection which is pretty cool and so we have these wires that we can send data across and the idea of the internet is that we can have this system that relies on top of this protocol called http and it&amp;#39;s a system where we can send requests and get responses and it&amp;#39;s a system where we can make requests from our client-side devices and get a response from our server what type of code runs on our client-side devices that we know of so far what type of code do we know that runs on our client-side devices html css javascript yup these are all client-side like all code that runs on the client side and so someone that specializes in that html css and javascript the html that we&amp;#39;re going to be writing today somebody that specializes in that html that css.javascript what would we call them like what would be their job title yep they&amp;#39;d be a front-end web developer right they&amp;#39;re a web developer developing stuff for the web but if they focus just on the client side they focus just on the stuff that runs on our phones or tablets or desktops in the browser we would call them a front-end web developer now those devices make requests to our servers and our servers do a lot of stuff the primary thing that a server does is it listens for those requests and there&amp;#39;s some code that&amp;#39;s running on it that knows how to respond to those requests sometimes it hears a request from our client side device and it needs to talk to a database or it needs to process a credit card or it needs to just respond with some things right so the code that runs on the server if you focus just on that what type of developer would you be someone that just focus on stuff that runs on the server yeah you&amp;#39;d be a backend web developer and then just the last question here if you worked on both the server side and the client side both the front end and the back end you consider yourself a what a full stack web developer and that&amp;#39;s exactly what we are to be here we are full stack of developers now if you&amp;#39;re someone that can write code conduct yourself as a professional knows the tools and systems behind the code that you&amp;#39;re writing maybe knows a little bit more about the the math and the the the efficiency of the code you&amp;#39;re writing what would you call yourself you would call yourself a software engineer exactly so after today we will all be software engineers that focus on full stack web development right you just told your friends that&amp;#39;s what we&amp;#39;re doing here we&amp;#39;re trying to become full stack web developers right we&amp;#39;re already software engineers but we&amp;#39;re going to focus on full stack web development we could go write code for robots we could go write code for refrigerators we&amp;#39;re focusing on a skill called full stack web development and the reason why we&amp;#39;re focused on full stack of development is solely because of job demand right now there is an overwhelming amount of demand for web developers specifically folks that know the front end and the back end and the beautiful thing is you only need to learn one language and that&amp;#39;s javascript because javascript works both on the front end and the server side by something called node right so there&amp;#39;s this beautiful window open right now where we don&amp;#39;t have to go and learn ruby and rails we have to learn python we can learn javascript and write code both on the client side and the server side it&amp;#39;s a good time to be alive folks all right now last class i said separation of concerns was the golden rule the most important thing that i was going to teach you right why is this rule so important why do we why do we want our html separate from our css our css separate from our javascript why is that important yeah for organization exactly when we come back to our code a month later we wanted to be able to go to a place and figure something out right you want to know where to go if we&amp;#39;re working with other developers we want to be able to tell them where to go and look to find things so if i said to you hey i want to make my pizza ordering app right i want i want to be able to drag the ingredients onto the pizza shout out dominoes right i want to drag those ingredients onto the pizza what what technology am i using yeah i&amp;#39;d be using javascript and if domino&amp;#39;s comes out with a new ingredient that they&amp;#39;re now making available to all their pizzas and they have to update the content on that website what technology would we use to list that new ingredient yeah be html nice and if that new ingredient is blue all right if it&amp;#39;s blue i don&amp;#39;t think i can use green if i use green i think it&amp;#39;ll get chroma keyed yeah that&amp;#39;s green it&amp;#39;s just chroma keyed outside the green screen behind me so if it was blue or green do blue get chroma keyed no it&amp;#39;s interesting it was blue or green what would we use yeah css cool so if domino&amp;#39;s adds a new ingredient that content that&amp;#39;s html if that content is gonna be blue or green that&amp;#39;s css and then if they wanna make it so they can drag it onto the pizza that&amp;#39;s all javascript we learned some stuff last class look at us look at us chat hey proud of you keep it going keep it up all right we also learned the beginnings of html now we we briefly mentioned that html and css are not really programming languages they&amp;#39;re what we call markup languages uh alan turing modern grandfather of computer science had this completeness test that said if you give a language like an operation and you get a response back then you might be dealing with like a programming language so if i was to give html two plus two i&amp;#39;m never getting four back if i was to give css five plus five i&amp;#39;m never getting 10 back but if i was to give javascript i don&amp;#39;t know three plus three it&amp;#39;s gonna give me six back all day long right and so that makes html and css not full programming languages but rather markup languages but they&amp;#39;re all languages the same and just like any language there&amp;#39;s gonna be spelling and grammar rules that that language has to abide by like when you&amp;#39;re writing spanish you have the enyes right like when you&amp;#39;re learning other languages you might have special characters right that you could use each language has its own spelling grammar punctuation that makes it up when we&amp;#39;re talking about markup languages and programming languages we call that syntax right so each language will have its own syntax thank you mac thank you for the hydration cheers to you each language has its own syntax all right now the beautiful thing about html is that we have an opening tag and a closing tag every bit of content that you have on the page must be wrapped in tags and sometimes those tags we give them a little bit of like a super power and we call those super powers an attribute value pair for today and next week we won&amp;#39;t really have to worry about too many of these attribute value pairs there are kind of like two that we&amp;#39;re going to run into a lot when we have links that link has to go somewhere so there will be a special attribute value pair for that and then when we get to images they&amp;#39;re going to need like a source that shows you what image to show so outside of those we won&amp;#39;t really see too many and today we&amp;#39;re going to cover the basic tags that you need to be successful for building pretty much any website we&amp;#39;re gonna learn about 15 tags today they&amp;#39;re probably around like 30 that i use day to day and there are a bunch more there is a wonderful website however called the mdn the mozilla developers network it&amp;#39;s by the people that make firefox well they have this documentation for html css and javascript it&amp;#39;s actually linked as part of your homework on discord but anything that you would ever want to know about html is on this site and it&amp;#39;s beautiful it&amp;#39;s perfect it&amp;#39;s always good and so you&amp;#39;re gonna typically keep the mdn open while you&amp;#39;re working on this stuff okay jasmine don&amp;#39;t worry we&amp;#39;re gonna we&amp;#39;re gonna talk more about those actual value pairs give me a chance to show you one live cool with w3school suffice no get out of here run absolutely not absolutely not so what happened with w3schools is remember we talked about that world wide web consortium the w3c that certain burners lee created well w3 schools just kind of like took that name right and built out like their site and when it first started it was horrendous like it was really bad and they always had wrong stuff on there they didn&amp;#39;t update it and so it was just it was just bad all around and it was the bane of my existence because they had really good seo it always showed up but it just led my students astray they over the past few years have like modernized it and made it better but they don&amp;#39;t get a pass they [ __ ] up they ruined the web for a while so it&amp;#39;s over we&amp;#39;re not making up they&amp;#39;re done so no get out of here mdn is where it&amp;#39;s at we also took a quick we took a quick peek at this first kind of throw at html i didn&amp;#39;t want you to type any of this stuff i just wanted to show you some html and we were kind of running out of time so i went a little bit quicker day ops exactly raised adam to add them to the ops list uh we we added some html here you can see that all of my content right all of my content is wrapped in tags there&amp;#39;s not any text that is not wrapped in tags you can see that everything is wrapped in these lovely tags right this is vs code yep yes code now we have here this last paragraph and this last paragraph is appropriately wrapped in that paragraph tag remember each tag that we choose has a rhyme and reason like the purpose behind why we would pick that tag anybody remember what what that&amp;#39;s called like the purpose or the rhyme and reason behind why we chose that tag the specific word for that yes semantics the semantic meaning yes so this was a big block of text so semantically it is a paragraph so i wrapped it in a paragraph tag beautiful now if we were to read this paragraph however let me read it if you would like real-time answers to your questions please join our discord here what the heck does here sound like what is what should that be a link yeah it should be a link so in html we have a tag that handles links okay we have a tag that handles links and so that tag is an anchor tag so i&amp;#39;m going to go ahead i&amp;#39;m going to open up my a tag then i&amp;#39;m going to go around the text where i want it to close and then notice how the closing tag simply the only differentiation is that it has a lovely forward slash so the open tag and the closing tag are the same except for that forward slash however remember we talked about those super powers right we talked about how sometimes we need our tags to do a little bit more right we need our tags to just be able to do something a little bit extra and so our anchor tags which are for our links has an attribute value pair that we can use i don&amp;#39;t like this uh go into the new line has an attribute value pair that we can use right that is called an href so the href equals and then inside these quotes i can put the link so our discord link is https forward slash forward slash leon noel.com discord right that&amp;#39;s the actual link to our discord now the text right the text that will show up in the browser and don&amp;#39;t worry about following along right now i&amp;#39;m just showing you you shouldn&amp;#39;t be typing anything right you&amp;#39;re here to absorb right now right what you&amp;#39;ll notice is that this text here will still show up however when i click on it it&amp;#39;ll go to this link that&amp;#39;s the power of having an attribute called an href our anchor tags or our link tags can have that href that&amp;#39;ll take the user somewhere now something interesting about this page right now this page is not saved can anyone in chat tell me how i know i have not saved my work what does href stand for it stands for hypertext reference remember how we said that the protocol that the internet uses that http that hypertext transfer protocol well this href is a hypertext reference it&amp;#39;s old school it&amp;#39;s how the internet works yeah this dot at the top right this dot at the top tells me that my start at the top tells me that my file has not been saved right and so as soon as i save you can see that that dot goes away right as soon as that dot goes away i can&amp;#39;t even repeat that but it&amp;#39;s hilarious uh as soon as as soon as we um save that dot goes away and we are able to now go ahead and open this uh go ahead and open this in our browser so irish you already have it open and if i come over here and i refresh we&amp;#39;ll notice that this here right this here right this here is underlined and like purple or blue why the heck is this like underlined and purple why the heck is the the h1 big bold black and beautiful much like myself why is that all there what happened yeah that&amp;#39;s automatically coming from the browser remember how we said the browser wars back in the day on tuesday every browser is kind of fighting to be the best well there are still some things that browsers do by default and if you are a front-end web developer this is one of the things you have to think about when you start a project there are many ways to handle this problem of having not written css we didn&amp;#39;t write any css we didn&amp;#39;t write any css so this shouldn&amp;#39;t be happening this is one of the things that uh we have to start remembering i like to call these money problems because they&amp;#39;re problems but that&amp;#39;s what makes us the money because we know how to fix these and as we go on i&amp;#39;ll show you how to fix these right now however when we write html do i care how it looks let me say it one more time when i write html do i care how it looks no i don&amp;#39;t i&amp;#39;ll be able to fix all of that right i&amp;#39;ll be able to fix all of that when i get to css right when i get to css i can go ahead and fix anything that looks the way i don&amp;#39;t want it to look right and so what i want you to make sure that you&amp;#39;re doing right is make sure that when you&amp;#39;re writing html right when you&amp;#39;re writing html do not care what it looks like we&amp;#39;ll get there with css cool all right so we looked at that about page and um what you&amp;#39;re going to notice is there there are some rules when it comes to html right and one of the things you might be saying is leon who cares who cares if i use the semantically appropriate tag like why does that matter right why does it matter if i use the semantically appropriate tag well there are actually three big reasons why you should care about writing semantically appropriate html like picking the right tags and using them correctly one of the first reasons is that if you do not use the appropriate tags and the appropriate attribute value pairs your content might just not render so for our general users if you&amp;#39;re not using the regular tags right if you&amp;#39;re not using the regular tags you might not give your users a good experience things might break they might not be in the right spot and so using the appropriately semantic tags means that your general users are going to have good content displayed the way that you wanted it to be shown now the second set of users we want to be concerned about are folks that may be using accessibility devices folks that may be consuming the web in a way that the general public might not we&amp;#39;re talking about things like screen readers things that make it easier for certain folks to use and consume the web if you are not using the appropriate semantic html tags things like screen readers have a more difficult time moving through the content of your page right and then the last users that we want to be concerned with are web crawlers we want to make sure that when google tries and comes and figures out what our site is about so that it can list it in the search engines right we call this seo search engine optimization if we do not use the appropriate semantically structured html tags google will not rank your content so i like to say we have a moral reason and a greedy reason morally i hope everyone in this person every person in this community cares about accessibility and uses the correct and appropriate html tags so that folks have a better experience on the web but then there are also greedy reasons first the greedy reason is that you want your website to rank in google and if you&amp;#39;re not using the right tags it won&amp;#39;t show up in google and then the other greedy reason is that individuals using accessibility devices is a large portion of the internet you have a lot of your customers future consumers of your content that are using accessibility devices and if you don&amp;#39;t use the right tags they won&amp;#39;t be able to enjoy it so pick which one you care about but remember remember you are all newly united developers of the web it is your job to go out there and do good and with this information that is your mandate cool now we&amp;#39;ll we&amp;#39;ll cover more accessibility stuff as it goes on um for today we&amp;#39;re not going to go too deep into it but we&amp;#39;re going to have a full class on accessibility all right now i would like to take a look at some tags remember we said every html tag has a specific reason right that it would be used and so we want to look at some tags and see all right in what situations would i use that tag what is the semantic reasoning behind that tag when we choose tags to write in our html it comes down to two things it comes down to the semantic importance behind that tag and it comes down to the importance behind that content right so folks are having some trouble with the closed captioning we&amp;#39;ll have to figure that out when we take a break i&amp;#39;ll double check alrighty now this right here was a uh this was a youtube rabbit hole for me right this right here we&amp;#39;re gonna look at some tags and i don&amp;#39;t mean this type of tag i mean like the html tags and so the this was a pretty deep youtube poll this is this is like a weekend or two of just consuming content this is competitive tag imagine if the sport of tag had a full community an audience and brought in all the best free runners and parkour specialists to play tag yes the ocho exactly uh it&amp;#39;s amazing i watched every single episode i could find on youtube so tonight i&amp;#39;m not talking about competitive tag i&amp;#39;m talking about html tag got the store army in here i see y&amp;#39;all all right so here are the first set of tags that we&amp;#39;re going to look at all right here&amp;#39;s the first set of tags we&amp;#39;re going to look at we&amp;#39;ll look at heading elements these are called heading elements you&amp;#39;ve seen heading elements all the time heading elements are the elements on a page that describe all the content that comes after it so if you&amp;#39;ve ever been to like say a news website you&amp;#39;re typically going to have like a heading that describes the article that comes after it right and so when we&amp;#39;re looking at our content we might have multiple headings throughout the page and there are six kinds of headings you can have an h1 a two a three a four a five or a six typically the most important content on your page the thing that describes the page the best or whatever else is to come that heading gets the h1 right so if that content is the most important how many h1s do you think we should have yeah you should have one h1 it is the most important thing on the page so you should have one now there&amp;#39;s that this is this is how i know that i know you&amp;#39;re watching there&amp;#39;s just somebody that literally when i said there should only be one h1 this is what they did they went only on i don&amp;#39;t know i don&amp;#39;t know about that there is this one there&amp;#39;s this there&amp;#39;s this edge case there&amp;#39;s this edge case technically with html5 semantically each section could have its own h1 like that that&amp;#39;s that&amp;#39;s changed now like that&amp;#39;s different they couldn&amp;#39;t contain themselves they&amp;#39;re like they&amp;#39;re literally yelling at the screen right now they just they just can&amp;#39;t contain it um that that they&amp;#39;re all there they had they had to hit up stack overflow yet today like it just boiled out of them they like it just fell out their mouth they couldn&amp;#39;t they couldn&amp;#39;t hold themselves back yes the codeweenies i don&amp;#39;t care about them it&amp;#39;s not the time to nitpick we&amp;#39;re all here trying to get the general picture there will always be edge cases right there will always be caveats to the things that we&amp;#39;re learning but when it&amp;#39;s day one of html on your journey to become a software engineer you don&amp;#39;t need to give a [ __ ] about any of that release yourself feel the weight come off your shoulders to not write perfect code we love we love we love to write vomity code here right we love to write vomiting code i&amp;#39;ll bring this little this little logo up whenever i&amp;#39;m writing vomit code because i just don&amp;#39;t care remember this isn&amp;#39;t this isn&amp;#39;t a coding tutorial this is a jobs program i&amp;#39;m trying to get you to have a wide breadth of knowledge that you can use to build out a series of amazing projects to get clients and ultimately get the job they&amp;#39;re going to be some things that are chunky vomity that don&amp;#39;t look good but i don&amp;#39;t give a crap because i rather you learn than become a codeweeny and if you&amp;#39;re not okay with that that&amp;#39;s fine some people have to be perfect they have to be right but that&amp;#39;s an awful lot of energy to expend when you still don&amp;#39;t really know that much about html let&amp;#39;s get the job done let&amp;#39;s get our sites built right and then we can worry about being perfect i really like to hearken this to learning a language some people will sit there and study the conjugations of the word to be for five hours instead of having a conversation with someone you&amp;#39;re way better off having a conversation than you are sitting there conjugating in the dark room by yourself don&amp;#39;t be that person get the wide breath of knowledge be able to build be able to bring things into existence to make things exist that did not exist by the end of this class you will be able to build basic websites it doesn&amp;#39;t matter if you got the semantic update to html5 that sections can include h1s cool all right cool so we can also have h2s threes fours fives and sixes and the way we know when to move from a two to a three is based on the importance like how important is that heading as opposed to another so sometimes you&amp;#39;ll have twos then you&amp;#39;ll have threes because that content is less important than the other cool now we have some other tags that we are going to learn tonight and some of them we&amp;#39;ve already kind of seen we have paragraphs which are for large blocks of text we have spans which are for short pieces of text so if you have a big block of text right that would be a paragraph if you have a small piece of text that would be a spam like that&amp;#39;s what you&amp;#39;re going to wrap it in as a span and then we have the pre tag which is an abomination it should never be used it should be yeted into oblivion and let&amp;#39;s just move on like leon what&amp;#39;s a pretext so here&amp;#39;s what a pre-tag does a pre-tag when you&amp;#39;re writing out your html keeps all the white space the enters the carriage returns and all that stuff right all that stuff right all that stuff gets put on the site so all that spacing that positioning that movement that gets put onto your site if you use a pre-tag why do you think i don&amp;#39;t like pre-tags why do you think i don&amp;#39;t like pre-tags that&amp;#39;s css there&amp;#39;s nothing you can ever convince me that that&amp;#39;s not css and that leads us to talk about nerd fights so at this point you&amp;#39;re gonna start to realize that some of my opinions are opinions and here&amp;#39;s the most beautiful thing about learning specifically front end or even any programming is that there&amp;#39;s often not a 100 correct way of doing things right for some folks that&amp;#39;s very freeing and for some folks that&amp;#39;s very frustrating the idea that there&amp;#39;s never going to be like a 100 correct way of doing something what you&amp;#39;re going to have is a bunch of nerds arguing over what is the correct thing right and so i bring this story up whenever i teach this class no one ever believes me this is a true story but i promise you with a true story i have lost a friend over the br tag so i was at a tech meet up with my friend uh we were a few beers deep eating some some good food as you&amp;#39;d normally do at tech meetups and uh got to talking somehow about the br tag i said the br tag introduces uh a space that&amp;#39;s an abomination that&amp;#39;s clearly style the hr tag puts a line that&amp;#39;s clearly a border right and so to me right that&amp;#39;s that&amp;#39;s style there&amp;#39;s nothing you&amp;#39;re going to ever say to convince me that introducing spacing pushing stuff away is not something that should be handled with css now was i right and they wrong are they wrong and i right no we both nerds at the end of the day yes now the beautiful thing is that really good engineers like really good entry-level engineers like the folks that are here watching the stream the best entry-level engineers that i&amp;#39;ve worked with do something very special they form strong opinions but they hold them weekly let me say that one more time they form strong opinions but they hold them weekly what that means as as you are writing your html tonight and as you are writing your html this weekend you are going to be tasked to pick the appropriate semantic html tag and that will be your decision you have to come up with reasons why you chose that tag once you are on a team or working with other developers if they present a better way of doing something then you let go of that assumption that you&amp;#39;ve made that decision that you made when they present the better argument but you don&amp;#39;t want to go into your code just like you&amp;#39;re weak by accident you want to be making good strong semantic decisions and thinking behind the moves that you make now i&amp;#39;ll say it i said it last class and i&amp;#39;m going to say it this one because there&amp;#39;s a lot more people here friend you&amp;#39;re watching this maybe the twitter went viral i don&amp;#39;t know i apologize i shouldn&amp;#39;t have raised my voice in the way that i did around the br tag i would like to be friends again so if you ever do happen to see this send me a message let&amp;#39;s go grab a beer even though that&amp;#39;s where this started and uh maybe we can talk about all the new stuff that&amp;#39;s coming out all right we got some other tags we got some other text if you see an m tag when you wrap content in an m tag it makes that content all right it makes that content look italicized and when you wrap content in a strong tag it makes that content bolded if you use an m or a strong tag did you violate separations of concerns but yes or no in chat for me please if you used an emmer strong tag did you violate separation of concerns yes or no you&amp;#39;re both right all of you are right if you wrote yes or no you&amp;#39;re right let me tell you why you&amp;#39;re right so if you used an m tag and a strong tag to make it italicized or make it bold you [ __ ] up right we do not choose html tags based on how they are going to look the beautiful thing however is that m or strong tags do something else their accessibility tags what they do is they provide emphasis to words that screen readers can pick up on right so when you go to a website and there could be a banner at the top that&amp;#39;s flashing red uh saying like warning like we&amp;#39;ve just been hacked or you go to a website and it&amp;#39;s like flashing like yellow there&amp;#39;s a sale there&amp;#39;s a sale there&amp;#39;s a sale if you have the means to see the page you would be able to see that there is a sale going on right you&amp;#39;ll be able to see that there is a sale going on but if you had a visual impairment you might not be able to see that sale so how do we convey to our users emphasis well that&amp;#39;s where these tags come in the hand so if you use these tags right if you use these tags to provide emphasis to folks that might have an accessibility concern then you&amp;#39;re doing the right thing but if you chose these tags based on how they look that violates separations of concerns now the beautiful thing is it just so happens that these m and strong tags make them look that way but we can always overwrite how it looks with what we can always write how it looks with what exactly there we go chat here we go pop off css cool keep pushing here we saw this one last class uh an ordered list we saw an unordered list last class well the sibling to the unordered list is the ordered list an ordered list expects that every single thing in that list is coming in a specific order i always think a great candidate for ordered list are recipes right they are recipes because if i pour the brownie mix onto the pan put it in the oven for 30 minutes pull out the pan and sprinkle water on it i&amp;#39;m not gonna have good brownies they&amp;#39;re not just not gonna be good brownies right there&amp;#39;s a specific order to the brownies and so recipes uh smith said directions exactly these are things that make sense to be in an ordered list as opposed to an unordered list where it&amp;#39;s still a list of stuff but there&amp;#39;s no specific order to it so think of things like a grocery list it doesn&amp;#39;t have to be a specific order to your grocery list actually i found out there are some monsters among us uh last time i said that a grocery list doesn&amp;#39;t have to be a civic order uh i got i got some people that reached out and they&amp;#39;re like leon i make sure that my that my grocery list right is in the order in which i will move through the supermarket right like they put the things on their grocery list but it&amp;#39;s like aisle by aisle does that who does that so in that case maybe it&amp;#39;d be an ordered list but that&amp;#39;s the that&amp;#39;s some next level efficiency there yeah they&amp;#39;re playing 5d chests out there owl thank you for the hydration hello thank you for the hydration oh that&amp;#39;s hilarious all right containing elements a lot of what we&amp;#39;re going to do on the web is like containing other content and the beautiful thing with html5 is that we got a lot of new containing elements okay we got a lot of new containing elements before html5 we kind of use divs everywhere and so if you were using it if you&amp;#39;re doing a tutorial right if you&amp;#39;re doing a tutorial and it&amp;#39;s not a react tutorial and there are divs everywhere run it&amp;#39;s not a good tutorial right we we we have it&amp;#39;s been years we&amp;#39;ve progressed there are a lot better containing elements okay there are a lot better containing elements containing elements that got rich semantic meaning now it doesn&amp;#39;t mean that you can&amp;#39;t use divs right let me let me make that clear it&amp;#39;s not that you can&amp;#39;t use divs it&amp;#39;s just that we got all of these rich right we have these rich semantic tags that we can use instead right and so sections help us group like content so if you had some content that was all about liver frosted treats what the heck would be a liver frost retreat it just doesn&amp;#39;t make sense but if you&amp;#39;re grouping like content and that content is on a dog food website then it makes a little bit more sense so we got these sections that are probably going to be one of the bigger tags that you use it&amp;#39;s a it&amp;#39;s a container that&amp;#39;s going to help us group all of our like content together we also got articles which are containing elements that help us contain things that are meant to be shared think of like a newspaper article i could clip that newspaper article out and hand it to you and you would be able to read it and understand what the heck&amp;#39;s going on you don&amp;#39;t really need other context for it it might be helpful to know where it originated from but you don&amp;#39;t need it so for content that&amp;#39;s meant to be shared think blog post articles we got a new containing element called the article tag we also got a new tag called an aside and the side stands for ancillary or extra content according to the mdn it was originally created because back when the standard came out sidebars were all the rage remember sidebars so the aside was there the aside was there to help with sidebars now the semantic meaning behind and aside is for extra or ancillary content what do you think might be a good candidate for asides what do you think is a good candidate for his sides yeah ads exactly ads ads are all really good candidates for sides beautiful we also got headers and footers headers are for content at the beginning of the document helps us group our content at the beginning of a document footer is for grouping content at the end of a document notice i didn&amp;#39;t say top or bottom because that gets too close to css and there are some really interesting things like articles can actually have their own headers and footers so you&amp;#39;re like leon what the heck does this all mean like what do you mean all these tags let&amp;#39;s take a look at some websites and let&amp;#39;s see if we can guess what the tag would be i need to like have like a millionaire sound that&amp;#39;s like let&amp;#39;s see if we can guess the tag all right so i really love khan academy and i love khan academy&amp;#39;s website if i was looking at khan academy&amp;#39;s website what tag do we think this would be what could this be yeah in h1 now here&amp;#39;s my question to you why would that content be the h1 more important question ah it&amp;#39;s it&amp;#39;s so good to see so some folks i saw some folks that slipped in here some folks said it because it&amp;#39;s the biggest do we ever choose html tags based on how big or how styled they&amp;#39;re going to be does it matter where it&amp;#39;s located does it matter anything about style no the reason why that would be the h1 is because it is the most important thing on the page that&amp;#39;s what they want you to come here and remember right for every student every classroom real results if you think khan academy that&amp;#39;s what they want you to remember right it is the most important thing now if i wanted to i could make it real small and put it all the way like in the bottom corner i could just like eat it over here right that would still work right i could use css to make it small and dump it down into the bottom right but if it&amp;#39;s the most important thing i&amp;#39;m probably never going to do that but remember style positioning has no bearing on the html tags that we use cool we got three hydrates in a row uh burberry newbie cleo thank you for hydration cheers to you and thank everyone for the subs tonight uh it&amp;#39;s been pretty wild i appreciate you all that all goes directly into the emergency fund at rc so thank you all right how about this big block of text here what would that be that was weird yeah it&amp;#39;s a paragraph big block of text full sentence at least it&amp;#39;s a paragraph cool um we also noticed something here are you ready for this look what happens when my mouse moves in you see that hey turn up look that oh oh you can go fast too hold up what&amp;#39;s handling that that behavior that interaction what would that be yeah yeah i looked at chad it&amp;#39;s already flooded with javascript i love it yeah it&amp;#39;d be javascript there&amp;#39;s definitely some javascript to foot here that&amp;#39;s beautiful all right how about we come down here what about why iconic hat well actually let&amp;#39;s start here what would this big block be it&amp;#39;s kind of like gray i don&amp;#39;t know if you can see it but what would that would that block be what what tag would we use for that block yep that&amp;#39;s a section that&amp;#39;d be a section and how about why khan academy works would that be definitely an h2 yep i think it&amp;#39;s definitely an h2 um how about we come down here we kind of have like a no i was almost perfect too we have another box here right we have another box here what would that box be another box yep another section yep another section nice how about khan academy boost student learning what would that be oh this is like the first big point of contention of the evening some people are saying two some people are saying three i would argue that that&amp;#39;s another h2 i think to me to me right why khan academy works and khan academy boosts student learning to me that is equally important right to me that&amp;#39;s equally important and so for me those will both be h2s right when we get down here right i&amp;#39;m finally able to truly differentiate my classroom that&amp;#39;s when it gets a little bit less that to me h3 right that would be an h3 to me but up here these are both the same h2s and h2s right that would be mine we got paragraphs all over the place boom boom boom boom how about here how about districts whoop all right to the end how about districts what could that be span i think that&amp;#39;s a span yeah someone said how do you decide importance that&amp;#39;s a phenomenal question that&amp;#39;s a really good question how do you decide importance it depends on the team that you are on sometimes this will be up to you specifically also if like you&amp;#39;re a front-end web developer you might be making those decisions by yourself sometimes you&amp;#39;re working with a designer that gives you the design and the designer will say here&amp;#39;s the hierarchy of the site this should be this should be that right sometimes you&amp;#39;re working with a ux professional that would get their hands dirty with that stuff right sometimes you&amp;#39;re working with marketing and somebody from marketing will come down in their their nice suit and say actually this should be an h2 this should be an h1 like because of seo so the cool thing about being a front end web developer is you often actually work with a lot of different people designers user experience professionals marketing other folks on your team right and so it does really depend on who you&amp;#39;re working with how big your team is who makes those decisions but you all need to start making those decisions for yourself you have to at the end of the day say from what i know about the semantics of the tags i have at my disposal this makes the most sense and we&amp;#39;re going to see a lot of these over and over again this is your first time for a lot of you seeing these words hearing the words coming out of my mouth semantics tags that&amp;#39;s that&amp;#39;s that&amp;#39;s scary [ __ ] it sounds like a lot but don&amp;#39;t worry we&amp;#39;re going to see it over and over again we will get our spaced repetition in we&amp;#39;re going to write some real code together then we&amp;#39;re going to review it and then we&amp;#39;re next we&amp;#39;re going to do it again we got that we&amp;#39;re going to do it again we will always get our repetition in so if the very first time you hear a word it doesn&amp;#39;t make sense that&amp;#39;s your test that&amp;#39;s your frustration test do you get frustrated and turn off the stream or do you stick it out you ask questions do you go to discord after and be like i had no idea what leon meant by span right that&amp;#39;s it this is this is your this is your this is the moment right mom spaghetti right let&amp;#39;s do so i think that&amp;#39;s pretty interesting right like just looking at this site we saw that the site was mainly sections headings and paragraphs like we could probably do 70 of this site with just those three tags like probably 70 of this site sections headings and paragraphs like we could probably get there throwing a few spans maybe an article like an anchor tag and we did it right like we got it and so yes these things are hard yes these things are new but it&amp;#39;s really not that many right you&amp;#39;re going to learn about 15 today 30 over the next week or two and then you&amp;#39;ll be able to lay you&amp;#39;ll be able to build any site that you want in terms of content with the stuff that we learned today and next week so hang with me we&amp;#39;re at the top of the hour so you know that that means a break when we come back you officially become a software engineer when we come back from this break your hands get on the keyboard you&amp;#39;re gonna write some actual real code you&amp;#39;re gonna earn that badge you&amp;#39;re gonna earn the messages that you said to all your friends that you put out into the world so please if you&amp;#39;re able get up move around hydrate let your eyes focus on something else we will be back together in five minutes all right folks get up hydrate move around i&amp;#39;ll see you all soon don&amp;#39;t worry about the text editor yet take your break we&amp;#39;ll come back i&amp;#39;m not going to lead you astray you got this go take your break so hey what split keyboard do i use i use the kinesis advantage 2. do i play magic i did when i was younger i haven&amp;#39;t played it a long time excuse me sorry i got a hyperx keyboard with lights that night that lights up yeah i got um i have the logitech uh g like the 915 that&amp;#39;s pretty pretty i use that for gaming what boom arm do i use i use the rode pro whatever it is when everybody uses i want a vertical mouse i really like my rollerball mouse it&amp;#39;s really helpful you know i i get really really bad wrist pain like severe like have to go to the doctors like my bones have rubbed together it&amp;#39;s pretty bad um so that plus split keyboard is like what keeps the pain away and i really take my breaks i stretch out top of every hour even when you&amp;#39;re not here i take my breaks super important all right folks come on back come on back hope you had a good break hopefully we would have stretched a little bit grab some water but i prefer one os over another i use all of the i i use mac os windows and gnu linux every day all three of them so i don&amp;#39;t really have a preference i like doing my business on mac os i like doing my tinkering on new linux and i enjoy gaming on windows so they all have their tools to me i&amp;#39;m a big fan of like realizing that a lot of technology stuff is really just about having tools on your tool belt a lot of people get really stressed out in the beginning they&amp;#39;re like leon should i learn to learn angular should i learn react should i learn flim flop or flap flam or zaboomafoo right and um my answer is no you learn the thing you need to learn when the job requires you to learn it right and you got to realize that they&amp;#39;re all just different tools on your tool belt of success right that&amp;#39;s so cheesy but that is true um sometimes i&amp;#39;m surprised what comes out of my mouth but yeah they&amp;#39;re just all different tools they have their their rhymes and their reasons that when you should use them when you shouldn&amp;#39;t use them and so don&amp;#39;t worry about having to learn everything get good at a core set of stuff and the skills that you learn will be transferable to whatever else you need to pick up all right folks come on back alrighty we&amp;#39;re in the home stretch we&amp;#39;re going to start writing some real code tonight you&amp;#39;re going to have some lab time to do it i&amp;#39;m just going to sit here look pretty you&amp;#39;re going to write some code let&amp;#39;s get into it all right so we looked at some websites and we learned some tags but it is interesting to note that all the tags we started with are not still here so back in the day i had a dragon ball z pokemon harry potter fan site it was lit had like pikachu running across the top it like flashed a lot of those tags that we used are now we call deprecated why do you think things like blinking tags and marquee tags why do you think we no longer use those tags they go yeah that&amp;#39;s all that&amp;#39;s all css or somehow even javascript too somebody said it looks dumb yeah it was css right it was css or javascript like we we&amp;#39;ve now separated our concerns exactly it violates separation of concerns we&amp;#39;ve separated our concerns so that we can&amp;#39;t have html that does things like css or html it does things like javascript so once we separate those concerns we got rid of those tags that are now called deprecated so a lot of the tags that you might have used back in the day they might have been repurposed to something that&amp;#39;s a little bit more semantically correct or they might just be gone um so like b and i tags that made stuff bold and italicized obviously like those can&amp;#39;t be used anymore you have a tag to make something bold it&amp;#39;s something that makes italicized that clearly violates separation of concerns so they like tweak those tags to do other things um i is really commonly used for things like called font awesome and other fun stuff that we&amp;#39;ll get into later but a lot of stuff we worried about or used back in the day are gone now i have a fun question i always like to ask that&amp;#39;s related to deprecated elements there&amp;#39;s a survey that went out one year to a bunch of software engineers and the question was where did you get your start as a software engineer now if you know the answer to this don&amp;#39;t spam it but um where did where do you think based on the survey of like thousands of engineers where do you think most engineers got their start as a software engineer victoria thank you for the hydration cheers to you a lot of folks are saying myspace believe it or not myspace was the number two place the number one place folks got their start as a software engineer according to that survey was neopets neopets let me say one more time the number one place that these software engineers got their start with neopets back in the day on neopets you could have like your like your your pet pages and like store pages and you could write html and like write inline css and all these like what would be now horrible practices that violate separation of concerns that&amp;#39;s where most engineers got their start so i want you to keep that in the back your brain the day some software engineer tries to tell you that you&amp;#39;re not a software engineer that tries to gatekeep you from this industry you could tell them to go [ __ ] themselves because they probably got their start on [ __ ] neopets get out go home you cut it&amp;#39;s over you got your start on neopets get the hell out of here get out alrighty it&amp;#39;s time for a lab the first true test in frustration so today in the materials that you need it for this class if you are new around these parts welcome we are doing a free 30-week software engineer bootcamp where you can go from zero technical skill to employable if you would like the materials the materials are shared on our discord exclamation point discord we have a follow-along materials channel that has the zip for today you all need that zip file now what you&amp;#39;re going to do is unzip that file each operating system has a different way to unzip files on mac os you can just double click on it on most windows operating systems you can typically right click and unzip or extract here gnu linux has the ability to unzip so you&amp;#39;re going to need to figure out the way to unzip your file if for some reason you cannot figure out how to unzip that is okay you&amp;#39;re going to go to discord after class and you&amp;#39;re going to get help on how to unzip your files okay thank you thank you indifferent you can use other tools to unzip but the idea is that you need to unzip that file because inside of that file are the files that we&amp;#39;re going to use today so i&amp;#39;m going to go ahead and show you what&amp;#39;s in those files so from today you can see that i have this lovely class 2 materials zip i double clicked on that zip because i&amp;#39;m using mac os and inside that file that i opened or that file that i opened it wound up being a folder that had two things in it brownies html and bbc image right so you unzip and you get both of those files now what you&amp;#39;re going to do right what you&amp;#39;re going to do is open this brownies html file in a text editor right in a text editor right now the text editor that i am using is called vs code you can simply google vs code and you will find the ability to download that text editor if for some reason you cannot download a text editor to your computer maybe it&amp;#39;s a work computer or something like that there are plenty of websites that you can use that you can just type directly in your browser so you can use a website like glitch glitch is completely free to use and you can go ahead and start writing your code directly in the browser i like glitch over things like codepen just because it&amp;#39;s a little bit easier to use to do more advanced stuff and i use replit a lot as well also again completely free right inside of here you can just click create and then you can say that you want html css and javascript and then you can create the repl so if for some reason you cannot download vs code right you cannot download vs code you can start with replit or glitch right cool now if for some reason you have trouble downloading vs code you don&amp;#39;t know how to open it the the the computer basics are a little bit hard there you&amp;#39;re gonna have to come to discord we&amp;#39;re going to help you out there right we&amp;#39;re going to help you out there some folks are saying like how do i open it in reply well there&amp;#39;s a couple ways you can open files in here but one thing that you&amp;#39;ll note is if you click on this brownies html this brownies html is already an html file so one of the interesting things you can do is you can just open brownies html in the browser and you&amp;#39;ll see all the text and content right there you can copy and paste to your heart&amp;#39;s content right does vs code work with a chromebook there is a newer version of vs code that would you can actually use vs code in the browser now if you would like but otherwise you&amp;#39;re gonna have to download it okay now like i said you do not need to download vs code tonight you can use glitch you can use replit directly in your browser whatever browser you&amp;#39;re watching me right now right whatever your browser you&amp;#39;re watching me on right now you can uh just use that with glitch or replit where are the materials the materials are in the follow along materials channel before every single class i will always put the materials in there can you use adam of course the text editor is up to you however you wish whatever one you used to use you can i will be using vs code i recommend that you use vs code for the duration at least the beginning of the program so that way all the stuff i do is similar all right cool all right so what i want to do is i want to open this brownie file inside of my text editor there are lots of places that i can there are lots of ways i can open that file in my text editor right if i already have my text editor open um i can simply do like file open and open that file a lot of times you might have the vs code like in your dock and so what you could do is you could drag this file to vs code and it&amp;#39;ll open right so i just dragged that file right to vs code and it opened it up for me right so there are many ways you can open the file in vs code file open dragging the file right it&amp;#39;s all open to you okay now if you&amp;#39;re if you&amp;#39;re panicking you don&amp;#39;t know how to unzip files you&amp;#39;re having trouble opening it in a text editor right you&amp;#39;re gonna have to come to discord and get that help remember this is your first exercise in frustration cool so i decided to just drag the file remember i unzipped the folder and then i dragged that file into vs code right now my vs code is pretty simplified right now right it&amp;#39;s pretty simplified i really highly recommend early on not really adding stuff to vs code don&amp;#39;t use any of the tools or tips or tricks that improve your workflow right they&amp;#39;re going to be stuff that makes your code look prettier there&amp;#39;ll be stuff that automatically saves files for you there&amp;#39;s going to be stuff that will make your life as a developer right much much easier don&amp;#39;t use those at the beginning right now the reason why i tell you not to add all those things or use those tools in the beginning is because there is nothing more embarrassing right than finally getting that technical interview and they use a platform that does not have all your magic plugins and you struggle to indent you struggle to save you struggle to do the very very basics and i&amp;#39;ve seen it happen seen gonna happen multiple times so please get used to doing stuff manually without all those gadgets until you feel comfortable doing it on your own once you feel comfortable you get all the though you can zip zip zap through it then add all that other stuff to make your life easier you know specifically prettier like you want to get good at indenting and stuff like that just for a week or two just to make sure you know it on your own right and then you will then you will bring all that stuff back if you want all right so once again i&amp;#39;m using vs code here you do not need to use vs code i unzip the folder i drag out the file and i drag the file to my vs code you could also have done file open i am using vs code but you could have also used glitch or any of the other kind of browser-based editors for right now all right like i said if you&amp;#39;re stuck on this step you&amp;#39;re gonna have to come to discord cool now here we have a bunch of content all of this content must be wrapped in what all this content must be wrapped in what tags exactly every bit of content on this page must be wrapped in tags so i come here and i see deep dish brownies chat what do you think deep dish brownies should be what should deep dish brownies be yeah it&amp;#39;s definitely our h1 so i&amp;#39;m going to open my h1 and i&amp;#39;m going to close my h1 remember our h1 the closing and the opening tags are very similar except for that closing slash right right now is my page saved nope it&amp;#39;s not saved how can you tell you can tell because the dot up here right is white and circle and not the x so i have to save this so i did i did command s to save you can do file save but getting used to your shortcuts is really helpful so on on mac it&amp;#39;s command s on windows it can be control s right but get used to saving the biggest the biggest issue that a lot of folks have early on they&amp;#39;ll come to me leon why right why why is it not working why why did these changes not like why can&amp;#39;t i see the changes in the browser and it&amp;#39;s almost always because you didn&amp;#39;t save so get used to saving manually right alrighty so we have a lot of content here a lot of content here i want you to go through this content and give your best honest attempt at semantically marking up this content everything must be wrapped in tags you can use the previous slides right you can use the previous slides to get a get a hint of tags but you can also use the mdn the mozilla developers network if you need help looking up tags right i&amp;#39;m gonna let you try it if you run across something odd if you&amp;#39;re if your stuff were on auto if if it&amp;#39;s not if your tech server is doing something you don&amp;#39;t want it to do start with a google people are throwing in chat how to fix certain things but start with a google get used to it right and if you still need help with something discord alrighty i&amp;#39;m going to put a 10 minute timer up on the clock here uh just ignore me for these 10 minutes just ignore me i&amp;#39;m going to keep talking i&amp;#39;m going to keep talking i&amp;#39;m going to be answering people&amp;#39;s questions in chat but the expectation is that for these 10 minutes you&amp;#39;re writing code so go ahead get your fingers moving get the typing get to wrapping each of this content in tags and then we&amp;#39;re gonna do it all together right so if you get stuck you don&amp;#39;t know how to do it you&amp;#39;re gonna have to be able to go through it remember there&amp;#39;s two different sets of slides there are the live slides right that only i control and then they&amp;#39;re the second set of slides that you have full control over so if there&amp;#39;s the live link you can&amp;#39;t move those slides around only i can the second link wasn&amp;#39;t working but it should be working now if you opened it in the beginning you got to give it a hard refresh let&amp;#39;s take a look at them i&amp;#39;m gonna bring up my uh regular screen just in case i pull up something for you one second just checking on the slides for folks that are having trouble hmm i see the error now hold on i&amp;#39;m working on it working on the sides one second public what i&amp;#39;ll also do is i&amp;#39;ll just download the slides for y&amp;#39;all one second i think slides.com is down i think i think i think it&amp;#39;s the actual place i used to uh host the slides checking it out still working on it you can use the mdn or hopefully it took questions you can actively recall yeah i think it might have been i think we might have crashed it because the uh they were working but it won&amp;#39;t even let me export the um don&amp;#39;t even let me export you need https to make the link let&amp;#39;s try don&amp;#39;t worry about it i think we broke it after class i will put the pdf into discord give your best shot this is a good chance for actively recalling use the mdn if you need it zip file is on discord if you&amp;#39;re lost that&amp;#39;s okay make sure you come back after the five minutes we&amp;#39;re gonna go through it together this is your first chance at trying to write some code folks are putting if you don&amp;#39;t like the auto closing tags people are putting that in chat so that that initial question you have like how do you stop auto closing tags that&amp;#39;s a google question that&amp;#39;s something you definitely should use but there&amp;#39;s also people throwing the the pattern in chat for you if you want it preferences search html uncheck auto close beans googled it i love it is there something is there something i can do on your mobile yeah you can just use glitch or replit that work in the browser i&amp;#39;ll get round that&amp;#39;s on your side there is sound the zip is in the follow along materials channel all the code will always be in that channel hey how you doing thank you for the hydration cheers to you how do i revert the file you can do ctrl z or command z to go back a step yep the the zip file should not have the brownies image not to figure that out we have an html and css help channel okay murray what are you confused about can a section have can can i have a section one tag no the only ones that have numbers are the heading elements where is the brownies image i didn&amp;#39;t give you one that&amp;#39;s a fine one nope no brownie image from me do you know cobalt hell no you need your dual monitors back yeah they do help yep just wrapping all the content and tags exactly do i play league no that would just be the end of me oh ryan the first stretch that i&amp;#39;ve seen i used to do a can&amp;#39;t give you too much of the stretching it&amp;#39;s the only fan&amp;#39;s goal i could do this but not in 10 minutes yeah that that&amp;#39;s totally fine done hey if you&amp;#39;re done throw a gun in there that&amp;#39;s wild good job wow crew came in that&amp;#39;s funny there must be like a like like a a peace figured out the brownie that&amp;#39;s good use dmdn could have helped there crunch time can you get it in you can get it done you finish up run alrighty folks stop come regroup with us no matter if you had trouble opening the file are you finished we took our 10 minutes we&amp;#39;re gonna stop we&amp;#39;re gonna go over it together all right so come on back come on back yeah i know the person you&amp;#39;re still typing stop typing come on back first of all congrats you&amp;#39;re working with code even if you struggled to open the file you were still working with a code file you&amp;#39;re a software engineer if you wrote a line of code you&amp;#39;re a software engineer so let&amp;#39;s take a second i know that can be very frustrating you know some folks are still stuck that&amp;#39;s okay but you are now all officially software engineers you&amp;#39;re struggling you&amp;#39;re in the muck with the code over the next 30 weeks you&amp;#39;re going to add the tools and the knowledge behind that but right now carry yourself high matter if you got stuck you didn&amp;#39;t know what you were doing it didn&amp;#39;t make sense that&amp;#39;s okay we&amp;#39;ll get there together you&amp;#39;re a software engineer congrats all right let&amp;#39;s take a look at this together remember the vods are always available right after we&amp;#39;re done streaming so you can always go and take a look at it all right we got some stuff here uh this first one is a tricky one we haven&amp;#39;t even seen images so if you looked at this and you saw images right remember you can also change your quality settings since we&amp;#39;re partnered you can change your quality settings to make it more less blurry like if it&amp;#39;s blurry you probably have the quality settings too low yeah all right now look if you didn&amp;#39;t know how to do we didn&amp;#39;t cover the image so if you didn&amp;#39;t know how to do the image what could you have done you know how to use an image tag what could you have done oh y&amp;#39;all next level y&amp;#39;all saying google y&amp;#39;all saying mdn but you know what she could have done skipped it could just skipped it went on to the next thing don&amp;#39;t sit there and bang your head against the keyboard trying to do something that you don&amp;#39;t know how to do you gave it a quick google you looked on the mdn you didn&amp;#39;t see it yes skip it and then you come back to it when you have more time so for all of y&amp;#39;all that just stopped here let that be a lesson get all this other stuff to figure out you could have skipped it could have came back could have figured it out later you could have googled it had md end it you could have gotten help on discord right but you have you have to think about and the reason why i like to bring this up is because in uh less than six weeks you will all be getting paid clients that&amp;#39;ll be your task is to get a paid client and uh let&amp;#39;s say the client project is due in 10 minutes do you want to tell the client hey i got the image working it&amp;#39;s the best image you&amp;#39;ve ever seen it&amp;#39;s a delicious image of brownie but nothing else works or do you want to say to your client all the content is here everything looks good we&amp;#39;re just still tweaking this image right think about that think about that under promise over deliver exactly cool all right so if i didn&amp;#39;t know how the image worked i could go to the mdn i could do something as very simple as kind of like um google mdn brownie oh i&amp;#39;m so i&amp;#39;m a big boy mdn image that was sad oh man clip it clip it [Laughter] all right there we go i could have did an mdn image and then boom here you go everything i need to know about the image tag oh there&amp;#39;s this source property oh there&amp;#39;s this alt property source is required alt does this other stuff for accessibility all the stuff i would ever need to know with very clear examples the html is here for us we can see the output how wonderful i love the mdn you should use the mdn and you saw i didn&amp;#39;t use any big brain tricks here i just typed in mdn brownie that didn&amp;#39;t work so i typed in mdn image and here you go your new best friend the mdn shows you exactly how to do images beautiful all right so let&amp;#39;s go back and uh let&amp;#39;s let&amp;#39;s take a look at some of our code here and say all right well based on this i know i need to open my tag and i need to close it but something interesting about images is that they&amp;#39;re one of the very few tags that don&amp;#39;t need an open and a close tag the reason why images don&amp;#39;t need an open and a close tag is because it&amp;#39;s already content for all these other things you&amp;#39;re wrapping around content but the image is already content so it is self-closing you don&amp;#39;t need a closing tag it already is the content instead of wrapping around the content cool now we saw on the mdn that we needed a source so src equals and the brownies.jpg so that could be my source and the interesting thing about the source though is that i didn&amp;#39;t give you a brownies image so we have to go get a brownies image we could have a local image which means that the image is on our computer or we could go hot link somebody else&amp;#39;s image that&amp;#39;s what we&amp;#39;re going to do we&amp;#39;re going to go and uh google brownies let&amp;#39;s get some images here oh it&amp;#39;s gonna be a problem yeah all right right click copy image address all right copy image address he&amp;#39;s taking his time with it and then in the source i&amp;#39;m gonna paste that image address right there you go i just went to the image i right clicked copy image address and i pasted it into my source so now when i open this brownies html remember i could drag the html file to the browser you can right-click open if you want to there&amp;#39;s so many ways you can get this file open in the browser for me let&amp;#39;s see i already have it open here so what i&amp;#39;ll do is i will bring up my browser and i&amp;#39;m going to drag the file into my browser and there we go it opened it up right that looks delicious so what i did here is i gave it a source and i grabbed an image source just from a random image on the internet uh you can go to pretty much any image you want on the internet and right click on it and copy image address that&amp;#39;s going to give you the image address right you copy that you paste it into your source and you&amp;#39;re good to go this is called hot linking this is not a file on my computer i am using this file from buzzfeed uh this could cause me some problems down the line if i kept it this way what what could happen if i kept the source this way oh you&amp;#39;re thinking big brain you&amp;#39;re saying like copyright no i don&amp;#39;t own this image i don&amp;#39;t own where it&amp;#39;s stored i don&amp;#39;t own the server that it&amp;#39;s sitting on so buzzfeed could change this link right could change this link and then my image would break right or worse if you were little leon back in the day and somebody hot linked your image well they own that server they could change this to whatever the heck they wanted i could i could think it would be brownies and i come in the next day and it&amp;#39;s a picture of rubber ducks or if you were back on the forums in my day it wasn&amp;#39;t rubber ducks i&amp;#39;ll tell you that much all right right so they control it right they control it and so they can change whatever they want so there&amp;#39;s a chance that it could break in the future so next week we&amp;#39;ll download our images and i&amp;#39;ll show you how to use the images that are on like your side like your local or your server right but it could break and since it could break we want to make sure that we also have a what if we know that this this might break in the future what do we want to also give it yeah we want to give it an alt so alt is something that we also saw in the mdn and we can just say brownies right so now if for some reason this image was to break and not show up the user would still see brownies like they would still know that that should have been a brownie photo the other wonderful thing is that for accessibility if someone has a visual impairment and maybe they&amp;#39;re using a screen reader they can know what that image is by having the alt text read to them so somebody with a visual impairment wouldn&amp;#39;t maybe not be able to see the brownies but they would be able to hear that it was a brownie and then google&amp;#39;s kind of moved on from this a little bit but it does help seo too like google might have an easier time figuring out that these are brownies can you can you test messing with the link sure so let&amp;#39;s get rid of the b i&amp;#39;m going to save i&amp;#39;m going to go back to my my site here so boom it broke but look you see next to the broken helmet i can make this bigger next to the broken image is the word brownies so the alt tag is there right i broke that link and so you can still see the alt tag so even though the image is broken i know that that was brownies cool all right so we got our image tag going and uh next to this image tag we see this thing here uh that looks weird it&amp;#39;s like it&amp;#39;s like a different color and that definitely wasn&amp;#39;t in the brows like if i go back i don&amp;#39;t see the word hint like if i make this a little bit bigger there&amp;#39;s no word hint here right so that&amp;#39;s called a comment a comment is a way of like leading leaving a note for yourself or a note for another developer it doesn&amp;#39;t actually make its way into the browser it&amp;#39;s just in the file for you to see it it&amp;#39;s called a comment in html the comments are made by doing our uh arrows and then our bangs so this we call exclamation point bangs so you&amp;#39;ll do your left carrot or your left arrow we&amp;#39;re going to call it your left carrot bang hyphen hyphen and on the end hyphen hyphen right carrot right anything you put in between this and this is now a comment it won&amp;#39;t show up in the browser there&amp;#39;s also typically shortcuts to do this right um nvs code and a lot of text editors if you do command and then forward slash it automatically turns it into a comment for you that was command forward slash control forward slash beans thank you for the gift it subs right so there are ways to do these comments that&amp;#39;ll be important all right if the image is large we can fix it with css exactly let me go and put the b back here cool next i have this recipe by biz mcmahon what were you feeling for the tag here what tag should we use for biz here what types we use for biz h2 one so here&amp;#39;s a question for you um have you ever read who made the recipe like is that important to you when you go to a recipe website never i don&amp;#39;t think i&amp;#39;ve ever landed on a recipe and gone oh that&amp;#39;s biz i&amp;#39;m i&amp;#39;m dipping out of here [ __ ] that guy like no i&amp;#39;ve never i&amp;#39;ve never even cared before right so to me there&amp;#39;s no way that that&amp;#39;s an h2 that&amp;#39;s so not important that it has to be like i don&amp;#39;t know like an h4 at least right like like just not anything that&amp;#39;s important right now i am jumping here there is some accessibility things that we have to get to where we go from ones to twos to threes and we should lay out our content more accessibly but for now let&amp;#39;s just focus on making good semantic decisions here okay so for me that&amp;#39;s just not important so it&amp;#39;s at least a four now here&amp;#39;s the thing you might be a rachel ray household right you might only cook rachel ray recipes if it&amp;#39;s not rachel ray you ain&amp;#39;t cooking it so to you that might be an h2 it might be really important to you and so that&amp;#39;s where these semantic decisions have to be made that&amp;#39;s why there&amp;#39;s never going to be one exact way to do this if i give this site to 10 different front-end developers i might get 10 different versions of the same code back right now some people are saying why is it not a span to me it&amp;#39;s a heading it describes what comes after everything that comes after that line right everything that comes after that line is the recipe by biz right so to me it&amp;#39;s a heading it&amp;#39;s not just a short piece of text it definitely does describe what comes after a spam would just be a short piece of text right so to me it&amp;#39;s a heading it does describe what comes after cool how about related recipes what do we think that is to me that&amp;#39;s an h2 it&amp;#39;s really important to me that if you don&amp;#39;t like my deep dish brownie recipe you go to my other recipes right so if you don&amp;#39;t like the deep dish brownie recipes you go to my other recipes so h2 is really important for me here cool so i&amp;#39;m going to go ahead and make this an h2 right cool and then here i have a what what are what are all of these yes that&amp;#39;s a list of the related recipes um so this is a list of all the red recipes but i&amp;#39;m going to do something a little funky here stay with me for a second so it&amp;#39;s definitely a list of recipes so that&amp;#39;s a ul uh it&amp;#39;s not in any specific order so it&amp;#39;s not an ordered list it&amp;#39;s definitely an unordered list of recipes but all of them are yes people are thinking they&amp;#39;re all links to those recipes so it&amp;#39;s a list of links so i am going to use some developer magic here you can as you&amp;#39;re clicking hold down command or control or alt depending on what type of operating system you&amp;#39;re using michelle hey thank you for the gift itself 20 gift itselves wow i appreciate that shell i appreciate you thanks for stopping by that&amp;#39;s wild thank you so much so you can hold down command control right or alt depending on your operating system and then wherever you click you got to keep it held down for me it&amp;#39;s command wherever you click you get the repl right you get the reply right and so now i can do whatever i can tab them in i can do my li i can start my anchor tag i can give them all an href just as a placeholder we&amp;#39;re going to put an octothorpe in there i can jump to the end for me it&amp;#39;s command right arrow it might be control right hour if you want to jump to the end and then i can go ahead and close my anchor tags i can go ahead and close my allies right so how do i do that again i got you uh depending on operating system for me it&amp;#39;s command so i would just hold down command and wherever i click while holding down command i get that reply for you it might be control or it might be alt it does depend on your operating system cool once you&amp;#39;re doing that you&amp;#39;ll notice that you have this little flashing rebel that flashing replica means that you can now type on each one of those lines yep all for windows and gnu linux yup there you go cool and so that&amp;#39;s how i was able to do it but i knew that this was a a list of links and so each one of these links is wrapped in an li and then it&amp;#39;s wrapped in an anchor tag and right now i don&amp;#39;t actually have the links to the chewiest brownies i don&amp;#39;t have the link to the can&amp;#39;t you tell i don&amp;#39;t have the link to the bodacious brownies so i just put an octothorpe in here some people might call that the pound sign or if you&amp;#39;re hip a hashtag but in programming we call them octothorpes yeah or sharp exactly noctothorp cool let&amp;#39;s look down here how about prep time what are we feeling for prep time chat i&amp;#39;m feeling like a an h2 here i think that&amp;#39;s really important i think it&amp;#39;s like the only thing i look at i look at like is it rachel ray and is it like going to take me a long time so that to me is an h2 like i said you gotta make your own semantic decisions make your own semantic decisions if you if you don&amp;#39;t think that&amp;#39;s an h2 what the heck am i doing if you don&amp;#39;t think that&amp;#39;s an h2 that&amp;#39;s okay it&amp;#39;s okay make your own semantic decisions how about 60 minutes what is that it&amp;#39;s a short piece of text if it&amp;#39;s a short piece of text that&amp;#39;s a span for me yep that&amp;#39;s a span for me and for me short piece of text beautiful all right how about servings some people really care about the servers that could also be like an h2 again maybe an h3 i don&amp;#39;t know the servings matter i&amp;#39;m a big boy i&amp;#39;m gonna eat the whole thing anyway yeah h2h3 i don&amp;#39;t know maybe hd just so we can see something new just so we can see something new that the most demanding i&amp;#39;m not sure and probably a span again right span with the nine there we go case you always check for servings that&amp;#39;s good to hear i i don&amp;#39;t think i i&amp;#39;m gonna eat the whole thing anyway don&amp;#39;t matter all right why is it a span instead of a paragraph because it&amp;#39;s a short piece of text if it was like a long piece of text like a sentence or more then we&amp;#39;re talking paragraph but short piece of text that&amp;#39;s a span cool all right ingredients what do we think that is how do we feel about ingredients i think that&amp;#39;s an h2 as well h2 as well yeah if you&amp;#39;re like leon i have no idea what the hell you&amp;#39;re doing right now that&amp;#39;s okay it&amp;#39;s all right guess what you have homework that&amp;#39;s gonna walk you through all of these things you literally have homework it&amp;#39;s gonna that&amp;#39;s gonna span you a couple hours of you sitting down with this material again so if it doesn&amp;#39;t make sense in this moment that&amp;#39;s okay this is your first time seeing a lot of this stuff this is your first time seeing a lot of this stuff give yourself some grace it&amp;#39;ll come all right i don&amp;#39;t like how this is like all indented already oh so the thing is here eventually we&amp;#39;re going to start to notice some indentation like leon why did you indent here uh we have something called parent child relationships right we have parent child relationships where these lie since they&amp;#39;re inside the ul that parent-child relationship you put a little respect on the name and you give it a little bit of an indentation don&amp;#39;t worry about that for right now but if you&amp;#39;re like leon why are you indenting that&amp;#39;s because we have some parent child relationships that we got to deal with cool all right so we have the ingredients what is what is this here what do we think this is we have the ingredients what is this yeah it&amp;#39;s a list so again is this an unordered list or an ordered list yeah unordered right it doesn&amp;#39;t matter if i put the eggs before the vanilla it&amp;#39;s not like when i use them it&amp;#39;s just the things i need to grab from the grocery store so unordered lists i&amp;#39;m going gonna put all of this stuff inside of my list and then i&amp;#39;m gonna use my developer magic again now the cool thing is you don&amp;#39;t have to click right you don&amp;#39;t have to click look at this i&amp;#39;m not clicking i&amp;#39;m just pressing the down arrow so on mac i can do command alt and then just press the down arrow and i get the reply going all the way down my list right on your operating system might be different there&amp;#39;s gonna be something for different for windows or something for gnu linux uh but for me yeah there you go control alt down arrow on windows people are saying yep yep yep there you go beautiful beautiful beautiful we already have we got code weenies that&amp;#39;s not a rebel you see the code weenie oh boy they found us they got us all right cool there we go now now we can go ahead and do our li we can jump to the end there we go beautiful so now each of our ingredients are wrapped in in an li beautiful cool almost at the top of the hour we&amp;#39;re going to finish this out we&amp;#39;ll do our raid and we&amp;#39;ll end it there so let&amp;#39;s finish this up together maybe another two minutes or so to finish this up and then we&amp;#39;ll do our raid alrighty direction what we say that would be ah yes our lovely h2 again directions are very important let&amp;#39;s go ahead and do our h2 here once again we&amp;#39;re going to have the ingredients that we have to wrap in our lovely ul there we go i&amp;#39;m gonna we could just break it down here i&amp;#39;m just gonna copy everything i&amp;#39;m gonna paste it in boom alrighty now is this a ul uh y&amp;#39;all paying attention look at you y&amp;#39;all paying attention no that&amp;#39;s not a ul no well all right oh well right oh well anybody ever watch the mistborn trilogy or sorry read the mistborn trilogy ren always tells his sister that i will betray you and then one day ren betrays all right and so you gotta you gotta you gotta be on your your tippy toes around here right all right some things won&amp;#39;t always be correct you gotta you&amp;#39;ll be like leon ah that&amp;#39;s not that&amp;#39;s not that&amp;#39;s not a ul that&amp;#39;s an oh well all right i will betray you call it out when you see it beautiful we got the ol now we&amp;#39;re going to go ahead and click for our lis this one&amp;#39;s a little bit weird because when i jump to the end i won&amp;#39;t actually be at the end for each of these lines don&amp;#39;t worry about that for now we can clean that up though i&amp;#39;m oops clean this up so the lies are actually at the end of each thing my screen&amp;#39;s all magnified in so it&amp;#39;s a little different on here all right here we go beautiful you betrayed us last time you said domino&amp;#39;s was good get out of here delicious s tier you can press n key on control like uh n key on windows mac i do command and my arrows to move around cool so we got our ordered list uh how about tip what do you think the tip should be yeah i&amp;#39;m feeling like an h3 here yeah like do you do you ever read the tips though who reads the tips do you ever read the the drivel that comes before the recipe my my great grandfather tripped on a penny and uh that penny we then wished in a fountain and we&amp;#39;ve got a genie and that genie is the one that delivered this recipe and so i hope you enjoy this recipe coming to your your household right now you know why they do that you know why they put all that stuff in there when i was doing this for the last class i found out that the reason why they do all that extra text is because it makes it so that it&amp;#39;s harder to have like a copyright claim like recipes are completely not copyrightable but that like stuff they spill out it has like a slightly better chance of being copyrightable and then um the other thing too is seo right cool so tip or you&amp;#39;re saying h3 h4 i could see it i think i think for me i don&amp;#39;t think i read it but it seems like a lot of you do read them so i&amp;#39;ll listen to y&amp;#39;all and i&amp;#39;ll say h3 beautiful and then big piece of text definitely a sentence or more what should that be paragraph beautiful i&amp;#39;m gonna close my paragraph nice nutritional info you already know what that&amp;#39;s gonna be yup come on now nice little span here all right nobody ready to get out of here you ain&amp;#39;t looking at the calories i&amp;#39;m a big boy that don&amp;#39;t play around here no nutritional info in this house get out of here h6 if there was a if there was an h8 i&amp;#39;ll be using it but there isn&amp;#39;t that&amp;#39;s that&amp;#39;s how you know h6 is the is the lowest that&amp;#39;s how you know h6 is the lowest because if there was something lower i would have used it right then and there that&amp;#39;s how you know all right let&amp;#39;s finish this up we got another we got another uh string here what do we got here what are we doing another paragraph okay another paragraph and then inside this paragraph we have another what yeah we got another anchor tag and the cool thing is that this anchor tag already has the what here yeah we have the href beautiful cool let&amp;#39;s go ahead and close that up close up that carrot and then make sure that we close up our anchor tag chat we did it look at us now do i care what this looks like in the browser nope right because that we&amp;#39;re choosing html we don&amp;#39;t choose html based on how it looks right we don&amp;#39;t choose html based on how it looks we&amp;#39;ll get to that with css all right we&amp;#39;ll get to that with css now there are some more things that we didn&amp;#39;t get to tonight because we&amp;#39;re going a little bit over time i want to stop here when we come back on tuesday we&amp;#39;re going to see some more tags we&amp;#39;re going to see some some forms we&amp;#39;re going to see uh the actual structure of html we&amp;#39;re going to see like the header and the footer we&amp;#39;re gonna see uh these other pieces that we might have heard a little bit of but we&amp;#39;re gonna put that all together on tuesday between now and tuesday y&amp;#39;all got a lot of homework like a lot of homework you got two videos by ali abdal to to watch you got a whole learning how to learn course on coursera to get through you have a whole learning how like learning about html through learn.shayhow right so you have all the stuff that you got to get through between now and next week if you want this code this code will be shared with you on discord after class so anytime i write code i will always just upload it on discord in the follow on materials channel after class so i think the reason why the slides aren&amp;#39;t working right now is because i think we have so many people using them i have to like upgrade my payment tier on the slides so i&amp;#39;ll figure that out as soon as we get we&amp;#39;re done going live i&amp;#39;ll share all the code with you on discord we have a lot of reading to get through tonight but before you leave we&amp;#39;re going to do a raid remember we like to hang around here we like to go spread positivity to other folks and so we&amp;#39;re going to go ahead and do that right now we&amp;#39;re going to go and set up a raid and remember when you&amp;#39;re ready to get more channel points those channel points actually help you do a lot of stuff and so we&amp;#39;re going to go ahead and start a lovely raid here and we&amp;#39;re going to go over to someone that we&amp;#39;ve we&amp;#39;ve rated in the past they&amp;#39;re learning too uh and so that could be that could be fun so let&amp;#39;s go ahead and uh go over to them remember red love positivity give them some follows if you&amp;#39;re not already following cool all right starting the raid now it&amp;#39;ll take about 10 seconds and i&amp;#39;ll see you i&amp;#39;ll be hanging out over there uh please if you got stuck tonight if things didn&amp;#39;t make sense if it was hard if you feel like you need some extra help that&amp;#39;s what discord is for please come to discord we will help you you will get unstuck you&amp;#39;ll figure out how to open things you&amp;#39;ll figure out how to type but please be consistent set up a plan right how are you going to study each day how are you going to do the things that you want to do make sure this weekend you don&amp;#39;t go into the weekend like an accident go into the weekend with a study plan and i will see you all on sunday for office hours i hope you had a wonderful second class i will see you all on sunday for office hours remember they&amp;#39;re optional you have to be there but i&amp;#39;ll be answering tons of questions uh if you have questions about the stuff we covered today that&amp;#39;s what office hours is for and then on tuesday we&amp;#39;re back at it we&amp;#39;re gonna dive deeper into html we&amp;#39;re gonna make it make sense we&amp;#39;re gonna have more fun with it so good luck with your homework good luck with the raid i&amp;#39;ll see you all over there now peace everyone you

Transcript for:Software Engineering & Full Stack Web Development - Class Notes

Transcript for:
Software Engineering & Full Stack Web Development - Class Notes