Help Me Code Review My First Website

Key Takeaways

hello everyone can you hear me figured I'd get jumpin in here a little bit early that way if anyone else wants to trickle in before we started we'll have everyone here for when the livestream actually starts in just a couple minutes you you you hey Eddie how you doing you it's nice seeing everybody here already this is quite a bit different than my last livestream I did many many many months ago only a few people you welcome welcome everyone Shyne in you so if you guys don't know for in this video what we're gonna do is a code review of the very first series that I ever did on YouTube which was like my introduction to web development series where we covered HTML CSS and JavaScript so I'm going to be covering all of those different topics and show what I would have changed from that series because the since that series was kind of aimed at beginners there's a lot of things that I would do differently and things that just looking back on like I don't know why you can did it that way so it's gonna be a lot of fun to just kind of dig through that older code and figure out what would I change knowing what I know now and knowing that it's not teaching toward you know very beginners I have a more advanced audience I can teach this too you so I see a question asking pH Python I definitely prefer Python over PHP I'm not a huge PHP fan and Python I like the syntax it works really well it's useful and almost everything machine learning especially so I really like Python for that you you okay looks like pretty much everyone is trickling it at this point which is great so kind of to get started let me move my camera over here so you can see we're starting with you there we go whoops there we go okay so to get started I kind of want to just look at first the application that we're going to be reviewing since I'm sure a lot of you weren't here I'll subscribe to the channel or haven't watched this series where we built this application but essentially the idea of this application is that it's a band website so we have an about page a home page and a store page for any banana band that you want I just called this band the generics because I didn't want to use a specific band obviously for copyright issues and all that kind of stuff and the idea is that this band website was just to teach the basics of HTML CSS and JavaScript so it's fairly simple design overall so when doing a code review the very first thing I like to do is you kind of just look at all of the code that is running I like to look at the running version of the code because that way I can actually see what the code is doing how it's working and that way if I make any changes since this is kind of like a refactor code review I know how those changes actually affect the code in a way so I look at the code first then we can look at the final result of the code I'm sorry and then we look at the actual code to figure out what we can change to make sure we don't break how it actually looked before so on the home page we have just here a really generic background image for our title we have the title of the band at the very top just a button none of these buttons actually do anything I can click them all I want these are just placeholder buttons obviously this is just for teaching purposes and not actually a full-blown website we also have a play button for a song to play obviously also not hooked up and then just a table down here with all of the different tours and then finally all the pages have this footer that has just the band name and then links to YouTube Spotify and Facebook for this band next we have the store the store page is going to be what we're gonna probably spend a lot of the time in this livestream just because it has the most amount of stuff going on inside of it we have our Add to Cart buttons which actually function we click them we have these quantity numbers which will change the total down here we can remove things from the cart a purchase button that'll also purchase these things and obviously doesn't make any payments but it will remove everything from the cart force as you can see so this is going to be we're going to spent quite a bit of time just because the JavaScript is quite a bit more involved on this page and then lastly the simplest page we have is the about page here which just says have some text just lorem ipsum text picture the band about and then obviously one thing i already know i want to change is this footer doesn't expand all the way to the bottom here which it really should so that's one thing that I want to take a look at and this is how we can get the footer to show up at the bottom of the page because right now it's you know floating which just doesn't really look very good so hopefully that gives you guys a general idea of where we're starting with for the actual finished product of this it's a very simple web application and the first thing I want to do is just kind of go through each one of these pages inside the code to see what we can actually change so let's just drag this all the way up here and okay sorry so we'll start first with the index page which is this page over here and we have up at the very top our header section and this I think actually looks pretty good I mean it's not the most amazing-looking thing in the entire world obviously but I think it looks good enough and the HTML will be here to support it it's really good we have our header tag which is great you want to have that header tag to wrap your header good for a semantic HTML accessibility that's really important also we have the nav tag wrapping our nav that's really good everything is inside anchor tags which is great and we have eight rifts pointing to the correct locations that's good you don't want to do something with like a button that doesn't unclick that redirects you always use anchor tags when you're doing links that's just generally good advice also you'll notice our links have hover States which is really important if you have something clickable on your page you always want to make sure it has a hover State so luckily we already have that taken care of with our links here and then moving on we have an h1 this is a really good example here we should be using it h1 because this is the main heading of our page so we want to make sure that that's our largest heading our h1 so that's really good that we used an h1 here and then finally we have just a simple container that has our buttons also inside of our header so this all is generally pretty good I like this code here I like that we use buttons for this because this is a button that doesn't actually redirect you somewhere so it's good to use a button same with this button down here also really good now I'm moving on we have our section again I really like that we used a section here because it's the part of our application that we can actually move somewhere else kind of the idea of a section is is something that you can take and transport somewhere else in your application and it'll work just fine so I really like that we use a section for this as opposed to just a div for example and then an h2 also really good it's our heading for our section so we put it inside section which I really like but then we run into probably the first thing which I just absolutely hate and that's this table which as you can see isn't a table it's just a bunch of divs and spans and this is really bad this is bad just for accessibility purposes because it's difficult to follow with screen readers and also it doesn't have any semantic meaning I know I built this with divs because I hate styling tables they're just an absolute pain to style but this should definitely be a table and that's something for sure we're gonna change over is to make this a table instead of divs it'll also help clean up our CSS because if I jump into that and scroll down to the section if I can find it I see tour you can see that we set everything using specific wits just like this and that is just not very clean not very good so it's much better just do those tables the table will take care of all that with styling for you automatically so we don't even have to worry about any of that which is really nice also I see a question someone's saying well I keep this on the channel I'm going to keep this video on the channel it's not going to disappear anything so you don't have to worry about missing out if you can't make it for the live stream but with the live stream you at least people to ask questions and we'll be able to talk back and forth when we make changes so I think if you want to stick around for the live stream it's definitely worth it but it will be up on the channel for you to review later if you want to so you can look at it watch it later no problems also I see a great comment here from lorem ipsum perfect name and it says please use main instead of section I definitely agree that is one thing I was going to get to is that this page is missing a main the idea of the main element is it's supposed to wrap essentially the main content of your entire application and in our case this tour section is the main section so instead of using a section here we can just replace this with main and all the way down here we can also replace this with main and what that's going to do is it's not going to change any of our CSS styling as you can see everything looks the same over here but what it does do is it tells the browser that are this is the main section or application everything inside of this main this is the part that is the most important so for example if you go into like screen reader mode or reader mode like on your tablet for example it'll cut out a lot of the other things not in the main like this header would disappear as footer a disappear we would just have the main section inside of our application and with main you only have one main on your page at a time for accessibility reasons obviously you can only have one section of main content and you want to make sure that you have a main on every page just so that the browser knows what that main section is now if this page had multiple sections we could wrap sections inside of these names just fine that's going to work but we just want to have that one main section wrapping everything aside of our application and remember only one of them not multiple of them so that was a great suggestion from Laura mucin I really like that and then Lucky Strikes says so should the header and footer be in the body and yes everything that is inside your application should be inside the body tag so the head tag is purely just for all of your metadata your title your style sheets your JavaScript links all of that is gonna go in your head tag and then everything else is going to go inside your body take anything that's content on your page as you can see here has to be inside the body tag so this includes your header your nav your footer your main all of that stuff I was is the question here saying like this main content here should it come from a database instead of being fixed content the purpose of this site was purely for teaching HTML CSS and JavaScript so none of it is dynamic it's purely all just a static site which is perfectly fine for our use case and a lot of times this information would be just static information you may do it with some kind of build tool like Gatsby to build it dynamically but it's going to just be static information for the most part because these two are dates for example you know this is going to change a couple times a year so updating your site a couple of times a year is not a big deal and you're gonna have a lot quicker site than if you loaded these from a database for example instead of just doing it statically like this you okay so now that we kind of have an idea of this index page let's move on to the next page or actually I guess the footer we didn't talk about the footer so this is wrapped in a photo tag which is great again same thing with the header you want to make sure you wrap it in the footer tag because it just makes sense for your website it's gonna be easier for screen readers to follow easier for the browser to parse all that good stuff and we have an h3 inside of here for this heading I in kind of torn between whether or not I would want to use an h3 here or not it's really not a heading for anything so I almost think not using an h3 would be better just using you know generic div or span or something because this is really not a heading per se and then inside this band name class we could just change the font because obviously or actually we already are changing the font size so I really don't think heading is a good thing to use here just because it's not really a heading for anything generally with headings you want to have it head content underneath of it and as you can see there's really no content under this it's just this navigation here which again this is not inside of a nav tag this should be inside of a nav tag which is because this is actually navigation as you can see these are three separate links so we should put this you out here inside of this nav tag just like that make sure I've styled save it make sure everything looks good it's a little bit off I think we need to just move our classes for nav and footer nav up into there can remove them from here okay either way this is not quite styled exactly the same as it was before so let's just look and inspect us to see why didn't expand this out and expand this out so this is one thing you're in your refactoring you notice that these buttons move it over to the left so you kind of have to figure out why that is and we can just drill down into here and we could check these classes on these Navs so we stayed nav and footer nav I don't see any styling at all for them so let's look indoor CSS to see what those are we can just search for footer nav and you can see it has it's expecting an Li to be directly underneath of it so that class of footer Navi on our ul just like that and we can remove it here from our nav now if we save that expand this out still not quite looking right so let's see what we have wrong let's expand this out so we can see our allies have the proper padding our nav here is working well let's look at the stylesheet again we want to search for dot nav and this is expecting allies to be display:inline that seems right that seems right oops so next thing we probably wanna look for is our main footer container to see what that is style does we can see that this is flex grow so most likely what's happening here if I expand this out is that if we highlight over these elements is that it's not actually growing and being pushed to the far side of our page like this what we most like we need to do is we want to justify content flex end and this would actually be in justify self flex end now hopefully what we should see oops we have to do that on the nav I'm sorry so justified content justify self flex end whoops of course I can't spell there we go so now if we look still not moved over unfortunately let's try to make this a flex grow of one there we go okay so what the problem was is this nav wasn't growing to fill the entire space on the bottom of our page so just stopping edits width so what we can do is we want to do this on our nav for our footer so we can just come and say we want to do footer dot nav I'll just make a class called footer nav or X where you have footer now so we'll just say Flex grow because all we need to do is just make it grow I can say flex grow Fluxx grow one now if we save that make sure we refresh this we see that everything's back to where it was before so we know that this is working just like it should just reading through the comments here to make sure there's nothing going on guys are asking questions on oh I see a great question here what's the difference between putting script tag at the top and bottom of the body tag so this is actually great because we finished up this section here for the most part we're going to come back and do the table in just a little bit but if we move on to our store page this is actually where we have our script tag so let me just expand this out and you can see I actually put the script tag all the way up in the head of the section instead of in the body most people what they do is they take this and they put it all the way at the bottom of the body so right after here's the very last thing is you'll have your script tag and it'll just look like this and the way that this works is it actually loads through all of your HTML so the browser comes to it parses all the HTML and then gets all the way to the bottom here and it sees your script tag and then it parses and load your script tag and when it's loading a script tag it actually stops parsing anything else so if we put this all the way at the top in our head or at the beginning of our body both of them are essentially the same what happens is it hits the script tag and then it stops parsing and it finishes parsing the entire script tag and then it moves on to parse the rest of the application but we're using the async keyword and you can use async or defer and both of them are going to tell the browser to not stop parsing so it's gonna download the script tag but it's going to continue to parse the rest of your HTML and the difference between async and defer is async says as soon as you finish downloading this script tag so for example it's parsing the HTML and right here your script tag finishes downloading what happens is it stops parsing runs the script tag and then picks back up parsing where it left off with defer which is actually what I would be changing this to is what happens is it parses all of your HTML even if your store tag downloads inside of here it just continues parsing all the HTML all the way until it gets down to the very end finishes parse into HTML and then it runs your script tag and what that allows you to do is instead of our store here we have some JavaScript telling us if the body has already been loaded then we want to call ready and if not we want to wait for it to finish loading but with defer we already know that the body of our document is going to be loaded as soon as our JavaScript runs so we can remove all this code and just call the ready function we don't actually need to wait for the document to finish loading because it's already loaded so we don't have to do any of those additional checks which is really nice and we can see if we go to our start page and we just click on something you can see all of our JavaScript here is working just as it did before so we didn't lose any of the functionality by changing this to here all the way at the top to be deferred so we changed this to defer and we came over here and we could just remove that document loading code this is something I definitely should have done when I wrote this the first time but I wasn't super familiar with async defer when I wrote this and that's why I used async instead of deferred so now I say question this is a great question and says should I start using flux and grid to replace table or keep using table and this really depends on the reason for using table if you remember in our example here on the home page we have a actual table of data this is data that is formatted in a table this should use table but if you're using tables specifically just to lay out things in a orderly fashion definitely use flex or grid but this is actual table data as you can see it forms columns and rows which is how a table actually works but if you're just trying to store information that's not in a table format for example it's not actually specific columns and rows that relate to each other then in general using flex or grid is better they're just more powerful for styling things it's much easier to work with in tables and tables should only be used for specifically tabular data like this the reason I actually did this with Flex box is because it's so much easier to style things with Flex box and tables are a real pain to deal with all the extra borders and stuff that you have to deal with so that's why I did flex box on this but I really should use a table and we're gonna come back and change this to a table as similar to get to the rest of our pages so back into the store HTML we have our header which is exactly the same so I'm not going to bother changing this this is already good we already know this is good again using h1 here which is great and you will notice again there's no main section and you were inside of here so we want to make sure we wrap our main content which in our case it's going to be this first section of our albums this merch section as well as our cart so we can just come in here we can say main and what we want to do is we want to put all of our content except for the header and footer inside of there so we can just copy whoops all the way from this section to this section and we just want to put this inside of our main here and I just want to make sure I ended that properly and there we go for the most part that's intended well looks like it's missing something somewhere ah here we go there we go so now that's all intended properly so now we actually have a main section again this is really important you should have this on every page as I mentioned earlier next we have our sections which have headings at the beginning of them and one thing to note is this as an h2 heading which is above like h1 is above this h2 so it follows kind of like a document outline you always want your smaller headers to be underneath your larger headers you don't want to have this be an h2 and then this be an h1 because that just doesn't make sense to have a larger header underneath a bigger header or a smaller header so this is why we're using h2 here and you can see in all of our sections we have an h2 and that denotes these are all equal level items which as you can see here inside of this example if I just scroll this over you can see these are all equal level items we have our music our merch and our cart they all are essentially at the same level of the document one of them is not inside of the other so we don't have to worry about nesting our headers to make them smaller and smaller that's why we can share h2 between all of these different headers other than that this is pretty straightforward I'm just using Flex to style this so as you can see we have that dynamic change when the browser gets too small and this is all just taken care of by flexbox we don't actually have any media queries to do this it's just simple flexbox and over here in our code really this is actually pretty good I think for the most part we have our h2 which is our section here and each one of our shop items which dive into that just a little bit there are these divs and you can see that we have a span which has the title I think this should actually be changed potentially this should be like an h3 or an h4 something that denotes that this is actually the heading of this section so we can change this to an h3 for example instead of using this fan this image tag I think is fine but you will notice there's no alt tag on this image tag and what an alt tag allows you to do is essentially for screen readers so for people that can't actually see the screen and it's reading them what's on the screen this alt tag will actually be read to them instead of actually showing the image so we can do is we can put Alton here we can just say that this is going to be t-shirt for example because we're right here this is where we are so this is just an alt tag it'll read to them t-shirt because obviously they can't see that this is an image so it'll just tell them that this is the t-shirt inside of the picture next we have our shop details we have this wrapped in a div and the reason we're using a div is just because there's no actual styling going on with this section or there's no actual meaning it's just for styling purposes so that's what the div is for and then a span here as well as a button and one thing to note is we definitely do not want to use an 8-acre some people may use anchor tags for this but an anchor tag implies that you're going somewhere whether it's linking to a section on the page or going to a different page on your website for example these links up here so you don't want to use an a tag when you're not doing this so an a tag is great for linking to things but a button is for when you're doing things on the same page for example we're adding this to the cart so we're actually modifying our page and that's why we want to use this button element here instead of an a tag never use a tags when you actually are just doing something that a button does and never use a button when you're trying to navigate to a different page as specifically what a tags are for and buttons are specifically for just modifying the content on the page other than that though just a small change of the h3 and the alt tag I think this shop item is good and we could go through and change all these individual shop items but it's gonna be the same changes and I don't think you want to sit here and watch me change the same thing over and over and over and over again so I'm just going to assume we changed one and then we're just going to assume that we changed all the rest of them as well and now lastly we can move on to our card section again it's a section within h2 which is great and here again we kind of have that problem we're using div instead of tables this should really be a table for the styling purposes because this is very clearly a table we have our headers we have our content inside of here so we should definitely use a table for styling here instead of using divs and spans and flexbox but that again is something that we're going to tackle later I actually probably won't change this to a table in this stream just because it we'd have to change all of the JavaScript code as well because all of this depends on using divs and spans for all the different rows so I probably won't tackled it in this live stream just because it'll be really repetitive and boring watching me change it but do know that using divs and spans here is a very bad idea we definitely should be using a table with table headers and like I said we'll change that inside of this index section but we're gonna get to that after going through all of the different pages other than that if we look down here we have just a kind of a strong tag saying that there's emphasis on this total here span for our price all this looks pretty good and then lastly of course a button for purchasing which again is great in our footer section I'm not going to make the same changes we've made on the index we just want to make sure we wrap this in a nav obviously because it's going to be a navigation element so yeah Arthur here as mentioned is so main and section is for indication purposes only and yeah that's true like main in section they style exactly the same as a div they're just block level elements with no default styling to them but what they do is they give semantic meaning to your page so the browser knows that this section is an individual piece of content in your page so it knows that it's a distinct section that's different than this section up here if I made this a div for example instead of a section the browser doesn't really have any idea of what this is it just sinks okay this is something that's what a div is it's something it doesn't know what it is it could be nothing it could be something that could be a section it doesn't know but with section it's saying this is discrete piece of information that's all congregated into this one single section and it's all related to each other as you can see this is our card section everything inside of here is related to this cart right here same thing with our merch section is all related to this merch here and as for main if we scroll up a little bit to where we can see that main is very similar to section except for instead of being a discrete single piece of information it is what is the main overall purpose of this page what is the content on this page that is most important again it works just like a div for styling purposes but it at least tells the browser what's going on and why the like what the purpose of that page is what is the most important content on that page so I also see here someone saying that should you use like bootstrap as a library or create all your own custom CSS this is largely up to you I think when you're first learning and getting started and you are focusing on maybe JavaScript are you focused on HTML you're focused on the backend using bootstrap is great because it's really easy like you don't have to worry about learning a bunch of intricate CSS and you can just focus on what you're trying to learn which is the JavaScript but if you want to focus on the learning CSS and styling and design and all that I highly recommend writing your own custom CSS I personally enjoy writing CSS and I don't like using frameworks like bootstrap because they really tie me down they kind of forced me to do things the bootstrap way and when I want to break out of the bootstrap way it's really difficult to make changes to that so I generally write most of my CSS from scratch as you can see for this application all the CSS is from scratch there's no bootstrap there's no libraries is just straight CSS that we wrote for this application and that makes it really easy to change things and with grid like CSS grid and CSS flexbox a lot of the big benefits of bootstrap such as their grid system are really not that useful anymore and creating your own custom buttons is actually fairly easy if we just find our button code here you can see that we really just have this little bit of code here for our buttons and then this little bit of code for our primary button it's really like ten lines of code to create our very own custom button so that's really not that difficult and so a lot of the things people really enjoy about bootstrap such as the grid system and the buttons those are really not that hard to do on your own so I highly recommend if you want to you know become a more full like well-rounded developer especially on the front end side of things to just dive in and learn CSS write your own CSS because it'll make you learn so much about CSS just by having to figure it all out on your own rather than working around what bootstrap has okay so that other way let's move on to our very last page here which is going to be the smallest one and that is our About section and if i zoom this out you can see that our thing doesn't go all the way down to the bottom of the page which is really annoying this is something that we want to fix but other than that the rest of this is really fine I really like that the image here gets the text wrapped around it that looks really good our Vout section has the nice section header here and if we look at our HTML we can see that our header is the same as it's always been this looks great we have a section here which really as we know should be a mane because this section is our main content so let's come all the way down here and same main so now that we have that wrapped properly you can see we have our h2 with our header and our image which this shift course have an alt tag so we want to write an alt tag we can just say and members oops members performing just like that essentially it's just a description of what the images so that if you can't see the image you get read the alt tag so you just know what's going on you always should have alt tags for your images no matter what because it just makes the life of people using screen readers so much better for your website instead of it just saying this is an image because obviously you have no idea what that means so now let's zoom this back out a little bit and we can actually work on styling this so that our footer is all the way at the bottom of the page here and we can just do that with this main footer instead of our styles and what I'm going to do is actually use sticky position for this so if we go to our main footer we can just change the display here to sticky and then what we can do is we can change the bottom to zero do let's inspect this just to make sure see what I'm doing wrong I don't use sticky position too often such we want to make sure I fully understand it named footer displays started not display this should be positioned what am i doing okay position sticky so now let's see if that worked if I expand this all the way out and of course not okay inspect it again bringing this out so where's our main photo here's main put a container main footer okay position sticky bottom zero let's see here okay yeah so with the bottom zero like this is just gonna stick to the bottom of our page obviously we don't know if I don't know why I was thinking that was going to work let's scratch that idea zoom back out remove these so everything's back to how it was before and what we really want to do is we want to make us their About section essentially our entire page is going to expand to fill the full height of our page and that this is just going to be stuck at the very bottom of our page so if we go into our about HTML we have our main section here and we can just say for example full size oops size just like that then instead of our Styles we'll just scroll the way to the bottom for this there we go we have main whoops full size just like this all we want to do is we want to make this take up the entire height for HTML so if we go go all the way to the top wherever I defined HTML I mean height 100% okay we already have the min height to a hundred percent that's good probably should change this to view height so that it's going to be a hundred percent of height of our entire screen just like that and now what we want this to do we want our full size to be we just changed I hate here to a hundred percent is going to be far too large min height you let's see here I get a full-size yep whatever let's go back to styling our main footer because I feel like we were close on that so if we set this to be at the bottom of zero position:absolute that's gonna put us all the way to the bottom we could put left:0 right:0 obviously that's going to work the one problem though is obviously our text is going to be cut off on the bottom here change it back to sticky I always hate styling things that have to expand to the full height because really the easiest way to do it is to change your entire structure of your HTML so that everything is 100% height and that you have flex grow on this middle content so I guess that's what we're gonna do just because that'll be the easiest so inside of our body here we're just gonna put a class of full size and instead of our main we're gonna put in the Flex grow and here which is a class we already created for growing so now we can come back do that full size make sure I didn't define this anywhere else nope okay so inside of full size what we want to do is we want to change the display to flex and we want to change the Flex direction here which is going to be column and now as you can see that's worked what this essentially is doing is it's changing this entire page to be a flex layout and then we're making this middle section our main section grow to fill all of the content that's possible so it's growing to the full height of our entire page which is 100% and then this is just being stuck down to the bottom if we remove that flex grow so if we just remove this everything is gonna be exactly the same as well as before but with flux grow we're just saying this About section should take up the entire height of our container generally I don't like styling things this way if I don't have to just because it's kind of a pain to work with because you have to make sure you always flux grow your thing that you want to grow and you have to make sure there's only one thing that you have to worry about growing but in this case it works really well a footer is stuck at the bottom if we zoom in you can see footer still stays at the bottom and it doesn't overlap any of our text so this is probably the best way to do that in this use case and something that I've done in a lot of different sites and the way this trick works is we have display flex here which allows us to do flex grout to make something grow and by changing the Flex direction back to column it essentially lays everything out almost exactly the same as it was before it essentially makes everything as if it was a div and in our case luckily all these sections work like divs their block level elements so this is just going to work just like our original site was before it's kind of a nice trick that I like to do the only time this won't work is if you have spam thrown in there so for example we had just a random span inside of here this is now not actually going to be a span it's going to be a div you see they're going to line up on top of each other like this when if you didn't have this flex column and display flex you see that these fans are lined up right next to each other whoops that's really the only time that you're gonna have to worry about this problem but obviously for our case as I said we don't have actual spam content there's no inline content so we don't have to worry about that yeah I see other people saying that they always have problems with footers it is one of the most painful things to work with making sure your footers always stuck to the bottom of the page but in this case this is a nice little trick that I like to use to do that so hopefully that can work in your web sites as well other than that the About section I really like this about section it works well one thing I just thought of though is if we scroll down here all the way into our footer you notice we have images without alt tags down here as well these should really say alt YouTube for example alt Spotify I should say logo logo and of course alt Facebook logo essentially you always want to make sure you have alt tags on your images so now that people when they hover over these instead of it just saying link to image they're gonna know it's a link to Facebook since it's the Facebook logo that's just a little something that will help there now let's move over all the way back to our index as I said we're going to change this out to be a table instead of divs and spans so the first thing we want to do is figure out exactly where this section is starts right here and you can see we can just start it off with a table close off that table and then inside of this table we're gonna have our head so we're gonna have a tea head this is gonna put all of our header information for example in our application we don't actually have any header so we're just gonna change to tea body instead and this is going to be tea body normally if you had a header for example date location that kind of stuff you would put those in the tea head but we don't have any and then we just need a table row and inside of that we have some different cells inside that table so the first one is going to be this July 16th just copy that in copy this down a couple times I'm gonna do Detroit and of course music theater here and we want our button so we'll just copy the whole button inside of this TD just like that now if we save that obviously this looks terrible let's remove all of these classes for two related stuff there we go so now it's looking a little bit better and with our table we want this to essentially just take up the entire width so we're gonna put a class here we're gonna call it table 2 or row and instead of our styles whoops table tour I'm table to a row because obviously it's not a row there we go and inside of here we're just going to change the display to flex I'm sorry not display of folks I'm going to change the width to 100% and there we go that taking up the entire width and as you can see it's already styled a lot like a table which is great now what we can do is we can come in just copy this row down one more time and you can see now I have two rows in our table but you will notice we obviously don't have these underlines in our sections also this should have a class here of City or sorry tour date that will give it the bold text as you can see let's copy this up to both of them just like that as you can see we now add a bold text on both of these which is great and the next thing we need to do is we can apply a class to our rows so we can just say class here is going to be tour our sorry let's say table tour row only reason we're doing that is so it's different than our tour class are you exist and we'll say a table tour row and we want to do it here is we want that border on the bottom so let's look at how we did this our to a row class we can essentially just copy this all the way down here save that and of course that's not working let's see here order one pixel solid black let's just see what that looks like of course I know what a problem is so I'm trying to style this TR obviously we can't do that we need to style our T DS so we can just say here that we want our table to a row and then we want to style the actual TD to have that border bottom so let's paste that border bottom duck down let me copy it again border bottom all the way back down here now as you can see we have our border on the bottom just like this and we want to remove any of our margin so we'll set margin zero let's see and what does it inspect this see exactly what's causing that slight spacing between our elements so we got our t DS margin:0 you you so I see a question actually that I'm just gonna talk about right now so I see it says why is using table better in this case and the reason I want to use table here is because this is tabular data it has distinct columns that correspond with a specific label saying with here we have specific columns for specific things and I just think it's generally better to navigate for people using screen readers to navigate tables as opposed to navigating just divs and spans they'll have a better idea of how the content is structured they know if they move down they're moving across the dates for example or the cities or the locations they move they move across that the next content is always going to be for example date is followed by city city is followed by location and so on so I think it's just better for the screen readers in this case also I see here that our border spacing is what we need to change not our margin so we can just change reporter spacing to be 0 now if we save that of course that didn't actually change anything let's see I'm sorry that should be on our TD or on our TR so we can just say table tour row Quarter spacing 0 and still nothing see I don't use tables very often so this is this is new for me collapse on the table you think that's what it is which I say border-collapse:collapse I didn't do it oh I'm actual table itself genius thank you very much for that ok so we do we just had to change our border to be claps let's put that instead of our table tour here thank you for that tidbit so now we have a straight line all the way across with no spacing since we were collapsing our borders together across them so what was happening is we had vertical borders here on the left and right which were essentially transparent and this is just collapsing those vertical borders so that they're part of our border here also I think we had padding bottom of 1 REM and we also had a margin bottom of 1 REM as well between our different elements almost not a margin bottom that's not working very well I guess let's go into our index here and remove all of our old div content so we're just left with our table there we go so now we just have these two elements here oops back to our CSS and we just want to put a little bit of spacing between these padding on the bottom margin on the bottom margin is not doing anything let's see here margin-bottom let's try and March on the top I guess we could just change this to be padding on the top and we must be missing a class because obviously this bottom row is not being styled so let's see here and yes we need to apply this to a row to this TR as well there we go so now we actually have the line being shown up and what we can do is we can just say here we want to have margin on the bottom of the entire table to one REM and that just gives us a little bit of space between these elements we can also copy this selector because we wanted to get the last child and we want no border on the bottom so we'll just change that to none now if we save that oops we don't want we want the last child for our row so we want the last row to have no border not the last cell there we go that got rid of the border on the very bottom and now if we just copy this another time I'm not going to worry about changing the dates or anything as you can see we have essentially the same table we had before if I close out of this you can see our spacing is automatically assigned for us as you can see we don't have any fancy classes defining our wits it's just choosing the Wits automatically since it's a table you can tell if our buttons are lined up well everything just looks better in my opinion since it lines itself up better it's going to work just as well you know people and screen readers are going to build the tab through this use the arrow keys go up and down and be able to navigate this much easier than divs and spans and our styling looks essentially attacked with the same so we've achieved what we wanted we didn't change the look of the page and we were able to increase the accessibility by using tables god I love this comment here says you haven't coded CSS until you change random stuff and see what happens that is so true this is pretty much how I code all my CSS as you go in here I change something save it see what happens and then if it doesn't work I'll eventually just inspect the page and just manually start changing things in the element style until I eventually get it working how I want and then I hope that I copy and paste everything over to my CSS because then when i refresh almost always I forget something and then I have to remember what I changed oh it's such a pain but I don't know why but I still love CSS it's so fun okay so now that we've got the styling for our HTML done we have it much more semantic than it was before with alt tags we have tables instead of our store here we have main sections all of that good stuff the next thing I want to focus on is going to be the JavaScript for this application because it's a little bit ugly you might have got a little bit of sneak peek of it already but it's using a lot of older syntax such as var and choosing just normal functions no arrow functions all this document dot get element by class name normal for loops and the reason I did this when I created this tutorial the first time is that it's meant for like absolutely beginners and I figured beginners were most likely gonna run across tutorials using var instead of letting Const and I didn't want to confuse them by throwing in another way to define variables so I was like I'm just going to stick with var stick with normal for loops but in general I never use var when I'm actually programming JavaScript I don't really even use normal for loops that often so what I want to do is actually update this code to what I would make it look like using more modern practices as you've seen we already changed this by getting rid of our document loading state by using our defer attribute instead of our store here remember we use defer here so we can actually just assume that our document is already loaded which is a great way to get started and now the next thing I would do is obviously change these to be constant variables we're never going to be changing this remove Cart buttons same with quantity input Add to Cart buttons none of these are actually going to get changed so immediately I would change these to constant and if we check everything's just working as it was before so clearly we haven't broken anything yet which is great next thing I would do is I would actually loop through these Cart buttons so we can do is we can just say remove cart item buttons dot for each and we're going to use here document query selector all and we want to just get by that class but endanger and the reason for that is that we actually have access to for each on query selector all and we don't have access to for each on the get elements by classmen what you would need to do is say something like array dot from and if we do a ray dot from this is going to convert this to an actual array where we can use for each on it but just using query selector all is just as easy and I generally enjoy using query selector all over get elements by class name just because I think it's easier to have the same shorter syntax everywhere inside of your code now instead of this for each we're gonna use arrow functions we know that we have a cart item just like that we're gonna call it button actually because that's what we called it down here we can just copy this code for adding the event listener paste it in here and there we go now let's make sure that works if we click remove it removes so we know that all the code that we changed didn't actually break anything which is great and already this is a lot cleaner than the code was down here and let's just use the array dot from so you can see how that works we can say for each and I think I called it input inside of here as you can see so for each input we're just going to copy down this input event listener move all this code and now when we change this it should