Website Coding Day 5, Engineers Week 2021
Video
Links
Transcript (Unedited)
welcome back i am continuing the process of the update on the website and i know you're probably thinking like how many parts this is going to be well it's going to be a is it it may end up being a lot of parts and the reason being because i want you to be able to watch this in smaller segments instead of trying to do the entire project in one large long video um that way it's easier to you know stay track and pick up on things and so forth you know so you can take breaks in between kind of like how i am taking breaks in between and recording each of these video segments where we last left off we did some updating on the carousel and put some images in so i've copied some more images over to this repository i've also made some changes to the footer and i figured it would be a little bit better to have this the same color we're going to make some additional changes to the footer though on video so that you can see those how you transition from this format to a different format without further ado we'll go ahead and get into it welcome back to the almost engineer channel if this is your first time checking out this channel please be sure to subscribe by clicking the subscribe button below each week i come with new videos and discuss how to do technology on tuesday and how to do diy projects on saturday so if you're interested in those topics be sure to subscribe this week is a special week because it is engineering week and so as part of engineering week i am actually doing my national society of black engineers website over during this week and i'm doing it as a coding session so that hopefully you the viewer can learn something new about programming when it comes to website design or just how to code whether css html or bootstrap even so picking up where we left off i did make some changes to the footer in the previous video this was black in the background and i've changed it to the same color as the nav bar because i saw some designs that were set up that had the nav bar and this bottom footer the same color so next what i'm gonna do is actually change this from a single color layout that goes all the way across the screen to a four column layout i'm not sure how that's going to work with this banner here but we'll go ahead and convert it and then figure out the banner part at a later point so i'm going to go ahead and go down to the bottom where my footer is all right so here's the footer and in visual studio code you can actually put breakpoints here i think there's another way you can actually do a bookmark but i'm not sure how to do bookmarks in here so breakpoints help out because ebbs you wear keep track of your points in the various places in the file and what i'm going to do is actually can change this container to a we're going to go with a row and i believe that padding there and i believe that twitter class there but i'm gonna change this to a row and then on the next section i'm going to do all of that with a column of uh for anything that is a large screen or above it'll be a column of three otherwise uh calls i think it's sm will be 12 and yes so that's how i want that i'm going to remove the horizontal line and put that back and then we're going to do the same thing for the remainder of these divs and we'll also need to add an additional div and remove the footer excuse me remove the uh remove these additional containers because the parent container will address everything else that i'm doing in here and so uh so i need to put one here and i need to add one more i believe or do i have four on this page let's see so i have one two three four so i need to put this into a footer and i'll probably leave this copyright down here at the very bottom but put these links off to the side in a vertical lock if you will all right so the last item this will actually need to go into a div because it does not currently exist in one or yes it does well the whole thing doesn't so right so do a uh div here and remove that so-called intelligence from intellisense trying to figure out what i want to type all right and we'll close the existing div that's above and so that should if i remove these horizontal rows and let's see all right so that should be it let me go ahead and do the formatting on here to make sure my indentations are correct and it looks like i might be missing a div somewhere but let's go to the page and check it out just to make sure all right so everything is in a single uh well that's not in there all right um we got div container and we want this all right so we know this is the closing container i need to move this one and a corresponding div and this one with the corresponding div out of the way if you do format let's see how that lines up it does not line up for well yeah it does okay let's move this down here i think that might be correct all right so we got uh the four cards within there and they are set up correctly i know they're not centered like they should so let me do a margin of x auto hopefully that'll center there we go all right and this one is outside of the car like i say we'll address that in a little bit and then the last thing is i want to put these links up here i also need to change the anchor text for hover event to be some other kind of color or just to stay white whichever the case may be so what i'm gonna do is go ahead and copy the existing copy the existing card here and i'm gonna restructure these links here and um comment that one out do i need card text card text card text art text so actually i do need this one and i'm gonna change this to links and then card text i'm going to leave that paragraph there i'm going to copy these unordered lists and put those inside of the paragraph and well maybe not put them in a paragraph let's see how they do without being in the paragraph going to go current um that out all right so what do we have okay so we have some links over here which look good like i say this will be corrected and i actually need to remove those down at the bottom here so we'll take this entire div comment it out uh let's uncomment this one first and then i comment that or comment that rather okay so now we have what we're looking for and this footer with the copyright in it i guess that looks fine might need to change the footer up here uh class footer so it's probably something in the css i think that's what i said um in the pre in an earlier video where there was a margin yeah padding and margin at the bottom so we'll comment those two out for now and so that should be uh save it yeah so that should be closer to the bottom i think i need to run the minify okay if not that's fine all right now the next thing is to so i like this particular setup right here i may want to take this border off of the cars or put some margin in between each of these and to do that let's go back to base and i want to do a m x of 1 that's a margin on the x axis of one all right and so what i have to do is actually so when you do a column of three and you have four of them then when you try to put margin in what happens is one of those columns get kicked to the next row which is not what i want so what i'm gonna do is actually change some of these to a column of two and remember all of your columns are supposed to add up to a total of twelve so two two two well actually we'll leave that one as a four and then i'm gonna leave that one as a three and i know you're thinking 4 2 and 2 is 4 plus 4 is 8 plus 3 is 11 that is not 12. and that is correct and the reason being is because i want them to be on the same line here but also want to have possibly a little bit of margin in between and that may be a problem so i may end up having to take this margin out let's see what happens if i put padding here instead okay and padding may be the way that i end up going i i'm kind of hesitant at this point so let's take that out okay and so i have a three all right so what i'm gonna do is i'm going to change this last column so that column is three the amazon is four i need another one so we'll set this donations one two three and okay so that looks fine not really so three and three so three and three is six plus no yeah three and three is six plus four is ten plus 2 is 12. not sure if i want to leave it that way i may make the links a 2 and make the join today a 3 so let's give that a go so links can become a two that way all the links are in a single column and then these others are in a wider column which is fine and then i'll probably separate these links out um that's what i'm thinking maybe maybe not if you have any questions about this design drop a comment down below um i would love to hear whether you think these should be wider or narrower that's a difficult word to say narrower um but yeah especially with these because these links actually have multiple are broken across multiple lines so while i'm at it let me go ahead and change the css for these so the footer [Music] what is it something that turns red the default text is a hover event all right so we have the footer line yeah so here we go so the photo links don't need to do that so on hover i'm going to do a font weight of bold on those and so when you mouse over now they kind of jump up and i think that's better that may work for now i may change it again later on but for right now i think this does the job cool all right now this banner here i think i might just get rid of it all together and we just put something here that is slightly different um trying to find that code for that better which is so that's the page here we go we got the blocks or did i wait a minute where's the bookmark at there we go okay so and see again this is where bookmarks come handy you can just look for the bookmark you see it over here on the left but it's not so much as evident on the right as it is on the left um in some i believe is visual studio it actually will make a when you have break points on the left-hand side it will actually show them on the scroll bar as well on the right-hand side so it's a little bit easier to identify but this here only has them showing on the left so you kind of have to scroll i do believe there's an option or there may be an option you um i guess not sometimes there is an option let's see jump to breakpoint uh so you got enable audit point there you go so go to the next break point so that kind of helps uh if you're by just stepping through the code and as you see it jumps down there um so that when you're doing debugging you can utilize that all right coming back to what we were working on um so right now i'm going to [Music] so what i'm going to do is change this right now because i don't like that banner and at some point i have to log in and get the things for that banner to be able to officially do it a different way what i'm going to do is go what i am going to go ahead and do now though is to put a plain text uh banner here that represents that same piece of information for amazon and while this may not be the best way of doing it it will work now and maybe i'll take this javascript that they have as well as this iframe and give it a page by itself on the website that way the site will still blend in together but then for the amazon small it has its own page and we can refer to that page directly in our promotional items and so forth to uh that way you know people don't necessarily have to go to the site they can well they can go to the site still but then they can use that as a place to jump to a different page very quickly without having to go through multiple steps to get to it because that was one of the complaints that i had uh received about how like you got to go to our site to get to that every time and originally yeah that was the case unfortunately that's how i was set up but i there's a different way that that can be done now so amazon smile all right so there's that and if i go back to our current sites um got it all right so uh shop and i'll change this so since we have this here i can actually go back and change this to all of these to threes and or maybe even yeah so i think i can change all of these to threes and so they're equal now we'll get each of these on a line these links that is on a line by itself may even put in the bullet points as well not sure why that careers link is not showing up on the line by itself that is kind of oh well okay that makes sense because it's listing each item as an inline item which it i don't want it to now so go ahead and take those inline item text out save so now each link is being displayed there and broken the cm css board which is uh slightly inconvenient but that's fine um and i'll come back and do that one later okay so amazon smile is here i need to figure out some text to go on the amazon smile thing so i'm just going to say if you job with amazon um please consider using for your purchase and all right that fills that text in i'll go back and re-agree to define it and clarify it at a later point but that's enough to at least get started for right now and then uh i guess i can go ahead and take that page content so this right here and um well first let me uncomment it and then go ahead and copy it out and create a new page in the not the theme so we want that in the sites directory and call it um i want a separate page all right so we can do that here so i'm gonna just do it here if i think it needs to go on a separate page i might give his home page but for now this will work and there we go all right so and i think i want to put this amazon smile thing up here first granite we get more from directly from direct donations over amazon smile but i think a lot of people will be more inclined because of the fact they're using uh they're using this information to purchase then go from there and actually i'm probably going to reorder this because i want this donations text to be up here this is what we do with the donations we provide them use them into other programs so scholarships community awareness and outreach such as our engineering day at the park um yeah so go ahead and save that and [Applause] save the page itself and so if i go to the what is it donate yes go to the donate page the amazon smile thing is there got to figure out how to get rid of that white space but for right now it is fine since i am still testing things out i'm not too alarmed about it but long term this will move up or we even have a different banner here going back to the amazon smile thing let's go and in the base need to add where is that link um so amazon smile so just copy what they have here and and so this particular set of text was provided from the template so i'm just copy that and do donate with a pound sign of amazon smile in here and that will all right so with that this will take you to the donate page as well as jump down to this section of the page so to demonstrate that let's go back to the homepage and scroll down past all this text and hit shop today and there we go we jump down to the bottom where it says amazon smile all right next let's go and fix the css for the links over here on the right hand side so that will be in the what i take out the left nav item list item i think that was this you know footer yeah so i took out this class but that should address that problem i think okay so it is bolding so i need to do also um the ul footer i don't need the hover event i need the other pieces of the event here we go all right so now my links are again white so that's what i want next i need to go back and fix the links at the top part of the page that have this class this class needs to be removed is there a more efficient way of doing this yes you can do find and replace and in that find and replace you can do [Music] for it to search only the selection and then do a find and replace based on that selection um but i didn't do that in this particular scenario as you saw uh it's not that many items and sometimes crafting that uh find and replace expression it takes a little bit longer than just going through and doing each line that way all right so we have our bottom section here of our top section there and there we go all right any point i could change this to black but i chose to go with the red it seems to be a little bit more of a subtle color and i may even just change this back to black though who knows all right so we have all of that there let me go ahead and change these to buttons i think it would give a better visual appearance if they were buttons so we just do a btn on the not that that's the wrong button a button as far as each of those because it i think it will look better that way but if it doesn't um it can easily be undone if you think it would look better with buttons feel free to drop a comment to say yes or no and in addition to the buttons i need to also do a class that corresponds to said buttons because i want the buttons to stand out and so if i have let's say btn and then btn footer there we go and then we'll do another class btn footer with a background color that is black and text color that is white semicolon all right and i need a border around this thing so border with um gotta type it right we'll go with uh 1px and order color and we'll do black save all right so we got that and then there's another thing i thought it was the background color but i guess it's not um let's see if i can do this so btn dark let's see what happens uh oh okay so on mouse over it's working not quite want it to look like this without having to be moused over and so let me see what other attributes it is setting bottom border which is fine left border top color i don't know what's doing so how about this let's disable the css for the moment and see how it looks once it or if it'll refresh all right so button start okay so it does that right now if i wanted it so the background color is dark red i think that's because the css for that is telling it to be that way overwriting it's not an inline style but if i do an inline style it would overwrite so i need um btn footer uh yeah let's just stick with btn footer re-enable that and yeah there we go i want the text to still be white so i have a hover event that is changing that text to black not sure where is that on hover on hover on hover vtn homepage so we got a black with a body div dope footer footer photo photo sub footer um the background color is dark red ah so here we go i think that does that have cart link on it yes it does all right so let's take this out and see what happens once it okay so stop today has btn and btn footer um and the footer is defaulting to white well that's just a general um [Music] all right so let's do inspect element on this item we got div card body let's see if there's a card body in here spelling helps no okay so the styles that is inheriting so you gotta border background color i want the background color to be uh if we can change that one two three all right so a b t n i'm trying to see where is btn ah there we go all right so black text is white there we go now on hover or a um and i may have to narrow this down a little bit because that is not doing exactly how i want all right so btn footer so let's do a dot btn dot footer all right and change this abtn back to dark red and save okay and so now that is more specific to what will show up here and this and that's what i want all right so coming back to the base uh template going to change all the class cards or class excuse me change the class on all of the links over to btn btn footer and that's what we want we want these buttons to kind of or we want the links to appear as buttons and that they stand out and so when click they still go there which is cool all right so close the dev console and make sure all the links are working as it should be which they are um maybe want to add a little bit of flair to that where here so let's do a card title so we can extend the card title i don't think there's one already in here title no good all right so we do card title and div dot card title with a text uh decoration of underline and it did not do what i thought it was going to do all right so what other classes do we need to add to make this possible so i did a div i don't think i need to do a div let's come back so there's really a h5 not a div that explains why that didn't work all right and so now we have that there and i really don't want that just on that part so i may go with a border bottom of 1px or 3px and then border style of solid all right and um border bottom style i'll play that century there we go and so now we have our length uh line that goes all the way across the bottom here and um i would say that's pretty decent for the bottom um close dev console i may want to let's get rid of this border that is around the card so coming back to the css i want to do card and set the order width to zero so i'm going to do div dot card border width width spelling okay 0px and save all right and so now we have cards for each of these as you see there is no border here and if you really can't see i'll zoom in so now you see there's no border also when we get to a certain size that the divs go from side by side to stacked on top of each other which is the behavior that we want all right and i'm probably going to put another i put a horizontal rule down here at the very bottom to separate the bottom of the page that copyright information out so come back here and the copyright information is down here so we want a let's just do a hr i could do a border in in that div but hr should be sufficient hr by the way stands for horizontal rule and that needs a class with a background color of white all right and so there you see we have that stretched all the way across and so we are good to go on that aspect of things okay next step or next item i have some pictures brought in and they are sitting waiting to be leveraged so what i want to do is to fill some of these pages such as the membership page that i was on previously up with some content and to also work on some of the other pages i think i had a scholarships page yes and so i'm going to put the picture that we have from previous scholarship years up so that people i guess you could say no that is real and they can see some of the scholarship recipients and i'm not sure which photo is which um i could actually pull up these images in visual studio code if we do a refresh on that directory and here we go all right so and i loaded several images in here because i want to be able to do this so this is one of the community programs that we did we had a number of people here myself back here in the very back and of course my traffic light all the way up here in the front on display um so i'm not sure which of these may use let's see when load the image that's convenient uh that's myself with some other gentlemen who are also in nsbe or where at least when they were in college all right so we'll go with this particular photo here and so this will be a community outreach photo and if you go to programs i want to put this photo on the top of this page so from the previous video we talked about uh having alts yeah having things that uh images on here and using that in the metadata uh photo with participants t-i-c-i-p-a-n-t-s all right so we come back to the programs page so i should have okay so i have a bad link here that's not what i wanted oh images is plural save all right and so what i'm gonna have to do is to go to my css and i'm gonna ultimately have to resize this image because as you see it is super large um it was that's the original file so i'm gonna have to resize this for the web but as a quick and dirty way of doing this uh what i'm going to do is to want to create a uh class some create a class for image and we call uh head image all right and we'll save that and then we'll come back over to the css file and do dot uh head image age parentheses and do a width of um let's say 100 i think that's what it's supposed to be and height of auto i think that's how you would get that to resize yes so what will happen is what it's doing now because i put this css here is that it's saying take 100 of the width of the page i mean excuse me 100 of the parent container and then the height being auto means that this image will resize itself to fit that same space so for instance let's say the width of the screen is 500 pixels and so it will resize the height based upon that and so when you resize it like this right here to that nine through the smaller space the image will automatically resize and will not get cut off that's how you avoid getting that right hand scroll bar now ultimately i'm gonna resize this again so that it's not as high resolution because if we do the image info this is 4 000 by 2 000 approximately pixels which is a pretty large file for the web and as you see is scaled down to 1080 by 608 all right so um just keep that in mind but i wanted this particular photo here because it does relate to some of the community outreach programs that we do and the participation that we've had in doing some of the things that we do here um so now that i've got that one there we'll come back over here to the abouts and that's kind of scaled incorrectly too and i maybe i may have to just do this one individually and when it comes to scaling uh these particular set of images and uh maybe there's a different way of doing that so i auto maybe i'll just do height auto and with auto and let's see what happens then all right so that resizes itself accordingly this one is still too large there's a way to do it so that it fits um so actually come think of it so let's do a max width of 100 that's what i'm thinking and so that will fit there and then if we go back to the about there we go so that resized accordingly to the way it should be so that way you don't have these ultra large images stretching beyond the screen and so again max width will make sure that it doesn't extend beyond the container that it's in and this is in particular two images so what i really can do is actually do image img dot head image so that i know that that's specific to images all right um coming over to the membership page i do have another photo that i would like to use and the goal is to not use the same set of photos over and over again um and then the ones i do not need i will take out uh let's see okay that's a lot of the same photo all right so here's one that we do for our toy donation that we do all right so this one is the one that i want to do for the scholarship so because this is the scholarship banquet that we had some years ago and let's go back to let's go to the scholarship page and then we'll put in image url of slash images with the file name and i notice this is uppercase so let me fix that right quick because while some sys like if you're your server if your website is hosted on a windows space system it will not make a big deal if that file name is uppercase or lowercase but on a linux based system it will make all of the world of difference if that is not done correctly all right so the image alternate tab tag rather is the scholarship recipients um scholarship recipient spell check does not help that's the thing s-c-h-o-l-a-r all right so that's there all right so now if we come back to [Music] if we go to scholarship so we go to programs and scholarship boom we have an image that is fairly again fairly large but it can be resized a little bit better i can actually set the max width so let me go to the css i'm going to set the max width to 75 with the height of auto and so that's a little bit more realistic and where it should be i mean you can even go down even further to as fifty percent of the max width of the screen of that transparent container and to get this a little bit smaller but i'm okay with 75 percent depending on some of the other images i may need to adjust it accordingly and this is kind of similar as well as far as that percentage goes alright so that photo looks great and i need one for the membership i think i have enough uh photos six eight i use that there uh three six one that's a different one okay so maybe i need to go copy a few more photos because i think i might be missing some from somewhere all right uh yeah so go back to programs right quick and we do have some engineering photos i think i actually downloaded some hold on i did download some here i believe this is one i just need to copy it over okay so there we go all right so this is another one i actually just need to move them over to the appropriate directory because i forgot about those so copy and open containing folder because easier to go back alright copy images paste there we go all right so now that we have those two images in here we can come back over here and refresh and make sure that they work so use this path um that's a very long file name that's what happens when you download images from that particular social media site that starts with f i'm not gonna call the name because they may be listening but we can rename that at a later time uh let's see we have membership programs scholarship engineering day ah okay so what i want to do i need to go find a few more images but what i want to do is also add some images to this carousel which is what i previously mentioned in the last video so we'll come back up to the carousel and i need to get this image off the clipboard so i don't erase it all right so i'm just going to copy a carousel item well before i do that let me go up here and i'm gonna add some slides so i got zero one two three and four all right and yes that's good all right so we got a div and we need to go from that div to i believe is this one or the next the next one okay i think that's correct save all right and we'll run well probably don't want to run the formatting on it just yet all right so copy that and i'm going to remove that paste and i'm going to check to make sure it didn't break anything in process okay so the image is there and i got a couple of i got one more or two more that probably want to drop in so that's that one that is a i guess i can use this one on the membership page granted all the people in that particular photo are not members but majority of the people in that photo are members so image url and do slash images slash that dot jpg and image alt um uh members uh that's all right so there goes that and so if you have that here boom so cool for as the images go [Music] all right that needs to really be a h3 tag so since i'm here change that to an h3 uh all right now back to the carousel i think i had a cup one more or two more photos not that one this one yes all right so we'll put uh that down here and then there's another photo that's it [Music] yeah that's it so we'll go with this one and put that one down here as well and we come back to the carousel item and scroll down to the div there copy paste and paste and we'll take this file here paste it there and take this one here and paste it there and save and now i think i have all of the carousel items correct all right so like a mist type the jpg is it lowercase jpg and so this is what i was talking about when you go and do file names and the file names are either lowercase or uppercase and they don't quite match that you have that problem looks like the url is correct 12 54 17 jpg saying that the file might be corrupt which is weird um because it just got through showing it so i'm not sure how it's coming to the conclusion that is corrupt all right so that's what i copied that one works that was worse okay um so save again and see images images got it all right so scroll through scroll through woo that is massively large and then that one doesn't work okay how convenient all right so the width is auto and the height is 100 uh percent of the parent and looks like i'm missing the image all right so we got how many so let's collapse okay i don't want to collapse that one two three four five six okay so i got one too many images up here let me take this last one out and save so i got one two three four five and the number of images you have needs to correspond to the number of indicators on your carousel otherwise you're going to get a carousel image that doesn't have well it's going to scroll to the carousel item that doesn't have a corresponding image which will be a problem uh looks like i might be missing a something on a div somewhere not fully sure all right so let's take one of these out see i think that's correct all right so if i do that and three four and it should glitch which it's doing that's fine with me all right so this image i probably don't maybe i don't need to use that particular image um all right so let's put that there well that's the same fault how convenient 5459 okay so let's try this one instead all right and with that there that should work carousel next and first okay okay there we go all right so one two three four five i think this because this image is so large it's not really sure how to handle it which i don't quite agree with why it's not sure with how to handle it um so let's do this let's take well that styling probably doesn't need to be in line i think i need to put a class there instead so let me do a style on this last one so let's do a style uh but that's not going like that can i do that nope doesn't like it got it all right so we'll just cut it put it on the line by itself comment and then do a class of head image it's what i use technically i'm not trying to use this on this line but trying to see if it will actually make a difference and make this fit or not and it doesn't look like it will make it fit um which is fairly weird that it wouldn't want to fit there so let's uh we'll go ahead and do style equal width of 100 percent and heights is auto for this and see what happens with that particular image okay so it's a little bit better uh than what it was before still not scaling the way that i would like it to 75 on that one and see what happens a little bit i'm not sure why still trying to scale because it's supposed to scale to let's take this one out it's supposed to scale to the parent container which is still not there okay and i might just have to just ultimately resize this image all together to 50. all right go back okay so now i have the whole image but i'm not sure why it's not trying to fit to this container here um usually that doesn't happen or at least in my experience it doesn't happen but uh yeah there's that at least it is scrolling all of the other images and they're fitting for the most part let's view this image so okay so the bottom part of this one is also being cut off i didn't realize that um so if we go back so you see here the desk and the floor are not seen in this part and i may need to make some alignment adjustments to this particular photo so i'm actually probably going to do a text was it text line center on that one and see if it moves it up or not okay so it didn't move it up a little bit tricky to deal with but uh yeah we'll go with that for now and so actually i did the wrong image or did i okay so we're going to change i think i did do the wrong image and yeah so let's trace this to about 60 of the width and height auto and if we come back so 60 percent is still within reason for that so all of the images are now looking fairly good in my opinion okay that being said i'm going to do some cleanup here so don't need these h1s anymore worst case scenario go back and copy them out of their respective templates so i'm going to leave that div there in case some text does need to be put in in the future but as you see right now i really don't need that all right so there's that there's that whoops three and all right and i know i mentioned in a previous video that sometimes i leave code in like commented out until the very end as i just absolutely certain that i'm not going to use it but this i know i'm not going to use so i'm just going to go ahead and remove all of this out so again at any point that you're watching this video you know or even after you get done watching this video feel free to drop any comments that you may have or any questions about how i am doing things in here and so once you remove all your comedy code make sure you haven't broken anything in a process because yes while the code is commented out sometimes you actually can break stuff in the process and that's not a good thing so all right so we have our images up here at the top and we have membership has a photo programs as a photo the events pops to another site photos i probably get another image there and then we have this uh city image here and we're going to get officers listed as well as their positions i'm going to do that later i may or may not do that particular part on camera so continuing on the next item i want to work on is the home page so what i did was look at some of the other chapters websites and they do have the these header items here that i commented out so i'm just going to go ahead and restore this particular set of items and go ahead and fill it in so let me go ahead and format this section here or format the document um it may have formatted the entire section though and i think i don't have a corresponding item all right so and i have a container at the top i believe no i don't so um [Music] so this does not need to be in the co well yes it does okay so i only want these heading i guess they call them featurettes or something of that nature you only want those on the home page so i'm going to extend my if condition for my carousel the image thing that at the top of the home page so this thing here is called the carousel so i'm going to extend that or loop include this part of the uh header thing to only show when this down here is not showing as well and [Music] then yeah we'll leave it at that and so for the page body of the index home page i don't need any content so what i'm going to do is to say adios to everything in here delete save and so all of this text down here the bottom should disappear which it has and then all i have now is the headings that are hardcoded into the page which is what i want all right so let's do another formatting of the document to make sure everything is in alignment and it looks like it may or may not be i think i actually don't have i need a closing div for that container slash div all right and so now i have to do a format i think that's correct now yes and all right so i want to highlight certain aspects of the website in this heading section and to do that i'm just going to pick out various things so one of our signature programs is engineering in the park we call it e day at the park all right so i typed that in and looking at it making sure that it actually fits in this space looks good the other thing i want to do is ask people to join so that will be the left block and then on the right hand side i think i'm going to go with programs all right and there we go so we have drawing either at the park and programs should be plural not singular looks like we might have caught it there we go all right and so next we'll have the links so this will go to the programs page plural this will go to the eday page and this will go to the membership page and we'll need to put the leading slash on there all right and so if we test these out they go to the membership page which is correct go to the e-day page which is correct and goes to the program page which is also correct and then i got to figure out some text to drop in i may just do like some preview text so we already have some text here i may just take this copy it and for this particular paragraph drop that in paste and obviously it doesn't like that long line format and let it wrap on its own and there you have it for yes so whoops no not down here here we go right here all right and so i'm gonna put a end container tag of uh and headings and that way as i scroll through this template because this template is fairly long um it's 450 lines exact and that is because of some of the comments are still in here and so forth but i still want to be able to scroll through and be able to find like the beginning and ending of the divs and not have to be like tracing like i've kind of been doing as you've seen me do so this is a little bit easier way just to put a comment there at the end of it and the same thing with like your closing conditions so like for instance at the top of this file here i have several uh conditions here so like this one so for instance this meta tag so at the end of this one i could actually do this in title condition or something like that nature and that helps you be able to find uh that in the file so when you're scrolling through you know if you have five or ten conditions in there that you're looking for it helps you find that ending fairly quickly so you know where to start from and where to scroll back up to all right so i did that for that one let's copy the text for engineering date at the park and i'm gonna just put this here at some point i probably will go back and refine this set of text not while on camera though uh because you know sometimes you can spend a lot of time trying to figure out what to put here and it's still not come out right all right so and i like when i have paragraphs i like the text in the paragraph to be on its own line that way when i start if i were to add like classes those classes could take up this entire line you know depending on how many you put in here i know some people they rather have their paragraph as concise as possible but i am not necessarily that way readability of the code is more important to me than being concise but there are different schools of thought on that so think about it as you may all right so for this last thing uh we'll go ahead and copy and paste and i'm actually have to change the text i don't know if you actually read it before i saw complete all of these steps listed on the membership page all right and so if you come back here to the home page now all right so we have joined asby we have programs and i'm gonna like i say redef refine these paragraphs here um and also try to make a little bit more even than what they currently are and there's that okay and so uh yeah this is coming out pretty well i did not need to click that page all right so so far so good like i say depending on the feedback i get from the other members in the chapter this color scheme may change as it stands right now i'm sticking with this dark red but it may change to black um at you know a later point so if you're checking this at some point in the future after this video has already been released just know that it may change from the way it looks now and so when you look at it don't be like hey he's got red in the video but black in actuality or green in actuality and that is probably going to be the reason why so just keep that in mind all right so that will wrap things up for this video series um as you see i've taken if you have not seen the other videos in the series a link will be in the description below uh starting from the beginning to the end this you know has been a very week uh education for me because uh in some of the other videos i actually learned how to do things myself for some of the css items that i was not familiar with so it's kind of surprising but you know as i'm teaching others the good thing about it is when you teach others you also learn something yourself um so you're able to even further that advancement of the knowledge that you have to other people so any questions drop those down in the comments section below if you have learned anything from this video series i ask that you please give this video and the other videos in the series a thumbs up if you have any questions comments if you don't want to put your question in a comment shoot me a message on instagram or twitter at almost engr the handle is up in the upper right of your screen i do respond to messages that i receive i do reply back to the comments that are posted so it may take some time for me to do it but i do see it and i do respond alright until next time peace out and hopefully you have a good engineers week