Let's learn Bootstrap 4

Key Takeaways

uh so hi I'm back um okay so let's hope this goes a little bit better sorry guys it's my first live stream I don't really know how this works to be honest with you um so I hope this goes a little bit better now so as I was trying to say um I found this template and I got it from this I'll add this to the description of the um the event once it's over uh I will be posting this whole thing up live on my on my feed so I'll put that in there so you guys can get to it if you want uh again I'm not going to do the whole thing I just it looked very bootstrapping to me um so I thought it would be a nice way to get started and just something to try and follow uh without actually having to build out a full design excuse me okay uh so this is going to be a lot more raw than usual it's going to be a bit more you know oh I'm not even showing you what I'm looking at that should be better uh I forgot my there we go okay okay so now you can actually see what I'm looking at see I'm not very good at this whole live streaming thing um so this is the design that I'm going to be doing and I hope that it yeah again it's a bootstrapping type of design it should be a nice good one I think to do um so if I go and look in here I've already gone and got all bunch of the images from there so I don't have to do that live uh and I've just gone and downloaded bootstrap so let's just go and find that oops that should be in my downloads it should be all the way up there um so I'm just going to bring this whole bootstrap file into my live event here that will take a second to copy over um so yeah the whole thing I want to do here is bootstrap has really changed from what it used to be um I thought that it' be was a smoother transition than it was but it looks like they've made a lot more changes than I had originally anticipated some of them are really awesome I love what they've done with the new column system the new column system is re well it's the same thing but they've made it better it's really really cool um but the navigation too they've fixed one of my biggest pet peeves with the navigation so that's really nice but they've also um put in a whole bunch of other things in there that I'm not so used to um so I'm just going to set up my file a little bit more here I need to have a CSS folder and I'm going to do c scss my own scss instead of SAS like I usually do uh just for I guess the fun of it and it's bootstraps written with that anyway that's what I'm going to do um so I'm going to use those now what I'm going to do and maybe some of you have already done this from your bootstrap days but I'm going to grab the bootstrap file and in bootstrap 3 there was the variables if ever you use the bootstrap CSS but I'm going to go and grab they have a custom folder now or file so I'm going to take both of those and actually copy those and bring them over to to my own scss and do new call it vendor and in there I'm going to put those in there so I have my custom and my bootstrap and I have adom open right here so we can go actually let's rename this folder uh rename I just want to get rid of all that just to make it easier for me um so I'm going to come in here inv vendor and I'm going to open up both of them just so we can see what they are um so basically the whole point of this is uh the variables are things that can be changed over time and okay and again if you have any questions or comments feel free to use the chat if the audio is not working if the video doesn't look good anything at all please let me know I'd appreciate it I'm also not used to looking at the camera when I'm looking at the code um so what what they've done is um they're just importing everything here and uh in to overwrite their variables we use the custom folder now or this custom thing it's tells you what to do right here um they actually made a mistake with this version of the alpha with the Alpha 6 they tried something where they put the custom here uh if you have used the other versions you would have seen it oops up top I just delete it cut uh you would have seen it here and you need to put it back if you want this to work properly I'm going to leave it here now just so so we can see the mistake that this causes but just so you know if you are using the version six of the alpha uh and you're going to set this up like I do you're going to want to move that custom up to the top over there I also just realized I don't have prepros on which I'm going to need okay so uh what do I want to do well the whole reason that I'm coming in here is because I want to turn off a lot of these one of the things with bootstrap is we don't want to be using all of these there's just way too many you're probably not using all of this it just makes your CSS file bigger than it needs needs to be for absolutely no reason so what I'm going to do is I'm going to turn off a lot now these I'm going to keep normalize and print I'm going to keep type images code I don't need so starting here uh tables I don't need I'm just control and if you're on a Mac I think it's command clicking to select multiple lines except it's not working very well let's just oh that doesn't work okay code I'm having some trouble here buttons I want to keep forms I don't want tables I don't want code I don't want transitions I'm going to keep drop down I don't think I need button groups I'm not going to need input group I'm not going to need don't need nav a nav bar I do want cards I want cards have replaced Wells and something else breadcrumbs no pagein I can always come back and turn these on because as you'll see this is going to be really simple Jumbotron no alert no progress no media no most of these I don't really need and for most projects you're probably not using a lot of these um so you might as well come in and turn them all off and utilities I do want so with all that I'm just going to comment them all out bang now they're not going to actually get imported into my project so this is super important to do because it makes your CSS file so much smaller and it only brings in the CSS you actually need from bootstrap so this is a really good thing to do and it's one of the reasons you should be using the scss from bootstrap and not be using um just regular CSS it just it really condenses down on your um projects there uh just going to add a project desktop live event add project and I'm just going to go in my settings and let's go and just make sure that it's going to do the right thing so compiler settings SAS I want it to Auto prefix on uh I want to replace scss with CSS so it just means that it's going to replace this with CSS so it's just going to move it pretty much into there which is exactly what I want to do um so what I actually do need to do is make a new file and I'm going to save this right away and I'm going to call this uh just main.css could be style a lot of people call it app uh so I'll call it main do CSS hit save and I'm going to do let's just uh import boot strap so that's just my whoops at import and it's going to be bootstrap right yeah boot uh vendor SL bootstrap.css save that I can save this file now and I just want to double check H I didn't compile I just got an error but I didn't see what my error was uh what was my error oh I just made a mistake here guys whoops I forgot uh so now I have to go I'm going to leave custom alone because custom is getting the right one but for all these other ones I do have to point them at the right place I should have done this before that was silly of me these are the types of mistakes that I make regularly but that you don't get to see when I'm not doing it live uh so let's go and fix that so let's just do uh so I'm currently here so I want to step into here so it's back one step which would put me there so back another step and then into bootstrap and then once I'm in the bootstrap I need to go into scss oh no did I lose ah I didn't anyway okay and then I think that's it right yeah that should be it ah I don't and I'm I would have to fix it for all of these actually usually I do it in one big shot because I might be turning some of those back on but that's okay trying to go too fast here so you guys don't have to watch all this boring stuff uh and then from there boot oops I already did the bootstrap bootstrap slash SC scss slash save let's see that there we go success good so it's compiled so now if I go and look at my [Music] main oh I don't want that to be in Vendor whoops I don't even want that to be there why is that doing that delete main let's try this one again there we go that worked properly this time whoops cancel and there we go we can see my CSS file did work properly and everything all the the bootstrap stuff is coming through so I don't need this file open I don't need my boots don't need that custom I'm going to be using the custom a lot I'll be using the main a lot I will not be coming in here I don't think anymore okay so let's make a new file and let's start actually doing some some stuff here uh I'm going to zoom out and let's actually start doing the bootstrap stuff now so this is what you're probably here for uh so the first thing actually what am I doing the easiest thing honestly for me to do is using their website to go to getting started quick start starter template and just grab that copy paste that in there save it index.html and the only thing I want to change because I don't want to link to different J queries and even their their JS and all that I might as well just link to their original stuff uh people might have it cached it's going to go a little bit faster just because this is where things are going to be a bit different so I can get rid of all that up to here delete and and just change this over to CSS main. CSS and that's the file I want to be linking to delete hello world and let's get started so I'm going to move that out of the way and uh usually when I start I have it like this let's just start quickly and then we'll make sure that it's actually working so I'm going to have a header uh again let's jump right over and I really like their new um documentation their new documentation is much better organized in my opinion than the other one was it's easier to find what you want uh so I want components and Navar nav bar I think the nav used to be in layout and then I don't remember exactly how it was but I remember the nav and nav bar were two different places which was kind of confusing um should I just grab this one let's grab this one I don't have too much extra stuff in there [Music] and paste that right in cool so nav um I'm going to have to change a few here one thing I like Navar toggleable I'm going to switch that over to small um so you can change what size it toggles at let's just save this and actually just check really fast uh what this is looking like uh I always forgot how to do the live preview now with the new preview cool so it's working um actually let's just move this down I'm just trying to do a navigation right now I'm not going to style it yet I'm going to put this like to here get rid of prepros for now um let's just organize my window a little bit better oh uh yeah I'm going to yeah uh MTG I will be uploading these streams so once I'm done I will be uploading this to my channel um it'll probably be up tomorrow I think it takes a while to process the file I'm probably not going to edit it cuz I think this is going to be a long one so uh I won't have a chance to edit the whole thing but I do plan on um I do plan on uploading them so they might be a bit long though just because they're unedited and hi cronis nice nice to see you guys here I'm so happy people showed up honestly I wasn't sure if anyone would be here so it's exciting to me that there's actually people watching this thank you so much guys for tuning in it's really really cool makes me super excited um so I'm just trying to use my windows a little bit better here um and again sorry for those of you who were here early on sorry for the audio mistakes I want to learn Java for college but I don't want to yeah I don't blame [Laughter] you yeah this is a little bit easier than Java I don't blame you at all don't uh don't procrastinate too much on that though um okay so there's my Navar um I'm just going to try and set it up a little bit like theirs do they have a transparent Navar I didn't even think of that call me Ray cool ray thanks I will I'm not familiar with the lever all at all sorry if I if I if I knew a little bit I was actually talking to someone about it um I know someone who works at a big company and he was talking to me a bit about it but I don't have experience with it I'd love to learn a bit more about it though especially after talking to him about it but I don't have time it's hard to find enough time just to make these then to get into that stuff but maybe one day I have two young kids it's hard to find some time for this stuff sometimes um yeah I don't know if they make transparent nav bars probably not we'll have to play with that a little bit um I want to add a container in here right so let's just do that nav I guess right here would make the most sense uh do container tab that over and close div did that work yeah there we go so that's in um I know they used to have a thing here to move it over to the right I it was like nav right or something like that but I think they got rid of that I remember looking for it yesterday I think it was when I first started playing around with here and I was going crazy and then whatever it was that it actually worked I think I found it in the nav actually instead of the nav bar um if any of you know uh Wai uh at this moment I'm in work but I'll see the stream later yeah cool MTG yeah so as I said it will be uploaded uh when I get whenever whenever YouTube processes the whole thing it will be up there so yeah have fun at work or I should be I'm looking at the chat instead of looking up here but uh have fun at work I think horizontal alignment is that what I want yeah so you can actually Center the Nav Now that's right uh that's exciting I remember there was one thing that drove me nuts with bootstrap as I couldn't ever Center it so we can Center it so just justify content Center I want it on the end and it's a lot of the stuff you'll see is like this now because they're using flexbox so you'll see lots of justify Center but then justify end and not right necessarily um so I think I use it on they're doing on the UL class so let's just throw it on there Navar nav justify content end that didn't work at all is it because I'm in my nav bar [Music] nav because they're just doing that on nap I did this did I misspell something if any of you see what I'm doing wrong please let me know H okay we'll get back to that after then because I don't want to waste time on just this as I said this might be a painful process guys oh what's up Ray lots of question marks let me know what that is I'm just trying to fix my nav bar but I'm going to skip I'm going to keep going a little bit I'm not going to get hung up on a nav uh and doing little details like that um so right here I'm going to call this my header no let's just call this a section main or no section hero like I usually do in here I'm going to have an H1 that's going to be creative template close h one then we'll just do a paragraph paragraph I think the class that I want on this is display one I think that's what they're calling it now for the really big text uh welcome to close P one mistake I always do guys uh when I'm doing bootstrap stuff is I forget so let's just do actually for my hero I can probably get away with this and just do a text Center let's save that I should have yeah so display one makes your fonts really big now they have display one down to display six yeah Ray I'm not I'm not familiar with it at all it it's something I wish I was familiar with but uh sadly I'm not I know people who are but I'm not at all uh I wish I was and then we can also do a button here so a let's just do a button button we'll call this one primary for now and we'll restyle it um I'm going to use their mixin I think a little bit to try and get that to work because I think that would be cool um and honestly I'm not going to do this whole thing down here I'm just trying to play with it a little bit so let's get to this next section here this is I want to get into the columns get into some a bit more of what we're actually if you guys want me to get into these little details let me know in the chat um I can try and maybe get into some of these finer details but I'm just trying to play with more of the bootstrap classes and stuff instead of really finicky CSS stuff um so let's call this about us so section about which will have what we do story about us whenever I see this I'm not sure about the best practice for headings and paragraphs because usually you want the heading first and then I think you know what I mean uh what we do story about us I'm just going to do an H2 and we're going to forget the story about us or maybe I'll do that as a span I'm not sure and after that we will do plus oh no ah let's do a container first do container row I'm not used to doing bootstrap dot actually there's all that text let's just do the images then uh those three images will be column this is what's cool I can just do column time three you don't have to do something like column small three or column medium stuff like that you can just plug in column it and there's three of them it's Flex boox it's smart um you could also do something like column four you don't have to say it what screen size is it's just going to be persistently four and you can just do a column medium so it to stay a column it break when you get smaller than medium and stuff uh so even these let's put these as column Smalls I'm we'll make sure it works in a second column small column small column small and inside each one of these I'm going to put an image oh whoops um so for my image it's going to be IMG SL I forget what I called them let's get out of bootstrap for a second about us I had good names about us ah was it did I hyphenate the whole thing I didn't about us01 JPEG and let's just save that and see if this is actually working oh I didn't put anything in my button whoops I can't see what that says learn more I think what I'm going to do is I'm going to get up to here and then I'll go back into the CSS and start styling stuff just so we don't spend the whole time writing HTML uh because that would be kind of boring uh where' my browser go there we go uh yeah uh you can definitely have the PSD it's I didn't make it sadly it's a nice design I found it today we're looking around um so I'm actually when I'm done this I'm I'm going to put the whole thing on GitHub so you could find it on there there'll be a link in the description once the whole thing is uploaded but also um live event where is it in here design files um I'll leave this up on the screen if you want for a second but I don't think you want to write that whole thing down um but this is where I found it there was no copyright or anything on it so I really hope that the guy who made this doesn't mind it's a really nice design I should get your name um let's go check that out actually I was downloading a few on here that had some copyright stuff so I didn't want to infringe on on anything um so then I you know this one I found that didn't have anything so Alexander KAS kasakov thank you so much uh really nice design I really like it really cool colors and stuff really nice and super good for practicing like oh my goodness one thing I always tell people I've had lots of people ask me how to get better at this and if you're not a great designer you don't want to waste time designing find free templates online and just go so crazy um trying to do them cuz people make some crazy stuff sometimes and it can be really that's a really nice way to push yourself cuz you're not coming up with the idea yourself you're someone else has come up with cool ideas and then you have to just figure out how to actually do it um so that's where I got that from so this seems to be working it looks good let's get rid of that uh and I'm just going to copy this paste paste 02 03 save oh no it's not working oh no what did I do wrong container row column small that should be working let's just get rid of the small for a second but it should be working I've been playing around with this a little bit earlier today oh uh I should on my images add the class right let's do it for all of these at the same time class is equal to they Chang the name of the responsive it used to be image responsive now it's image fluid ah that was my problem okay cool there we go so I have my three columns you you can see just by calling it a column it actually does work which is awesome um and it should you know it's just going to stay three columns all the time which I don't want so I can just come in here and then add my column small and now there'll be a column from the small screen size and up but they should there we go they stacked on top of each other at that point and I think I don't know if this is going to work but I'm going to try um justify content Center I'm not sure if this is going to work no it's problem with the image fluid and I might not I think they have something to Center stuff they have more utility classes and stuff that are more useful now uh hi kasara um sir KAS kasara it's not using it's not letting use the skeleton that's weird I don't know it it it's giving you an error with their CSS file I guess I'm not sure what the best way to fix that would be to be honest with you um I haven't used skeleton in a while so but that really surprises me that it doesn't like their scss does it give you a specific error if you're using prepros uh let me just open it up here um it should tell you where the error is coming from the new version if you're on the newest version it's so much better at being able to find the mistakes it used to be a bit of a pain in the butt like here it's highlighting where my error is [Music] um so you know it's telling you what line and and what file and stuff so just make sure it is the skeleton one that's causing it and hm maybe yeah I'm not sure what would do that if you have a chance now if if you're you can just try and do it again and see if and error does come up and let me know what it is put it in the chat and I'll see if I can help you out um yeah we'll try and fix those because they're small images maybe I should have made my images bigger but I just took them from the size that we see here I don't want the font right now um let's bring that text in here oh I'm getting a selected font fail during last operation I've never seen that before it looks like it's lauram ipsum anyway so let's just go grab some laurum ipsum um that looks like too much uh story okay so let's put our text in so we have a about container as I said I'm going to just do an H1 we'll do an H1 and we'll do what we do close H1 and uh that's going to get a class on there but I'm not sure what it will be yet and then a paragraph of the arsum close paragraph Cool and all of that should be centered so text Center should do the trick I don't think that's changed awesome okay let's actually styling this normally i' go through my whole project and then come back through but again I think that'd be kind of boring uh it just won't work in the browser is prepro giving you an error though you're saying it's refusing to use the CSS the scss so when you have your scss file so if you're using prepros you've put in the project file that you want do go to your settings and just check the where is it compiler settings um and just make sure that if you know make sure it's Auto compile is on it is for me always by default but just double check because just to make sure it will be working um I also always have Auto prefixer on you don't need to though um and then I usually use replace segment so I'm saying if it's in my scss file it's going to go into my CSS file instead but you could always just play around with that a little bit um and it should if you know when you save your scss file oh just make sure once you open skeleton save it because even though the file is there um it might not do anything with the file until you save the file and then it should export that into a CSS file so maybe maybe it's that try that out because you need to make the save once it saves it exports the CSS file and then it's normal CSS and the browser should be able to read it let me know if that fixes anything um okay so yeah as I said let's actually start um doing this a little bit so I think I do this a little differently than some people whoops wrong thing um I'm going to go into here and vendor and what some people do is they just start doing all their own stuff in the custom or they start doing I don't know what so I'm actually going to do my uh layout folder and I'm also going to have a components I don't know if I'll need components um I'm not going to have variables I'm going to put all my variables inside of their custom folder CU they already have a bajillion and honestly there's a so many variables that they have created um I don't think I'll need my own so I'm just going to be using their custom one for that um so let's jump up to here and let's make a new file save as and we're going to save this one in layout and I'm just going to do this one as hero. sccss uh hi the red Uno I hope you're doing well thanks for joining us um so what do I want to do I want to go to my main.css file and import that so I'm going to do layout at import layout SL uh hero it worked awesome cool so I'm going to do my hero I don't think I'm going to do a lot as I said I'm skipp the navigation right now I should show you guys the navigation actually cuz the navigation classes let's just go look really fast uh you're here for bootstrap 4 uh one thing that's really nice I'm so happy with uh all the links are actually a class now of navlink so that's just incredible that is so awesome because it used to be that if you use bootstrap 3 you'll remember you had to do it as like I don't remember if it was I guess it was navbar L but then it was like the you when you're in your CSS like you literally when you're doing your nav stuff it was like Navar L ulli A and then you'd have that then you like it was really annoying so I'm so happy that they fixed that and now they just have nav links you need to restyle the links you do nav link you need to redo the nav item you can do nav item which is all the list items um you can even build the whole thing without a unordered list now you can just do it just with links if you want to it's a million times better and it's more or less the same thing as it was before they just added a whole bunch of classes in here and for those of you who have joined us since the last time I said it thank you so much for joining as I mentioned before I thought no one would be here so this is awesome that you guys are actually here um so for my hero what do I want I want to do a background first background image URL now I'm in my SAS file but you have to remember this is going to export into my CSS file um so I just have to keep so I want to go back one step and then go into my images and then go to my herob bg. jpeg let's hope I stuck with what I always call this it's rendered let's hope it actually look good ah it worked awesome so again I'm writing this as if I'm in this file I'm not writing it as if I'm in here because if you write it like back back back and then into images it's not going to work so pretend you're in your main.css even though you're not uh let's add a bunch of padding padding of what uh 20 vertical height viewport height I always say vertical because it just seems to make sense that's not terrible I'm probably okay uh that's okayish is that okayish it's okayish make it bigger 30 cool so it's looking a bit better and I think once I play with my fonts it's going to be the right size um so this is where coming into the custom file and I'm going to do a a split view here let's go into the bootstraps variables uh scss variables and I'm going to split this down split down close it here so the whole idea is you go into their variables folder and then you copy stuff up into your folder so what I'm going to do is um even I'm going to start with my colors cuz the colors are right at the top and I'm actually going to show you why I mentioned at the very very very beginning that there's a mistake in their bootstrap file in this version of alpha uh that you'll have to fix and I'll show you exactly what I'm talking about um so White's going to stay white let's just look at this really quick let's change a few of the colors just so we can match that White's going to stay white black can stay black red should I change the red they don't usually they don't really use any red uh okay let's just make red this color is that really okay copy so I'm going to change red to this so what you want to do is you want to come up here so I'm just going to make a comment for colors whoops and all you need to do is take what they did so red you can even copy and paste it and then I want to just paste in my new value now what's really important is you don't take the default the default makes it so easier for you to overwrite if you start taking this default it it all up so I'm just taking the color I want and red and it's going to overwrite their variable of red uh orange I guess they probably use orange in here somewhere right H they have a yellow they do they don't have a lot of colors in this which is great I'm going to okay we won't need that one I can always come back I want to grab the yellow here a zoom in cool copy that so let's do yellow yellow paste that one in whoops um actually tab no oh yeah it actually works weird usually it lines up okay that's fine uh orange yellow I have I'll leave it like that for now I might want to come back in here after to take some more oh let's get this color that looks sort of like a teal right teal I don't know how long I'm going to go with this guys just so you know I I will not be finishing this site um we'll see how far in I get so uh just to show you as I mentioned I've been talking I could come in and change a lot of these but brand primary so I've already used the brand primary color because my button is a button primary right so I'm going to come in and change the let's just copy that makes it easier uh whatever I'm still in colors so brand primary is defaulting to Blue I'm going to make this red just for now just for fun and take off default and get rid of all this spacing here um so I want to remake that this red color I'm going to save my CSS should compile properly but my button didn't change and just to show you that this I think is working let's go to my display one and I'm going to do text primary and that should become the red color aha see so this actually became the red color but it's not changing my buttons background color which is a problem and you don't want to have to dive in deep and do a whole bunch of stuff which I did at first I was like this is driving me crazy what's going on you're going through like three layers of variables to find out that you did change the right variable um and this is the fun of doing things when they're still in beta right um it's one of the reasons they haven't officially launched it you're going to run into some problems if you do want to play with it so all you need to do is take this which is the order it was variables mixing custom and if you're using it if you find this video in the future and you're using a newer version of the alpha this custom will probably be up top here again they moved it to try and fix some problems and it fixed those I guess hopefully um but now when I save it a compile and look at that it changed magic um so just so you know uh the custom really does need to be at the top here for everything to compile properly um so that's the one change other than commenting stuff out in here that I would do if I were you um now I don't really want my button to look like that right and I don't think they have any maybe they have a transparent button now I haven't looked at their buttons too much uh oh is that really their secondary button now huh cool they sort of have what we want um actually one other thing I want to do everything's Square edges in this and if I look here it's round edges on my button um so I'm actually whoops I'm in the wrong file in here uh enable rounded I will turn to false so I'll copy that you don't need to comment it like I am I just I like having the comments to so I can find what I want and I'm just going to switch this over to false so all everything that has rounded Corners your cards your buttons a whole bunch of other stuff if you just set that to enable rounded default and let's make this bigger I'll zoom in I'm going to save my file and you'll see that those become hard edges so that's going to take everything that had round corners and take it off which is really nice to be able to do that in one step so if you're used to overwriting it whoops uh all the time uh yeah that just makes your life easier um the secondary button actually looks a lot like what I want but it would take some changes and I think what I'm going to do instead is I'm going to try and use their button mix in I've used it once before uh I don't know if it's different from the old one let's where's their mixins uh box Shadow transition oh I won't be in here uh mixin buttons so I should be able to make my own button here which is cool but I don't know if the I don't want it to have a background color um but VAR you know this is really cool that you can really easily uh include in um to make your own buttons let's just try it out so it's called button variant um so I need to give it a color a background and a border do I have to give it let's just try giving it a bore background transparent I should just be able to write transparent that should be fine so let's find out so I made a components so we'll go to components compon I don't have anything new save uh components I'll call this just Buttons CSS so I'm going to do uh I want to call this one like button ghost it's a ghost button I think that's what we call these things right when they look like that so I'm going to do button ghost and I'm going to use their mixin so it was at include uh what am I including again did I close it oh man why did I close it button variant I think button variant uh and it was color so it was going to be white so I might as well use white transparent and the Border I do want to open this back up actually buttons um can I border just for the Border color I I'll put white and we'll see what this looks like oh wait oh no it didn't work no button no mixing name button variant why not I brought in there uh did I misspell it copy paste no oh no uh did I not bring it into I'm sorry guys I brought in the mixins why is my thing not working then oh I know why silly me uh that was main whoops wrong main close you I didn't import it com components uh that was buttons right at import components SL buttons was it button or buttons I make mistakes like that all the time so it was buttons okay save that's good now and now my button variant should [Music] work ah success it did work okay good so that did work now I'm getting my success message so let's make sure that actually worked uh I want to go back over to my index I'm a little disorganized with my files button ghost there we go it worked cool I'd probably want to change the hover and stuff on there but just to show you I just want to go quickly to look at how their their mix in Works a little bit there um this color also I want to change obviously so this would be text do they call it text white by any chance they do cool uh so this could be class is equal to text white as well whoops oh yeah there we go um so I wouldn't say it's perfect when you look at the design uh but it's you know they broke it on to maybe I should have put in container row oh actually this would be good to show you something else you can do now which is really cool um column I'll just do this as like a column 8 so one of the problems that we used to have uh actually I'll show you two things right now and again if you guys have any questions about what I'm doing don't be shy um so one of the things you can do now let's just save this and see what it's going to look like so yeah there's my column it's in the column that's working out well um what you used to be able to do if you had a column 8 then you could come in here and it used to be a column offset or is it column size in an offset um it's just offset now so I could do an offset 2 2 8 10 12 yeah so I can do that and then it will Center what you know and then if you had something like a column 7 well too bad you couldn't Center a column 7 and again if you if you missed anything earlier you don't have to you don't have to do an md7 you can you can still use all the same naming one but if you just do column 7 it's just always a column 7 so let's just say I wanted to use a column 7 and I wanted to center it you can uh I just forget how it's on the row let's go find that I know you can do it I just completely forget where the class is and this is where I said I will be diving a lot into their their their documentation for this to be able to do anything in here it's probably under utilities I'm guessing uh display image replacement helpers [Music] spacing no that's for my margins and stuff maybe it's not under utilities layout grid uh let's see um man I can't believe I forget where I found this before offsetting columns no that's what we were just looking at before right yeah just to they've changed it for the offset now oh man I'm annoyed I don't want to get into their mixins for that uh would it be up higher no gutters no gutters is nice and easy to do we'll look at that after oh here we go justify content justify content Center so on the row I just have to do a justify content Center oh just like we were at before and that should Center it so you don't need you don't run into those problems that we used to have uh before where things would just be impossible to Center if you didn't have the right column widths and stuff so this is much nicer cool um so I'm going to leave that like that I know it's not perfect to the design or anything but I'm just trying to run more through bootstrap than to be perfectly styling everything um so let's look at this next section because I don't think there's a whole lot to do here here um and if you do if you guys want to see me style stuff a little more just let me know I will style it a little bit more than what's currently going on um but for the moment I just want to explore a lot of the the newer bootstrapping stuff um so that's working out actually let's just we'll make it we can close my hero we can close my buttons we can close bootstrap variables I'm going to keep cuz um just so you know we can jump into here when you want to when you're ready to do your fonts and everything honestly just set it all up like colors um your body stuff like let's just go look and the easiest way to find something in here you want your body command F to do your find and replace thing just find find and then it's the second one like you have the first up there and then this will get you where you want your body background color if you need to change it bang it's right there there the default text color bang it's right there um so just nice and easy to change things really quickly the link colors everything you've ever wanted to change just make sure you use this and it makes it so fast to change stuff uh yeah I reply to my messages uh message me if you just send me a message on on YouTube uh through YouTube I get it or whatever you want I I try to reply to as much as my stuff as possible so uh if you need yeah send me a message about anything right and I'll be glad to help out I try and reply as fast as I can to um so yeah don't be shy I try and help people as much as I can it's what I enjoy doing okay uh okay I'm not should I space it out a little bit okay let's just do this really fast let's space that out new whoops not a new Photoshop file a new here uh this will be my about s layout uncore about. sccss don't forget what I did before where I forgot to import it I constantly forget to import stuff uh about it's sort of what I I always forget to import stuff into my main it's really annoying uh so this was called about or let's try about Proby what I called it um padding 10 vertical height zero viewport height that seemed to work Perfecto cool that looks good and good good good okay so I can go back into my index and do I want to do all that cool 1 2 3 four five columns and they have borders on them so we could look at uh some of the Border classes we can do and stuff too which are cool uh section class uh stats let's try that whoops what am I doing we're not in CSS okay so in here I will do a do container with a row with whoops container row column H one two three four five five 12 divide by 5 12 doesn't divide by five uh let's just do column and let it do its magic where it will just figure it out all by itself column * 5 yes so this stats actually can have a I forget their background classes guys I haven't used bootstrap in way too long cuz I don't think they've change this from the old one um utilities I guess colors background color is just BG okay it is uh except I don't know what let's just hope it's this one which is success I think let's try BG success BG success and see what [Music] happens oh I don't have any content let's just [Music] put oh completely the wrong color that's okay we'll leave it like that for now I know I have their their color in there somewhere um so in here in their columns let's just put how do they do this uh so I'm going to just do a paragraph and with the class is equal to display one again and this should be on its own line there we go and close paragraph let's just fix that and let's just fix all of these at the same time P class is equal to display one close p and now we'll come in and do the numbers for 32 123 15 99 24 so they should be nice and big there we go uh they should all be white so I'm just going to save for this whole thing text white that should change all the text to White super and then after that paragraph we're going to need whoops we're going to need more [Music] paragraphs and uh again it's five columns and I think uh actually let I'll do this first though but the five columns are because I'm just using call and I'm not saying how big the column should be it's just magic and it works and it evenly spreads them out so it's a nice thing that used to not be able to do uh close paragraph and let's just copy the text that's fine I don't care if the layout changes uh paste I should maybe put these in small tags too it's going to keep giving me errors here isn't it copy okay they're all getting the same here I don't feel like getting that error over and over again for the font missing save let's just see if that looks okay actually those font sizes look fine success is green primary is blue what's the one that's the light blue though I thought success was like a pale blue but I changed some of the colors primaries like the dark blue success warning this one one two info ah info is the one I was thinking of BG info thanks for the help though Ray that's I got the color I was after cool um so what I'm going to do is text white and also text Center um am I doing that why oh yeah they're centered okay so they should be evenly spaced and now I can add borders to these because if we zoom in a bit on this uh we can see that there is a border on them o I don't know if this is going to work perfectly or not H yeah that should be okay let's try let's see what happens um so on the column let's just try I forgot what it is I've done b0 to get rid of the borders but I don't remember how to add the borders uh borders I want just on oh can I not border right I can only turn them off I can't turn them on add classes to an element to remove Borders or some Oh I thought I could add borders use border utilities to quickly style the border and Border radius can I add borders I thought I could add oh well I can't add we'd have to go do some custom CSS for that um so what we'll do for now is and this is the cool thing one nice thing about with using bootstrap is I haven't really done a lot of CSS yet for this anyway I haven't done a lot of CSS in general but you know if I look here the only thing I need is my borders and more padding I got the text color I got the center text I got the spacing I've gotten uh everything I really need here the background color and I haven't written any CSS for it I just need to add the the spacing on there um so it really does help out for that type of stuff which is really really [Music] cool um so yeah let's keep [Music] going uh I don't know if I want I want to do some cards is there anything in here that looks like it could use cards these could use cards I guess this could be cool too cuz this one's a different height from the rest of them which is something I definitely want to look at I think I'm going to do like another half hour guys uh and that might be it for me uh I'm going to do two things let's try do some cards and it's not really the best use case for cards right here but I can still you know it sort of goes it's the text to go with an image uh so let's I'm going to skip a whole bunch of stuff and do that and then yes CU I want to explore the cards and then I'll see if I I'll try and throw this together too with the different height things here because I know we can do something like that now I don't know if it's going to work out perfectly but I know they they have something for supporting different heighted columns that might work out well for this we'll try it out I haven't I've never tried it so we'll see how that [Music] works uh so meet our team section whoops not DOT section team uh we need our container we need our row we need a column let's just do a small four [Music] oops times three just to show you can still do it the old fashioned way um so that's good this is just a hover state I'm not going to bother with the hover state for now um do I do this is the first time I'm doing a live stream so I don't know how often I'm going to do one to be honest uh I do want to do it somewhat regularly but I don't know I'll see how the reception for this one is overall um and just in general I do want to make it semi-regular in the very least it really depends on my schedule and stuff too I'm a teacher in real life so and right now I have a bit more relaxed schedule but coming up soon I have another class that I'm teaching so I guess that'll depend plus there's family and everything um but yeah I do want to make it regularly but I can't promise every Thursday night um maybe at one point it will become something I try and be more consistent with um this is this was really just an experiment to see how it would go and if anybody would show up so just so you know uh but yeah if if you do like it please let me know and um I'll try and definitely do them more often uh I need to know what to do for them though I don't know what type of cont what what stuff you guys want to cover I've had lots of people asking me about bootstrap so I thought it'd be a fun one to do but if there's anything specifically that you'd want to see me cover we could always look at that um so in each one of these I want to do a card so I'm actually going to pull bootstraps documentation back up because their cards their classes on their cards I still they're not that difficult um but they're not super duper easy yet components card um so I just want something like that right image on the top and then their text so you can see there's a whole bunch of different cards that you can do now there's ones without the top there's with the image there's grouping there's you know the lots of cool stuff you can do with their cards um with the Fe you know something like that with that on the top you can play around with it as much as you want but I just want this nice simple one it has image on the top with some text so let's go and look at doing that carousels do you want me to do the bootstrap Carousel or to do a custom Carousel genino I could just add a random carousel into here for sure uh using bootstrap I wouldn't mind I have a bunch of images and stuff so I I could definitely take a look at doing that just so you know this is bootstrap four that I'm using in case you missed the beginning so I I haven't looked at the bootstrap 4 Chels at all maybe they've changed them a little bit since three I you know I I haven't done much with four at all this is so uh oh angular I'd love actually live stream that would be fun um but sure I I I I'm happy you like it right and it looks like there's I haven't checked the stats at all so I don't know how many people are coming in and out of here uh but it looks like a few of you guys are watching so that's cool so yeah I could try and definitely make this a little bit more regular um off talk to the wife and find a good time to do it I sort of snuck this one in um okay so let's look at this card I'm going to do a DOT card inside my card I have an image that has a class of card image top and then that's going to have a sibling of a div called card block and inside my card block I will have a card title oops I will have a let's do a paragraph that's a card title and see what that looks like cuz I think in the actual design their names aren't that much bigger let's see how this just looks card title plus a paragraph of card text boom I hate how it only does one of those when I press tab cool and for my images I completely forgot what I named them so let's go look team two3 that makes it easy um oh this shouldn't be a div class this should be an image class right IMG so the source on that one is IMG SL te01 JPEG and let's just save that and see what happens oh and it probably needs to be responsive because it looks squished car image card top image fluid and again it's image fluid now and not the old image responsive does that look better yeah that looks better cool so that looks like it's working this looks a little busted though but let's see what happen card oh that's why because this shouldn't be closing there save yeah that looks better okay cool and uh let's just go through his name in Matthew 28s Matthew dicks and this should say graphic design good good good so I'm going to switch this over to like an H5 or something just to make it close H5 so my whole card should be a text Center and then this can also be a text capitalize nope text can I not spell a cap p lies did I not spell that right I know you can do that I'm 100% sure I can do that utilities utilities it's not under typography transforms see did I misspell that no I spelled it right [Music] hey you know did you want me to do the carousel in this project I just want to make sure um I wasn't I was talking about other things I could do so I wasn't sure if you were why is that not capitalizing that's frustrating uh anyway I'll finish this up and I'll throw a carousel in here randomly uh just in case that's what you're after um H at least I know I did it right does this can this not go on there does it have to be on here or something no that's what I thought it should be on the H5 that would make more sense that's bizarre okay sorry I want to see why that's not capitalizing sorry this is really big just cuz I usually zoom in to make my demos capitalize important is it's on there too oh cuz I'm doing capitalize ah I want I don't want capitals man uppercase what am I doing guys it's getting late here a little I'm getting a little tired okay so that is good uh let's just wrap these three guys up really fast uh I'm actually going to copy and paste this whole thing in a second because you'll see there's a border on it and I don't want any borders because there's no borders going on over here so on my card itself the card the the borders are all coming from the card that much I know so this is where that whole border thing I was talking about before I knew you could them off I think you could add borders too you just need a nice little border zero on there border [Music] zero and there you go they're gone no more borders so that's cool and even let's just this should be text muted I think yeah could have been more muted than that that's not very muted we'd have to play with our colors and stuff a little in there um let's just grab this whole card copy wait what's this oh my column that's okay we can leave the column copy paste and [Music] paste we'll just change the picture I won't change all the text and all that three two save ah magic and let's just make sure this is sort of working oh no wrong wrong thing here they should at one point snap hey I got that to Center I don't even know what I did to Center them I must have added a text Center you'll see this is breaking because it was set to the column and not like anything specific uh when it runs out of room that looks kind of ugly actually uh when it runs out of room it will sort of snap around and just figure itself out because I just made them random columns oh why are these image why is that stretching that's nasty that's weird I'll have to check that out another time because that's weird that it it's it's an image fluid that's bizarre H I'm going to have to investigate that another time if it wasn't so late I'd look at it now but uh yeah I have time if I I'll do that now Gino I'll check out that because you know I do want to look at this too okay I'm going to do carousels and then I'll jump into this because I think the carousel should be pretty simple I hope let's go check it out I don't know if they've changed it at all actually if I'm doing the carousels I will have to bring that back in cuz I think I might have turned off I did turn it off uh [Music] copy let's bring that back in because I'm going to need their carousels now and I can close that again um is that going to be under components is that it used to be under JavaScript right see this so much nicer how they've organized this now with just components and they're all there instead of yeah I love their documentation a lot more okay let's find one that looks good that's just that's not a that's not a carousel is it there we go that's with controls aha that's what we want uh what else do they have in here actually oh they have the little lines oh there's no dots oh they put lines now instead of dots was it dots before I seem to think it was dots before and with captions cool and we can play with the options a little bit awesome okay so let's start just by [Music] taking that doesn't help me at all though that's just showing me how I can do the caption here's the big one um see of course the okay div ID Carousel examp okay let's just write out a custom one here let's make our own let's do a section [Music] carosell and let's check it out okay so let's do a carousel here and if anybody else wants to see me do something other than this thing just let me know I'm here for you guys I'm just playing around here with bootstrap a little bit so you know if there's anything you want to see I'm really here for you uh so just let me know so in here we need a div with an ID I don't do a lot of IDs Carousel I'm just going to call it carousel and a class of carosel and a class of [Music] slide um I just want to check this out really quickly o that so the O here is going to be these things then why is this have a class of slide on it though H that's how they do it I guess okay um and we're going to need that data thing too cuz that's when you see this data ride thing and it's Carousel one or just just Carousel um this is what's used for the JavaScript the JavaScript is going to be ref or not this is the ID is what these are referencing so this data Target these need to be the same as the ID there so i' I'm not using Carousel example indicators I'm just oh this is H interesting anyway I'm just doing Carousel so these will Target Carousel and this I'm pretty sure is just going to the JavaScript to make sure it works hopefully I'm not wrong on that I just want that on one line cool okay so that looks a bit better um so now I need an O so we'll do o with a class of car cell indicators with let's just do what three slides just like they did we'll do five slides Li * 5 except they need an ID on them ID of oh no that's a data Target I'll have to add that after maybe you can do that but I don't know how so we'll just come in here and do a data Target and again this is just going to my hash of uh carosell there we go and we need it to do a data slide 2 equals z I'll do zero for the first one and then just have to manually one 1 2 3 4 so anything if you know any of the other programming languages outside of HTML and CSS they always start counting at zero so zero is one in computer world and one of these needs a class of active class whoops class equals active good let's just save that I don't think we're going to see anything yet it wouldn't make sense if we say anything I don't have anything in here what's DB block do display block ah it's making sure my images are display block cool display block image fluid that image responsive used to automatically do that hm that's interesting okay so I think that's all I need for that uh and then you always need the the div Carousel inner so that's easy car this is the same as it used to be so Carousel inner and then we just need our div so I'm just going to do um a div of caros cell item Time 5 cuz I was doing five of them and inside of that there will be an image with a class of d block with a class of image fluid and let's just tab that uh my image source I'm going to use the same image for all of them if you don't know about it uh is on Splash it slash I don't know we'll do a th000 by 600 so uh it's just a placeholder images that look pretty they'll all be the same image now though [Music] H I'm not finished yet so hopefully that fixes itself in a [Music] second did I do something wrong I thought I'd be seeing something at this point that's just my controls which I shouldn't technically need but I'm going to copy these because I don't want to write all that out that's my controls there um but this just needs to be for Carousel ID [Music] Carousel and inspect and let let's see what I did wrong zero pixels tall H why is it zero pixels tall okay let's just just for fun section do I have to give a carousel a height I don't remember having to give it a height slides only note the presence of the DB block and image fluid on the carousel images to prevent the default image alignment just to quickly make sure image class DB block image fluid I did that correctly if anyone sees what I did wrong please let me know I hate making mistakes like this oh wait I don't have it maybe it's because I don't have one that's active Carousel active so there's none that are actually there ah that was it okay there we go make sure you have an active image and look at that it works cool so again uh here I'll just change like this one can be uh 101 102 this is changing the width so it's the width and the height so each one of these will be a little bit wider than the next but it's just going to make it so each one is a different image here we go so they're all different images now so there you go that's a really simple Carousel is there anything else do you know that you'd want to see how to do with the carousel um it's really just make sure that you're you have the ID the ID is the same as your data targets which is super important um and then if you do have these little things down at the bottom too they're also looking they also have a um the HF here needs to be your the same hre as your ID here really really important that's all set up and that you're just using all of the classes they tell you to use pretty much CU it's as soon as you don't their classes are making this work and styling everything you can overwrite their classes or change a little bit um just curious what would happen if we took DB block off not sure why we need the display block it says it's overwriting something from the default browser so it probably stops things from happening by putting the DB Block in there but as anything just read the navig the navigation the documentation and that's what this video is all about uh note the presence of the deep yeah it just prevents default image alignment so I guess it it makes sure everything's aligned properly uh of course you can come through here and play with the options and everything yeah no problem Gino I'm happy that that helped I hope it helped [Music] um again if you need to get rid of something it looks like it's easy enough to get rid of um uh yeah here we go that's why it wasn't working they put it in really big too to let me know that I really needed to have that so you do need to have the active or it's just not going to work because nothing's active and then it disappears that makes a lot of sense um so if you do want to change something we can also do that let's go and play with that a little bit actually since we're here um so I'd put this yeah I'd go all the way to the bottom just to make sure you're after all of the other JavaScript stuff and I'm going to do a script close script it doesn't have to be on this page you can make a Javascript file for this and link to it too um obviously uh there might even be ways of doing it with boot within bootstraps stuff but um let's just see uh yeah so we want to select it's using jQuery so we want to select our carosel chyo cell that's easy enough and I'm [Music] pretty I just want to make sure okay anyway I'll do that and we'll see what happens um so you can change the delay between automatically whether or not uh it should by default it's true so just to show you uh if I I can use my keyboard to control that so I could turn that off um what else can I do pause it's set to hover so if set to hover pause [Music] cycling yeah you can when you hover on top it's going to pause it and if you don't want it to do that you can change it to null autop plays the carousel wrap whether the carousel should cycle continuously or stop when it gets to the end so I think it's automatically going to cycle so just to look at the keyboard since it's probably the easiest one to show you how it's working um I come in here and it even shows you a nice little example there I'm just going to do that come in here and say keyboard keyboard and I'm going to put it to false I'm guessing that's what I need I need that false let's just see if that worked so now yeah now when I play with my keyboard it no longer works and let's do interval I think I need I'm put it anyway uh interval whoops not what I want interval of like 100 it's going to go really [Music] fast if I did that properly do I not want those is it [Music] comma there we go it's going so fast it's just like glitching out the whole system yeah comma separated not with the the semicolon so you can play with the settings a little bit if you want to did I just break this whole thing yeah I I really broke it don't do 100 is that what happened really is eh wow interesting okay so that is that and that last thing I want to look at I'm going to tackle it I don't know if it's going to work but we're going to try cuz I remember looking at it going that's really cool that you can do that and I want to try it out before I get out of here and it's going to be the last thing I do I think it's going to be in the grid no it was in cards components was it in cards I don't remember we're going to check might have been in the grid I think it was in the cards CU I think it was really far down there it is this is sort of what I want to try so I don't know if it's going to work because of the ordering of everything um but you can do that Pinterest style thing now with their cards heads up oh yeah just this is important um they're using the dis um they're using columns the the column property column property is a really cool property if you don't know what it is but it's support isn't fantastic and I keep looking here because I'm not used to looking at the webcam sorry guys um the support for it isn't amazing it might be a lot better now I haven't played around with it for quite a while I think Internet Explorer doesn't it's the same with anything uh I figure you know you should double check depending on what you're doing but it's it probably will work um so let's try this out um so I don't know if I have enough images to oh I I know I don't have enough images I'm using I want to do these images right here um so let's see how they did it I only need images though that's okay I think do they have any cards that are just pictures that's just with text there we go that one is the third one one two what's the P3 for padding um card card card oh is it doing 1 two 3 4 five six it's probably doing it like that e it's going up and down where's the one that's only an image this one hey just throw an image in there card image cool okay so we want to do let's just call it uh is it our work portfolio our work I'll call it work uh section work with a container fluid and I'm doing a container fluid because it's a full width with my row with are they not doing this in I thought they were going to do it with columns card okay that's how they're doing it Dot card columns cool hm is it just going to how does it know how tall to be like when does it decide to wrap up do they do card is it the p no the P3 is giving pad I thought P3 would be for padding card one card two P3 I just want to see I saw the P3 on a few of them no okay I'm just curious what's causing it to know when to go to the top card oh IM no that's image top let's see what happens uh so I just want something like that so inside of card columns I need to have I have seven so I'm going to do uh a card with an image called card image image fluid and let's oh and I need seven of those times seven good uh image I think I just called them work yeah work 1 through 7 so we can do all these at the same time IMG SL uh work0 one. jpeg let's see what that gives us just to start with that didn't work at all what I feel betrayed I have a div class card inside of card columns plural yes do I not need oh maybe it's this that screwed everything up I'm curious if I even need a row because I'm not using do I even need a container like I'm not using column actual uh so masonry yes yes cards built with CSS okay let's just do an inspect on here then I feel like there's something missing [Music] um card columns card [Music] H so what's wrong with mine card oh [Music] ah card times seven I need seven cards not seven images and then I need this cut [Music] delete a man see it's getting late [Music] paste and let's try this one more time guys so img01 jbag aha it does work I wonder if I can get rid of the gutters though oh I didn't think of that that's annoying margin zero maybe would work uh m zero is it not p z no anyway that's kind of cool that that's working let's just try putting these numbers to the numbers I had two 2 three the order I think is going to be off five six 7 cuz I think it's going up like this it's just automatically yeah the order is a little off that's not terrible it's kind of cool that we can at least get that masonary masonary M we can get it we can get it looking good uh that's not too bad but it's not quite what I want and because I put these in a oh I have that weird row thing back there that should yeah okay that gets rid of my side scrolling um do I even need the container [Music] just okay I'm wondering if I can get rid of that spacing now might not be as easy margin bottom as I want it to be though just because of the way the column system works um oh column Gap it's defaulting to three too which is sort of I wanted four five how many do I want one two one two three four I wonder if I can change that but I still even if I turn this off I must be have there must be a way to fix this this is coming from just card columns I wonder if I'd have to go into their let's see if there's any other information on that card columns breakpoints oh I can change the column counts oh you can do it for the break points that makes sense uh card columns I wonder if that's in their variables here cards find here we go default space are on the X and the Y the Border do I have borders on these there is but I can't really see it um so no that's the spacer I don't know if that spacer is what I'm after call this is what I want aha okay let's just change this I mean I using this would probably be better but for now just cuz I'm getting tired paste that in take off the default and oh it is colum margin I'm just going to put that zero columns I want four and card column Gap zero let's see what happens now we just have those ugly borders on there and this H up you go up I'm missing a pixel okay um is there an easy way to turn off yeah there was a thing in here uh border width I turned it off uh manually before on these ones using a class but for a design like this you just want all these set to zero right because why would you none none of my cards would actually have a border oh my goodness awesome except that should go up this is the fun of using I I remember seeing even as I resize you'd want to build some media queries into this and stuff too um yeah it's like flashing around there's probably a way to to play aroundon with that a little more um I don't know ex I don't remember how it calculates everything um but the the columns thing can I remember it being a little weird sometimes but that's cool that I mean it's not perfect but it's G giving me something I definitely want to explore a little more to try and make this work cuz if this image was here and then everything would just be perfect and let's just check the order yeah the order is way off I went 1 2 3 4 5 6 7 I think something like that so it's really going like 1 2 3 4 5 6 7 so it's going it's doing it in columns which makes sense I just didn't realize that I'd be using the column so I went across instead anyway it's yeah it's it's almost been two hours now not quite an hour and a half uh sorry for the rough start for anyone who was there at the very beginning of it I apologize first time I'm doing this next time I promise we be better uh I will try and do these a bit more regularly I don't know how often yet but uh the you know I will be making an effort to do this at least every now and then and maybe at one point actually lock down a schedule for them um so it will be uploaded you might be watching this after the fact if you do want me to actually have a schedule for all this just let me know put a comment down below to let me know there should be you you'd like it if it was I can't promise when it' be it'll be probably after 900 p.m. Eastern whenever I do it CU my kids need to be asleep um so just let me know just you know would a schedule be a good idea and how often you'd like to see these types of things and if these types of things interest you it's not as refined as my other videos I'm making mistakes and it's going to happen I edit out mistakes a lot of the time that I'm actually making and I don't edit all of them out because I think it's important you sort of see the rawness a little bit I like when you're watching a video you seeing mistakes how the problem solving happens but as you saw with this um there's lots of dead time and a bit more problems with that so if you really didn't like it let me know it makes for long videos but if you're willing to stick around you want to see this type of thing um I will interact with you if you manage to make it in and you know you can you can leave comments uh I'm gladly going to to respond to you guys and try and do what you're asking me to do if you want me to cover a certain topic on one of these live ones let me know and I'll look into that I don't know if I'll get into the angular stuff just yet um I'd want to do a little bit of looking into it a bit more before I start making live videos and embarrass myself but it's definitely something that I could check out at one point but again uh maybe I'd just continue with this website for now uh and actually make it you know eventually get it looking really good is one idea maybe uh but if you have anything else you'd like me to do live please let me know and I'll gladly at least consider it have a great night guys uh or day or whenever you are watching this and until the next video take it easy